/** CHANGED v2026-05-15.28 - Renamed CSS variables with consistent color/function prefixes, grouped by purpose, and documented each variable. */
:root {
    /* Base colour palette */
    --color-white: #fff;                         /* Base white used for page elements, table backgrounds, and foreground contrast. */
    --color-black: #000;                         /* Base black used for borders and high-contrast neutral accents. */
    --color-red: #f00;                           /* Strong red used by generic colour classes and debug/commented references. */
    --color-green: #0f0;                         /* Strong green used by generic colour classes. */
    --color-blue: #00f;                          /* Strong blue used by generic colour classes. */
    --color-yellow: #ff0;                        /* Strong yellow used by generic colour classes and highlights. */
    --color-transparent: transparent;            /* Transparent fill used when an element needs no visible background. */

    /* Soft colour palette */
    --color-pastel-red: #ffb3ba;                 /* Soft red used for warning/status backgrounds. */
    --color-pastel-green: #baffc9;               /* Soft green used for success/status backgrounds. */
    --color-game-win-bg: var(--color-pastel-green); /* Winning game-score highlight background. */
    --color-pastel-blue: #bae1ff;                /* Soft blue used for focus/selection highlights. */
    --color-pastel-yellow: #ffdf00;              /* Yellow highlight used for active/current indicators. */

    /* Page and layout colours */
    --color-primary: #2f8f4f;                    /* Primary brand/header background colour. */
    --color-accent: #afa;                        /* Accent colour used for section markers and legacy button background references. */
    --color-page-bg: #f4f4f4;                    /* Main page background colour. */
    --color-table-header-bg: #d5d5d5;            /* Default table-header background colour. */
    --color-table-border: #bfbfbf;               /* Default border colour for tables and form controls. */
    --color-border: var(--color-table-border);   /* General border alias for components that should follow table borders. */

    /* Button and form colours */
    --color-button-bg: #339955;                  /* Primary button background colour. */
    --color-button-hover-bg: #297a44;            /* Button hover background colour. */
    --color-button-text: var(--color-white);     /* Button foreground/text colour. */
    --color-button-border: var(--color-table-border); /* Button border colour for bordered button variants. */

    --color-status-available-bg: #cfc;           /* Available status background colour. */
    --color-status-unavailable-bg: #fcc;         /* Unavailable status background colour. */
    --color-status-withdrawn-bg: #fafa33;        /* Withdrawn status background colour. */
    --color-status-substitute-bg: #cfc;          /* Substitute indicator background colour. */
    --color-status-forfeit-bg: #6dc5ee;          /* Forfeit status background colour. */
    --color-status-void-bg: #f96;                /* Void/cancelled status background colour. */
    --color-status-single-bg: #ccf;              /* Single-player/team marker background colour. */
    --color-status-partner-bg: #ffffcc;          /* Partner marker background colour. */
    --color-status-pending-change-bg: #ffe6a6;   /* Pending score-change request background colour. */

    /* Message and alert colours */
    --color-message-warning: #f60;               /* Warning message colour. */
    --color-message-info: #06c;                  /* Informational message colour. */
    --color-message-error: #f30;                 /* Error message colour. */
    --color-message-failure: #f00;               /* Failure message colour. */


    /* Generated colour literals migrated from component rules; use var() outside :root. */
    --css-color-111: #111;
    --css-color-111418: #111418;
    --css-color-175cd3: #175cd3;
    --css-color-1849a9: #1849a9;
    --css-color-195c2e: #195c2e;
    --css-color-1f6feb: #1f6feb;
    --css-color-222: #222;
    --css-color-2271b1: #2271b1;
    --css-color-2563eb: #2563eb;
    --css-color-2f5d9f: #2f5d9f;
    --css-color-2f6f9f: #2f6f9f;
    --css-color-333: #333;
    --css-color-555: #555;
    --css-color-57606a: #57606a;
    --css-color-586069: #586069;
    --css-color-5f4b00: #5f4b00;
    --css-color-7a0016: #7a0016;
    --css-color-7a271a: #7a271a;
    --css-color-7a3b00: #7a3b00;
    --css-color-7a3d00: #7a3d00;
    --css-color-7f8a96: #7f8a96;
    --css-color-8a1f11: #8a1f11;
    --css-color-999: #999;
    --css-color-9a6700: #9a6700;
    --css-color-9a6a00: #9a6a00;
    --css-color-b00020: #b00020;
    --css-color-b26b00: #b26b00;
    --css-color-b42318: #b42318;
    --css-color-b54708: #b54708;
    --css-color-b76e00: #b76e00;
    --css-color-b7791f: #b7791f;
    --css-color-c77: #c77;
    --css-color-ccc: #ccc;
    --css-color-d0d5dd: #d0d5dd;
    --css-color-d0d7de: #d0d7de;
    --css-color-d6d6d6: #d6d6d6;
    --css-color-d7d7d7: #d7d7d7;
    --css-color-d7dce2: #d7dce2;
    --css-color-d8d8d8: #d8d8d8;
    --css-color-d99a00: #d99a00;
    --css-color-d9d9d9: #d9d9d9;
    --css-color-ddd: #ddd;
    --css-color-ead678: #ead678;
    --css-color-eef1f4: #eef1f4;
    --css-color-eef7ff: #eef7ff;
    --css-color-eef8ee: #eef8ee;
    --css-color-eff8ff: #eff8ff;
    --css-color-f0f0f0: #f0f0f0;
    --css-color-fde8e8: #fde8e8;
    --css-color-fdecea: #fdecea;
    --css-color-ffb4a8: #ffb4a8;
    --css-color-ffecec: #ffecec;
    --css-color-fff0f0: #fff0f0;
    --css-color-fff1f0: #fff1f0;
    --css-color-fff7d6: #fff7d6;
    --css-color-fff8db: #fff8db;
    --css-color-fff8e1: #fff8e1;
    --css-color-fff8e5: #fff8e5;
    --css-color-fff8e6: #fff8e6;
    --css-color-rgba-0-0-0-0-12: rgba(0, 0, 0, 0.12);
    --css-color-rgba-0-0-0-03: rgba(0,0,0,.03);
    --css-color-rgba-0-0-0-16: rgba(0,0,0,.16);
    --css-color-rgba-0-0-0-0-06: rgba(0,0,0,0.06);
    --css-color-rgba-0-0-0-0-07: rgba(0,0,0,0.07);
    --css-color-rgba-0-0-0-0-08: rgba(0,0,0,0.08);
    --css-color-rgba-127-138-150-0-16: rgba(127, 138, 150, 0.16);
    --css-color-rgba-176-0-32-035: rgba(176,0,32,.035);
    --css-color-rgba-176-0-32-08: rgba(176,0,32,.08);
    --css-color-rgba-22-27-34-0-72: rgba(22,27,34,0.72);
    --css-color-rgba-255-255-255-0-4: rgba(255,255,255,0.4);
    --css-color-rgba-255-255-255-0-55: rgba(255,255,255,0.55);
    --css-color-rgba-255-255-255-0-72: rgba(255,255,255,0.72);
    --css-color-rgba-47-93-159-0-08: rgba(47, 93, 159, 0.08);
    --css-color-rgba-47-93-159-0-10: rgba(47, 93, 159, 0.10);
    --css-color-rgba-74-74-74-0-45: rgba(74, 74, 74, 0.45);
    --css-color-rgba-9-105-218-0-12: rgba(9, 105, 218, 0.12);
    --css-color-rgba-95-99-104-0-65: rgba(95, 99, 104, 0.65);
}


/** CHANGED v2026-05-20.404
 *  Test deployments intentionally use the same production colour theme.
 *  The body.deployment-test class remains available for non-colour behavior,
 *  but it must not override brand/status colours. The visible environment cue
 *  is now the header title suffix added by header.php.
 */


/** CHANGED v2026-05-15.29 - Added functional purpose comments to class-based CSS rules while preserving cascade order. */

/* Overall */
body {
    font-family: 'Raleway', sans-serif;
    background-color: var(--color-page-bg);
    margin: 0;
    max-width: 800px;
}

header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 1rem;
    border-radius: 8px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1px;
    padding: 1px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    border-left: 5px solid var(--color-accent);
    padding-left: 10px;
}

table {
    border-collapse: collapse;
    background: var(--color-white);
    overflow: hidden;
    table-layout: fixed;
}

/* sortable tables */
.sortable thead {
    cursor: pointer;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

a {
    text-decoration: none;
}

table td, table th {
    border: 1px solid var(--color-table-border);
    padding: 4px;
}

table td {
    white-space: nowrap;
}

/** CHANGED v2026-05-15.04
 *  Allows table header labels to wrap before widening a column. Body cells keep
 *  their previous no-wrap behavior so short data values do not force oversized
 *  columns just because the corresponding header is longer than the cell data.
 */
table th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.15;
}

th {
    background: var(--color-table-header-bg);
}

tr {
    display: table-row !important;
}

textarea {
    width: 100%;
    min-height: 50px;
    resize: vertical;
}

button {
    background: var(--color-accent);
    padding: 5px 15px;
    border-radius: 8px;
    width: 100%;
    background-color: var(--color-button-bg);
    color: var(--color-white);
    border: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: var(--color-button-hover-bg);
}

input {
    border: 1px solid var(--color-table-border);
}

input:focus {
    outline: none;
    border-color: var(--color-button-bg);
}

.largetext {
    padding: 12px;
    font-size: 1.1rem; /* Prevents iOS auto-zoom on focus */
}

input[type="number"] {
    text-align: center;
    font: inherit;
}

summary {
    cursor: pointer;
    font-weight: bold;
}

select {
    font-size: 1.1rem;
    text-align-last: center;
    text-align: center;
}

/* specific styling for the dropdown items */
option {
    font-size: 1.1rem;
    text-align-last: center;
    text-align: center;
}

.divborder {
    border: 1px solid var(--color-black);
    padding: 5px;
}
/* Overall */

.mainbody {
    padding: 0 5px;
    /* x_border: 1px solid var(--color-red); */
}

.floatr {
    float: right;
}

.align-left {
    text-align: left;
}

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

.align-middle {
    text-align: center;
    vertical-align: middle;
}

.align-photo {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    height: fit-content;
}

.profile-photo {
    background: var(--color-page-bg);
    border: none;
}

/** ADDED v2026-05-14.96
 *  Phase 3 player-profile photo polish.
 *
 *  Purpose:
 *  The profile form now shows the current photo/avatar, previews selected files,
 *  and can remove a photo while preserving the existing circular photo style.
 */
.profile-initials-avatar {
    align-items: center;
    background: var(--color-button-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--color-button-text);
    display: inline-flex;
    font-weight: bold;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
}

.profile-initials-avatar-profile {
    font-size: 3rem;
    height: 160px;
    width: 160px;
}

.profile-initials-avatar-small {
    font-size: 0.75rem;
    height: 32px;
    width: 32px;
}

.profile-photo-editor {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0 1rem 0;
}

.profile-photo-preview-frame {
    height: 160px;
    position: relative;
    width: 160px;
}

.profile-photo-preview-frame > * {
    left: 0;
    position: absolute;
    top: 0;
}

.profile-photo-preview {
    display: block;
    object-fit: cover;
}


.profile-photo-empty-text {
    align-items: center;
    border: 1px dashed var(--css-color-ccc);
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    height: 160px;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    width: 160px;
}

.profile-photo-remove-detail {
    margin-top: 0.5rem;
    max-width: 34rem;
}

.profile-photo-controls {
    flex: 1 1 18rem;
    min-width: 15rem;
}

.profile-photo-remove {
    display: block;
    margin-top: 0.5rem;
}

/* hide by default */
.mobileonly {
    display: none;
}

/** CHANGED v2026-05-17.090: Desktop-only labels support nav text alternatives for app links. */
.desktoponly {
    display: inline;
}

.image-oval {
    border-radius: 50%;
}

.indented {
    margin-left: 20px;
}

/** ADDED v2026-05-18.104: About page structured indentation; replaces inline padding styles. */
.about-indent {
    padding-left: 20px;
}

.partner {
    background: var(--color-status-partner-bg);
}

/* media query for mobile devices (screen width 768px or less) */
@media screen {
/* Purpose: Controls visibility of mobile-only content. */
    .mobileonly {
        display: inline;
    }
}

/* available team */
.available {
    background-color: var(--color-status-available-bg);
}

/* unavailable team */
.unavailable {
    background-color: var(--color-status-unavailable-bg);
}

/* disabled availability */
.availability-disabled {
    pointer-events: none;
    filter: grayscale(1);
}

/* withdrawn team */
.withdrawn {
    background-color: var(--color-status-withdrawn-bg);
}

/* forfeited game */
.forfeit-score {
    background-color: var(--color-status-forfeit-bg) !important;
    border-color: var(--color-pastel-blue) !important;
    -webkit-print-color-adjust: exact;
}

/* Purpose: Applies visual status styling for availability, match, team, or player states. */
input.forfeit-score {
    background-color: var(--color-status-forfeit-bg) !important;
}

/* Purpose: Applies visual status styling for availability, match, team, or player states. */
span.forfeit-score {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-status-forfeit-bg) !important;
}
/* forfeited game */


/** CHANGED v2026-05-15.549
 *  Highlights scores that have a pending void/forfeit request so players know
 *  the displayed value is provisional until approval is completed.
 */
.pending-game-change-score {
    background-color: #fef3c7 !important; /** CHANGED v2026-06-08.8033: unique pending amber avoids forfeit/void/single-player colour confusion. */
    /* CHANGED v2026-06-08.8049: pending score state is shown by the orange cell, without the former corner marker. */
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-print-color-adjust: exact;
}

/** CHANGED v2026-05-17.705
 *  Shows pending void/forfeit workflow state as a compact corner marker on the
 *  score cell so the table does not widen with long status text.
 */
.pending-game-change-cell {
    position: relative;
}

.pending-game-change-cell::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background-color: var(--color-message-warning);
    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-message-warning);
    pointer-events: none;
}

/** CHANGED v2026-05-17.920
 *  Use the same visual colour language for pending requests as final
 *  void/forfeit states, while retaining the compact corner-marker cue.
 */
.pending-game-change-cell.pending-game-change-forfeit::after {
    background-color: var(--color-status-forfeit-bg);
    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-status-forfeit-bg);
}

.pending-game-change-cell.pending-game-change-void::after {
    background-color: var(--color-status-void-bg);
    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-status-void-bg);
}

/* void game */
.void {
    background-color: var(--color-status-void-bg);
    padding: 5px;   
    border-radius: 5px;
}

/* single player */
.single {
    background-color: var(--color-status-single-bg);
}

/* hidden element */
.hidden {
    visibility: hidden;
}

/* explain stats */
.explainstats {
    cursor: pointer;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 50%;
    padding: 0 5px;
}

/* Navigation */
/* Purpose: Styles navigation links and active/hover navigation states. */
nav .nav-link {
    color: var(--color-white);
    text-decoration: none;
    margin: 0 5px;
    font-weight: bold;
    transition: color 0.3s;
}

/* Purpose: Styles navigation links and active/hover navigation states. */
nav .nav-link:hover {
    color: var(--color-accent);
}

/** CHANGED v2026-05-15.469
 *  Purpose: Highlights the Approvals nav link when pending workflow actions
 *  require the logged-in player's attention.
 */
nav .nav-link-attention {
    color: #000000 !important; /** CHANGED v2026-06-08.8046: make Approvals attention text black on light-orange pill. */
    background: #fef3c7; /** CHANGED v2026-06-08.8045: match normal pending-game score light-orange background. */
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 2px 7px;
}

/** CHANGED v2026-05-15.470
 *  Purpose: Displays a compact pending-approval count inside the Approvals nav
 *  link without making the main navigation taller.
 */
nav .nav-approval-count {
    display: inline-block;
    min-width: 1.2em;
    margin-left: 3px;
    padding: 0 4px;
    color: #000000 !important; /** CHANGED v2026-06-08.8046: keep count readable inside the light-orange attention pill. */
    background: var(--color-white);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    font-size: 0.8em;
    line-height: 1.2;
    text-align: center;
}


/** CHANGED v2026-05-16.993
 *  Purpose: Keeps the logged-in player/logout controls on a second navigation
 *  row aligned to the right, below the primary links/icons/Admin link row.
 */
nav .nav-user-row {
    display: flex;
    flex-basis: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/** CHANGED v2026-05-16.994 */
nav .nav-logout-link {
    opacity: 0.9;
}
/* Navigation */

/* Login */
/* Hide the default browser eye icon in Edge/Chrome/Safari */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* Container to keep the icon inside the box */
.login-field {
    position: relative;
    width: 100%;
}

.login-largetext {
    padding: 12px;
    font-size: 1.1rem; /* Prevents iOS auto-zoom on focus */
    width: 100%;
    padding-right: 40px; /* Make room for the eye icon */
    box-sizing: border-box;
}

/* custom icon positioning */
.login-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    z-index: 2;
    user-select: none;
}

/** CHANGED v2026-05-16.620
 *  Styles the login-screen Face ID / saved-password helper without changing the
 *  existing login action layout.
 */
.login-biometric-button {
    margin-left: 0.35rem;
}

.login-biometric-help {
    font-size: 0.9rem;
    opacity: 0.85;
}

/** CHANGED v2026-05-16.621
 *  Face ID / device saved-password helper is intended for mobile/touch login.
 *  Desktop browsers keep normal password and verification-code login options.
 */
.mobile-only-auth-option {
    display: none;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .mobile-only-auth-option {
        display: inline-block;
    }

    .login-biometric-help.mobile-only-auth-option {
        display: block;
    }
}

/* Login */

/* Matches */
/* ensure the container handles the overflow properly for the catch-all redirect fix */
.matches-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* set width of table */
.matches-table {
    width: 100%;
    border-collapse: collapse;
    /* This ensures the table expands as wide as the content needs */
    min-width: max-content; 
    table-layout: auto;
}

/* specific fix for the dynamic borders */
.matches-table td {
    /* Use the variable to keep consistency */
    border: 1px solid var(--color-table-border);
}

/* set width of round column */
.matches-table-round {
    width: 5%;
}

/* set width of team column */
.matches-table-team {
    /* Remove width: 100% - it confuses iOS Safari */
    width: auto; 
    white-space: nowrap;
}


/** CHANGED v2026-05-15.24
 *  Match matches.php team-name cell padding to the Teams/Players stats tables
 *  so match rows use the same compact desktop spacing.
 */
.matches-table-team-cell {
    padding: 2px 3px;
}

/** CHANGED v2026-05-15.30
 *  Disabled obsolete match score sizing rules. The active score-cell and
 *  score-control sizing is centralized in the Phase 4 match score block below,
 *  which appears later in the cascade and already controls desktop/mobile width.
 *
/* set width of game columns */
.matches-table-game {
    /* Keep score cells compact while leaving enough room for two-digit scores. */
    width: 2.6rem;
    min-width: 2.6rem;
}

/* set width of input tag */
.input-score {
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
.matches-table-game .input-score {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 1.75rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
input.input-score {
    min-height: 0;
    height: 1.75rem;
}
 */

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
input.input-score::-webkit-outer-spin-button,
input.input-score::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
input.input-score[type='number'] {
    -moz-appearance: textfield;
}

/* *CHANGED* - Fix iOS bug that erases border */
.ios-hide {
    /* Keep the TD visible so the table grid doesn't collapse */
    visibility: visible !important; 
    border: 1px solid var(--color-table-border) !important;
    /* Box shadow creates a 'virtual' border inside the cell that iOS won't hide */
    box-shadow: inset 0 0 0 0.5px var(--color-table-border);
    background-color: var(--color-white);
}

/* Hide the input inside, but keep the parent TD visible */
.ios-hide > * {
    visibility: hidden !important;
    pointer-events: none;
}

/* highlight refinement */
.win,
.score-win {
    background-color: var(--color-game-win-bg) !important;
    -webkit-print-color-adjust: exact; /* Helps iOS maintain color during rendering */
}
/* Matches */

/* generic message types */
.success {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-button-bg);
    font-weight: bold;
}

.warning {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-message-warning);
    font-weight: bold;
}

.info {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-message-info);
    font-weight: bold;
}

.error {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-message-error);
    font-weight: bold;
}

.failure {
    display: block;
    margin: 0.35rem 0;
    color: var(--color-message-failure);
    font-weight: bold;
}

.subindicator {
    background-color: var(--color-status-substitute-bg);
}
/* generic message types */

/* Calendar */

/* Calendar team legend uses DisplayTeamLink-style team rows with per-player colour swatches. */
.calendar-team-legend {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: max-content;
    margin: 0.25rem 0 0.6rem;
    padding: 2px 4px;
}

.calendar-team-legend-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    line-height: 1.15;
    padding-block: 0;
}

.calendar-team-legend-line .team-profile-icon-link {
    flex: 0 0 auto;
    margin-right: 0.15rem;
}

.calendar-team-legend-line .team-pair-separator {
    white-space: nowrap;
}

.calendar-team-legend-player {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-team-legend-swatch {
    display: inline-block;
    width: 1.15rem;
    min-width: 1.15rem;
    height: 0.85rem;
    padding-left: 0;
    border: 1px solid var(--color-table-border);
    border-radius: 0.2rem;
    box-shadow: inset 0 0 0 1px var(--css-color-rgba-255-255-255-0-4);
}

@media (max-width: 720px) {
    .calendar-team-legend {
        max-width: 100%;
    }

    .calendar-team-legend-line {
        align-items: flex-start;
    }
}

.table-calendar th {
    text-align: center;
}

.table-calendar td {
    padding: 0px; /* remove padding */
}

/* padding for date <td> cell */
.datepad {
    padding: 4px !important;
}

.calendar-clickable-cell {
    cursor: pointer;
}

.calendar-clickable-cell:hover {
    outline: 2px solid var(--color-table-border);
    outline-offset: -2px;
}

/* highlight time slots where two or more complete teams are available at the same time */
.calendar-overlap {
    position: relative;
    outline: none !important;
    isolation: isolate;
    outline-offset: -4px;
    box-shadow:
        inset 0 0 0 1px var(--color-white),
        inset 0 0 0 2px var(--calendar-overlap-outline, var(--calendar-overlap-outline)),
        0 0 4px var(--css-color-rgba-74-74-74-0-45);
    background: var(--color-pastel-yellow);
}

/* add before styling */
.calendar-overlap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    box-sizing: border-box;
    border: 2px solid var(--calendar-overlap-outline, var(--calendar-overlap-outline));
    box-shadow:
        inset 0 0 0 1px var(--color-white),
        0 0 4px var(--css-color-rgba-74-74-74-0-45);
    pointer-events: none;
}


/* ADDED v2026-06-03.7271: Calendar scheduler shortcut badge for exactly resolved two-team overlap cells. */
.calendar-scheduler-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 8;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--color-table-border);
    background: var(--color-white);
    color: var(--color-text, #222);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 7px var(--css-color-rgba-74-74-74-0-45);
    cursor: pointer;
    touch-action: manipulation;
}

.calendar-scheduler-badge:hover,
.calendar-scheduler-badge:focus-visible {
    outline: 2px solid var(--calendar-overlap-outline, var(--color-table-border));
    outline-offset: 1px;
}

/* overlap cells keep the neutral outline only; no 2+ corner badge */
.calendar-overlap::after {
    content: none !important;
    display: none !important;
}

/* keep player colour bars close to their normal colours in overlap slots */
/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.calendar-overlap div:not(.c0) {
    filter: saturate(1.18) brightness(0.98) contrast(1.04);
    box-shadow: inset 0 0 0 1px var(--color-white);
    font-weight: 600;
}

/* calendar touch handling now allows vertical browser scrolling */
.table-calendar {
    user-select: none;
    touch-action: pan-y;
}

/* left date column explicitly allows vertical touch scrolling */
/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.table-calendar .datepad {
    touch-action: pan-y;
}

/* calendar hour cells also permit vertical pan gestures */
.calendar-clickable-cell {
    touch-action: pan-y;
}

/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.c0, .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8 {
    padding-left: 1.5rem; font-size: 50%;
}

.c0 { background-color: var(--color-white); }
.c1 { background-color: var(--color-red); }
.c2 { background-color: var(--color-pastel-red); }
.c3 { background-color: var(--color-green); }
.c4 { background-color: var(--color-pastel-green); }
.c5 { background-color: var(--color-blue); }
.c6 { background-color: var(--color-pastel-blue); }
.c7 { background-color: var(--color-yellow); }
.c8 { background-color: var(--color-pastel-yellow); }

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-status-unavailable-bg);
  transition: 0.2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  /** CHANGED v2026-05-15.26 - Removed duplicate semicolon while preserving the slider knob color. */
  background-color: var(--color-white);
  transition: 0.2s;
}

/* available */
/* Purpose: Styles the custom toggle switch and slider control. */
input:checked + .slider {
  background-color: var(--color-status-available-bg);
}

/* Purpose: Styles the custom toggle switch and slider control. */
input:checked + .slider:before {
  transform: translateX(36px);
}

/* rounded sliders */
/* Purpose: Styles the custom toggle switch and slider control. */
.slider.round {
  border-radius: 20px;
}

/* Purpose: Styles the custom toggle switch and slider control. */
.slider.round:before {
  border-radius: 50%;
}
/* Players */

/* Admin */
.displaysql {
  /* Styling to make div resizable */
  width: 100%;
  height: 400px;
  border: 1px solid var(--color-black);
  resize: both;
  overflow: auto;
}

.admin-subnav {
  /** CHANGED v2026-05-14.49
   *  Restore the admin submenu to two visible rows.
   *  The row wrappers are now stacked vertically instead of being treated as
   *  side-by-side flex items by the parent nav.
   */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 1rem 0;
  padding: 0.25rem 0;
  overflow-x: hidden;
  white-space: normal;
}

.admin-subnav-link {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0 0.4rem 0;
  color: var(--color-primary);
  font-weight: bold;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-subnav-link::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  /** CHANGED v2026-05-15.22 - Use root color variable instead of hard-coded var(--color-transparent) value. */
  background: var(--color-transparent);
  content: '';
}

/* Purpose: Styles navigation links and active/hover navigation states. */
.admin-subnav-link:hover::after,
.admin-subnav-link-active::after {
  background: var(--color-accent);
}

.admin-subnav-link-active {
  color: var(--color-primary);
}

.admin-action-note {
  display: inline-block;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}


/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-table .dashboard-status-ok {
  background-color: var(--color-pastel-green);
}

/* Purpose: Formats standard user-facing message states. */
.admin-dashboard-table .dashboard-status-warning {
  background-color: var(--color-pastel-yellow);
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-table .dashboard-status-blocked {
  background-color: var(--color-pastel-red);
}
/* Admin */

/* display content as the final styling command*/
html {
    visibility: visible;
    opacity: 1;
}
/* Added final mobile touch-action overrides for the calendar after all earlier rules */
/* The left date column and Date header explicitly allow native vertical panning */
/* Calendar hour cells allow vertical panning; JavaScript only intercepts clear horizontal drag gestures */
/* On iOS/Brave, earlier pointer handling stopped cell updates during vertical movement but still did not reliably restore page scrolling */
/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.table-calendar,
.table-calendar tbody,
.table-calendar tr {
    touch-action: pan-y !important;
}

/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.table-calendar td.datepad,
.table-calendar th:first-child {
    touch-action: pan-y !important;
    -webkit-user-select: none;
    user-select: none;
}

/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
.table-calendar .calendar-clickable-cell {
    touch-action: pan-y !important;
}

/* Admin Dashboard */
.admin-dashboard-section {
  margin-bottom: 1.25rem;
}

.admin-dashboard-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-table th,
.admin-dashboard-table td {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-table-border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-table th:first-child,
.admin-dashboard-table td:first-child {
  width: 5.5rem;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Purpose: Formats standard user-facing message states. */
.dashboard-status-ok,
.dashboard-status-warning,
.dashboard-status-blocked {
  font-weight: normal;
}

/* Purpose: Formats standard user-facing message states. */
.dashboard-status-ok td:first-child,
.dashboard-status-warning td:first-child,
.dashboard-status-blocked td:first-child {
  font-weight: bold;
}
/* Admin Dashboard */

/* ADDED v2026-05-13.31: Admin pages should wrap wide content inside the page container instead of forcing horizontal scrolling. */
/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container,
.admin-settings-container,
.admin-league-settings-container,
.admin-leagues-container,
.admin-global-players-container,
.admin-league-roster-container,
.admin-teams-container,
.admin-dupr-container,
.admin-rounds-container,
.diagnostics-container {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container *,
.admin-settings-container *,
.admin-league-settings-container *,
.admin-leagues-container *,
.admin-global-players-container *,
.admin-league-roster-container *,
.admin-teams-container *,
.admin-dupr-container *,
.admin-rounds-container *,
.diagnostics-container * {
  box-sizing: border-box;
}

/* Purpose: Provides shared layout, alignment, spacing, or container utility styling. */
.admin-dashboard-container .divborder,
.admin-settings-container .divborder,
.admin-league-settings-container .divborder,
.admin-leagues-container .divborder,
.admin-global-players-container .divborder,
.admin-league-roster-container .divborder,
.admin-teams-container .divborder,
.admin-dupr-container .divborder,
.admin-rounds-container .divborder,
.diagnostics-container .divborder {
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

/* Purpose: Provides shared layout, alignment, spacing, or container utility styling. */
.admin-dashboard-container .table-container,
.admin-settings-container .table-container,
.admin-league-settings-container .table-container,
.admin-leagues-container .table-container,
.admin-global-players-container .table-container,
.admin-league-roster-container .table-container,
.admin-teams-container .table-container,
.admin-dupr-container .table-container,
.admin-rounds-container .table-container,
.diagnostics-container .table-container {
  max-width: 100%;
  overflow-x: hidden;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container table,
.admin-settings-container table,
.admin-league-settings-container table,
.admin-leagues-container table,
.admin-global-players-container table,
.admin-league-roster-container table,
.admin-teams-container table,
.admin-dupr-container table,
.admin-rounds-container table,
.diagnostics-container table {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container th,
.admin-dashboard-container td,
.admin-settings-container th,
.admin-settings-container td,
.admin-league-settings-container th,
.admin-league-settings-container td,
.admin-leagues-container th,
.admin-leagues-container td,
.admin-global-players-container th,
.admin-global-players-container td,
.admin-league-roster-container th,
.admin-league-roster-container td,
.admin-teams-container th,
.admin-teams-container td,
.admin-dupr-container th,
.admin-dupr-container td,
.admin-rounds-container th,
.admin-rounds-container td,
.diagnostics-container th,
.diagnostics-container td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container input,
.admin-dashboard-container select,
.admin-dashboard-container textarea,
.admin-settings-container input,
.admin-settings-container select,
.admin-settings-container textarea,
.admin-league-settings-container input,
.admin-league-settings-container select,
.admin-league-settings-container textarea,
.admin-leagues-container input,
.admin-leagues-container select,
.admin-leagues-container textarea,
.admin-global-players-container input,
.admin-global-players-container select,
.admin-global-players-container textarea,
.admin-league-roster-container input,
.admin-league-roster-container select,
.admin-league-roster-container textarea,
.admin-teams-container input,
.admin-teams-container select,
.admin-teams-container textarea,
.admin-dupr-container input,
.admin-dupr-container select,
.admin-dupr-container textarea,
.admin-rounds-container input,
.admin-rounds-container select,
.admin-rounds-container textarea,
.diagnostics-container input,
.diagnostics-container select,
.diagnostics-container textarea {
  max-width: 100%;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-dashboard-container button,
.admin-settings-container button,
.admin-league-settings-container button,
.admin-leagues-container button,
.admin-global-players-container button,
.admin-league-roster-container button,
.admin-teams-container button,
.admin-dupr-container button,
.admin-rounds-container button,
.diagnostics-container button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Purpose: Formats SQL/debug output so it remains readable inside the page. */
.admin-dashboard-container pre,
.admin-settings-container pre,
.admin-league-settings-container pre,
.admin-leagues-container pre,
.admin-global-players-container pre,
.admin-league-roster-container pre,
.admin-teams-container pre,
.admin-dupr-container pre,
.admin-rounds-container pre,
.diagnostics-container pre,
.admin-dashboard-container textarea,
.admin-settings-container textarea,
.admin-league-settings-container textarea,
.admin-leagues-container textarea,
.admin-global-players-container textarea,
.admin-league-roster-container textarea,
.admin-teams-container textarea,
.admin-dupr-container textarea,
.admin-rounds-container textarea,
.diagnostics-container textarea,
.displaysql {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ADDED v2026-05-14.04: Keep admin League setup fields wide while preserving container wrapping. */
/* Purpose: Hides elements that should not display in the current UI state. */
.admin-leagues-container input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-leagues-container select,
.admin-leagues-container textarea {
  width: min(100%, 36rem);
}

.admin-generated-uuid {
  display: inline-block;
  max-width: 100%;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--color-table-border);
  overflow-wrap: anywhere;
}

.admin-inline-note {
  display: block;
  margin-top: 0.25rem;
  overflow-wrap: anywhere;
}

.admin-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: end;
  margin: 0.35rem 0;
}

.admin-inline-fields label {
  display: inline-block;
  margin: 0;
}

button:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}


/* ADDED v2026-05-14.05: Diagnostic section headers use the same table-header colour as descriptor cells. */
/* Purpose: Styles diagnostics and data-validation output. */
.diagnostics-table .diagnostic-section-header {
  background: var(--color-table-header-bg);
}


/** ADDED v2026-05-14.06
 *  Highlights the selected league template row in Admin - Leagues.
 */
.selected-row {
    font-weight: bold;
}

/** ADDED v2026-05-14.19
 *  What changed:
 *  - Added light spacing for the per-game DUPR submission request checkbox on
 *    the Matches page.
 *
 *  Why:
 *  - The option should read as secondary metadata under the score fields rather
 *    than another score input.
 */
.dupr-submit-option {
    display: inline-block;
    font-size: 0.85em;
    margin-top: 0.25rem;
    white-space: nowrap;
}

/** ADDED v2026-05-14.25
 *  What changed:
 *  - Added reusable print/export controls for generated scramble schedules.
 *
 *  Why:
 *  - Scramble managers need either a browser printout or a CSV export without
 *    changing the saved schedule data.
 */
.button-link {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-button-border, var(--color-table-border));
    border-radius: 0.25rem;
    text-decoration: none;
}

/** ADDED v2026-05-14.25
 *  What changed:
 *  - Hide action controls when printing schedules.
 *
 *  Why:
 *  - Printed scramble schedules should show the schedule, not navigation or
 *    export controls.
 */
@media print {
/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .no-print,
    nav,
    header,
    footer,
    .admin-nav,
    .admin-sub-nav {
        display: none !important;
    }
}


/** ADDED v2026-05-14.28
 *  Makes admin team note fields easier to edit without changing table layout.
 *
 *  Purpose:
 *  Team notes commonly contain both player names and short admin context, so the
 *  default browser text width is too narrow on the Current Season Teams page.
 */
.wide-note-input {
    min-width: 22rem;
    max-width: 100%;
}

/** ADDED v2026-05-14.31
 *  Styles the dedicated six-box SMS verification code form.
 *
 *  Purpose:
 *  Verification codes are entered in one digit per box and auto-submit
 *  when complete. The boxes need to be visibly distinct from the normal password
 *  field so users understand they are in the verification code step.
 */
.verification-code-box-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.verification-code-digit-box {
    font-size: 2rem;
    height: 3rem;
    text-align: center;
    width: 2.5rem;
}

/** ADDED v2026-05-14.32
 *  Styles stacked admin edit cards used where edit forms mirror create forms.
 *
 *  Purpose:
 *  Organization editing now uses one label/input row per field, matching Create
 *  Org. A light card separator keeps multiple edit forms readable without
 *  changing the existing table/input styling.
 */
.admin-edit-card {
    /** CHANGED v2026-05-15.22 - Removed hard-coded fallback color; table border color is defined in :root. */
    border-top: 1px solid var(--color-table-border);
    margin-top: 1rem;
    padding-top: 1rem;
}


/** ADDED v2026-05-14.33
 *  Admin form refinements for Phase 2 UI consistency.
 *
 *  Purpose:
 *  - Org edit fields need enough width for real organization/contact values.
 *  - Inline search actions should keep the clear action next to the search box.
 *  - People / Access role dropdowns need enough room to show full role names.
 *  - Scramble helper text should wrap inside its containing div.
 */
.org-edit-input {
    width: min(100%, 64rem);
}

.admin-org-form th {
    width: 12rem;
}

.admin-org-form td {
    min-width: min(70vw, 66rem);
}

.admin-search-inline {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: 100%;
}

.admin-search-inline input[type="text"] {
    width: min(100%, 24rem);
}

.icon-cancel-link {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    padding: 0 0.35rem;
    text-decoration: none;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-people-edit-table th:nth-child(5),
.admin-people-edit-table td:nth-child(5) {
    min-width: 12rem;
}

.admin-access-select {
    min-width: 11rem;
}

.admin-help-text {
    display: block;
    max-width: 34rem;
    overflow-wrap: anywhere;
}


/** CHANGED v2026-05-14.34
 *  What changed:
 *  - Widened Org create/edit inputs further.
 *  - Added People / Access dropdown and two-column edit-form sizing.
 *
 *  Why:
 *  - Organization values and admin-role labels were still cramped in realistic
 *    production data. These widths keep forms readable without changing their
 *    existing table-based structure.
 */
.people-access-player-select {
    width: min(100%, 32rem);
}

.admin-two-column-form th {
    width: 12rem;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-two-column-form input[type="text"],
.admin-two-column-form input[type="tel"],
.admin-two-column-form input[type="number"],
.admin-two-column-form select {
    width: min(100%, 28rem);
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.admin-two-column-form .admin-access-select {
    width: min(100%, 28rem);
}


/** ADDED v2026-05-14.43 2026-05-14 07:45 PDT
 *  What changed:
 *  - Added row styling for the two-line admin navigation layout.
 *
 *  Why:
 *  - Admin navigation is now intentionally grouped into two rows, so each row
 *    needs consistent wrapping and spacing without affecting the public nav.
 */
.admin-subnav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    width: 100%;
    /** CHANGED v2026-05-14.49
     *  Keep each configured admin navigation group on its own line.
     */
    margin-bottom: 0;
}

/** ADDED v2026-05-14.33
 *  Styles grouped login submit actions without relying on manual <br> spacing.
 *
 *  Purpose:
 *  Login now has multiple explicit actions. A compact flex layout keeps the
 *  buttons readable on desktop and lets them wrap on narrower screens.
 */
.login-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1rem 0;
}

/** ADDED v2026-05-14.55
 *  Make data-validation subsection headers span the full diagnostics div width.
 */
.data-validation-header {
    display: block;
    width: 100%;
    margin: 0.75rem 0 0.25rem 0;
    padding: 0.4rem 0.5rem;
    background: var(--color-table-header-bg);
    border-left: 5px solid var(--color-accent);
    box-sizing: border-box;
}


/** CHANGED v2026-05-14.57
 *  Keep diagnostics data-validation tables full width while allowing the browser
 *  to size columns from header text. Empty validation result sets otherwise make
 *  fixed-layout tables distribute narrow columns and wrap short headers even when
 *  the surrounding div has plenty of room.
 */
.diagnostics-container .data-validation-table-container {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* Purpose: Styles diagnostics and data-validation output. */
.diagnostics-container table.data-validation-table {
    display: table;
    width: 100% !important;
    max-width: none;
    min-width: 100%;
    table-layout: auto;
}

/* Purpose: Styles diagnostics and data-validation output. */
.diagnostics-container table.data-validation-table th {
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* Purpose: Styles diagnostics and data-validation output. */
.diagnostics-container table.data-validation-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Purpose: Styles diagnostics and data-validation output. */
.diagnostics-container table.data-validation-table td.data-validation-empty {
    white-space: normal;
    overflow-wrap: normal;
}

#profile-photo-warning {
    margin-top: 0.35rem;
    min-height: 1.2rem;
}


/** ADDED v2026-05-14.67
 *  Phase 3 Step 6 Stats polish.
 *
 *  Purpose:
 *  Adds current-round progress cards and keeps the remaining-match list compact
 *  until the user opens it.
 */
.stats-progress-panel {
    border: 1px solid var(--color-table-border);
    border-radius: 0.5rem;
    box-sizing: border-box;
    margin: 1rem 0 1.25rem 0;
    padding: 0.9rem;
}

.stats-progress-panel h3 {
    margin-top: 0;
}

.stats-progress-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 0.9rem;
}

.stats-progress-card {
    border: 1px solid var(--color-table-border);
    border-radius: 0.5rem;
    box-sizing: border-box;
    padding: 0.8rem;
}

.stats-progress-label {
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stats-progress-value {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 0.25rem;
}

.stats-progress-bar {
    background: var(--color-table-border);
    border-radius: 999px;
    height: 0.65rem;
    margin-top: 0.55rem;
    overflow: hidden;
}

.stats-progress-bar span {
    background: var(--color-primary);
    display: block;
    height: 100%;
}

.stats-progress-detail {
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.stats-details {
    margin-top: 0.75rem;
}

/** ADDED v2026-05-14.62
 *  Phase 3 dashboard overview and quick-link cards.
 *
 *  Purpose:
 *  The dashboard now starts with at-a-glance operating metrics and high-value
 *  admin shortcuts before the detailed diagnostics/readiness tables.
 */
.dashboard-overview,
.dashboard-quick-links {
    margin: 1rem 0 1.25rem 0;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.dashboard-card-grid,
.dashboard-link-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.dashboard-card,
.dashboard-link-card {
    border: 1px solid var(--color-table-border);
    border-radius: 0.5rem;
    box-sizing: border-box;
    padding: 0.8rem;
    text-decoration: none;
}

.dashboard-card-title {
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dashboard-card-value {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 0.25rem;
}

.dashboard-card-detail {
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

.dashboard-card-ok {
    background-color: var(--color-pastel-green);
}

.dashboard-card-warning {
    background-color: var(--color-pastel-yellow);
}

.dashboard-card-blocked {
    background-color: var(--color-pastel-red);
}

.dashboard-card-clickable {
    color: inherit;
    cursor: pointer;
    display: block;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.dashboard-card-clickable:hover,
.dashboard-card-clickable:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.dashboard-link-card {
    background: var(--color-button-bg);
    color: var(--color-button-text);
    display: block;
    font-weight: bold;
    text-align: center;
}

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
.dashboard-link-card:hover,
.dashboard-link-card:focus {
    filter: brightness(0.95);
}


/** ADDED v2026-05-14.64
 *  Phase 3 actionable Data Validation styling.
 *
 *  Purpose:
 *  Data Validation now displays severity counts, suggested fixes, and action links.
 *  The visual treatment keeps error/warning/info labels scannable while preserving
 *  the existing diagnostics table layout.
 */
.data-validation-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem 0;
}

.data-validation-check {
    margin: 0.6rem 0;
}

.data-validation-check > summary {
    font-weight: bold;
}

.data-validation-severity {
    border: 1px solid var(--color-table-border);
    border-radius: 0.35rem;
    display: inline-block;
    font-weight: bold;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.data-validation-severity-error {
    background-color: var(--color-pastel-red);
}

.data-validation-severity-warning {
    background-color: var(--color-pastel-yellow);
}

.data-validation-severity-info {
    background-color: var(--color-pastel-blue);
}

.stats-explain-group {
    margin-bottom: 0.8rem;
}

.stats-explain-group h4 {
    margin: 0.6rem 0 0.25rem 0;
}

.stats-explain-group p {
    margin: 0.15rem 0;
}

/** ADDED v2026-05-14.68
 *  Phase 3 Step 6 follow-up.
 *
 *  Purpose:
 *  Keeps the compact stats tables visible inside their page divs without relying
 *  on a horizontal scrollbar that users may not notice. The first/custom column
 *  can wrap, while the short numeric stat columns stay compact.
 */
.stats-table-container {
    overflow-x: visible;
}

.stats-table {
    table-layout: auto;
    width: 100%;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-table th,
.stats-table td {
    font-size: 0.82rem;
    padding: 2px 3px;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-table th:first-child,
.stats-table td:first-child,
.stats-table th:nth-child(2),
.stats-table td:nth-child(2) {
    white-space: normal;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-table th:not(:first-child),
.stats-table td:not(:first-child) {
    min-width: 2.2rem;
    text-align: center;
}

/** CHANGED v2026-05-15.06
 *  Team-name cells must remain left-aligned even though most stats-table columns
 *  are centered. This rule is intentionally placed after the generic numeric
 *  column rule so CSS order cannot re-center the Teams column.
 */
.stats-table td.stats-team-cell,
.stats-table th.stats-team-cell,
.stats-table td.stats-team-cell:not(:first-child),
.stats-table th.stats-team-cell:not(:first-child) {
    text-align: left;
}


/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-table th.stats-group-start,
.stats-table td.stats-group-start {
    border-left: 3px solid var(--color-table-border);
}

.matches-table tr:target {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}



/** ADDED v2026-05-14.70
 *  Phase 3 Step 6 follow-up.
 *
 *  Purpose:
 *  Highlights Remaining Matches rows that include the logged-in player either
 *  as an original team member or as a substitute, making the user's own pending
 *  matches easier to spot without changing the table structure.
 */
.stats-my-remaining-match td {
    background-color: var(--color-status-partner-bg);
    font-weight: bold;
}


.team-player-list {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 100%;
}

.team-player-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

.remaining-match-team {
    white-space: normal;
}

/** ADDED v2026-05-14.180
 *  Phase 3 privacy/stats refinement.
 *
 *  Purpose:
 *  Keeps the default player/team stats tables readable by showing the basic
 *  columns first and revealing the lower-priority advanced columns only when
 *  the user expands the table.
 */
.stats-table-toolbar {
    margin: 0 0 0.35rem 0;
    text-align: right;
}

.stats-advanced-toggle {
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.45rem;
}

.stats-advanced {
    display: none;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-advanced-visible .stats-advanced {
    display: table-cell;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-table th.stats-game-basic-start,
.stats-table td.stats-game-basic-start {
    border-left: 3px solid var(--color-table-border);
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-advanced-visible .stats-table th.stats-game-basic-start,
.stats-advanced-visible .stats-table td.stats-game-basic-start {
    border-left: 0;
}

.stats-explain-note {
    margin: 0.5rem 0;
}

/** CHANGED v2026-05-15.03
 *  Tightens stats.php derived-stat table layouts.
 *
 *  Team Insight Stats keeps the full header text visible by allowing header
 *  wrapping, shrinking the team column, and keeping individual player names on
 *  their own unbroken lines. Round Trends uses the same no-horizontal-scroll
 *  approach for long header labels.
 */
.team-insight-container,
.round-trends-container {
    overflow-x: visible;
}

.team-insight-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.68rem;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.team-insight-table th,
.team-insight-table td {
    padding-left: 0.12rem;
    padding-right: 0.12rem;
    text-align: center;
}

.team-insight-table th {
    white-space: normal;
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.team-insight-table th:first-child,
.team-insight-table td:first-child {
    width: 16%;
}

.team-insight-table td:first-child {
    white-space: normal;
    text-align: left;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.team-insight-table th:not(:first-child),
.team-insight-table td:not(:first-child) {
    width: 9.33%;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.team-insight-table .team-player-line {
    white-space: nowrap;
}

/** ADDED v2026-05-15.02
 *  Phase 3 stats display refinement.
 *
 *  Purpose:
 *  - teams.php uses DisplayTeamLink() in both inline and stacked layouts.
 *  - The basic stats view stays compact with "player1 / player2".
 *  - The advanced stats view stacks team members to recover horizontal space.
 *  - stats.php Team Insight and Round Trends are separate derived-stat tables,
 *    so their compact layout is handled independently from GetPlayerStats()
 *    tables used by players.php and teams.php.
 */
.team-display-stacked {
    display: none;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-advanced-visible .team-display-inline {
    display: none;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-advanced-visible .team-display-stacked {
    display: inline;
}

.round-trends-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.82rem;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.round-trends-table th,
.round-trends-table td {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    text-align: center;
}

.round-trends-table th {
    white-space: normal;
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
}

/** ADDED v2026-05-15.10
 *  Phase 4 Step 1 mobile/player-facing UX pass.
 *
 *  Purpose:
 *  - Improve readability and tap targets on public/player-facing pages.
 *  - Let navigation, forms, and dense tables adapt on phones/tablets.
 *  - Preserve existing business rules, permissions, schema, and admin workflows.
 */
* {
    box-sizing: border-box;
}

body {
    width: 100%;
}

main {
    max-width: 100%;
}

.table-container {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/** CHANGED v2026-05-15.125
 *  Purpose: Lets Advanced Stats tables extend past the page div instead of
 *  adding a horizontal scrollbar inside the stats table wrapper.
 */
.stats-table-container {
    max-width: none;
    overflow-x: visible;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    max-width: 100%;
}

@media screen and (min-width: 769px) {
/* Purpose: Controls visibility of mobile-only content. */
    .mobileonly {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /** CHANGED v2026-05-17.091: Hide desktop-only nav labels on mobile. */
    .desktoponly {
        display: none !important;
    }

    body {
        font-size: 1rem;
        max-width: none;
        min-width: 0;
    }

    header {
        border-radius: 0;
        padding: 0.75rem;
    }

    h1 {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.05rem;
        line-height: 1.2;
    }

/* Purpose: Provides shared layout, alignment, spacing, or container utility styling. */
    .mainbody {
        padding: 0 0.35rem;
    }

    nav {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem 0.45rem;
        line-height: 1.2;
    }

/* Purpose: Styles navigation links and active/hover navigation states. */
    nav .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        margin: 0;
        padding: 0.15rem 0.1rem;
    }

/* Purpose: Provides shared layout, alignment, spacing, or container utility styling. */
    .divborder {
        padding: 0.5rem;
    }

/* Purpose: Styles the button link component. */
    button,
    .button-link,
    input[type="submit"] {
        min-height: 2.75rem;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 1rem;
        min-height: 2.5rem;
        width: 100%;
    }

    table {
        max-width: 100%;
        table-layout: auto;
    }

    table th,
    table td {
        padding: 3px;
        font-size: 0.95rem;
    }

    table td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .table-calendar td,
    .table-calendar th,
    .matches-table-game,
    .stats-table td:not(:first-child),
    .stats-table th:not(:first-child),
    .team-insight-table td:not(:first-child),
    .team-insight-table th:not(:first-child),
    .round-trends-table td,
    .round-trends-table th {
        overflow-wrap: normal;
        word-break: normal;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-container {
        overflow-x: visible;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-table {
        min-width: 0;
        table-layout: fixed;
        width: 100%;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-table-team {
        white-space: normal;
        overflow-wrap: normal;
    }

    /** CHANGED v2026-05-15.30
     *  Disabled obsolete mobile match score sizing rules. The active mobile
     *  score sizing is defined in the final Phase 4 media block below.
     *
    .matches-table-game {
        min-width: 2.55rem;
        width: 2.55rem;
    }

    .matches-table-game .input-score {
        width: 2.2rem;
        min-width: 2.2rem;
        min-height: 1.8rem;
        padding-left: 0.05rem;
        padding-right: 0.05rem;
        line-height: 1.2;
    }

    input.input-score {
        min-height: 0;
        height: 1.8rem;
    }
     */

/* Purpose: Styles DUPR submission controls and related form options. */
    .dupr-submit-option {
        white-space: normal;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-table th,
    .stats-table td {
        font-size: 0.86rem;
        padding: 2px;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    /** CHANGED v2026-05-15.24
     *  Keep matches.php team-name cell padding aligned with Teams/Players
     *  stats tables on mobile as well.
     */
    .matches-table-team-cell {
        padding: 2px;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-table th:not(:first-child),
    .stats-table td:not(:first-child) {
        min-width: 1.8rem;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-table-toolbar {
        text-align: left;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-advanced-toggle {
        width: 100%;
    }

/* Purpose: Applies visual status styling for availability, match, team, or player states. */
    /** CHANGED v2026-05-15.26
     *  Keep the stats progress grid single-column on mobile, but stop this
     *  earlier media block from overriding the finalized Phase 4 dashboard
     *  card counts that are defined later in the cascade.
     */
    .stats-progress-grid {
        grid-template-columns: 1fr;
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    /** CHANGED v2026-05-15.26 - Dashboard mobile grid rules are centralized in the Phase 4 block near the end of this file.
    .dashboard-card-grid,
    .dashboard-link-grid {
        grid-template-columns: 1fr;
    }
    */

    .profile-photo-editor {
        flex-direction: column;
    }

/* Purpose: Styles profile photo display, preview, and removal controls. */
    .profile-photo-controls {
        flex-basis: auto;
        min-width: 0;
        width: 100%;
    }

/* Purpose: Styles login and verification-code entry controls. */
    .verification-code-box-row {
        gap: 0.3rem;
    }

/* Purpose: Styles login and verification-code entry controls. */
    .verification-code-digit-box {
        font-size: 1.6rem;
        height: 2.75rem;
        width: 2.2rem;
    }

/* Purpose: Styles login and verification-code entry controls. */
    .login-actions {
        align-items: stretch;
        flex-direction: column;
    }

/* Purpose: Styles login and verification-code entry controls. */
    .login-actions button {
        width: 100%;
    }

/* Purpose: Styles navigation links and active/hover navigation states. */
    .admin-subnav-link {
        min-height: 2rem;
    }

/* Purpose: Styles the wide note input component. */
    .wide-note-input {
        min-width: 0;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.12rem;
    }

    nav {
        gap: 0.1rem 0.35rem;
    }

    table th,
    table td {
        font-size: 0.82rem;
    }

    /** CHANGED v2026-05-15.30
     *  Disabled obsolete narrow-screen match score width. The final Phase 4
     *  mobile rule below now owns match score column sizing.
     *
    .matches-table-game {
        min-width: 2.2rem;
        width: 2.2rem;
    }
     */

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-table th,
    .stats-table td {
        font-size: 0.72rem;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .team-insight-table,
    .round-trends-table {
        font-size: 0.68rem;
    }
}

/** CHANGED v2026-05-15.66
 *  Keep editable and displayed match scores visually consistent. Generic form
 *  rules make text inputs expand to the full table cell on some breakpoints, so
 *  score controls need an explicit fixed width/height after those rules.
 */
.matches-table-game {
    text-align: center;
    width: 2.9rem;
    min-width: 2.9rem;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
.matches-table-game .input-score,
input.input-score,
span.input-score {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    height: 1.7rem !important;
    min-height: 1.7rem !important;
    padding: 0 0.1rem !important;
    font-size: 1rem !important;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
input.input-score {
    appearance: textfield;
    -moz-appearance: textfield;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 1.06rem;
    }

    table th,
    table td {
        font-size: 1rem;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-table th,
    .matches-table td {
        font-size: 1.04rem;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-table-game {
        width: 2.75rem;
        min-width: 2.75rem;
    }

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
    .matches-table-game .input-score,
    input.input-score,
    span.input-score {
        width: 2.3rem !important;
        min-width: 2.3rem !important;
        max-width: 2.3rem !important;
        height: 1.65rem !important;
        min-height: 1.65rem !important;
        font-size: 1.04rem !important;
    }
}

/** CHANGED v2026-05-15.68
 *  Phase 4 player-facing layout refinements.
 *
 *  Purpose:
 *  - Keeps Teams and Players stats tables readable now that the stat toggle is
 *    used for Basic Stats / Advanced Stats rather than expand/hide wording.
 *  - Uses stacked team/player display in crowded ranking tables so names wrap
 *    only at intentional boundaries instead of splitting individual names.
 *  - Adjusts calendar/dashboard desktop/mobile sizing requested during the
 *    Phase 4 layout pass.
 */
.stats-context-teams .stats-table th,
.stats-context-teams .stats-table td,
.stats-context-players .stats-table th,
.stats-context-players .stats-table td {
    font-size: 0.94rem;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-context-teams .stats-team-cell,
.stats-context-players .stats-player-cell {
    font-size: 0.98rem;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-context-teams .team-player-list,
.stats-context-players .player-name-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 0.08rem;
    max-width: 100%;
}

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
.stats-context-teams .team-player-line,
.stats-context-players .player-name-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

/** CHANGED v2026-05-15.26
 *  Obsolete Phase 3 responsive overrides are intentionally disabled here.
 *  The finalized Phase 4 calendar width and dashboard grid counts are defined
 *  in the dedicated Phase 4 block below so the cascade has one source of truth.
 *
.table-calendar {
    width: 110%;
    max-width: none;
}

.dashboard-card-grid,
.dashboard-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
 */

@media screen and (max-width: 768px) {
/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-teams .stats-table th,
    .stats-context-teams .stats-table td,
    .stats-context-players .stats-table th,
    .stats-context-players .stats-table td {
        font-size: 0.94rem;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-teams .stats-team-cell,
    .stats-context-players .stats-player-cell {
        font-size: 1rem;
    }

/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
    /** CHANGED v2026-05-15.26
     *  Disabled obsolete calendar/dashboard overrides that conflicted with the
     *  finalized Phase 4 rules below. Keeping them commented makes the older
     *  responsive intent visible without leaving contradictory active CSS.
     *
    .table-calendar {
        width: 96vw;
        max-width: 96vw;
    }

    .dashboard-card-grid,
    .dashboard-link-grid {
        grid-template-columns: 1fr;
    }
     */
}

@media screen and (max-width: 480px) {
/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-teams .stats-table th,
    .stats-context-teams .stats-table td,
    .stats-context-players .stats-table th,
    .stats-context-players .stats-table td {
        font-size: 0.9rem;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-teams .stats-team-cell,
    .stats-context-players .stats-player-cell {
        font-size: 0.96rem;
    }
}


/** ADDED v2026-05-15.20
 *  Phase 4 Step 1 layout follow-up.
 *
 *  Purpose:
 *  - Expands matches.php unavailable/withdrawn status tables to the page div.
 *  - Keeps desktop player stat names on one line while preserving mobile stacked names.
 *  - Keeps calendar.php inside its containing div on desktop and mobile.
 *  - Forces requested admin dashboard card counts: overview 4 desktop/2 mobile,
 *    quick links 4 desktop/4 mobile.
 *  - CHANGED v2026-05-15.26: this block is now the single active source for
 *    calendar width and dashboard card-count overrides.
 */
.matches-status-table {
    /** CHANGED v2026-05-15.21
     *  table-container is normally a scroll wrapper, but matches.php applies it
     *  directly to the unavailable/withdrawn tables. Restore table display so
     *  these single-column status tables expand across the full content div.
     */
    display: table;
    max-width: 100%;
    table-layout: fixed;
    width: 100%;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
.matches-status-table thead,
.matches-status-table tbody {
    /** CHANGED v2026-05-15.21
     *  Keep header/body using normal table layout after overriding display above.
     */
    width: 100%;
}

.matches-status-table tr {
    /** CHANGED v2026-05-15.21
     *  Force each unavailable/withdrawn row to span the full table width.
     */
    width: 100%;
}

/* Purpose: Controls match table layout, scoring inputs, and match-result highlighting. */
.matches-status-table th,
.matches-status-table td {
    /** CHANGED v2026-05-15.21
     *  Single-column status tables should fill the matches content area.
     */
    width: 100%;
}

.table-calendar {
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.dashboard-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-link-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-link-card {
    font-size: 0.9rem;
    padding: 0.55rem 0.35rem;
}

@media screen and (min-width: 769px) {
/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-players .player-name-lines {
        display: inline;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-players .player-name-line {
        display: inline;
        white-space: nowrap;
    }

/* Purpose: Styles stats tables, advanced stats controls, team/player names, and trend sections. */
    .stats-context-players .player-name-line + .player-name-line::before {
        content: " ";
    }
}

@media screen and (max-width: 768px) {
/* Purpose: Controls calendar table layout, clickable cells, and availability colour bands. */
    .table-calendar {
        max-width: 100%;
        width: 100%;
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .dashboard-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .dashboard-link-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .dashboard-card,
    .dashboard-link-card {
        padding: 0.5rem 0.35rem;
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .dashboard-card-title,
    .dashboard-card-detail,
    .dashboard-link-card {
        font-size: 0.78rem;
        line-height: 1.15;
    }

/* Purpose: Styles admin dashboards, forms, cards, tables, and action controls. */
    .dashboard-card-value {
        font-size: 1.15rem;
    }
}

/** CHANGED v2026-05-15.113
 *  Purpose: Keeps Current Round Progress > Remaining Matches compact enough to
 *  stay inside the stats panel while displaying team names on one line.
 */
.remaining-matches-container {
    overflow-x: visible;
}

/* Purpose: Compact Remaining Matches table without changing other stats tables. */
.remaining-matches-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.82rem;
}

/* Purpose: Compact Remaining Matches headers when the table is close to the panel width. */
.remaining-matches-table th {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    white-space: nowrap;
    font-size: 0.76rem;
}

/* Purpose: Keep Remaining Matches team names on a single line. */
.remaining-matches-table .remaining-match-team {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Purpose: Keep linked team members inline in Remaining Matches. */
.remaining-matches-table .team-player-list,
.remaining-matches-table .team-player-line {
    display: inline;
    white-space: nowrap;
}

/* Purpose: Format explanatory round-trend notes above the Round Trends table. */
.round-trend-insights ul {
    margin-top: 0.35rem;
    padding-left: 1.25rem;
}

@media (max-width: 700px) {
    /** CHANGED v2026-05-15.113
     *  Purpose: Further compacts Remaining Matches on narrow screens.
     */
    .remaining-matches-table {
        font-size: 0.72rem;
    }

    .remaining-matches-table th,
    .remaining-matches-table td {
        padding-left: 0.08rem;
        padding-right: 0.08rem;
    }
}

/** CHANGED v2026-05-24.4099
 *  Purpose:
 *  Tunes Add Changelog Entry column widths after adding Release Datetime. Details
 *  still receives the most space while Page, Release, Publish, and Action stay compact.
 */
.admin-changelog-entry-table {
  table-layout: fixed;
}

/* Purpose: Keeps the changelog Page column compact. */
.admin-changelog-entry-table .admin-changelog-page-col {
  width: 12%;
}

/* Purpose: Gives the changelog Details column the most available width. */
.admin-changelog-entry-table .admin-changelog-details-col {
  width: 48%;
}

/* Purpose: Keeps the changelog Release Datetime column readable but bounded. */
.admin-changelog-entry-table .admin-changelog-release-col {
  width: 20%;
  white-space: nowrap;
}

/* Purpose: Keeps the changelog Publish checkbox column compact. */
.admin-changelog-entry-table .admin-changelog-publish-col {
  width: 5%;
  white-space: nowrap;
  text-align: center;
}

/* ADDED v2026-06-04.7465: Keeps the changelog Highlight checkbox column compact after visible row labels were removed. */
.admin-changelog-entry-table .admin-changelog-highlight-col {
  width: 5%;
  white-space: nowrap;
  text-align: center;
}

/* Purpose: Keeps the changelog Action column compact. */
.admin-changelog-entry-table .admin-changelog-action-col {
  width: 10%;
  white-space: nowrap;
}

/* Purpose: Allows changelog text/date fields to use their assigned columns. */
.admin-changelog-entry-table input[type="text"],
.admin-changelog-entry-table input[type="datetime-local"] {
  width: 100%;
}

/* Purpose: Prevents the compact Add button from stretching unnecessarily. */
.admin-changelog-entry-table .admin-changelog-action-col button {
  white-space: nowrap;
}

/* ADDED v2026-06-04.7466: Keep Add Changelog Entry table inside its parent container. */
.admin-changelog-entry-table-container {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.admin-changelog-entry-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.86rem;
}

.admin-changelog-entry-table th,
.admin-changelog-entry-table td {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding-left: 0.28rem;
  padding-right: 0.28rem;
  overflow-wrap: anywhere;
}

.admin-changelog-entry-table .admin-changelog-page-col {
  width: 10%;
}

.admin-changelog-entry-table .admin-changelog-details-col {
  width: 43%;
}

.admin-changelog-entry-table .admin-changelog-release-col {
  width: 20%;
}

.admin-changelog-entry-table .admin-changelog-publish-col,
.admin-changelog-entry-table .admin-changelog-highlight-col {
  width: 4.5%;
}

.admin-changelog-entry-table .admin-changelog-action-col {
  width: 18%;
}

.admin-changelog-entry-table input[type="text"],
.admin-changelog-entry-table input[type="datetime-local"] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.admin-changelog-entry-table input[type="datetime-local"] {
  font-size: 0.82rem;
}

.admin-changelog-entry-table .admin-changelog-action-col button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/** CHANGED v2026-05-15.529
 *  Purpose: Keeps Approvals match links visually consistent with other compact
 *  match navigation links while relying on matches.php #match-* target outline.
 */
.workflow-match-link {
    white-space: nowrap;
}


/** CHANGED v2026-05-15.532
 *  Purpose: Keeps player workflow approval actions visible side-by-side and
 *  prevents the global full-width button rule from hiding the Reject action.
 */
.workflow-decision-form {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Purpose: Keeps Approve/Reject action buttons compact in Approvals tables. */
.workflow-decision-form button {
    width: auto;
    min-width: 4.75rem;
    padding: 0.3rem 0.55rem;
    white-space: nowrap;
}

/** CHANGED v2026-05-15.540
 *  Marks player-owned fields as read-only when a People / Access admin account
 *  is linked to an existing player. The fields remain visible for confirmation
 *  but should not appear editable from the admin-account form.
 */
.people-access-form input.readonly,
.people-access-form select.readonly {
    background-color: var(--color-page-bg);
    cursor: not-allowed;
}

/** CHANGED v2026-05-16.900
 *  Passkey UI is optional and feature-flagged. Mobile-first login styling keeps
 *  Face ID/passkey primary on touch devices without changing desktop fallback.
 */
.login-passkey-button {
    font-weight: bold;
}

.passkey-profile-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--css-color-ddd);
}

.passkey-status {
    display: inline-block;
    margin-left: 0.75rem;
}

/** CHANGED v2026-05-16.910
 *  Passkey login is only visually promoted after the current device has
 *  successfully registered a passkey. Before setup, keep the button available
 *  as guidance but avoid presenting it as the primary login path.
 */
.login-passkey-button.passkey-needs-setup {
    font-weight: normal;
    opacity: 0.9;
}

.login-passkey-button.passkey-ready {
    font-weight: bold;
}

.passkey-profile-panel-prominent {
    border: 1px solid var(--css-color-ddd);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--color-section-bg, var(--color-white));
}

.passkey-profile-panel-prominent h4 {
    margin-top: 0;
}

/** CHANGED v2026-05-16.930
 *  When this mobile device has already registered a passkey, present passkey
 *  login as the default path while keeping password and verification-code
 *  fallback visible below it. The browser security prompt still remains required.
 */
.passkey-login-panel.mobile-only-auth-option {
    display: none;
}


/** CHANGED v2026-05-23.4046
 *  The login Face ID/passkey panel is hidden until JavaScript confirms both
 *  platform support and this browser's local passkey registration marker.
 */
.passkey-login-panel[hidden],
.login-passkey-button[hidden] {
    display: none !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .passkey-login-panel.mobile-only-auth-option {
        display: block;
        margin: 0.75rem 0 1rem 0;
        padding: 0.9rem;
        border: 1px solid var(--css-color-ddd);
        border-radius: 8px;
        background: var(--color-section-bg, var(--color-white));
    }

    .passkey-login-panel .login-passkey-button {
        display: block;
        width: min(100%, 20rem);
        max-width: 75%;
        margin-left: auto;
        margin-right: auto;
        padding: 0.9rem 1rem;
        font-size: 1.05rem;
    }

    .login-form-passkey-ready .passkey-login-panel {
        border-width: 2px;
    }

    .login-form-passkey-ready .login-password-fallback {
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--css-color-ddd);
    }

    .login-form-passkey-ready .login-password-fallback::before {
        content: "Password / verification-code fallback";
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
        opacity: 0.75;
        text-align: center;
    }
}


/* CHANGED v2026-05-16.1020: Team Profile page read-only scaffold styling. */


/** ADDED v2026-05-20.755-759
 *  Team Profile member photo cards.
 *  Purpose: Show the two registered team members with existing profile photos
 *  or initials fallbacks without creating page-specific inline styling.
 */
.team-profile-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.team-profile-member-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--admin-border, var(--css-color-d0d7de));
    border-radius: var(--admin-card-radius, 0.75rem);
    background: var(--admin-surface, var(--css-color-rgba-255-255-255-0-72));
}

.team-profile-member-photo-link {
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.team-profile-member-card .image-oval,
.team-profile-member-card .profile-initials-avatar-profile {
    width: 88px;
    height: 88px;
}

.team-profile-member-info {
    min-width: 0;
}

.team-profile-member-name {
    display: inline-block;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.team-profile-member-meta {
    margin-top: 0.25rem;
    color: var(--admin-muted-text, var(--css-color-586069));
    font-size: 0.9rem;
    line-height: 1.35;
}

@media (max-width: 520px) {
    .team-profile-member-grid {
        grid-template-columns: 1fr;
    }

    .team-profile-member-card {
        align-items: flex-start;
    }

    .team-profile-member-card .image-oval,
    .team-profile-member-card .profile-initials-avatar-profile {
        width: 72px;
        height: 72px;
    }
}

@media (prefers-color-scheme: dark) {
    .team-profile-member-card {
        border-color: var(--admin-border, var(--control-text-border));
        background: var(--admin-surface, var(--css-color-rgba-22-27-34-0-72));
    }

    .team-profile-member-meta {
        color: var(--admin-muted-text, var(--player-muted-text));
    }
}
.team-profile-section {
    margin-bottom: 1rem;
}

.team-profile-section summary {
    font-weight: 600;
}

.team-profile-link,
.small-link {
    font-size: 0.85em;
    opacity: 0.85;
}

/** CHANGED v2026-05-17.022
 *  Purpose: Render the main navigation as two explicit left-aligned rows.
 *  Primary page links stay on the first row; logged-in user utilities stay on
 *  the second row without right-aligning Logout away from the other links.
 */
nav .nav-primary-row,
nav .nav-secondary-row,
nav .nav-tertiary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /** CHANGED v2026-05-17.300: Center-position main navigation link rows. */
    gap: 0.35rem 0.5rem;
}

nav .nav-secondary-row,
nav .nav-tertiary-row {
    margin-top: 0.25rem;
}

/** CHANGED v2026-05-17.023
 *  Purpose: Preserve compatibility with older nav-user-row markup while keeping
 *  legacy secondary navigation left-aligned with the active two-row header.
 */
nav .nav-user-row {
    display: flex;
    justify-content: center; /** CHANGED v2026-05-17.301: Keep legacy nav user rows centered with the active main nav rows. */
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}


/** CHANGED v2026-05-17.049
 *  Purpose: Teams page uses a compact icon-style link to Team Profile rather
 *  than making the full roster text a link.
 */
.team-profile-icon-link {
    float: right;
    font-size: 0.95rem;
    line-height: 1;
    margin-left: 0.4rem;
    opacity: 0.8;
    text-decoration: none;
}

.team-profile-icon-link:hover {
    opacity: 1;
    text-decoration: none;
}

/** CHANGED v2026-05-17.037
 *  Purpose: Keep Manage Matches game labels and status dropdowns on one line on
 *  mobile, matching the desktop modal layout.
 */
.manage-game-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
}

.manage-game-row label {
    margin: 0;
    white-space: nowrap;
}

.manage-game-row select {
    width: auto;
    max-width: 12rem;
}

/** CHANGED v2026-05-17.021
 *  Purpose: Approvals tables contain long workflow labels, team names, and
 *  diagnostic text. Wrap those cells so tables fit inside the page div instead
 *  of forcing horizontal overflow for normal use.
 */
.approvals-container .table-container {
    max-width: 100%;
    overflow-x: hidden;
}

.approvals-container table {
    width: 100%;
    table-layout: fixed;
}

.approvals-container table td,
.approvals-container table th {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

.approvals-container .workflow-decision-form,
.approvals-container .inline-form {
    white-space: normal;
}

/** CHANGED v2026-05-17.078
 *  Purpose: Make the Team Profile ✺ link match the Matches manage-action feel:
 *  a compact right-aligned symbol inside the team cell.
 */
.stats-team-cell {
    position: relative;
}

.team-profile-icon-link {
    float: right;
    min-width: 1.25rem;
    text-align: right;
    font-size: 1rem;
}

/** CHANGED v2026-05-20.404
 *  Test deployments no longer recolour winning scores. Production and test use
 *  the same win/status palette; test is identified by the header title suffix.
 */


/** CHANGED v2026-05-17.092
 *  Purpose: Keep Team Profile history opponent rosters on one line while adding
 *  a compact profile link similar to the Teams page ✺ action.
 */
.team-profile-linked-team {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    white-space: nowrap;
}

/** CHANGED v2026-05-17.105
 *  Purpose: Right-justify opponent Team Profile ✺ links in Team Profile history
 *  tables while preserving one-line roster display.
 */
.team-profile-linked-roster {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-profile-inline-icon {
    flex: 0 0 auto;
    float: none;
    margin-left: auto;
    min-width: 1.25rem;
    text-align: right;
}

/** CHANGED v2026-05-17.119
 *  Purpose: Keeps compact Pool-heading app icons visually separate from the
 *  Pool label without changing the main navigation layout.
 */
.app-link-group-pool {
    vertical-align: middle;
}

/** CHANGED v2026-05-17.120
 *  Purpose: Normalizes app icon link spacing by letting the wrapper own the
 *  horizontal gap instead of relying on each nav-link margin.
 */
.app-link-group .app-icon-link {
    margin-left: 0;
    margin-right: 0;
}


/** CHANGED v2026-05-17.137
 *  Purpose: Team Profile ✺ links are left-side team actions, not right-side
 *  Manage Match actions. Keep spacing consistent wherever team names appear.
 */
.team-profile-icon-link {
    float: none;
    display: inline-block;
    margin-left: 0;
    margin-right: 0.35rem;
    min-width: 1rem;
    text-align: left;
    vertical-align: baseline;
}

.team-profile-name-with-icon,
.matches-team-profile-line,
.team-profile-linked-team {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.2rem;
    max-width: 100%;
}

.stats-team-cell .team-profile-icon-link,
.matches-team-profile-line .team-profile-icon-link,
.team-profile-linked-team .team-profile-icon-link {
    flex: 0 0 auto;
}

.team-profile-linked-roster {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-profile-inline-icon {
    margin-left: 0;
    margin-right: 0.35rem;
    min-width: 1rem;
    text-align: left;
}


/** CHANGED v2026-05-17.153
 *  Purpose: Center compact numeric/stat table cells in one shared rule.
 *  mixed.js assigns numeric-cell to integers, decimals, percentages, scores,
 *  and W-L records so page templates do not need repeated alignment rules.
 */
td.integer-cell,
td.numeric-cell,
td.score-cell,
td.percent-cell,
td.record-cell {
    text-align: center;
}

/** CHANGED v2026-05-17.154
 *  Purpose: Tighten the visual gap between the Team Profile ✺ action and the
 *  adjacent team name now that the icon sits to the left of team labels.
 */
.team-profile-name-with-icon,
.matches-team-profile-line,
.team-profile-linked-team {
    gap: 0.08rem;
}

.stats-team-cell .team-profile-icon-link,
.matches-team-profile-line .team-profile-icon-link,
.team-profile-linked-team .team-profile-icon-link,
.team-profile-inline-icon {
    margin-right: 0.12rem;
    min-width: 0.85rem;
}

/** CHANGED v2026-05-17.196
 *  Purpose: Visually separates the league description/title from navigation
 *  links in the main header.
 */
.site-league-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    margin-bottom: 0.35rem;
    text-align: center;
}

/** CHANGED v2026-05-17.197
 *  Purpose: Keeps dashboard quick links in the requested row groupings instead
 *  of one auto-flowing grid.
 */
.dashboard-link-grid-row {
    margin-bottom: 0.75rem;
}

.dashboard-link-grid-row:last-child {
    margin-bottom: 0;
}

/** CHANGED v2026-05-17.198
 *  Purpose: Distinguishes an already-configured passkey state from the setup
 *  callout without implying that another registration is needed.
 */
.passkey-profile-panel-configured {
    border: 1px solid var(--color-table-border);
    border-radius: 0.5rem;
    margin: 1rem 0;
    padding: 0.75rem;
}


/** CHANGED v2026-05-17.229
 *  Purpose: Keeps Admin Dashboard quick links in the requested 5/4 row layout.
 */
.dashboard-link-grid-row-five {
    grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
}

.dashboard-link-grid-row-four {
    grid-template-columns: repeat(4, minmax(8rem, 1fr));
}

/** CHANGED v2026-05-17.230
 *  Purpose: Remaining Matches has two long team columns and two compact action/stat
 *  columns. Explicit widths reduce wasted space and prevent long teams from being
 *  cut off prematurely.
 */
.remaining-matches-table {
    table-layout: auto;
    width: 100%;
}

.remaining-matches-table .remaining-match-team-col,
.remaining-matches-table .remaining-match-team {
    width: 42%;
    white-space: normal;
}

.remaining-matches-table .remaining-match-games-col,
.remaining-matches-table .remaining-match-view-col,
.remaining-matches-table .remaining-match-view-cell {
    width: 8%;
    text-align: center;
    white-space: nowrap;
}

.stats-team-with-profile {
    align-items: baseline;
    display: inline-flex;
    gap: 0.08rem;
    max-width: 100%;
}

@media (max-width: 700px) {
    .dashboard-link-grid-row-five,
    .dashboard-link-grid-row-four {
        grid-template-columns: repeat(2, minmax(8rem, 1fr));
    }
}

/* ADDED v2026-05-18.015: Stats submitted-games-by-date chart. */
.submitted-games-chart-wrap {
    overflow-x: auto;
    padding: 0.5rem 0;
}

.submitted-games-chart {
    min-width: 100%;
    max-height: 260px;
}

.submitted-games-chart-bar {
    fill: var(--color-link, var(--css-color-2f6f9f));
}

.submitted-games-chart-bar-group:hover .submitted-games-chart-bar {
    opacity: 0.8;
}

.chart-axis {
    stroke: var(--color-border, var(--css-color-999));
    stroke-width: 1;
}

.chart-axis-label,
.chart-tick,
.chart-date-label,
.chart-bar-value {
    fill: var(--color-text, var(--css-color-333));
    font-size: 10px;
}

.chart-bar-value {
    font-weight: 600;
}

.submitted-games-table {
    margin-top: 0.5rem;
}


/* ADDED v2026-05-18.1050: Donation page card/form scaffolding. */
.donation-card {
    border: 1px solid var(--border-color, var(--css-color-ccc));
    border-radius: 8px;
    padding: 16px;
    max-width: 720px;
}

.donation-form input[type=number] {
    max-width: 180px;
}

/** ADDED v2026-05-18.1086
 *  Admin usage-stat chart styles.
 */
.admin-usage-panel {
    overflow-x: hidden;
}

.admin-usage-summary {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: 0.75rem 0 1rem 0;
}

.admin-usage-chart-layout {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
}

.admin-usage-pie {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--color-table-border);
    border-radius: 50%;
    box-shadow: 0 1px 2px var(--css-color-rgba-0-0-0-0-12);
    max-width: 16rem;
    width: 100%;
}

.admin-usage-table-container {
    margin: 0;
}

.admin-usage-table td:first-child {
    min-width: 12rem;
}

.admin-usage-swatch {
    border: 1px solid var(--color-table-border);
    display: inline-block;
    height: 0.8rem;
    margin-right: 0.4rem;
    vertical-align: -0.08rem;
    width: 0.8rem;
}

@media (max-width: 700px) {
    .admin-usage-chart-layout {
        grid-template-columns: 1fr;
    }

    .admin-usage-pie {
        margin: 0 auto;
        max-width: 13rem;
    }
}

/** ADDED v2026-05-18.1096
 *  Expanded admin usage-report chart styles.
 */
.admin-usage-table .num,
.admin-dashboard-table .num {
    text-align: center;
    white-space: nowrap;
}

.admin-usage-bar-shell {
    background: var(--color-table-header-bg, var(--css-color-f0f0f0));
    border: 1px solid var(--color-table-border);
    border-radius: 999px;
    height: 0.85rem;
    min-width: 8rem;
    overflow: hidden;
}

.admin-usage-bar {
    background: currentColor;
    height: 100%;
    opacity: 0.45;
}

.admin-usage-series {
    align-items: end;
    border: 1px solid var(--color-table-border);
    display: flex;
    gap: 0.35rem;
    height: 12rem;
    margin: 0.5rem 0 1rem 0;
    overflow-x: auto;
    padding: 0.75rem 0.75rem 2.4rem 0.75rem;
}

.admin-usage-series-item {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 2.4rem;
    flex-direction: column;
    justify-content: end;
    min-width: 2.4rem;
    position: relative;
}

.admin-usage-series-bar {
    background: currentColor;
    border-radius: 0.25rem 0.25rem 0 0;
    opacity: 0.45;
    width: 1.3rem;
}

.admin-usage-series-label {
    bottom: -2rem;
    font-size: 0.72rem;
    left: 50%;
    max-width: 4.8rem;
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-overflow: ellipsis;
    transform: translateX(-50%) rotate(-35deg);
    transform-origin: top center;
    white-space: nowrap;
}

.admin-usage-panel h4 {
    margin-top: 1.25rem;
}

.admin-usage-panel h5 {
    margin-bottom: 0.25rem;
}

/** ADDED v2026-05-18.1113
 *  Usage stats table containment and collapsed report sections.
 */
.admin-usage-report {
    border: 1px solid var(--color-table-border);
    border-radius: 0.5rem;
    margin: 0.75rem 0;
    overflow: hidden;
}

.admin-usage-report > summary {
    background: var(--color-table-header-bg, var(--css-color-f0f0f0));
    cursor: pointer;
    font-weight: 700;
    padding: 0.6rem 0.8rem;
}

.admin-usage-report-body {
    padding: 0.75rem;
}

.admin-usage-table,
.admin-usage-bar-table {
    table-layout: auto;
    width: 100%;
}

.admin-usage-table th,
.admin-usage-table td,
.admin-usage-bar-table th,
.admin-usage-bar-table td {
    font-size: clamp(0.72rem, 1.4vw, 0.92rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    padding-left: clamp(0.25rem, 0.8vw, 0.55rem);
    padding-right: clamp(0.25rem, 0.8vw, 0.55rem);
    vertical-align: top;
    word-break: normal;
}

.admin-usage-table td:first-child,
.admin-usage-bar-table td:first-child {
    min-width: 8rem;
    max-width: 22rem;
}

.admin-usage-table-container {
    overflow-x: auto;
}

.feedback-page-path-input,
.feedback-title-input {
    box-sizing: border-box;
    max-width: 42rem;
    width: min(100%, 42rem);
}


/** CHANGED v2026-05-18.1132
 *  Usage Stats table containment. Prefer compact fixed column sizing, numeric
 *  no-wrap cells, and wrapped labels/dates so text stays inside its cell rather
 *  than spilling into adjacent columns.
 */
.admin-usage-table-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-usage-table,
.admin-usage-bar-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.admin-usage-table th,
.admin-usage-table td,
.admin-usage-bar-table th,
.admin-usage-bar-table td {
    box-sizing: border-box;
    font-size: clamp(0.68rem, 0.95vw, 0.86rem);
    line-height: 1.18;
    max-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: clamp(0.22rem, 0.65vw, 0.48rem);
    text-overflow: clip;
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

.admin-usage-table th,
.admin-usage-bar-table th {
    font-size: clamp(0.64rem, 0.9vw, 0.8rem);
    line-height: 1.1;
}

.admin-usage-table .num,
.admin-dashboard-table .num,
.admin-usage-bar-table .num {
    text-align: center;
    white-space: nowrap;
    word-break: normal;
}

.admin-usage-swatch {
    flex: 0 0 auto;
}

.admin-usage-table td:first-child,
.admin-usage-bar-table td:first-child {
    max-width: none;
    min-width: 0;
}

.admin-usage-page-table .usage-col-page { width: 32%; }
.admin-usage-page-table .usage-col-num { width: 9%; }
.admin-usage-page-table .usage-col-percent { width: 8%; }
.admin-usage-page-table .usage-col-num-wide { width: 13%; }
.admin-usage-page-table .usage-col-date { width: 25%; }

.admin-usage-table .usage-col-label,
.admin-usage-bar-table .usage-col-label { width: 34%; }
.admin-usage-table .usage-col-num,
.admin-usage-bar-table .usage-col-num { width: 10%; }
.admin-usage-table .usage-col-percent { width: 10%; }
.admin-usage-bar-table .usage-col-bar { width: 28%; }
.admin-usage-bar-table .usage-col-extra { width: 14%; }

.admin-usage-bar-shell {
    min-width: 0;
    width: 100%;
}

@media (max-width: 760px) {
    .admin-usage-chart-layout {
        grid-template-columns: 1fr;
    }

    .admin-usage-table,
    .admin-usage-bar-table {
        min-width: 38rem;
    }
}

.feedback-page-path-input,
.feedback-title-input {
    max-width: 56rem;
    width: min(100%, 56rem);
}

/** CHANGED v2026-05-18.1144
 *  Additional Usage Stats table containment. Keep report tables compact, allow
 *  labels/headers to wrap inside their own cells, and preserve centered numeric
 *  columns without forcing text into neighbouring cells.
 */
.admin-usage-report > summary {
    overflow-wrap: anywhere;
    white-space: normal;
}

.admin-usage-table th,
.admin-usage-table td,
.admin-usage-bar-table th,
.admin-usage-bar-table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-usage-table th.num,
.admin-usage-table td.num,
.admin-usage-bar-table th.num,
.admin-usage-bar-table td.num,
.admin-dashboard-table th.num,
.admin-dashboard-table td.num {
    text-align: center;
    white-space: nowrap;
}

.admin-usage-table td:not(.num),
.admin-usage-bar-table td:not(.num) {
    white-space: normal;
}

.admin-usage-page-table th:first-child,
.admin-usage-page-table td:first-child {
    min-width: 9rem;
}

/* ADDED v2026-05-18.1202: Keep player changelog SweetAlert readable on small screens. */
.changelog-alert-popup {
    max-height: 90vh;
}

.changelog-alert-html {
    text-align: left !important;
}

.changelog-alert-scroll {
    max-height: min(62vh, 520px);
    overflow-y: auto;
    padding-right: 0.35rem;
    text-align: left;
}

.changelog-alert-scroll ul {
    margin-top: 0.35rem;
    padding-left: 1.25rem;
}

.changelog-alert-scroll .single {
    text-align: left;
}

/* ADDED v2026-05-18.1213: Keep changelog Swal controls visually inside the modal. */
.changelog-alert-popup {
    box-sizing: border-box;
    overflow: hidden;
}

.changelog-alert-html {
    box-sizing: border-box;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.changelog-alert-scroll {
    box-sizing: border-box;
    max-height: min(58vh, 460px);
    margin: 0 auto;
    padding: 0 0.5rem 0 0.25rem;
}

.changelog-alert-actions {
    margin: 0.75rem auto 0 !important;
    padding-bottom: 0.25rem;
}

.changelog-alert-ok {
    margin: 0.25rem auto !important;
}

.changelog-alert-disable {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
    margin: 0.75rem 0 0 !important;
    text-align: left;
}

.changelog-donate-link {
    display: inline-block;
    font-size: 1.18rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
}

/* ADDED v2026-05-18.1220: Prevent long admin-managed URLs from spilling outside tables. */
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* STEP129: Admin UI/UX consolidation. Task-based admin nav and calmer dashboard shell. */
.admin-subnav-grouped {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem 0;
  padding: 0;
  overflow: visible;
}

.admin-nav-group {
  border: 1px solid var(--color-table-border);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: var(--color-background);
  box-shadow: 0 1px 2px var(--color-shadow, var(--css-color-rgba-0-0-0-0-08));
  min-width: 0;
}

.admin-nav-group-heading {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.admin-nav-group-intent {
  font-size: 0.78rem;
  line-height: 1.25;
  opacity: 0.78;
  margin-bottom: 0.45rem;
}

.admin-subnav-grouped .admin-subnav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.admin-subnav-grouped .admin-subnav-link {
  padding: 0.2rem 0 0.28rem 0;
  font-size: 0.9rem;
}

.admin-workspace-intro {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--color-table-border);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem 0;
  background: var(--color-background);
}

.admin-workspace-intro h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.admin-workspace-intro p {
  margin: 0;
  line-height: 1.35;
}

.admin-workspace-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 12rem;
}

.admin-workspace-chip {
  border: 1px solid var(--color-table-border);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.78rem;
  white-space: nowrap;
  background: var(--color-background);
}

.admin-workspace-chip-warning {
  font-weight: bold;
}

.admin-dashboard-container details.admin-section,
.admin-dashboard-container details.dashboard-exclusive-details {
  border: 1px solid var(--color-table-border);
  border-radius: 0.75rem;
  padding: 0.35rem 0.7rem;
  margin-bottom: 0.75rem;
  background: var(--color-background);
}

.admin-dashboard-container details.admin-section > summary,
.admin-dashboard-container details.dashboard-exclusive-details > summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.35rem 0;
}

.admin-dashboard-container details.admin-section[open] > summary,
.admin-dashboard-container details.dashboard-exclusive-details[open] > summary {
  border-bottom: 1px solid var(--color-table-border);
  margin-bottom: 0.5rem;
}

.admin-usage-panel .admin-usage-report {
  border: 1px solid var(--color-table-border);
  border-radius: 0.65rem;
  padding: 0.3rem 0.6rem;
  margin: 0.55rem 0;
}

.admin-usage-panel .admin-usage-report > summary {
  font-weight: bold;
  cursor: pointer;
}

@media (max-width: 720px) {
  .admin-workspace-intro {
    flex-direction: column;
  }
  .admin-workspace-chips {
    justify-content: flex-start;
    min-width: 0;
  }
}

/* ADDED v2026-05-19.132: Give Admin -> External Links forms enough room for URLs and descriptions. */
.admin-external-links-container .table-container {
    max-width: 100%;
    overflow-x: auto;
}

.admin-external-links-container .admin-external-link-form-table,
.admin-external-links-container .admin-external-links-list {
    width: 100%;
    table-layout: auto;
}

.admin-external-links-container .admin-external-link-form-table th {
    width: 9rem;
    min-width: 7rem;
    white-space: nowrap;
}

.admin-external-links-container .admin-external-link-form-table td {
    white-space: normal;
}

.admin-external-links-container .admin-external-link-form-table input[type="text"],
.admin-external-links-container .admin-external-link-form-table input[type="url"],
.admin-external-links-container .admin-external-link-form-table input[type="number"],
.admin-external-links-container .admin-external-link-form-table textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.admin-external-links-container .admin-external-link-form-table textarea {
    min-width: min(100%, 42rem);
}

.admin-external-links-container .admin-external-links-list th:nth-child(1),
.admin-external-links-container .admin-external-links-list td:nth-child(1) {
    width: 4.5rem;
}

.admin-external-links-container .admin-external-links-list th:nth-child(5),
.admin-external-links-container .admin-external-links-list td:nth-child(5) {
    width: 4.5rem;
}

.admin-external-links-container .admin-external-links-list th:nth-child(6),
.admin-external-links-container .admin-external-links-list td:nth-child(6) {
    width: 8rem;
}

.admin-external-links-container .admin-external-links-list td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ADDED v2026-05-19.148: Round automation job-management layout. */
.admin-round-automation .round-automation-form-table {
    width: 100%;
    table-layout: auto;
}

.admin-round-automation .round-automation-form-table th {
    width: 11rem;
    white-space: nowrap;
}

.admin-round-automation .round-automation-form-table select,
.admin-round-automation .round-automation-form-table input[type="text"],
.admin-round-automation .round-automation-form-table input[type="datetime-local"],
.admin-round-automation .round-automation-form-table textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.admin-round-automation .round-automation-jobs-table {
    width: 100%;
    table-layout: auto;
}

.admin-round-automation .round-automation-jobs-table th,
.admin-round-automation .round-automation-jobs-table td {
    vertical-align: top;
    white-space: normal;
}

.admin-round-automation .round-automation-actions {
    min-width: 15rem;
}

.admin-round-automation .inline-form {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
}

.admin-round-automation .inline-details {
    display: block;
    margin-top: 0.25rem;
}

.admin-round-automation .round-automation-reschedule-form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr);
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.admin-round-automation .nowrap {
    white-space: nowrap;
}


/* ADDED v2026-05-19.1500 STEP150: client onboarding admin workspace */
.admin-client-onboarding-form {
    width: min(1100px, 100%);
    table-layout: fixed;
}
.admin-client-onboarding-form th {
    width: 180px;
    text-align: left;
    vertical-align: top;
}
.admin-client-onboarding-form input,
.admin-client-onboarding-form select {
    width: min(720px, 100%);
    box-sizing: border-box;
}
.client-onboarding-invite-url {
    width: min(900px, 100%);
    box-sizing: border-box;
    font-family: monospace;
}
.admin-client-onboarding-table {
    width: 100%;
    table-layout: fixed;
}
.admin-client-onboarding-table th,
.admin-client-onboarding-table td {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* Step 152 admin/dashboard stabilization */
.admin-dashboard-container details.admin-section.admin-section-outline-error,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-error {
  border-color: var(--color-message-error);
  box-shadow: 0 0 0 1px var(--color-message-error);
}

.admin-dashboard-container details.admin-section.admin-section-outline-warning,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning {
  border-color: var(--color-message-warning);
  box-shadow: 0 0 0 1px var(--color-message-warning);
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok {
  border-color: var(--color-button-bg);
  box-shadow: 0 0 0 1px var(--color-button-bg);
}

.admin-dashboard-container details.admin-section.admin-section-info-only,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-info-only {
  box-shadow: none;
}

.table-calendar th.calendar-date-header,
.table-calendar th:first-child,
.table-calendar td.datepad {
  min-width: 7.5rem;
  width: 7.5rem;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .table-calendar th.calendar-date-header,
  .table-calendar th:first-child,
  .table-calendar td.datepad {
    min-width: 6.4rem;
    width: 6.4rem;
  }
}

/* STEP154: Collapsed dashboard section health states use full background fill; open sections retain quieter bordered state. */
.admin-dashboard-container details.admin-section.admin-section-outline-error:not([open]),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-error:not([open]) {
  background: var(--color-message-error);
  border-color: var(--color-message-error);
  box-shadow: none;
}

.admin-dashboard-container details.admin-section.admin-section-outline-warning:not([open]),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning:not([open]) {
  background: var(--color-message-warning);
  border-color: var(--color-message-warning);
  box-shadow: none;
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok:not([open]),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not([open]) {
  background: var(--color-button-bg);
  border-color: var(--color-button-bg);
  box-shadow: none;
}

.admin-dashboard-container details.admin-section.admin-section-outline-error:not([open]) > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-error:not([open]) > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-warning:not([open]) > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning:not([open]) > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-ok:not([open]) > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not([open]) > summary {
  color: var(--color-text-on-accent, var(--color-white));
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok:not(.admin-section-outline-error):not(.admin-section-outline-warning),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not(.admin-section-outline-error):not(.admin-section-outline-warning) {
  border-color: var(--color-button-bg);
}

.table-calendar th.calendar-date-header,
.table-calendar th:first-child,
.table-calendar td.datepad {
  min-width: 8.75rem;
  width: 8.75rem;
}

/* STEP155: Keep Calendar Date column compact while preventing date spillover. */
.table-calendar th.calendar-date-header,
.table-calendar th:first-child,
.table-calendar td.datepad {
  min-width: 4.75rem;
  width: 4.75rem;
  max-width: 4.75rem;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 700px) {
  .table-calendar th.calendar-date-header,
  .table-calendar th:first-child,
  .table-calendar td.datepad {
    min-width: 4.35rem;
    width: 4.35rem;
    max-width: 4.35rem;
  }
}

/* STEP156: Align collapsed Admin Dashboard health fills with dashboard-card colours.
   Warning uses the yellow dashboard-card colour; zero-issue OK sections use the green dashboard-card colour, not deployment button colour. */
.admin-dashboard-container details.admin-section.admin-section-outline-warning:not([open]),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning:not([open]) {
  background: var(--color-pastel-yellow);
  border-color: var(--color-pastel-yellow);
  box-shadow: none;
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok:not([open]),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not([open]) {
  background: var(--color-pastel-green);
  border-color: var(--color-pastel-green);
  box-shadow: none;
}

.admin-dashboard-container details.admin-section.admin-section-outline-warning,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning {
  border-color: var(--color-pastel-yellow);
  box-shadow: 0 0 0 1px var(--color-pastel-yellow);
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok {
  border-color: var(--color-pastel-green);
  box-shadow: 0 0 0 1px var(--color-pastel-green);
}

.admin-dashboard-container details.admin-section.admin-section-outline-ok:not(.admin-section-outline-error):not(.admin-section-outline-warning),
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not(.admin-section-outline-error):not(.admin-section-outline-warning) {
  border-color: var(--color-pastel-green);
}

.admin-dashboard-container details.admin-section.admin-section-outline-warning:not([open]) > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning:not([open]) > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-ok:not([open]) > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok:not([open]) > summary {
  color: var(--color-black);
}

/* STEP178: Data Validation tables use full parent width and reduce unnecessary spill. */
.data-validation-table-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.data-validation-table-container .diagnostics-table,
.data-validation-table-container .data-validation-table {
  width: 100%;
  min-width: 100%;
  table-layout: auto;
  box-sizing: border-box;
}

.data-validation-table th,
.data-validation-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.data-validation-table .nowrap,
.data-validation-table td.align-right.nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

.data-validation-table .sub-dupr-validation-row .sub-dupr-player-cell {
  min-width: 10rem;
  max-width: 16rem;
  line-height: 1.3;
}

.data-validation-table .sub-dupr-validation-row td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.muted-text {
  opacity: 0.78;
  font-size: 0.92em;
}

/* STEP178: Approvals page uses the same quiet card/details vocabulary as Admin Dashboard. */
.approvals-container {
  width: 100%;
  box-sizing: border-box;
}

.approvals-section-group {
  margin: 1rem 0 1.35rem;
  padding: 0.85rem;
  border: 1px solid var(--color-table-border);
  border-radius: 12px;
  background: var(--color-card-bg, var(--color-transparent));
  box-sizing: border-box;
}

.approvals-section-group > h3 {
  margin-top: 0;
  margin-bottom: 0.65rem;
}

.approvals-container details.approvals-section,
.approvals-container details.admin-section {
  margin: 0.65rem 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  box-sizing: border-box;
}

.approvals-container details.approvals-section > summary,
.approvals-container details.admin-section > summary {
  cursor: pointer;
  font-weight: 600;
}

.approvals-container details.admin-section-outline-error:not([open]) {
  background: var(--color-message-error);
  border-color: var(--color-message-error);
}

.approvals-container details.admin-section-outline-warning:not([open]) {
  background: var(--color-pastel-yellow);
  border-color: var(--color-pastel-yellow);
}

.approvals-container details.admin-section-outline-ok:not([open]) {
  background: var(--color-pastel-green);
  border-color: var(--color-pastel-green);
}

.approvals-container details.admin-section-outline-error:not([open]) > summary {
  color: var(--color-text-on-accent, var(--color-white));
}

.approvals-container details.admin-section-outline-warning:not([open]) > summary,
.approvals-container details.admin-section-outline-ok:not([open]) > summary {
  color: var(--color-black);
}

.approvals-container details.admin-section-outline-error[open] {
  border-color: var(--color-message-error);
  box-shadow: 0 0 0 1px var(--color-message-error);
}

.approvals-container details.admin-section-outline-warning[open] {
  border-color: var(--color-pastel-yellow);
  box-shadow: 0 0 0 1px var(--color-pastel-yellow);
}

.approvals-container details.admin-section-outline-ok[open] {
  border-color: var(--color-pastel-green);
  box-shadow: 0 0 0 1px var(--color-pastel-green);
}

.approvals-container .table-container {
  width: 100%;
  max-width: 100%;
}

.approvals-container table {
  width: 100%;
  table-layout: auto;
}

.approvals-container th,
.approvals-container td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* STEP179: Keep bulk workflow destructive controls visually below the review table. */
.workflow-bulk-delete-actions {
  margin: 0.75rem 0 0;
  text-align: right;
}

/* STEP180: Shared health-section vocabulary for Admin Dashboard and Approvals.
   Keeps both screens visually consistent: closed sections show full status fills,
   open sections show quieter outlines, and informational-only sections stay neutral. */
.admin-health-details {
  border-radius: 10px;
  box-sizing: border-box;
}

.admin-dashboard-container details.admin-health-details,
.approvals-container details.admin-health-details {
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.admin-dashboard-container details.admin-health-details > summary,
.approvals-container details.admin-health-details > summary {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.35;
}

.admin-dashboard-container details.admin-health-details.admin-section-info-only,
.approvals-container details.admin-health-details.admin-section-info-only {
  background: var(--color-background);
  border-color: var(--color-table-border);
  box-shadow: none;
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-error:not([open]),
.approvals-container details.admin-health-details.admin-section-outline-error:not([open]) {
  background: var(--color-message-error);
  border-color: var(--color-message-error);
  box-shadow: none;
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-warning:not([open]),
.approvals-container details.admin-health-details.admin-section-outline-warning:not([open]) {
  background: var(--color-pastel-yellow);
  border-color: var(--color-pastel-yellow);
  box-shadow: none;
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-ok:not([open]),
.approvals-container details.admin-health-details.admin-section-outline-ok:not([open]) {
  background: var(--color-pastel-green);
  border-color: var(--color-pastel-green);
  box-shadow: none;
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-error:not([open]) > summary,
.approvals-container details.admin-health-details.admin-section-outline-error:not([open]) > summary {
  color: var(--color-text-on-accent, var(--color-white));
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-warning:not([open]) > summary,
.admin-dashboard-container details.admin-health-details.admin-section-outline-ok:not([open]) > summary,
.approvals-container details.admin-health-details.admin-section-outline-warning:not([open]) > summary,
.approvals-container details.admin-health-details.admin-section-outline-ok:not([open]) > summary {
  color: var(--color-black);
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-error[open],
.approvals-container details.admin-health-details.admin-section-outline-error[open] {
  border-color: var(--color-message-error);
  box-shadow: 0 0 0 1px var(--color-message-error);
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-warning[open],
.approvals-container details.admin-health-details.admin-section-outline-warning[open] {
  border-color: var(--color-pastel-yellow);
  box-shadow: 0 0 0 1px var(--color-pastel-yellow);
}

.admin-dashboard-container details.admin-health-details.admin-section-outline-ok[open],
.approvals-container details.admin-health-details.admin-section-outline-ok[open] {
  border-color: var(--color-pastel-green);
  box-shadow: 0 0 0 1px var(--color-pastel-green);
}

.approvals-container .approvals-section-group {
  background: var(--color-background);
}

/* STEP191: Dashboard nested readiness and validation sections use the same compact health-card treatment. */
.admin-dashboard-container details.dashboard-readiness-subsection,
.admin-dashboard-container details.data-validation-check {
  margin: 0.65rem 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  box-sizing: border-box;
}

.admin-dashboard-container details.dashboard-readiness-subsection > summary,
.admin-dashboard-container details.data-validation-check > summary {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.35;
}

.admin-dashboard-container details.dashboard-readiness-subsection[open],
.admin-dashboard-container details.data-validation-check[open] {
  background: var(--color-background);
}

.admin-dashboard-subsection-body,
.data-validation-check-body {
  margin-top: 0.5rem;
}

.admin-dashboard-readiness-table-container,
.admin-dashboard-container .data-validation-table-container {
  width: 100%;
  max-width: 100%;
}

.admin-dashboard-container .data-validation-table .validation-context-cell {
  min-width: 8rem;
  max-width: 16rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-dashboard-container .data-validation-table .validation-issue-cell {
  min-width: 12rem;
  max-width: 24rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-dashboard-container .data-validation-table .terminal-game-change-audit-row td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* STEP198: Admin -> Database Tools health-card/table layout alignment. */
.database-tools-container {
  max-width: 100%;
  box-sizing: border-box;
}

.database-tools-container details.database-tools-section {
  overflow: hidden;
}

.database-tools-container .table-container,
.database-tools-container .database-tools-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.database-tools-container .database-tools-table {
  width: 100%;
  min-width: 42rem;
  table-layout: auto;
}

.database-tools-container .database-tools-table th,
.database-tools-container .database-tools-table td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.database-tools-container .database-tools-table code,
.database-tools-container .database-tools-error-list code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.database-tools-container .database-tools-error-list {
  margin-bottom: 0.8rem;
}

@media (max-width: 720px) {
  .database-tools-container .database-tools-table {
    min-width: 36rem;
  }
}


/* STEP199: Keep Config Bootstrap / SITE_ID Audit headers readable without wrapping. */
.database-tools-container .database-tools-config-audit-table {
  min-width: 48rem;
  table-layout: fixed;
}

.database-tools-container .database-tools-config-audit-table th {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.database-tools-container .database-tools-config-audit-table th:nth-child(1),
.database-tools-container .database-tools-config-audit-table td:nth-child(1) {
  width: 14rem;
  min-width: 14rem;
}

.database-tools-container .database-tools-config-audit-table th:nth-child(2),
.database-tools-container .database-tools-config-audit-table td:nth-child(2) {
  width: 8rem;
  min-width: 8rem;
}

.database-tools-container .database-tools-config-audit-table th:nth-child(3),
.database-tools-container .database-tools-config-audit-table td:nth-child(3) {
  min-width: 26rem;
}

@media (max-width: 720px) {
  .database-tools-container .database-tools-config-audit-table {
    min-width: 48rem;
  }
}

/* STEP200: Shared Admin table containment.
 * Purpose: keep admin tables inside their parent cards/sections without relying on
 * page-level horizontal overflow. Tables use fixed layout, compact padding, and
 * aggressive wrapping for long labels, URLs, SQL fragments, UUIDs, notes, and
 * diagnostics text.
 */
.admin-page-container,
.approvals-container {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.admin-page-container *,
.approvals-container * {
  box-sizing: border-box;
}

.admin-page-container .divborder,
.admin-page-container .admin-dashboard-section,
.admin-page-container details,
.approvals-container .divborder,
.approvals-container .approvals-section-group,
.approvals-container details {
  max-width: 100%;
  overflow-x: hidden;
}

.admin-page-container .table-container,
.admin-page-container .usage-table-wrap,
.admin-page-container .admin-usage-table-container,
.admin-page-container .database-tools-table-container,
.approvals-container .table-container,
.approvals-container .usage-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.admin-page-container table,
.approvals-container table {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.admin-page-container th,
.admin-page-container td,
.approvals-container th,
.approvals-container td {
  max-width: 1px;
  min-width: 0 !important;
  padding: 3px 4px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.admin-page-container th,
.approvals-container th {
  line-height: 1.15;
}

.admin-page-container code,
.admin-page-container pre,
.admin-page-container textarea,
.admin-page-container .displaysql,
.admin-page-container .admin-generated-uuid,
.admin-page-container .admin-inline-note,
.admin-page-container .wide-note-input,
.approvals-container code,
.approvals-container pre,
.approvals-container textarea {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.admin-page-container input:not([type="checkbox"]):not([type="radio"]),
.admin-page-container select,
.admin-page-container textarea,
.approvals-container input:not([type="checkbox"]):not([type="radio"]),
.approvals-container select,
.approvals-container textarea {
  max-width: 100%;
}

.admin-page-container button,
.admin-page-container .button-link,
.admin-page-container input[type="submit"],
.approvals-container button,
.approvals-container .button-link,
.approvals-container input[type="submit"] {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Compact predictable columns that otherwise tend to consume too much width. */
.admin-page-container .admin-dashboard-table th:first-child,
.admin-page-container .admin-dashboard-table td:first-child,
.admin-page-container .database-tools-table th:nth-child(2),
.admin-page-container .database-tools-table td:nth-child(2),
.admin-page-container .database-tools-config-audit-table th:nth-child(2),
.admin-page-container .database-tools-config-audit-table td:nth-child(2),
.admin-page-container .usage-col-num,
.admin-page-container .usage-col-num-wide,
.admin-page-container .usage-col-percent,
.admin-page-container .usage-col-date,
.approvals-container table th:first-child,
.approvals-container table td:first-child {
  width: 1%;
  max-width: 7.5rem;
  overflow-wrap: normal;
}

/* Database Tools previously forced wide tables; Step200 lets them fit the card. */
.admin-page-container .database-tools-table,
.admin-page-container .database-tools-config-audit-table {
  min-width: 0 !important;
  width: 100%;
  table-layout: fixed !important;
}

.admin-page-container .database-tools-config-audit-table th,
.admin-page-container .database-tools-config-audit-table td {
  width: auto !important;
  min-width: 0 !important;
}

.admin-page-container .database-tools-config-audit-table th:nth-child(1),
.admin-page-container .database-tools-config-audit-table td:nth-child(1) {
  width: 22% !important;
}

.admin-page-container .database-tools-config-audit-table th:nth-child(2),
.admin-page-container .database-tools-config-audit-table td:nth-child(2) {
  width: 12% !important;
  white-space: normal !important;
}

.admin-page-container .database-tools-config-audit-table th:nth-child(3),
.admin-page-container .database-tools-config-audit-table td:nth-child(3) {
  width: 66% !important;
}

.admin-page-container .admin-two-column-form th,
.admin-page-container .admin-two-column-form td:first-child,
.admin-page-container .admin-org-form th,
.admin-page-container .admin-org-form td:first-child {
  width: 32%;
}

@media (max-width: 720px) {
  .admin-page-container th,
  .admin-page-container td,
  .approvals-container th,
  .approvals-container td {
    font-size: 0.9rem;
    padding: 3px;
  }
}

/* STEP201: Approvals table containment and proportional columns.
 * Purpose: keep every Approvals table inside its parent card without horizontal
 * spillover, while preventing status/action/date columns from consuming too
 * much width.
 */
.approvals-container .approvals-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.approvals-container table.approvals-table {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}

.approvals-container table.approvals-table th,
.approvals-container table.approvals-table td {
  max-width: none;
  min-width: 0 !important;
  padding: 3px 4px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.approvals-container table.approvals-table th {
  line-height: 1.12;
}

.approvals-container table.approvals-table code,
.approvals-container table.approvals-table a,
.approvals-container table.approvals-table strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.approvals-container table.approvals-table form,
.approvals-container table.approvals-table .inline-form,
.approvals-container table.approvals-table .workflow-decision-form {
  max-width: 100%;
  white-space: normal;
}

.approvals-container table.approvals-table button,
.approvals-container table.approvals-table input[type="submit"],
.approvals-container table.approvals-table .button-link {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.approvals-container table.approvals-table textarea {
  width: 100%;
  max-width: 100%;
}

/* 5-column player/admin pending tables. */
.approvals-container .approvals-pending-table th:nth-child(1),
.approvals-container .approvals-pending-table td:nth-child(1) { width: 14%; }
.approvals-container .approvals-pending-table th:nth-child(2),
.approvals-container .approvals-pending-table td:nth-child(2) { width: 24%; }
.approvals-container .approvals-pending-table th:nth-child(3),
.approvals-container .approvals-pending-table td:nth-child(3) { width: 18%; }
.approvals-container .approvals-pending-table th:nth-child(4),
.approvals-container .approvals-pending-table td:nth-child(4) { width: 17%; }
.approvals-container .approvals-pending-table th:nth-child(5),
.approvals-container .approvals-pending-table td:nth-child(5) { width: 27%; }

/* Standard workflow status tables: Match, Type, Status, Requested By, Requested, Progress, Action. */
.approvals-container .approvals-workflow-status-table th:nth-child(1),
.approvals-container .approvals-workflow-status-table td:nth-child(1) { width: 13%; }
.approvals-container .approvals-workflow-status-table th:nth-child(2),
.approvals-container .approvals-workflow-status-table td:nth-child(2) { width: 24%; }
.approvals-container .approvals-workflow-status-table th:nth-child(3),
.approvals-container .approvals-workflow-status-table td:nth-child(3) { width: 11%; }
.approvals-container .approvals-workflow-status-table th:nth-child(4),
.approvals-container .approvals-workflow-status-table td:nth-child(4) { width: 15%; }
.approvals-container .approvals-workflow-status-table th:nth-child(5),
.approvals-container .approvals-workflow-status-table td:nth-child(5) { width: 14%; }
.approvals-container .approvals-workflow-status-table th:nth-child(6),
.approvals-container .approvals-workflow-status-table td:nth-child(6) { width: 13%; }
.approvals-container .approvals-workflow-status-table th:nth-child(7),
.approvals-container .approvals-workflow-status-table td:nth-child(7) { width: 10%; }


/* ADDED v2026-06-03.7360: Compact admin approval review tables without wrapping action button labels. */
.approvals-container .approvals-workflow-admin-actions-table {
  table-layout: fixed;
}

.approvals-container .approvals-workflow-admin-actions-table th:nth-child(1),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(1) { width: 8%; white-space: nowrap; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(2),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(2) { width: 7%; white-space: nowrap; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(3),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(3) { width: 35%; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(4),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(4) { width: 9%; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(5),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(5) { width: 13%; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(6),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(6) { width: 14%; }
.approvals-container .approvals-workflow-admin-actions-table th:nth-child(7),
.approvals-container .approvals-workflow-admin-actions-table td:nth-child(7) { width: 14%; }

.approvals-container .approvals-workflow-admin-actions-table .workflow-admin-override-form button {
  white-space: nowrap;
  min-width: 5.6rem;
}

.approvals-container .approvals-workflow-admin-actions-table .workflow-type-primary {
  font-weight: 600;
}

.approvals-container .approvals-workflow-admin-actions-table .workflow-type-detail {
  display: inline-block;
  margin-top: 0.15rem;
}

/* Bulk workflow review table includes a leading Select column and trailing Action column. */
.approvals-container .approvals-workflow-bulk-table th:nth-child(1),
.approvals-container .approvals-workflow-bulk-table td:nth-child(1) { width: 6%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(2),
.approvals-container .approvals-workflow-bulk-table td:nth-child(2) { width: 12%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(3),
.approvals-container .approvals-workflow-bulk-table td:nth-child(3) { width: 21%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(4),
.approvals-container .approvals-workflow-bulk-table td:nth-child(4) { width: 10%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(5),
.approvals-container .approvals-workflow-bulk-table td:nth-child(5) { width: 13%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(6),
.approvals-container .approvals-workflow-bulk-table td:nth-child(6) { width: 13%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(7),
.approvals-container .approvals-workflow-bulk-table td:nth-child(7) { width: 12%; }
.approvals-container .approvals-workflow-bulk-table th:nth-child(8),
.approvals-container .approvals-workflow-bulk-table td:nth-child(8) { width: 13%; }

/* Diagnostics tables favour compact IDs/statuses and leave detail columns flexible. */
.approvals-container .approvals-game-diagnostics-table th:nth-child(1),
.approvals-container .approvals-game-diagnostics-table td:nth-child(1) { width: 10%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(2),
.approvals-container .approvals-game-diagnostics-table td:nth-child(2) { width: 16%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(3),
.approvals-container .approvals-game-diagnostics-table td:nth-child(3) { width: 10%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(4),
.approvals-container .approvals-game-diagnostics-table td:nth-child(4) { width: 16%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(5),
.approvals-container .approvals-game-diagnostics-table td:nth-child(5) { width: 15%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(6),
.approvals-container .approvals-game-diagnostics-table td:nth-child(6) { width: 13%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(7),
.approvals-container .approvals-game-diagnostics-table td:nth-child(7) { width: 10%; }
.approvals-container .approvals-game-diagnostics-table th:nth-child(8),
.approvals-container .approvals-game-diagnostics-table td:nth-child(8) { width: 10%; }

.approvals-container .approvals-dupr-diagnostics-table th:nth-child(1),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(1) { width: 6%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(2),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(2) { width: 10%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(3),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(3) { width: 8%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(4),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(4) { width: 10%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(5),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(5) { width: 18%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(6),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(6) { width: 18%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(7),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(7) { width: 12%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(8),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(8) { width: 8%; }
.approvals-container .approvals-dupr-diagnostics-table th:nth-child(9),
.approvals-container .approvals-dupr-diagnostics-table td:nth-child(9) { width: 10%; }

.approvals-container .approvals-access-table th:nth-child(1),
.approvals-container .approvals-access-table td:nth-child(1) { width: 17%; }
.approvals-container .approvals-access-table th:nth-child(2),
.approvals-container .approvals-access-table td:nth-child(2) { width: 21%; }
.approvals-container .approvals-access-table th:nth-child(3),
.approvals-container .approvals-access-table td:nth-child(3) { width: 17%; }
.approvals-container .approvals-access-table th:nth-child(4),
.approvals-container .approvals-access-table td:nth-child(4) { width: 28%; }
.approvals-container .approvals-access-table th:nth-child(5),
.approvals-container .approvals-access-table td:nth-child(5) { width: 17%; }

.approvals-container .approvals-profile-table th:nth-child(1),
.approvals-container .approvals-profile-table td:nth-child(1) { width: 16%; }
.approvals-container .approvals-profile-table th:nth-child(2),
.approvals-container .approvals-profile-table td:nth-child(2) { width: 18%; }
.approvals-container .approvals-profile-table th:nth-child(3),
.approvals-container .approvals-profile-table td:nth-child(3) { width: 18%; }
.approvals-container .approvals-profile-table th:nth-child(4),
.approvals-container .approvals-profile-table td:nth-child(4) { width: 18%; }
.approvals-container .approvals-profile-table th:nth-child(5),
.approvals-container .approvals-profile-table td:nth-child(5) { width: 30%; }

@media (max-width: 720px) {
  .approvals-container table.approvals-table th,
  .approvals-container table.approvals-table td {
    font-size: 0.86rem;
    padding: 2px 3px;
  }
}

/** ADDED v2026-05-19.2240 Phase 4 Step 224
 *  Admin/player UI/UX surface contract.
 *
 *  Admin pages are expected to be used mostly on desktop and may use wider,
 *  denser layouts. Player-facing pages are expected to be used mostly on mobile
 *  and should keep content compact and concise. Both surfaces intentionally share
 *  the same CSS variables, production colour theme, status colours, buttons,
 *  borders, rounded sections, and table-containment behavior.
 */
:root {
    --ui-page-max-player: 800px;
    --ui-page-max-admin: 1180px;
    --ui-section-radius: 0.75rem;
    --ui-section-padding-player: 0.55rem;
    --ui-section-padding-admin: 0.85rem;
    --ui-density-player-font-size: 0.92rem;
    --ui-density-admin-font-size: 0.95rem;
}

body {
    box-sizing: border-box;
    width: 100%;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

.mainbody,
header,
footer {
    max-width: var(--ui-page-max-player);
    width: min(100%, var(--ui-page-max-player));
}

@media (min-width: 980px) {
    body:has(.admin-page-container) {
        max-width: none;
    }

    body:has(.admin-page-container) .mainbody,
    body:has(.admin-page-container) header,
    body:has(.admin-page-container) footer {
        max-width: var(--ui-page-max-admin);
        width: min(100%, var(--ui-page-max-admin));
    }
}

.ui-surface-admin,
.ui-surface-player {
    color: inherit;
}

.ui-surface-admin {
    font-size: var(--ui-density-admin-font-size);
}

.ui-surface-player {
    font-size: var(--ui-density-player-font-size);
}

.ui-surface-admin .divborder,
.ui-surface-admin details,
.ui-surface-admin .stats-progress-panel,
.ui-surface-player .divborder,
.ui-surface-player details,
.ui-surface-player .stats-progress-panel {
    border-radius: var(--ui-section-radius);
}

.ui-surface-admin .divborder,
.ui-surface-admin details,
.ui-surface-admin .stats-progress-panel {
    padding: var(--ui-section-padding-admin);
}

.ui-surface-player .divborder,
.ui-surface-player details,
.ui-surface-player .stats-progress-panel {
    padding: var(--ui-section-padding-player);
}

.admin-page-container .table-container,
.player-page-container .table-container {
    max-width: 100%;
}

.admin-page-container table,
.player-page-container table {
    max-width: 100%;
}

.admin-page-container th,
.admin-page-container td {
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.player-page-container th,
.player-page-container td {
    overflow-wrap: anywhere;
    vertical-align: middle;
}

@media (max-width: 720px) {
    .player-page-container table td,
    .player-page-container table th {
        padding: 3px;
        font-size: 0.9rem;
    }

    .player-page-container h2 {
        font-size: 1.05rem;
    }

    .player-page-container .nav-link,
    .player-page-container button,
    .player-page-container input,
    .player-page-container select {
        max-width: 100%;
    }
}

@media (min-width: 980px) {
    .admin-page-container .table-container {
        overflow-x: hidden;
    }

    .admin-page-container table {
        table-layout: fixed;
    }

    .admin-page-container th,
    .admin-page-container td {
        padding: 5px 6px;
    }
}


/** ADDED v2026-05-19.2250 Phase 4 Step 225
 *  UI surface audit and low-risk containment cleanup.
 *  Admin pages keep desktop density; player pages keep mobile compactness.
 *  Both surfaces share the same variables and status colour system.
 */
.admin-ui-surface-audit-table th:nth-child(1),
.admin-ui-surface-audit-table td:nth-child(1) { width: 7%; }
.admin-ui-surface-audit-table th:nth-child(2),
.admin-ui-surface-audit-table td:nth-child(2) { width: 14%; }
.admin-ui-surface-audit-table th:nth-child(3),
.admin-ui-surface-audit-table td:nth-child(3) { width: 12%; }
.admin-ui-surface-audit-table th:nth-child(4),
.admin-ui-surface-audit-table td:nth-child(4) { width: 10%; }
.admin-ui-surface-audit-table th:nth-child(5),
.admin-ui-surface-audit-table td:nth-child(5) { width: 20%; }
.admin-ui-surface-audit-table th:nth-child(6),
.admin-ui-surface-audit-table td:nth-child(6) { width: 11%; }
.admin-ui-surface-audit-table th:nth-child(7),
.admin-ui-surface-audit-table td:nth-child(7) { width: 26%; }

.admin-ui-overflow-audit-table th:nth-child(1),
.admin-ui-overflow-audit-table td:nth-child(1) { width: 8%; }
.admin-ui-overflow-audit-table th:nth-child(2),
.admin-ui-overflow-audit-table td:nth-child(2) { width: 20%; }
.admin-ui-overflow-audit-table th:nth-child(3),
.admin-ui-overflow-audit-table td:nth-child(3) { width: 10%; }
.admin-ui-overflow-audit-table th:nth-child(4),
.admin-ui-overflow-audit-table td:nth-child(4) { width: 22%; }
.admin-ui-overflow-audit-table th:nth-child(5),
.admin-ui-overflow-audit-table td:nth-child(5) { width: 40%; }

.ui-surface-admin .table-container,
.ui-surface-player .table-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
}

.ui-surface-admin table,
.ui-surface-player table {
    width: 100%;
    max-width: 100%;
}

.ui-surface-admin summary,
.ui-surface-player summary {
    overflow-wrap: anywhere;
}

@media (min-width: 980px) {
    .ui-surface-admin .admin-dashboard-table,
    .ui-surface-admin .admin-table,
    .ui-surface-admin table {
        table-layout: fixed;
    }
}

@media (max-width: 720px) {
    .ui-surface-player .table-container {
        margin-left: 0;
        margin-right: 0;
    }

    .ui-surface-player table {
        table-layout: auto;
    }
}


/* ADDED v2026-05-19.1500 STEP226: Temporary About-page survey notice. */
.about-survey-banner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.75rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left: 0.35rem solid var(--color-message-info);
    border-radius: 0.7rem;
    background: var(--color-white);
    color: var(--color-text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.about-survey-banner a {
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .about-survey-banner a {
        white-space: normal;
    }
}

/** ADDED v2026-05-19.2290 Phase 4 Step 229
 *  Mobile/player table containment and test-login usability.
 *
 *  Intent:
 *  - Player-facing pages are mobile-first and must keep data inside cells.
 *  - Admin pages may be wider than a phone viewport, so these rules target the
 *    player surface only except for the small admin mobile note at the end.
 *  - Players list abbreviated public names such as "First L." should stay on
 *    one line on mobile; there is enough horizontal space in the first column.
 */
@media (max-width: 720px) {
    .players-container .stats-player-cell,
    .players-container .stats-player-cell a,
    .players-container .stats-player-cell .player-name-lines,
    .players-container .stats-player-cell .player-name-line {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .players-container .stats-player-cell .player-name-lines {
        display: inline;
    }

    .players-container .stats-player-cell .player-name-line {
        display: inline;
        max-width: none;
    }

    .players-container .stats-player-cell .player-name-line + .player-name-line::before {
        content: " ";
    }

    .ui-surface-player .table-container,
    .ui-surface-player .stats-table-container,
    .ui-surface-player .data-validation-table-container,
    .ui-surface-player details > div {
        max-width: 100%;
        overflow-x: hidden;
    }

    .ui-surface-player table {
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
    }

    .ui-surface-player th,
    .ui-surface-player td {
        max-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.18;
    }

    .ui-surface-player input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .ui-surface-player select,
    .ui-surface-player textarea,
    .ui-surface-player button {
        max-width: 100%;
        min-width: 0;
    }

    .test-login-panel {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-top: 0.85rem;
    }

    .test-login-panel form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        width: 100%;
        max-width: 100%;
    }

    .test-login-panel select,
    .test-login-panel button {
        width: 100%;
        max-width: 100%;
    }

    .test-login-panel .warning {
        font-size: 0.86rem;
        line-height: 1.25;
    }
}

@media (max-width: 720px) {
    .admin-page-container .table-container,
    .ui-surface-admin .table-container {
        overflow-x: auto;
    }
}

/* ADDED v2026-05-19.2300 Phase 4 Step 230: direct SQL/data-boundary diagnostics table containment. */
.admin-direct-sql-owner-table th,
.admin-direct-sql-owner-table td,
.admin-direct-sql-candidate-table th,
.admin-direct-sql-candidate-table td {
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}
.admin-direct-sql-owner-table th:nth-child(1),
.admin-direct-sql-owner-table td:nth-child(1),
.admin-direct-sql-owner-table th:nth-child(3),
.admin-direct-sql-owner-table td:nth-child(3),
.admin-direct-sql-owner-table th:nth-child(4),
.admin-direct-sql-owner-table td:nth-child(4),
.admin-direct-sql-candidate-table th:nth-child(1),
.admin-direct-sql-candidate-table td:nth-child(1),
.admin-direct-sql-candidate-table th:nth-child(3),
.admin-direct-sql-candidate-table td:nth-child(3) {
    white-space: nowrap;
    width: 1%;
}
.admin-direct-sql-candidate-table code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/** ADDED v2026-05-19.2310 Phase 4 Step 231
 *  Mobile player/table fit and logout/test-login visibility fixes.
 *
 *  Intent:
 *  - Player-facing mobile tables must keep content inside cell borders.
 *  - The Players page abbreviated name column should keep "First L." on one
 *    line without visually bleeding into the next stat column.
 *  - Admin pages remain desktop-oriented and may scroll horizontally on phones.
 */
@media (max-width: 720px) {
    .ui-surface-player table {
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
    }

    .ui-surface-player th,
    .ui-surface-player td {
        box-sizing: border-box;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
        vertical-align: top;
    }

    .players-container .stats-table th,
    .players-container .stats-table td {
        padding-left: 0.22rem;
        padding-right: 0.22rem;
        font-size: 0.82rem;
        line-height: 1.16;
    }

    .players-container .stats-table th:first-child,
    .players-container .stats-table td.stats-player-cell {
        width: 7.2rem;
        min-width: 7.2rem;
        max-width: 7.2rem;
    }

    .players-container .stats-player-cell,
    .players-container .stats-player-cell a,
    .players-container .stats-player-cell .player-name-lines,
    .players-container .stats-player-cell .player-name-line {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

    .players-container .stats-player-cell .player-name-lines {
        display: inline-flex;
        flex-direction: row;
        gap: 0.18rem;
    }

    .players-container .stats-player-cell .player-name-line + .player-name-line::before {
        content: "";
    }

    .players-container .stats-table th:not(:first-child),
    .players-container .stats-table td:not(.stats-player-cell) {
        width: auto;
        text-align: center;
    }

    .test-login-panel {
        display: block !important;
        visibility: visible !important;
        clear: both;
        width: 100%;
        max-width: 100%;
    }

    .test-login-panel select,
    .test-login-panel button {
        min-width: 0;
        white-space: normal;
    }
}

/** ADDED v2026-05-19.232 Phase 4 Step 232
 *  Responsive player/admin table and logout/login follow-up.
 *  - Player-facing Teams/Players can become wider than the phone viewport when
 *    needed; content must remain inside cell borders and not be clipped.
 *  - Admin pages remain desktop-oriented and may horizontally scroll on mobile.
 */

/* Profile: keep the summary table flush with the profile photo. */
.players-container .profile-summary-table {
    border-collapse: collapse;
    margin-left: 0;
    width: auto;
}

.players-container .profile-summary-table .profile-photo {
    padding-left: 0;
    padding-right: 0.45rem;
    vertical-align: top;
}

.players-container .profile-summary-table td {
    vertical-align: top;
}

/* Test login should be visible/usable on mobile whenever the test deployment gate allows it. */
.login-container .test-login-panel {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

.login-container .test-login-panel form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.login-container .test-login-panel select {
    flex: 1 1 16rem;
    min-width: min(16rem, 100%);
}

.login-container .test-login-panel button {
    flex: 0 0 auto;
}

/* Shared stats table defaults: numeric/stat cells are compact and bounded. */
.stats-context-teams .stats-table,
.stats-context-players .stats-table {
    border-collapse: collapse;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.stats-context-teams .stats-table th,
.stats-context-teams .stats-table td,
.stats-context-players .stats-table th,
.stats-context-players .stats-table td {
    box-sizing: border-box;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    vertical-align: middle;
    word-break: normal;
}

.stats-context-teams .stats-table th:not(.stats-team-cell),
.stats-context-teams .stats-table td:not(.stats-team-cell),
.stats-context-players .stats-table th:not(.stats-player-cell),
.stats-context-players .stats-table td:not(.stats-player-cell) {
    white-space: nowrap;
    width: 1%;
}

.stats-context-teams .stats-table th,
.stats-context-players .stats-table th {
    white-space: nowrap;
}

.stats-context-teams .stats-team-cell,
.stats-context-players .stats-player-cell {
    min-width: 0;
    overflow-wrap: normal;
    white-space: nowrap;
}

.stats-context-teams .team-profile-name-with-icon,
.stats-context-teams .team-player-list,
.stats-context-teams .team-player-line,
.stats-context-players .player-name-lines-public,
.stats-context-players .player-name-line-public {
    white-space: nowrap;
}

.stats-context-players .player-name-lines-public {
    display: inline-block;
}

/* Desktop: Teams/Players favour readable headers and single-line names; advanced stats may extend past parent divs. */
@media screen and (min-width: 769px) {
    .stats-context-teams,
    .stats-context-players {
        max-width: none;
        overflow-x: visible;
    }

    .stats-context-teams .stats-table,
    .stats-context-players .stats-table {
        width: max-content;
        min-width: 100%;
    }

    .stats-context-teams .stats-team-cell {
        min-width: 18rem;
        white-space: nowrap;
    }

    .stats-context-players .stats-player-cell {
        min-width: 9rem;
        white-space: nowrap;
    }

    .stats-context-teams .stats-table th,
    .stats-context-teams .stats-table td,
    .stats-context-players .stats-table th,
    .stats-context-players .stats-table td {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

/* Mobile player-facing Teams: keep names intact, shrink stats, and allow wide tables instead of clipping. */
@media screen and (max-width: 768px) {
    .player-page-container .stats-context-teams {
        max-width: none;
        overflow-x: visible;
    }

    .player-page-container .stats-context-teams .stats-table {
        width: max-content;
        min-width: 100%;
    }

    .player-page-container .stats-context-teams .stats-team-cell {
        min-width: 14rem;
        max-width: none;
        white-space: nowrap;
    }

    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-teams .stats-table td {
        font-size: 0.78rem;
        line-height: 1.1;
        padding-left: 0.16rem;
        padding-right: 0.16rem;
        white-space: nowrap;
    }

    .player-page-container .stats-context-teams .stats-table .stats-team-cell {
        font-size: 0.9rem;
        padding-left: 0.25rem;
        padding-right: 0.35rem;
    }

    .player-page-container .stats-context-players {
        max-width: 100%;
        overflow-x: visible;
    }

    .player-page-container .stats-context-players .stats-table {
        table-layout: fixed;
        width: 100%;
        min-width: 0;
    }

    .player-page-container .stats-context-players .stats-player-cell {
        width: 5.6rem;
        max-width: 5.6rem;
        white-space: nowrap;
    }

    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td {
        font-size: 0.74rem;
        line-height: 1.08;
        padding-left: 0.12rem;
        padding-right: 0.12rem;
        overflow: hidden;
    }

    .player-page-container .stats-context-players .stats-table .stats-player-cell {
        font-size: 0.82rem;
        overflow: visible;
        padding-left: 0.18rem;
        padding-right: 0.18rem;
    }

    .player-page-container .stats-context-players .player-name-lines-public,
    .player-page-container .stats-context-players .player-name-line-public {
        display: inline-block;
        white-space: nowrap;
    }

    .login-container .test-login-panel form,
    .login-container .test-login-panel select,
    .login-container .test-login-panel button {
        width: 100%;
    }
}

/* Very small phones: Teams may be wide; Players stays compact with public First L. labels. */
@media screen and (max-width: 480px) {
    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-teams .stats-table td {
        font-size: 0.72rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .player-page-container .stats-context-teams .stats-table .stats-team-cell {
        font-size: 0.86rem;
        min-width: 13rem;
    }

    .player-page-container .stats-context-players .stats-player-cell {
        width: 5.4rem;
        max-width: 5.4rem;
    }

    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td {
        font-size: 0.68rem;
        padding-left: 0.08rem;
        padding-right: 0.08rem;
    }

    .player-page-container .stats-context-players .stats-table .stats-player-cell {
        font-size: 0.78rem;
    }
}

/** ADDED v2026-05-19.2330 Phase 4 Step 233
 *  Teams/Players responsive table correction and logout follow-up.
 *  - Player-facing stats tables may be wider than mobile viewport when required.
 *  - Cell content must stay inside borders and must not be clipped.
 *  - Teams use one semantic stacked markup structure: desktop displays
 *    Player 1 / Player 2, mobile displays Player 1 over Player 2.
 */

/* Desktop: allow advanced Teams/Players stats to extend beyond the page card, and keep headers readable. */
@media screen and (min-width: 769px) {
    .player-page-container .stats-table-container.stats-context-teams,
    .player-page-container .stats-table-container.stats-context-players {
        max-width: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .player-page-container .stats-context-teams .stats-table,
    .player-page-container .stats-context-players .stats-table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
    }

    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-players .stats-table th {
        white-space: nowrap !important;
        width: max-content;
    }

    .player-page-container .stats-context-teams .team-player-list {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: baseline;
        gap: 0;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line {
        display: inline !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line + .team-player-line::before {
        content: "\00a0/\00a0"; /** CHANGED v2026-05-19.237: keep visible spacing before/after the team-pair slash. */
    }

    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public) {
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 0.22rem;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-line {
        display: inline !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/* Mobile: Teams table can be wider than the viewport; names stay complete and stacked. */
@media screen and (max-width: 768px) {
    .player-page-container .stats-table-container.stats-context-teams,
    .player-page-container .stats-table-container.stats-context-players {
        max-width: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .player-page-container .stats-context-teams .stats-table,
    .player-page-container .stats-context-players .stats-table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        border-collapse: collapse;
    }

    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-teams .stats-table td,
    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td {
        box-sizing: border-box;
        overflow: visible !important;
        text-overflow: clip !important;
        vertical-align: middle;
    }

    .player-page-container .stats-context-teams .stats-table th:not(.stats-team-cell),
    .player-page-container .stats-context-teams .stats-table td:not(.stats-team-cell),
    .player-page-container .stats-context-players .stats-table th:not(.stats-player-cell),
    .player-page-container .stats-context-players .stats-table td:not(.stats-player-cell) {
        width: 1% !important;
        min-width: max-content;
        white-space: nowrap !important;
        padding-left: 0.14rem !important;
        padding-right: 0.14rem !important;
    }

    .player-page-container .stats-context-teams .stats-team-cell {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        padding-left: 0.22rem !important;
        padding-right: 0.35rem !important;
    }

    .player-page-container .stats-context-teams .team-profile-name-with-icon,
    .player-page-container .stats-context-teams .team-player-list {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line {
        display: block !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line + .team-player-line::before {
        content: "" !important;
    }

    .player-page-container .stats-context-players .stats-player-cell {
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        padding-left: 0.18rem !important;
        padding-right: 0.35rem !important;
    }

    .player-page-container .stats-context-players .stats-player-cell,
    .player-page-container .stats-context-players .stats-player-cell a,
    .player-page-container .stats-context-players .player-name-lines,
    .player-page-container .stats-context-players .player-name-line {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Anonymous/public Players: First L. stays on one line and gets a real cell width. */
    .player-page-container .stats-context-players .player-name-lines-public,
    .player-page-container .stats-context-players .player-name-line-public {
        display: inline-block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    /* Logged-in Players: First over Last on mobile, with the table allowed to grow wider. */
    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public) {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 0.02rem;
    }

    .player-page-container .stats-context-players .player-name-line:not(.player-name-line-public) {
        display: block !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/* Login: test-user selector should use the same content on mobile and desktop when the test gate is enabled. */
.login-container .test-login-panel {
    display: block;
    clear: both;
}

@media screen and (max-width: 768px) {
    .login-container .test-login-panel form {
        display: block !important;
    }

    .login-container .test-login-panel select,
    .login-container .test-login-panel button {
        display: block;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        margin-top: 0.35rem;
    }
}


/** ADDED v2026-05-19.2340 Phase 4 Step 234
 *  Targeted mobile Teams/Players spacing polish and login wording update.
 *
 *  Intent:
 *  - Mobile Teams: keep the Team Profile action and first player name on the
 *    same visual line, while preserving Player 1 / Player 2 stacking.
 *  - Mobile Players: keep logged-in names as First over Last, remove excessive
 *    first-column whitespace, and let the table size to its content when needed.
 */
@media (max-width: 720px) {
    .player-page-container .stats-context-teams .stats-team-cell,
    .player-page-container .stats-context-teams .stats-team-cell * {
        white-space: nowrap;
    }

    .player-page-container .stats-context-teams .team-profile-name-with-icon {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.22rem !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-profile-icon-link {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-list {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players {
        max-width: none !important;
        overflow-x: visible !important;
    }

    .player-page-container .stats-context-players .stats-table,
    .players-container .stats-table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        border-collapse: collapse;
    }

    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td,
    .players-container .stats-table th,
    .players-container .stats-table td {
        box-sizing: border-box;
        width: 1% !important;
        max-width: none !important;
        overflow: visible !important;
        padding-left: 0.16rem;
        padding-right: 0.16rem;
        white-space: nowrap;
    }

    .player-page-container .stats-context-players .stats-table th:first-child,
    .player-page-container .stats-context-players .stats-table td.stats-player-cell,
    .players-container .stats-table th:first-child,
    .players-container .stats-table td.stats-player-cell {
        width: max-content !important;
        min-width: 4.5rem !important;
        max-width: none !important;
        padding-left: 0.2rem !important;
        padding-right: 0.28rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .stats-player-cell,
    .player-page-container .stats-context-players .stats-player-cell a,
    .player-page-container .stats-context-players .stats-player-cell .player-name-lines,
    .players-container .stats-player-cell,
    .players-container .stats-player-cell a,
    .players-container .stats-player-cell .player-name-lines {
        display: inline-flex !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public),
    .players-container .stats-player-cell .player-name-lines:not(.player-name-lines-public) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .player-page-container .stats-context-players .player-name-line:not(.player-name-line-public),
    .players-container .stats-player-cell .player-name-line:not(.player-name-line-public) {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before,
    .players-container .stats-player-cell .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/** ADDED v2026-05-19.2350 Phase 4 Step 235
 *  Mobile Players table width correction and desktop/mobile logout follow-up.
 *
 *  Intent:
 *  - Mobile Players should fill the visible parent width when the basic table is
 *    narrow, but advanced stats may still extend beyond the parent/page.
 *  - Logged-in mobile names remain First over Last, with a real first-column
 *    width so the name column aligns cleanly with the adjacent stats column.
 *  - Anonymous First L. labels stay on one line and never spill into stat cells.
 */
@media screen and (max-width: 768px) {
    .player-page-container .stats-table-container.stats-context-players,
    .players-container .stats-table-container.stats-context-players {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .player-page-container .stats-context-players .stats-table,
    .players-container .stats-table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        border-collapse: collapse !important;
    }

    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td,
    .players-container .stats-table th,
    .players-container .stats-table td {
        box-sizing: border-box !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .stats-table th:first-child,
    .player-page-container .stats-context-players .stats-table td.stats-player-cell,
    .players-container .stats-table th:first-child,
    .players-container .stats-table td.stats-player-cell {
        width: 6.75rem !important;
        min-width: 6.75rem !important;
        max-width: none !important;
        padding-left: 0.24rem !important;
        padding-right: 0.34rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .player-page-container .stats-context-players .stats-table th:not(:first-child),
    .player-page-container .stats-context-players .stats-table td:not(.stats-player-cell),
    .players-container .stats-table th:not(:first-child),
    .players-container .stats-table td:not(.stats-player-cell) {
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
        padding-left: 0.14rem !important;
        padding-right: 0.14rem !important;
        text-align: center;
    }

    .player-page-container .stats-context-players .stats-player-cell,
    .player-page-container .stats-context-players .stats-player-cell a,
    .players-container .stats-player-cell,
    .players-container .stats-player-cell a {
        display: table-cell !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .player-page-container .stats-context-players .stats-player-cell a,
    .players-container .stats-player-cell a {
        display: inline-block !important;
        max-width: none !important;
    }

    .player-page-container .stats-context-players .player-name-lines-public,
    .player-page-container .stats-context-players .player-name-line-public,
    .players-container .stats-player-cell .player-name-lines-public,
    .players-container .stats-player-cell .player-name-line-public {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public),
    .players-container .stats-player-cell .player-name-lines:not(.player-name-lines-public) {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .player-page-container .stats-context-players .player-name-line:not(.player-name-line-public),
    .players-container .stats-player-cell .player-name-line:not(.player-name-line-public) {
        display: block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before,
    .players-container .stats-player-cell .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/* ADDED v2026-05-19.237: sitewide team-pair separator spacing.
   Use a non-collapsing leading space so inline team names render as
   "Player 1 / Player 2" instead of visually tightening to "Player 1/ Player 2". */
.team-pair-separator {
    white-space: nowrap;
}

/** ADDED v2026-05-19.238 Phase 4 Step 238
 * Matches / Players / Teams responsive display contract.
 *
 * Purpose:
 * - Make logged-in and logged-out name rules explicit and consistent.
 * - Keep player-facing mobile views compact without clipping names.
 * - Allow advanced stats to extend wider than the parent when necessary.
 * - Keep desktop player-facing stats readable with non-wrapping headers.
 *
 * Name rules:
 * - Teams desktop: Player 1 / Player 2.
 * - Teams mobile: Team Profile icon + Player 1 on the first line, Player 2 below.
 * - Players desktop logged in: First Last.
 * - Players mobile logged in: First over Last.
 * - Players logged out/public: First L. on one line on desktop and mobile.
 * - Matches: each match shows Team 1 and Team 2 on separate match rows/lines;
 *   team-member formatting follows the shared team-link helper.
 */

/* Shared stats tables: stat columns are content-sized; name columns own their content. */
.player-page-container .stats-table-container.stats-context-teams,
.player-page-container .stats-table-container.stats-context-players {
    box-sizing: border-box;
    max-width: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.player-page-container .stats-context-teams .stats-table,
.player-page-container .stats-context-players .stats-table {
    border-collapse: collapse !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

.player-page-container .stats-context-teams .stats-table th,
.player-page-container .stats-context-teams .stats-table td,
.player-page-container .stats-context-players .stats-table th,
.player-page-container .stats-context-players .stats-table td {
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    vertical-align: middle !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.player-page-container .stats-context-teams .stats-table th:not(.stats-team-cell),
.player-page-container .stats-context-teams .stats-table td:not(.stats-team-cell),
.player-page-container .stats-context-players .stats-table th:not(.stats-player-cell),
.player-page-container .stats-context-players .stats-table td:not(.stats-player-cell) {
    width: 1% !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: center;
}

.player-page-container .stats-context-teams .stats-table th,
.player-page-container .stats-context-players .stats-table th {
    white-space: nowrap !important;
}

/* Desktop player-facing Teams/Players: readability first; advanced stats may extend past the parent div. */
@media screen and (min-width: 769px) {
    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-teams .stats-table td,
    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td {
        font-size: 0.94rem !important;
        line-height: 1.16 !important;
        padding-left: 0.34rem !important;
        padding-right: 0.34rem !important;
    }

    .player-page-container .stats-context-teams .stats-team-cell {
        min-width: 18rem !important;
        width: max-content !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .stats-player-cell {
        min-width: 9rem !important;
        width: max-content !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-profile-name-with-icon {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 0.22rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-list {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line {
        display: inline !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line + .team-player-line::before {
        content: "\00a0/\00a0" !important;
    }

    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public) {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 0.22rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-line {
        display: inline !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/* Mobile player-facing Teams/Players: compact columns, complete names, no clipping. */
@media screen and (max-width: 768px) {
    .player-page-container .stats-context-teams .stats-table th,
    .player-page-container .stats-context-teams .stats-table td,
    .player-page-container .stats-context-players .stats-table th,
    .player-page-container .stats-context-players .stats-table td {
        font-size: 0.76rem !important;
        line-height: 1.08 !important;
        padding-left: 0.12rem !important;
        padding-right: 0.12rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .stats-team-cell {
        min-width: max-content !important;
        width: max-content !important;
        max-width: none !important;
        padding-left: 0.18rem !important;
        padding-right: 0.32rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-profile-name-with-icon {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 0.22rem !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-profile-icon-link {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-list {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-teams .team-player-line + .team-player-line::before {
        content: "" !important;
    }

    .player-page-container .stats-context-players .stats-player-cell {
        min-width: 6.75rem !important;
        width: 6.75rem !important;
        max-width: none !important;
        padding-left: 0.2rem !important;
        padding-right: 0.35rem !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .stats-player-cell,
    .player-page-container .stats-context-players .stats-player-cell a,
    .player-page-container .stats-context-players .player-name-lines,
    .player-page-container .stats-context-players .player-name-line {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .player-page-container .stats-context-players .player-name-lines-public,
    .player-page-container .stats-context-players .player-name-line-public {
        display: inline-block !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-lines:not(.player-name-lines-public) {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }

    .player-page-container .stats-context-players .player-name-line:not(.player-name-line-public) {
        display: block !important;
    }

    .player-page-container .stats-context-players .player-name-line + .player-name-line::before {
        content: "" !important;
    }
}

/* Matches layout: score/game columns are compact; team names are readable on both auth states. */
.matches-table.match-layout-table,
.matches-table {
    border-collapse: collapse;
    table-layout: auto;
    min-width: 100%;
    max-width: none;
}

.matches-table .matches-table-game,
.matches-table td.align-middle:not(.matches-table-team-cell) {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.matches-table .matches-table-team,
.matches-table .matches-table-team-cell {
    width: auto;
    min-width: 12rem;
    white-space: normal;
}

.matches-table .matches-team-profile-line,
.matches-table .matches-team-display,
.matches-table .team-profile-name-with-icon {
    max-width: none;
    overflow: visible;
}

.matches-table .input-score {
    box-sizing: border-box;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .matches-table.match-layout-table,
    .matches-table {
        width: max-content;
        min-width: 100%;
    }

    .matches-table th,
    .matches-table td {
        font-size: 0.82rem;
        line-height: 1.12;
        padding-left: 0.14rem;
        padding-right: 0.14rem;
    }

    .matches-table .matches-table-team,
    .matches-table .matches-table-team-cell {
        min-width: 11rem;
        white-space: normal;
    }
}

/* ADDED v2026-05-19.2390 Phase 4 Step 239: Matches/Players/Teams diagnostics table containment. */
.admin-mpt-layout-rules-table th,
.admin-mpt-overflow-table th {
  white-space: nowrap;
}
.admin-mpt-layout-rules-table td,
.admin-mpt-overflow-table td {
  vertical-align: top;
}
.admin-mpt-layout-rules-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}


/** ADDED Phase 4 Step 240: targeted dashboard/admin table containment and feedback/client-onboarding layout fixes. */
.stats-details:not([open]) {
    margin-bottom: 0.6rem;
}

.admin-dashboard-container {
    scroll-padding-top: 12rem;
}

.admin-dashboard-container details.dashboard-exclusive-details,
.admin-dashboard-container details.dashboard-readiness-subsection,
.admin-dashboard-container details.data-validation-check {
    scroll-margin-top: 12rem;
}

.ui-surface-admin .admin-dashboard-table,
.ui-surface-admin .admin-table,
.ui-surface-admin .admin-feedback-table,
.ui-surface-admin .admin-client-onboarding-form,
.ui-surface-admin .admin-client-onboarding-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.ui-surface-admin .admin-dashboard-table th,
.ui-surface-admin .admin-table th,
.ui-surface-admin .admin-feedback-table th,
.ui-surface-admin .admin-client-onboarding-form th,
.ui-surface-admin .admin-client-onboarding-table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: top;
}

.ui-surface-admin .admin-dashboard-table td,
.ui-surface-admin .admin-table td,
.ui-surface-admin .admin-feedback-table td,
.ui-surface-admin .admin-client-onboarding-form td,
.ui-surface-admin .admin-client-onboarding-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.ui-surface-admin .admin-dashboard-table td *,
.ui-surface-admin .admin-table td *,
.ui-surface-admin .admin-feedback-table td * {
    max-width: 100%;
}

.admin-client-onboarding-form th {
    width: 12rem;
    text-align: left;
}

.admin-client-onboarding-form td {
    width: auto;
}

.admin-client-onboarding-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-client-onboarding-form select,
.admin-client-onboarding-form textarea,
.admin-feedback-table textarea,
.admin-feedback-table button {
    max-width: 100%;
    box-sizing: border-box;
}

.admin-feedback-table th:nth-child(1),
.admin-feedback-table td:nth-child(1) { width: 3.5rem; }
.admin-feedback-table th:nth-child(2),
.admin-feedback-table td:nth-child(2) { width: 9.5rem; }
.admin-feedback-table th:nth-child(3),
.admin-feedback-table td:nth-child(3) { width: 8rem; }
.admin-feedback-table th:nth-child(4),
.admin-feedback-table td:nth-child(4) { width: 7rem; }
.admin-feedback-table th:nth-child(5),
.admin-feedback-table td:nth-child(5) { width: 4.5rem; }
.admin-feedback-table th:nth-child(6),
.admin-feedback-table td:nth-child(6) { width: 8rem; }
.admin-feedback-table th:nth-child(7),
.admin-feedback-table td:nth-child(7) { width: auto; }
.admin-feedback-table th:nth-child(8),
.admin-feedback-table td:nth-child(8) { width: 6.5rem; }
.admin-feedback-table th:nth-child(9),
.admin-feedback-table td:nth-child(9) { width: 10rem; }

.admin-feedback-completed-details {
    margin-top: 0.85rem;
}

@media (max-width: 980px) {
    .ui-surface-admin .admin-dashboard-table,
    .ui-surface-admin .admin-table,
    .ui-surface-admin .admin-feedback-table,
    .ui-surface-admin .admin-client-onboarding-form,
    .ui-surface-admin .admin-client-onboarding-table {
        min-width: 760px;
    }

    .ui-surface-admin .table-container,
    .admin-feedback-table-container {
        overflow-x: auto;
    }
}


/** ADDED v2026-05-19.2410 Phase 4 Step 241: sitewide table formatting contract.
 * Goals:
 * - Table contents must not visually spill into adjacent cells.
 * - Header text may wrap only at word boundaries; no letter-by-letter header wrapping.
 * - Tables should fill their parent when narrow, but may be wider than the parent when required.
 * - Cell sizing should prefer content-based auto layout so columns shrink/grow from their real contents.
 * - Admin tables may scroll horizontally on narrow screens; player-facing stat tables may extend when needed.
 */
.table-container,
.admin-table-container,
.stats-table-container,
.admin-feedback-table-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Default surface: content-based sizing, at least parent width, wider only when required. */
.ui-surface-admin table,
.ui-surface-player table,
.matches-table,
.stats-table,
.admin-dashboard-table,
.admin-table,
.admin-feedback-table,
.admin-client-onboarding-form,
.admin-client-onboarding-table {
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

/* Headers can wrap at spaces, but never by individual letters. */
.ui-surface-admin table th,
.ui-surface-player table th,
.matches-table th,
.stats-table th,
.admin-dashboard-table th,
.admin-table th,
.admin-feedback-table th,
.admin-client-onboarding-form th,
.admin-client-onboarding-table th {
    box-sizing: border-box;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-overflow: clip !important;
    vertical-align: top;
}

/* Data cells must contain their own content. Normal text wraps at words; long tokens may break only as a fallback. */
.ui-surface-admin table td,
.ui-surface-player table td,
.matches-table td,
.stats-table td,
.admin-dashboard-table td,
.admin-table td,
.admin-feedback-table td,
.admin-client-onboarding-form td,
.admin-client-onboarding-table td {
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
    vertical-align: top;
}

/* Unbroken technical values must still remain inside their cell instead of overlaying neighbours. */
.ui-surface-admin table td code,
.ui-surface-admin table td pre,
.ui-surface-admin table td a,
.ui-surface-player table td code,
.ui-surface-player table td pre,
.ui-surface-player table td a,
.admin-dashboard-table td code,
.admin-dashboard-table td pre,
.admin-dashboard-table td a,
.admin-table td code,
.admin-table td pre,
.admin-table td a,
.admin-feedback-table td code,
.admin-feedback-table td pre,
.admin-feedback-table td a {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Forms and action controls should not force cells wider than needed. */
.ui-surface-admin table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-surface-admin table select,
.ui-surface-admin table textarea,
.ui-surface-admin table button,
.ui-surface-player table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-surface-player table select,
.ui-surface-player table textarea,
.ui-surface-player table button {
    box-sizing: border-box;
    max-width: 100%;
}

/* Admin surfaces are desktop-first: keep all data accessible and scroll horizontally on narrow screens. */
.ui-surface-admin .table-container,
.ui-surface-admin .admin-table-container,
.ui-surface-admin .admin-feedback-table-container {
    overflow-x: auto;
    overflow-y: visible;
}

/* Player stat surfaces keep compact stat columns while names/teams remain readable. */
.player-page-container .stats-table-container {
    overflow-x: visible;
    overflow-y: visible;
}
.player-page-container .stats-context-teams .stats-table th:not(.stats-team-cell),
.player-page-container .stats-context-teams .stats-table td:not(.stats-team-cell),
.player-page-container .stats-context-players .stats-table th:not(.stats-player-cell),
.player-page-container .stats-context-players .stats-table td:not(.stats-player-cell),
.matches-table .matches-table-game,
.matches-table td.align-middle:not(.matches-table-team-cell) {
    width: 1% !important;
    min-width: max-content;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Name/team identity cells are allowed to be wider, but not to overlap neighbours. */
.player-page-container .stats-team-cell,
.player-page-container .stats-player-cell,
.matches-table .matches-table-team,
.matches-table .matches-table-team-cell {
    width: auto !important;
    min-width: max-content;
    max-width: none !important;
    overflow: visible;
    text-overflow: clip;
}

/* Preserve explicit name/team display contracts while inheriting table containment. */
.player-page-container .stats-context-players .player-name-lines-public,
.player-page-container .stats-context-players .player-name-line-public,
.player-page-container .stats-context-teams .team-player-line,
.player-page-container .stats-context-teams .team-player-list,
.player-page-container .team-pair-separator {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

@media screen and (max-width: 768px) {
    .ui-surface-admin .table-container,
    .ui-surface-admin .admin-table-container,
    .ui-surface-admin .admin-feedback-table-container {
        overflow-x: auto;
    }

    .ui-surface-player .table-container,
    .ui-surface-player .stats-table-container {
        overflow-x: visible;
        max-width: 100%;
    }
}

/* STEP259: Admin multilevel navigation replaces grouped card-style admin nav. */
.admin-subnav-multilevel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 1rem 0;
  padding: 0;
  overflow: visible;
}

.admin-subnav-top-row,
.admin-subnav-child-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
}

.admin-subnav-top-row {
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--color-table-border);
  border-radius: 0.75rem;
  background: var(--color-background);
}

.admin-subnav-child-row {
  padding: 0.35rem 0.45rem 0.45rem;
  border: 1px solid var(--color-table-border);
  border-radius: 0.75rem;
  background: var(--color-background-alt, var(--color-background));
}

.admin-subnav-top-link,
.admin-subnav-multilevel .admin-subnav-link {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0.35rem 0.42rem;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-subnav-top-link::after,
.admin-subnav-multilevel .admin-subnav-link::after {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.14rem;
  height: 3px;
  background: var(--color-transparent);
  content: '';
}

.admin-subnav-top-link:hover::after,
.admin-subnav-top-link-active::after,
.admin-subnav-multilevel .admin-subnav-link:hover::after,
.admin-subnav-multilevel .admin-subnav-link-active::after {
  background: var(--color-accent);
}

.admin-subnav-top-link-active,
.admin-subnav-multilevel .admin-subnav-link-active {
  color: var(--color-primary);
}


/* STEP260: Final admin navigation, diagnostics, and table consistency contract. */
.admin-subnav-multilevel {
  margin-bottom: 1rem;
}

.admin-subnav-top-row {
  gap: 0.5rem;
}

.admin-subnav-top-link,
.admin-subnav-multilevel .admin-subnav-link {
  border-radius: 0.55rem;
  line-height: 1.2;
}

.admin-subnav-top-link-active,
.admin-subnav-multilevel .admin-subnav-link-active {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-transparent));
}

.admin-diagnostics-container .admin-diagnostics-group {
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid var(--color-table-border);
  border-radius: 0.9rem;
  background: var(--color-card-bg, var(--color-background));
}

.admin-diagnostics-container .admin-diagnostics-group > h3 {
  margin-top: 0;
}

.admin-dashboard-diagnostics-pointer {
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: 0.9rem;
}

/* Admin tables: desktop-first, content-safe, consistent status colouring. */
.admin-page-container table,
.ui-surface-admin table,
.admin-dashboard-container table,
.admin-diagnostics-container table,
.admin-table-container table,
.admin-dashboard-table,
.admin-diagnostic-table,
.readiness-check-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
  border-collapse: collapse;
}

.admin-page-container .table-container,
.ui-surface-admin .table-container,
.admin-dashboard-container .table-container,
.admin-diagnostics-container .table-container,
.admin-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.admin-page-container th,
.ui-surface-admin th,
.admin-dashboard-container th,
.admin-diagnostics-container th,
.admin-dashboard-table th,
.admin-diagnostic-table th,
.readiness-check-table th {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  vertical-align: top;
}

.admin-page-container td,
.ui-surface-admin td,
.admin-dashboard-container td,
.admin-diagnostics-container td,
.admin-dashboard-table td,
.admin-diagnostic-table td,
.readiness-check-table td {
  max-width: 34rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  vertical-align: top;
}

.admin-page-container td.center,
.ui-surface-admin td.center,
.admin-dashboard-container td.center,
.admin-diagnostics-container td.center,
.admin-dashboard-table td.center,
.admin-diagnostic-table td.center,
.readiness-check-table td.center,
.admin-page-container td.num,
.ui-surface-admin td.num {
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
}

.admin-page-container td code,
.ui-surface-admin td code,
.admin-dashboard-container td code,
.admin-diagnostics-container td code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dashboard-status-blocked,
.dashboard-status-error,
.admin-table-row-error,
.admin-table-row-blocked {
  background: var(--color-status-error-bg, var(--css-color-fdecea));
  border-left: 4px solid var(--color-status-error, var(--css-color-b42318));
}

.dashboard-status-warning,
.admin-table-row-warning {
  background: var(--color-status-warning-bg, var(--css-color-fff8db));
  border-left: 4px solid var(--color-status-warning, var(--css-color-b7791f));
}

.dashboard-status-ok,
.dashboard-status-info,
..dashboard-status-disabled,
.admin-table-row-info,
.admin-table-row-ok {
  background: var(--color-status-info-bg, var(--css-color-eef7ff));
  border-left: 4px solid var(--color-status-info, var(--css-color-2563eb));
}

.dashboard-status-blocked td:first-child,
.dashboard-status-error td:first-child,
.dashboard-status-warning td:first-child,
.dashboard-status-ok td:first-child,
.dashboard-status-info td:first-child,
.dashboard-status-disabled td:first-child {
  font-weight: 700;
}

.admin-status-badge,
.status-pill {
  white-space: nowrap;
}

/* Admin is available on mobile for emergencies, but the UX is intentionally desktop-first. */
@media (max-width: 760px) {
  .ui-surface-admin::before,
  .admin-page-container::before,
  .admin-dashboard-container::before,
  .admin-diagnostics-container::before {
    display: block;
    margin: 0 0 0.75rem 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-table-border);
    border-radius: 0.7rem;
    background: var(--color-status-info-bg, var(--css-color-eef7ff));
    color: var(--color-text, var(--css-color-222));
    font-size: 0.9rem;
    content: 'Admin tools are optimized for desktop screens. Mobile access is available for quick checks, but wide tables may scroll horizontally.';
  }
}


/* Phase 4 Step 4142: Sitewide SweetAlert body/html text sizing.
   Sets default SweetAlert message text to 1.1rem without changing titles, buttons,
   changelog-specific layout rules, or alert width/overflow hardening. */
.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content {
    font-size: 1.1rem !important;
}

/* STEP261: Database refresh error display and SweetAlert width hardening. */
.swal2-popup.app-swal-wide {
    max-width: calc(100vw - 2rem) !important;
}
.swal2-popup.app-swal-wide .swal2-html-container,
.swal2-popup.app-swal-wide .swal2-content,
.swal2-popup.app-swal-wide .swal2-title {
    overflow-wrap: anywhere;
    word-break: normal;
}
.database-tools-table-container code,
.database-tools-error-list,
.database-tools-error-list li {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
}


/* ADDED v2026-05-19 Phase 4 Step 266: restore current/modern login presentation after refresh recovery work. */
.login-modern-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0.85rem auto;
    max-width: min(100%, 680px);
    width: 100%;
}

.login-modern-card {
    background: var(--color-section-bg, var(--color-white));
    border: 1px solid var(--color-border, var(--css-color-d8d8d8));
    border-radius: var(--radius-section, 12px);
    box-shadow: 0 2px 10px var(--css-color-rgba-0-0-0-0-06);
    box-sizing: border-box;
    padding: clamp(0.95rem, 2vw, 1.35rem);
    width: 100%;
}

.login-modern-title {
    margin: 0 0 0.3rem 0;
    text-align: center;
}

.login-modern-subtitle {
    color: var(--color-muted-text, var(--css-color-555));
    font-size: 0.95rem;
    line-height: 1.35;
    margin: 0 0 1rem 0;
    text-align: center;
}

.login-modern-card .login-field,
.login-modern-card .login-largetext,
.login-modern-card select,
.login-modern-card button {
    max-width: 100%;
}

.login-modern-card .login-actions button,
.login-modern-card .external-auth-buttons button,
.login-modern-card .login-biometric-button {
    white-space: normal;
}

.login-test-shell {
    margin-top: 0;
}

.login-test-card {
    border-left: 5px solid var(--color-warning, var(--css-color-d99a00));
}

.login-test-card form {
    align-items: stretch;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.login-test-card select {
    min-width: 0;
    width: 100%;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .login-modern-shell {
        max-width: 100%;
    }

    .login-modern-card {
        border-radius: 10px;
        padding: 0.9rem;
    }

    .login-modern-card .login-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .login-modern-card .login-actions button,
    .login-modern-card .login-biometric-button,
    .login-modern-card .external-auth-buttons button {
        margin-left: 0;
        width: 100%;
    }

    .login-test-card form {
        grid-template-columns: 1fr;
    }
}


/* ADDED v2026-05-19 Phase 4 Step 268: force current login presentation across every login branch. */
.login-modern-page-v268 {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 760px;
    width: 100%;
}
.login-modern-page-v268 .login-modern-shell {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0.85rem auto;
    max-width: 100%;
    width: 100%;
}
.login-modern-page-v268 .login-modern-card,
.login-modern-page-v268 .divborder {
    background: var(--color-section-bg, var(--color-white));
    border: 1px solid var(--color-border, var(--css-color-d8d8d8));
    border-radius: 14px;
    box-shadow: 0 2px 12px var(--css-color-rgba-0-0-0-0-07);
    box-sizing: border-box;
    margin: 0.85rem auto;
    max-width: 680px;
    padding: clamp(1rem, 2vw, 1.4rem);
    width: 100%;
}
.login-modern-page-v268 .login-modern-title,
.login-modern-page-v268 h3 {
    margin-top: 0;
    text-align: center;
}
.login-modern-page-v268 .login-modern-subtitle {
    color: var(--color-muted-text, var(--css-color-555));
    line-height: 1.35;
    text-align: center;
}
.login-modern-page-v268 .login-actions {
    align-items: stretch;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.login-modern-page-v268 .login-actions button,
.login-modern-page-v268 .external-auth-buttons button,
.login-modern-page-v268 .login-biometric-button {
    white-space: normal;
    width: 100%;
}
.login-modern-page-v268 input,
.login-modern-page-v268 select,
.login-modern-page-v268 textarea,
.login-modern-page-v268 button {
    box-sizing: border-box;
    max-width: 100%;
}
.login-modern-page-v268 table {
    width: 100%;
}
.login-modern-page-v268 table th {
    white-space: nowrap;
    width: 1%;
}
.login-modern-page-v268 .login-test-card {
    border-left: 5px solid var(--color-warning, var(--css-color-d99a00));
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .login-modern-page-v268 {
        max-width: 100%;
    }
    .login-modern-page-v268 .login-modern-card,
    .login-modern-page-v268 .divborder {
        max-width: 100%;
    }
    .login-modern-page-v268 .login-actions {
        grid-template-columns: 1fr;
    }
}

/* ADDED v2026-05-19.2710: Database refresh scope selection. */
.database-refresh-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0 1rem 0;
}
.database-refresh-scope-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color, var(--css-color-d7d7d7));
  border-radius: 0.75rem;
  background: var(--panel-bg, var(--color-white));
}
.database-refresh-scope-option input[type="radio"] {
  margin-top: 0.15rem;
}
.database-refresh-scope-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ADDED v2026-05-19.2730 Phase 4 Step 273: authoritative admin table layout contract.
 * Admin tables are desktop-first and must remain readable across all admin pages:
 * - headers may wrap at word breaks but never letter-by-letter;
 * - body text stays inside its cell and may wrap long values;
 * - tables fill the parent container when possible;
 * - tables may extend past the parent container when content requires it;
 * - column sizing uses content-based auto layout rather than forced equal widths.
 */
.admin-page-container .table-container,
.admin-page-container .admin-table-container,
.admin-page-container .admin-feedback-table-container,
.admin-page-container .database-tools-table-container,
.admin-page-container .diagnostics-table-container,
.admin-page-container .readiness-table-container,
.admin-dashboard-container .table-container,
.admin-dashboard-container .admin-table-container,
.admin-diagnostics-container .table-container,
.admin-diagnostics-container .admin-table-container,
.ui-surface-admin .table-container,
.ui-surface-admin .admin-table-container,
.ui-surface-admin .admin-feedback-table-container,
.ui-surface-admin .database-tools-table-container,
.ui-surface-admin .diagnostics-table-container,
.ui-surface-admin .readiness-table-container {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.admin-page-container table,
.admin-dashboard-container table,
.admin-diagnostics-container table,
.ui-surface-admin table,
.admin-dashboard-table,
.admin-diagnostic-table,
.admin-table,
.admin-feedback-table,
.admin-client-onboarding-table,
.admin-client-onboarding-form,
.database-tools-table,
.readiness-check-table {
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

.admin-page-container table th,
.admin-dashboard-container table th,
.admin-diagnostics-container table th,
.ui-surface-admin table th,
.admin-dashboard-table th,
.admin-diagnostic-table th,
.admin-table th,
.admin-feedback-table th,
.admin-client-onboarding-table th,
.admin-client-onboarding-form th,
.database-tools-table th,
.readiness-check-table th {
    box-sizing: border-box !important;
    max-width: 18rem !important;
    min-width: max-content;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-overflow: clip !important;
    vertical-align: top !important;
}

.admin-page-container table td,
.admin-dashboard-container table td,
.admin-diagnostics-container table td,
.ui-surface-admin table td,
.admin-dashboard-table td,
.admin-diagnostic-table td,
.admin-table td,
.admin-feedback-table td,
.admin-client-onboarding-table td,
.admin-client-onboarding-form td,
.database-tools-table td,
.readiness-check-table td {
    box-sizing: border-box !important;
    max-width: 34rem !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    text-overflow: clip !important;
    vertical-align: top !important;
}

.admin-page-container table td code,
.admin-page-container table td pre,
.admin-page-container table td samp,
.admin-page-container table td a,
.admin-dashboard-container table td code,
.admin-dashboard-container table td pre,
.admin-dashboard-container table td samp,
.admin-dashboard-container table td a,
.admin-diagnostics-container table td code,
.admin-diagnostics-container table td pre,
.admin-diagnostics-container table td samp,
.admin-diagnostics-container table td a,
.ui-surface-admin table td code,
.ui-surface-admin table td pre,
.ui-surface-admin table td samp,
.ui-surface-admin table td a {
    box-sizing: border-box !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: none !important;
}

.admin-page-container table th code,
.admin-page-container table th pre,
.admin-dashboard-container table th code,
.admin-dashboard-container table th pre,
.admin-diagnostics-container table th code,
.admin-diagnostics-container table th pre,
.ui-surface-admin table th code,
.ui-surface-admin table th pre {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.admin-page-container table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-page-container table select,
.admin-page-container table textarea,
.admin-page-container table button,
.admin-dashboard-container table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-dashboard-container table select,
.admin-dashboard-container table textarea,
.admin-dashboard-container table button,
.admin-diagnostics-container table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.admin-diagnostics-container table select,
.admin-diagnostics-container table textarea,
.admin-diagnostics-container table button,
.ui-surface-admin table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ui-surface-admin table select,
.ui-surface-admin table textarea,
.ui-surface-admin table button {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.admin-page-container table .nowrap,
.admin-dashboard-container table .nowrap,
.admin-diagnostics-container table .nowrap,
.ui-surface-admin table .nowrap,
.admin-page-container table .status-pill,
.admin-dashboard-container table .status-pill,
.admin-diagnostics-container table .status-pill,
.ui-surface-admin table .status-pill,
.admin-page-container table .admin-status-badge,
.admin-dashboard-container table .admin-status-badge,
.admin-diagnostics-container table .admin-status-badge,
.ui-surface-admin table .admin-status-badge {
    white-space: nowrap !important;
}


/* ADDED STEP275: admin-wide severity ordering/table consistency final layer. */
.admin-page-container details.admin-section,
.admin-page-container details.admin-health-details,
.admin-page-container details.dashboard-exclusive-details {
    scroll-margin-top: 7.5rem;
}
.admin-page-container table,
.admin-dashboard-container table,
.admin-diagnostics-container table,
.admin-development-container table {
    width: max(100%, max-content);
    max-width: none;
    table-layout: auto;
    border-collapse: collapse;
}
.admin-page-container th,
.admin-dashboard-container th,
.admin-diagnostics-container th,
.admin-development-container th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    vertical-align: top;
}
.admin-page-container td,
.admin-dashboard-container td,
.admin-diagnostics-container td,
.admin-development-container td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}
.admin-page-container .table-container,
.admin-dashboard-container .table-container,
.admin-diagnostics-container .table-container,
.admin-development-container .table-container,
.admin-table-container {
    overflow-x: auto;
    max-width: 100%;
}
.admin-page-container tr.dashboard-status-blocked,
.admin-page-container tr.dashboard-status-error,
.admin-dashboard-container tr.dashboard-status-blocked,
.admin-dashboard-container tr.dashboard-status-error,
.admin-diagnostics-container tr.dashboard-status-blocked,
.admin-diagnostics-container tr.dashboard-status-error,
.admin-development-container tr.dashboard-status-blocked,
.admin-development-container tr.dashboard-status-error {
    background: var(--status-error-bg, var(--css-color-fde8e8));
}
.admin-page-container tr.dashboard-status-warning,
.admin-dashboard-container tr.dashboard-status-warning,
.admin-diagnostics-container tr.dashboard-status-warning,
.admin-development-container tr.dashboard-status-warning {
    background: var(--status-warning-bg, var(--css-color-fff7d6));
}
.admin-page-container tr.dashboard-status-ok,
.admin-page-container tr.dashboard-status-info,
.admin-dashboard-container tr.dashboard-status-ok,
.admin-dashboard-container tr.dashboard-status-info,
.admin-diagnostics-container tr.dashboard-status-ok,
.admin-diagnostics-container tr.dashboard-status-info,
.admin-development-container tr.dashboard-status-ok,
.admin-development-container tr.dashboard-status-info {
    background: var(--status-ok-bg, var(--css-color-eef8ee));
}
.admin-card-grid.admin-dashboard-card-grid {
    align-items: stretch;
}


/* ADDED STEP277 admin layout consistency guard */
.admin-page-container .admin-health-details, .admin-page-container details.admin-health-details { border-radius: 12px; margin: 0.75rem 0; }
.admin-page-container summary { cursor: pointer; }


/* ADDED STEP281 admin table contract enforcement */
.admin-page-container table th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.admin-page-container table td { overflow-wrap: anywhere; word-break: normal; }
.admin-page-container .admin-table-scroll { overflow-x: auto; max-width: 100%; }

/* Phase 4 Step 291: Admin table violation scanner markers. */
.admin-table-violation { outline: 2px solid var(--color-warning-border, var(--css-color-c77)); }

/* ADDED STEP337: Database Tools SQL previews for dry-run migration output. */
.database-tools-sql-preview {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    padding: 0.75rem;
    border: 1px solid var(--border-color, var(--css-color-ccc));
    border-radius: 0.5rem;
}

/* STEP347: Development / Testing submenu section labels. */
.admin-subnav-child-row-grouped {
  align-items: center;
}

.admin-subnav-section-label {
  display: inline-flex;
  align-items: center;
  margin: 0.15rem 0.15rem 0.15rem 0.35rem;
  padding: 0.22rem 0.45rem;
  border-radius: 0.55rem;
  background: var(--color-table-header-bg, var(--color-background));
  color: var(--color-text-muted, var(--color-text));
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ADDED v2026-05-20.387: Admin-wide section and table formatting contract.
   Applies after older admin/table rules so all admin workspaces share the same
   health-summary highlighting and overflow-safe table behavior. */
.admin-page-container details.admin-section-outline-error > summary,
.admin-page-container details.dashboard-status-blocked > summary,
.admin-page-container details.dashboard-status-error > summary,
.admin-dashboard-container details.admin-section-outline-error > summary,
.admin-dashboard-container details.dashboard-status-blocked > summary,
.admin-dashboard-container details.dashboard-status-error > summary,
.admin-diagnostics-container details.admin-section-outline-error > summary,
.admin-diagnostics-container details.dashboard-status-blocked > summary,
.admin-diagnostics-container details.dashboard-status-error > summary,
.admin-development-container details.admin-section-outline-error > summary,
.admin-development-container details.dashboard-status-blocked > summary,
.admin-development-container details.dashboard-status-error > summary,
.diagnostics-container details.admin-section-outline-error > summary,
.approvals-container details.admin-section-outline-error > summary {
    background: var(--color-message-error);
    border: 1px solid var(--color-message-error);
    border-radius: 0.55rem;
    color: var(--color-text-on-accent, var(--color-white));
    margin: 0 0 0.5rem 0;
    padding: 0.45rem 0.65rem;
}

.admin-page-container details.admin-section-outline-warning > summary,
.admin-page-container details.dashboard-status-warning > summary,
.admin-dashboard-container details.admin-section-outline-warning > summary,
.admin-dashboard-container details.dashboard-status-warning > summary,
.admin-diagnostics-container details.admin-section-outline-warning > summary,
.admin-diagnostics-container details.dashboard-status-warning > summary,
.admin-development-container details.admin-section-outline-warning > summary,
.admin-development-container details.dashboard-status-warning > summary,
.diagnostics-container details.admin-section-outline-warning > summary,
.approvals-container details.admin-section-outline-warning > summary {
    background: var(--color-pastel-yellow);
    border: 1px solid var(--color-message-warning);
    border-radius: 0.55rem;
    color: var(--color-black);
    margin: 0 0 0.5rem 0;
    padding: 0.45rem 0.65rem;
}

.admin-page-container details,
.admin-dashboard-container details,
.admin-diagnostics-container details,
.admin-development-container details,
.diagnostics-container details,
.approvals-container details,
.admin-page-container .divborder,
.admin-dashboard-container .divborder,
.admin-diagnostics-container .divborder,
.admin-development-container .divborder,
.diagnostics-container .divborder,
.approvals-container .divborder {
    box-sizing: border-box;
    max-width: 100%;
}

.admin-page-container .table-container,
.admin-dashboard-container .table-container,
.admin-diagnostics-container .table-container,
.admin-development-container .table-container,
.diagnostics-container .table-container,
.approvals-container .table-container,
.admin-page-container .admin-table-container,
.admin-dashboard-container .admin-table-container,
.admin-diagnostics-container .admin-table-container,
.admin-development-container .admin-table-container,
.diagnostics-container .admin-table-container,
.approvals-container .admin-table-container,
.admin-page-container .admin-table-scroll,
.admin-dashboard-container .admin-table-scroll,
.admin-diagnostics-container .admin-table-scroll,
.admin-development-container .admin-table-scroll,
.diagnostics-container .admin-table-scroll,
.approvals-container .admin-table-scroll {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.admin-page-container table,
.admin-dashboard-container table,
.admin-diagnostics-container table,
.admin-development-container table,
.diagnostics-container table,
.approvals-container table {
    border-collapse: collapse;
    box-sizing: border-box;
    max-width: none;
    min-width: 100%;
    table-layout: auto;
    width: max-content;
}

.admin-page-container th,
.admin-dashboard-container th,
.admin-diagnostics-container th,
.admin-development-container th,
.diagnostics-container th,
.approvals-container th {
    box-sizing: border-box;
    max-width: 28rem;
    overflow-wrap: normal;
    text-wrap: wrap;
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    hyphens: none;
}

.admin-page-container td,
.admin-dashboard-container td,
.admin-diagnostics-container td,
.admin-development-container td,
.diagnostics-container td,
.approvals-container td {
    box-sizing: border-box;
    max-width: 34rem;
    min-width: min-content;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: clip;
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    hyphens: none;
}

.admin-page-container td code,
.admin-dashboard-container td code,
.admin-diagnostics-container td code,
.admin-development-container td code,
.diagnostics-container td code,
.approvals-container td code,
.admin-page-container td pre,
.admin-dashboard-container td pre,
.admin-diagnostics-container td pre,
.admin-development-container td pre,
.diagnostics-container td pre,
.approvals-container td pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* ADDED v2026-05-20.392: Admin UI Theme Contract v2.
   Low-risk visual contract only: typography, spacing, buttons, forms, details,
   health summaries, and overflow-safe tables. This intentionally does not force
   every admin page into one card/grid layout. */
:root {
  --admin-ui-radius: 0.75rem;
  --admin-ui-gap: 0.75rem;
  --admin-ui-padding: 0.75rem;
  --admin-ui-muted-text: #666;
  --admin-ui-soft-bg: rgba(255, 255, 255, 0.62);
  --admin-ui-error-bg: #ffe5df;
  --admin-ui-warning-bg: #fff3bf;
  --admin-ui-ok-bg: #e8f8ed;
}

.admin-page-container,
.admin-dashboard-container,
.admin-development-container,
.admin-diagnostics-container,
.admin-settings-container,
.admin-league-settings-container,
.admin-leagues-container,
.admin-global-players-container,
.admin-league-roster-container,
.admin-teams-container,
.admin-dupr-container,
.admin-rounds-container,
.diagnostics-container {
  color: var(--color-text, var(--css-color-111));
  line-height: 1.45;
}

.admin-page-container h1,
.admin-dashboard-container h1,
.admin-development-container h1,
.admin-diagnostics-container h1,
.admin-settings-container h1,
.admin-league-settings-container h1,
.admin-leagues-container h1,
.admin-global-players-container h1,
.admin-league-roster-container h1,
.admin-teams-container h1,
.admin-dupr-container h1,
.admin-rounds-container h1,
.diagnostics-container h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.admin-page-container h2,
.admin-dashboard-container h2,
.admin-development-container h2,
.admin-diagnostics-container h2,
.admin-settings-container h2,
.admin-league-settings-container h2,
.admin-leagues-container h2,
.admin-global-players-container h2,
.admin-league-roster-container h2,
.admin-teams-container h2,
.admin-dupr-container h2,
.admin-rounds-container h2,
.diagnostics-container h2,
.admin-page-container h3,
.admin-dashboard-container h3,
.admin-development-container h3,
.admin-diagnostics-container h3,
.admin-settings-container h3,
.admin-league-settings-container h3,
.admin-leagues-container h3,
.admin-global-players-container h3,
.admin-league-roster-container h3,
.admin-teams-container h3,
.admin-dupr-container h3,
.admin-rounds-container h3,
.diagnostics-container h3 {
  margin-bottom: 0.5rem;
}

.admin-page-container .muted,
.admin-dashboard-container .muted,
.admin-development-container .muted,
.admin-diagnostics-container .muted,
.diagnostics-container .muted,
.admin-page-container .muted-text,
.admin-dashboard-container .muted-text,
.admin-development-container .muted-text,
.admin-diagnostics-container .muted-text,
.diagnostics-container .muted-text {
  color: var(--admin-ui-muted-text);
}

.admin-page-container .divborder,
.admin-dashboard-container .divborder,
.admin-development-container .divborder,
.admin-diagnostics-container .divborder,
.admin-settings-container .divborder,
.admin-league-settings-container .divborder,
.admin-leagues-container .divborder,
.admin-global-players-container .divborder,
.admin-league-roster-container .divborder,
.admin-teams-container .divborder,
.admin-dupr-container .divborder,
.admin-rounds-container .divborder,
.diagnostics-container .divborder,
.admin-card,
.admin-panel,
.admin-report-card {
  border-color: var(--color-table-border);
  border-radius: var(--admin-ui-radius);
}

.admin-page-container details.admin-section,
.admin-dashboard-container details.admin-section,
.admin-development-container details.admin-section,
.admin-diagnostics-container details.admin-section,
.diagnostics-container details.admin-section,
.admin-page-container details.dashboard-exclusive-details,
.admin-dashboard-container details.dashboard-exclusive-details,
.admin-development-container details.dashboard-exclusive-details,
.admin-diagnostics-container details.dashboard-exclusive-details,
.diagnostics-container details.dashboard-exclusive-details {
  border: 1px solid var(--color-table-border);
  border-radius: var(--admin-ui-radius);
  padding: 0.45rem var(--admin-ui-padding);
  margin: 0 0 var(--admin-ui-gap) 0;
  background: var(--admin-ui-soft-bg);
  box-sizing: border-box;
}

.admin-page-container details.admin-section > summary,
.admin-dashboard-container details.admin-section > summary,
.admin-development-container details.admin-section > summary,
.admin-diagnostics-container details.admin-section > summary,
.diagnostics-container details.admin-section > summary,
.admin-page-container details.dashboard-exclusive-details > summary,
.admin-dashboard-container details.dashboard-exclusive-details > summary,
.admin-development-container details.dashboard-exclusive-details > summary,
.admin-diagnostics-container details.dashboard-exclusive-details > summary,
.diagnostics-container details.dashboard-exclusive-details > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.35rem 0;
  overflow-wrap: anywhere;
}

.admin-page-container details.admin-section[open] > summary,
.admin-dashboard-container details.admin-section[open] > summary,
.admin-development-container details.admin-section[open] > summary,
.admin-diagnostics-container details.admin-section[open] > summary,
.diagnostics-container details.admin-section[open] > summary,
.admin-page-container details.dashboard-exclusive-details[open] > summary,
.admin-dashboard-container details.dashboard-exclusive-details[open] > summary,
.admin-development-container details.dashboard-exclusive-details[open] > summary,
.admin-diagnostics-container details.dashboard-exclusive-details[open] > summary,
.diagnostics-container details.dashboard-exclusive-details[open] > summary {
  border-bottom: 1px solid var(--color-table-border);
  margin-bottom: 0.55rem;
}

.admin-page-container details.admin-section.admin-section-outline-error > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-error > summary,
.admin-development-container details.admin-section.admin-section-outline-error > summary,
.admin-diagnostics-container details.admin-section.admin-section-outline-error > summary,
.diagnostics-container details.admin-section.admin-section-outline-error > summary,
.admin-page-container details.dashboard-exclusive-details.admin-section-outline-error > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-error > summary,
.admin-development-container details.dashboard-exclusive-details.admin-section-outline-error > summary,
.admin-diagnostics-container details.dashboard-exclusive-details.admin-section-outline-error > summary,
.diagnostics-container details.dashboard-exclusive-details.admin-section-outline-error > summary,
.admin-page-container details.admin-section.status-error > summary,
.admin-dashboard-container details.admin-section.status-error > summary,
.admin-development-container details.admin-section.status-error > summary,
.admin-diagnostics-container details.admin-section.status-error > summary,
.diagnostics-container details.admin-section.status-error > summary {
  background: var(--admin-ui-error-bg);
  color: var(--color-message-error);
  margin-left: calc(var(--admin-ui-padding) * -1);
  margin-right: calc(var(--admin-ui-padding) * -1);
  padding-left: var(--admin-ui-padding);
  padding-right: var(--admin-ui-padding);
  border-radius: calc(var(--admin-ui-radius) - 0.2rem);
}

.admin-page-container details.admin-section.admin-section-outline-warning > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-warning > summary,
.admin-development-container details.admin-section.admin-section-outline-warning > summary,
.admin-diagnostics-container details.admin-section.admin-section-outline-warning > summary,
.diagnostics-container details.admin-section.admin-section-outline-warning > summary,
.admin-page-container details.dashboard-exclusive-details.admin-section-outline-warning > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-warning > summary,
.admin-development-container details.dashboard-exclusive-details.admin-section-outline-warning > summary,
.admin-diagnostics-container details.dashboard-exclusive-details.admin-section-outline-warning > summary,
.diagnostics-container details.dashboard-exclusive-details.admin-section-outline-warning > summary,
.admin-page-container details.admin-section.status-warning > summary,
.admin-dashboard-container details.admin-section.status-warning > summary,
.admin-development-container details.admin-section.status-warning > summary,
.admin-diagnostics-container details.admin-section.status-warning > summary,
.diagnostics-container details.admin-section.status-warning > summary {
  background: var(--admin-ui-warning-bg);
  color: var(--css-color-7a3d00);
  margin-left: calc(var(--admin-ui-padding) * -1);
  margin-right: calc(var(--admin-ui-padding) * -1);
  padding-left: var(--admin-ui-padding);
  padding-right: var(--admin-ui-padding);
  border-radius: calc(var(--admin-ui-radius) - 0.2rem);
}

.admin-page-container details.admin-section.admin-section-outline-ok > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-ok > summary,
.admin-development-container details.admin-section.admin-section-outline-ok > summary,
.admin-diagnostics-container details.admin-section.admin-section-outline-ok > summary,
.diagnostics-container details.admin-section.admin-section-outline-ok > summary {
  background: var(--admin-ui-ok-bg);
  color: var(--css-color-195c2e);
  margin-left: calc(var(--admin-ui-padding) * -1);
  margin-right: calc(var(--admin-ui-padding) * -1);
  padding-left: var(--admin-ui-padding);
  padding-right: var(--admin-ui-padding);
  border-radius: calc(var(--admin-ui-radius) - 0.2rem);
}

.admin-page-container .button,
.admin-dashboard-container .button,
.admin-development-container .button,
.admin-diagnostics-container .button,
.diagnostics-container .button,
.admin-page-container button,
.admin-dashboard-container button,
.admin-development-container button,
.admin-diagnostics-container button,
.diagnostics-container button,
.admin-page-container input[type="submit"],
.admin-dashboard-container input[type="submit"],
.admin-development-container input[type="submit"],
.admin-diagnostics-container input[type="submit"],
.diagnostics-container input[type="submit"] {
  border-radius: 0.45rem;
  min-height: 2.1rem;
}

.admin-page-container input[type="text"],
.admin-dashboard-container input[type="text"],
.admin-development-container input[type="text"],
.admin-diagnostics-container input[type="text"],
.diagnostics-container input[type="text"],
.admin-page-container input[type="number"],
.admin-dashboard-container input[type="number"],
.admin-development-container input[type="number"],
.admin-diagnostics-container input[type="number"],
.diagnostics-container input[type="number"],
.admin-page-container input[type="url"],
.admin-dashboard-container input[type="url"],
.admin-development-container input[type="url"],
.admin-diagnostics-container input[type="url"],
.diagnostics-container input[type="url"],
.admin-page-container input[type="email"],
.admin-dashboard-container input[type="email"],
.admin-development-container input[type="email"],
.admin-diagnostics-container input[type="email"],
.diagnostics-container input[type="email"],
.admin-page-container select,
.admin-dashboard-container select,
.admin-development-container select,
.admin-diagnostics-container select,
.diagnostics-container select,
.admin-page-container textarea,
.admin-dashboard-container textarea,
.admin-development-container textarea,
.admin-diagnostics-container textarea,
.diagnostics-container textarea {
  border: 1px solid var(--color-table-border);
  border-radius: 0.35rem;
  padding: 0.32rem 0.45rem;
  max-width: 100%;
}

.admin-page-container .admin-table-container,
.admin-dashboard-container .admin-table-container,
.admin-development-container .admin-table-container,
.admin-diagnostics-container .admin-table-container,
.diagnostics-container .admin-table-container,
.admin-page-container .table-container,
.admin-dashboard-container .table-container,
.admin-development-container .table-container,
.admin-diagnostics-container .table-container,
.diagnostics-container .table-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

/* Phase 4 Step 394: standard admin report shell, intentionally low-risk. */
.admin-report-shell {
    box-sizing: border-box;
}
.admin-report-shell .admin-report-section > summary {
    cursor: pointer;
}
.admin-report-shell .admin-table-container {
    max-width: 100%;
    overflow-x: auto;
}


/* Phase 4 Step 397: CSS normalization batch 1.
   Low-risk token/selector consolidation only. Do not force page-specific layout shells. */
:root {
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-radius-sm: 0.35rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
  --ui-border-standard: 1px solid var(--color-table-border);
  --ui-table-cell-padding-y: 0.35rem;
  --ui-table-cell-padding-x: 0.5rem;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-section, .admin-card, .admin-report-section, .diagnostic-card, .dashboard-card) {
  box-sizing: border-box;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-table-container, .table-container, .table-responsive, .responsive-table-wrap) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(table.admin-table, table.diagnostics-table, table.report-table, .admin-table-container > table, .table-container > table) {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(th, td) {
  box-sizing: border-box;
  vertical-align: top;
  padding: var(--ui-table-cell-padding-y) var(--ui-table-cell-padding-x);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) th {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  max-width: min(42rem, 70vw);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(input, select, textarea, button, .button, .btn) {
  box-sizing: border-box;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], select, textarea) {
  max-width: 100%;
}

:where(.content, .main-content, .page-container) :where(.table-container, .responsive-table-wrap) {
  max-width: 100%;
  overflow-x: auto;
}

/* Phase 4 Step 398: CSS normalization batch 2.
   Normalize shared UI primitives without forcing a single page layout. */
:root {
  --ui-control-min-height: 2.25rem;
  --ui-control-padding-y: 0.45rem;
  --ui-control-padding-x: 0.7rem;
  --ui-card-padding: var(--ui-space-4);
  --ui-section-gap: var(--ui-space-4);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.button, .btn, button, input[type="submit"], input[type="button"], input[type="reset"]) {
  min-height: var(--ui-control-min-height);
  border-radius: var(--ui-radius-sm);
  padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-actions, .button-row, .form-actions, .dashboard-actions, .report-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  align-items: center;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-card, .dashboard-card, .diagnostic-card, .report-card, .admin-report-section) {
  border-radius: var(--ui-radius-md);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.status-badge, .badge, .pill, .tag) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  line-height: 1.25;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.notice, .warning, .error, .success, .info, .admin-notice, .diagnostic-notice) {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--ui-radius-md);
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(dl) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(dt) {
  font-weight: 600;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(dd) {
  margin-left: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-actions, .button-row, .form-actions, .dashboard-actions, .report-actions) {
    align-items: stretch;
  }

  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-actions > *, .button-row > *, .form-actions > *, .dashboard-actions > *, .report-actions > *) {
    max-width: 100%;
  }
}

/* STEP399: Admin health outline semantics.
   - 0 errors, 0 warnings, 0 info: no highlight/outline.
   - 0 errors, 0 warnings, >0 info: informational highlight/outline.
   Error and warning states continue to take priority. */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-none,
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-ok {
  border-color: var(--color-table-border, var(--css-color-d6d6d6));
  box-shadow: none;
  background: var(--color-card-bg, var(--color-white));
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-none > summary,
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-ok > summary {
  background: var(--color-transparent);
  color: inherit;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-info {
  border-color: var(--color-status-info, var(--css-color-2563eb));
  box-shadow: 0 0 0 1px var(--color-status-info, var(--css-color-2563eb));
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .approvals-container) details:where(.admin-section, .admin-health-details, .dashboard-exclusive-details, .database-tools-exclusive-details).admin-section-outline-info > summary {
  background: var(--color-status-info-bg, var(--css-color-eef7ff));
  color: var(--color-status-info, var(--css-color-2563eb));
}


/* Phase 4 Step 400: CSS normalization batch 3.
   Normalize low-risk content/form/report primitives without forcing a shared page layout. */
:root {
  --ui-focus-outline: 2px solid var(--color-link, #2563eb);
  --ui-focus-outline-offset: 2px;
  --ui-content-measure: 72rem;
  --ui-inline-gap: var(--ui-space-2);
  --ui-block-gap: var(--ui-space-3);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--ui-focus-outline);
  outline-offset: var(--ui-focus-outline-offset);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(fieldset) {
  box-sizing: border-box;
  max-width: 100%;
  border: var(--ui-border-standard);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3);
  margin: 0 0 var(--ui-block-gap);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(legend) {
  font-weight: 600;
  padding: 0 var(--ui-space-1);
  max-width: 100%;
  white-space: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(label) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.form-row, .field-row, .admin-field-row, .filter-row) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-inline-gap);
  align-items: center;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.form-row > *, .field-row > *, .admin-field-row > *, .filter-row > *) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.help-text, .admin-help-text, .hint, .muted, .small-note, .note) {
  max-width: var(--ui-content-measure);
  overflow-wrap: anywhere;
  line-height: 1.45;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(pre, code, kbd, samp) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(pre) {
  box-sizing: border-box;
  overflow-x: auto;
  white-space: pre-wrap;
  border-radius: var(--ui-radius-sm);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(ul, ol) {
  max-width: var(--ui-content-measure);
  padding-left: 1.35rem;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(li) {
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-meta, .report-meta, .diagnostic-meta, .summary-meta) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
  align-items: center;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-meta > *, .report-meta > *, .diagnostic-meta > *, .summary-meta > *) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.form-row, .field-row, .admin-field-row, .filter-row) {
    align-items: stretch;
  }

  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.form-row > *, .field-row > *, .admin-field-row > *, .filter-row > *) {
    flex-basis: auto;
  }
}


/* Phase 4 Step 401: CSS normalization batch 4.
   Normalize low-risk shell/card/media/navigation primitives without forcing page layout changes. */
:root {
  --ui-card-padding: var(--ui-space-3);
  --ui-card-gap: var(--ui-space-3);
  --ui-card-radius: var(--ui-radius-md);
  --ui-card-border: var(--ui-border-standard);
  --ui-muted-opacity: 0.82;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.card, .panel, .box, .tile, .admin-card, .dashboard-card, .diagnostic-card, .report-card, .stats-progress-card, .stats-progress-panel) {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--ui-card-radius);
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.card > *, .panel > *, .box > *, .tile > *, .admin-card > *, .dashboard-card > *, .diagnostic-card > *, .report-card > *, .stats-progress-card > *, .stats-progress-panel > *) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(img, svg, canvas, video, iframe) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(img, video) {
  height: auto;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(iframe) {
  border: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.tabs, .tab-list, .nav-tabs, .subnav, .admin-subnav, .admin-nav-group, .pagination, .pager) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  align-items: center;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.tabs a, .tab-list a, .nav-tabs a, .subnav a, .admin-subnav a, .pagination a, .pager a, .pagination span, .pager span) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.empty-state, .no-data, .no-results, .nothing-found, ) {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--ui-radius-md);
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.is-muted, .muted, .secondary-text, .meta-text, .caption) {
  opacity: var(--ui-muted-opacity);
}

@media (max-width: 720px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.tabs, .tab-list, .nav-tabs, .subnav, .admin-subnav, .admin-nav-group, .pagination, .pager) {
    align-items: stretch;
  }

  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.tabs > *, .tab-list > *, .nav-tabs > *, .subnav > *, .admin-subnav > *, .admin-nav-group > *, .pagination > *, .pager > *) {
    max-width: 100%;
  }
}


/* Phase 4 Step 402: CSS normalization batch 5.
   Normalize low-risk state, status, and printable/report utility primitives without forcing page layout changes. */
:root {
  --ui-status-gap: var(--ui-space-2);
  --ui-status-padding-y: 0.45rem;
  --ui-status-padding-x: 0.65rem;
  --ui-status-radius: var(--ui-radius-md);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.status-row, .summary-row, .metric-row, .key-value-row, .admin-status-row, .report-status-row) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-status-gap);
  align-items: baseline;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.status-row > *, .summary-row > *, .metric-row > *, .key-value-row > *, .admin-status-row > *, .report-status-row > *) {
  min-width: 0;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.status, .state, .result, .health-status, .validation-status, .status-label, .status-value, .count-badge, .number-badge) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 1.75rem;
  padding: var(--ui-status-padding-y) var(--ui-status-padding-x);
  border-radius: var(--ui-status-radius);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.toolbar, .button-bar, .button-row, .admin-toolbar, .report-toolbar, .bulk-action-row, .download-links) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  align-items: center;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.toolbar > *, .button-bar > *, .button-row > *, .admin-toolbar > *, .report-toolbar > *, .bulk-action-row > *, .download-links > *) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.scroll-x, .overflow-x, .wide-content, .wide-report, .wide-table, .table-scroll) {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.nowrap, .no-wrap) {
  white-space: nowrap;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.breakable, .wrap-anywhere, .path, .file-path, .route-path, .sql-snippet, .token-value) {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 720px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.toolbar, .button-bar, .button-row, .admin-toolbar, .report-toolbar, .bulk-action-row, .download-links) {
    align-items: stretch;
  }
}

@media print {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) {
    max-width: none !important;
    overflow: visible !important;
  }

  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.table-container, .admin-table-container, .scroll-x, .overflow-x, .wide-content, .wide-report, .wide-table, .table-scroll) {
    overflow: visible !important;
  }
}


/* Phase 4 Step 403: Admin health outline specificity reinforcement.
   These selectors intentionally outrank older dashboard-specific outline rules.
   - 0 errors, 0 warnings, 0 info: no highlighted outline.
   - 0 errors, 0 warnings, >0 info: informational outline.
   Error and warning classes remain higher priority. */
.admin-dashboard-container details.admin-section.admin-section-outline-none,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-none,
.admin-dashboard-container details.admin-section.admin-section-outline-ok,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok,
.admin-dashboard-container details.admin-section.admin-section-info-only,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-info-only,
.admin-page-container details.admin-section.admin-section-outline-none,
.admin-page-container details.admin-health-details.admin-section-outline-none,
.admin-development-container details.admin-section.admin-section-outline-none,
.admin-development-container details.admin-health-details.admin-section-outline-none,
.admin-diagnostics-container details.admin-section.admin-section-outline-none,
.admin-diagnostics-container details.admin-health-details.admin-section-outline-none,
.diagnostics-container details.admin-section.admin-section-outline-none,
.diagnostics-container details.admin-health-details.admin-section-outline-none,
.approvals-container details.admin-section.admin-section-outline-none,
.approvals-container details.admin-health-details.admin-section-outline-none {
  border-color: var(--color-table-border, var(--css-color-d6d6d6)) !important;
  box-shadow: none !important;
  background: var(--color-card-bg, var(--color-white)) !important;
}

.admin-dashboard-container details.admin-section.admin-section-outline-none > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-none > summary,
.admin-dashboard-container details.admin-section.admin-section-outline-ok > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-ok > summary,
.admin-dashboard-container details.admin-section.admin-section-info-only > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-info-only > summary,
.admin-page-container details.admin-section.admin-section-outline-none > summary,
.admin-page-container details.admin-health-details.admin-section-outline-none > summary,
.admin-development-container details.admin-section.admin-section-outline-none > summary,
.admin-development-container details.admin-health-details.admin-section-outline-none > summary,
.admin-diagnostics-container details.admin-section.admin-section-outline-none > summary,
.admin-diagnostics-container details.admin-health-details.admin-section-outline-none > summary,
.diagnostics-container details.admin-section.admin-section-outline-none > summary,
.diagnostics-container details.admin-health-details.admin-section-outline-none > summary,
.approvals-container details.admin-section.admin-section-outline-none > summary,
.approvals-container details.admin-health-details.admin-section-outline-none > summary {
  background: var(--color-transparent) !important;
  color: inherit !important;
}

.admin-dashboard-container details.admin-section.admin-section-outline-info,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-info,
.admin-page-container details.admin-section.admin-section-outline-info,
.admin-page-container details.admin-health-details.admin-section-outline-info,
.admin-development-container details.admin-section.admin-section-outline-info,
.admin-development-container details.admin-health-details.admin-section-outline-info,
.admin-diagnostics-container details.admin-section.admin-section-outline-info,
.admin-diagnostics-container details.admin-health-details.admin-section-outline-info,
.diagnostics-container details.admin-section.admin-section-outline-info,
.diagnostics-container details.admin-health-details.admin-section-outline-info,
.approvals-container details.admin-section.admin-section-outline-info,
.approvals-container details.admin-health-details.admin-section-outline-info {
  border-color: var(--color-status-info, var(--css-color-2563eb)) !important;
  box-shadow: 0 0 0 1px var(--color-status-info, var(--css-color-2563eb)) !important;
}

.admin-dashboard-container details.admin-section.admin-section-outline-info > summary,
.admin-dashboard-container details.dashboard-exclusive-details.admin-section-outline-info > summary,
.admin-page-container details.admin-section.admin-section-outline-info > summary,
.admin-page-container details.admin-health-details.admin-section-outline-info > summary,
.admin-development-container details.admin-section.admin-section-outline-info > summary,
.admin-development-container details.admin-health-details.admin-section-outline-info > summary,
.admin-diagnostics-container details.admin-section.admin-section-outline-info > summary,
.admin-diagnostics-container details.admin-health-details.admin-section-outline-info > summary,
.diagnostics-container details.admin-section.admin-section-outline-info > summary,
.diagnostics-container details.admin-health-details.admin-section-outline-info > summary,
.approvals-container details.admin-section.admin-section-outline-info > summary,
.approvals-container details.admin-health-details.admin-section-outline-info > summary {
  background: var(--color-status-info-bg, var(--css-color-eef7ff)) !important;
  color: var(--color-status-info, var(--css-color-2563eb)) !important;
}

/* Phase 4 Step 407: CSS duplicate-selector consolidation batch 1.
   These are additive, low-specificity shared rules that consolidate repeated
   table, status, and admin report patterns without removing legacy blocks or
   forcing page layouts. */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-card, .dashboard-card, .diagnostic-card, .report-card, .admin-panel, .settings-panel, .admin-section, .admin-report-section) {
  box-sizing: border-box;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-card, .dashboard-card, .diagnostic-card, .report-card, .admin-panel, .settings-panel) > :where(h2, h3, h4, p, ul, ol, dl, table, form, details, pre) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.status-ok, .status-warning, .status-error, .status-info, .badge-ok, .badge-warning, .badge-error, .badge-info, .pill-ok, .pill-warning, .pill-error, .pill-info) {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1, 0.25rem);
  max-width: 100%;
  vertical-align: middle;
  white-space: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.status-ok, .status-warning, .status-error, .status-info, .badge-ok, .badge-warning, .badge-error, .badge-info, .pill-ok, .pill-warning, .pill-error, .pill-info) :where(code, span, strong, em) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-summary-grid, .report-summary-grid, .diagnostic-summary-grid, .health-summary-grid, .metric-grid) {
  box-sizing: border-box;
  display: grid;
  gap: var(--ui-space-3, 0.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-summary-grid, .report-summary-grid, .diagnostic-summary-grid, .health-summary-grid, .metric-grid) > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.table-container, .admin-table-container, .report-table-container, .diagnostic-table-container) > table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(td, th) :where(.file-path, .route-path, .path, .sql-snippet, .token-value, code) {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* Phase 4 Step 408: CSS duplicate-selector consolidation batch 2.
   Additive, low-specificity rules for repeated admin/report disclosure,
   callout, filter, and compact-table patterns. This does not remove legacy
   rules or force a single page layout. */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(details, .admin-section, .admin-health-details, .dashboard-exclusive-details, .report-section, .diagnostic-section) {
  box-sizing: border-box;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(details, .admin-section, .admin-health-details, .dashboard-exclusive-details, .report-section, .diagnostic-section) > summary {
  box-sizing: border-box;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.callout, .notice, .warning, .error, .success, .info, .admin-notice, .admin-warning, .admin-error, .admin-success, .admin-info, .validation-message, .status-message) {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.filters, .filter-row, .filter-bar, .admin-filters, .search-row, .search-controls, .report-controls) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2, 0.5rem);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.filters, .filter-row, .filter-bar, .admin-filters, .search-row, .search-controls, .report-controls) > * {
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(table.compact, .compact-table, .report-table, .diagnostic-table, .admin-table) :where(th, td) {
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(table.compact, .compact-table, .report-table, .diagnostic-table, .admin-table) th {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.table-caption, caption, .report-caption, .diagnostic-caption) {
  caption-side: top;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  word-break: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-list, .report-list, .diagnostic-list, .issue-list, .warning-list, .error-list) {
  box-sizing: border-box;
  max-width: 100%;
  padding-left: 1.25rem;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-list, .report-list, .diagnostic-list, .issue-list, .warning-list, .error-list) > li {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}


/* Phase 4 Step 409: CSS duplicate-selector consolidation batch 3.
   Additive, low-specificity rules for repeated form, field, navigation, and
   responsive-stack patterns. This keeps existing page layouts intact and does
   not remove legacy CSS blocks. */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2, 0.5rem);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row) > * {
  min-width: 0;
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(label, .field-label, .control-label, .setting-label) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(input, select, textarea, button) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.button-group, .button-row, .action-buttons, .form-actions, .admin-actions, .page-actions, .report-actions) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2, 0.5rem);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.button-group, .button-row, .action-buttons, .form-actions, .admin-actions, .page-actions, .report-actions) > :where(a, button, input[type=submit], input[type=button]) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.breadcrumb, .breadcrumbs, .admin-breadcrumbs, .path-nav, .subtle-nav, .inline-nav) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1, 0.25rem);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.breadcrumb, .breadcrumbs, .admin-breadcrumbs, .path-nav, .subtle-nav, .inline-nav) :where(a, span, code) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 640px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row, .button-group, .button-row, .action-buttons, .form-actions, .admin-actions, .page-actions, .report-actions) {
    align-items: stretch;
  }

  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .content, .main-content, .page-container) :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row) > :where(input, select, textarea, button) {
    flex: 1 1 100%;
  }
}

/* Phase 4 Step 410: CSS duplicate-selector consolidation batch 4.
   Additive, low-specificity rules for repeated player-facing table, roster,
   match, stats, and name-line patterns. These rules preserve existing page
   layouts while improving containment and wrapping consistency. */
:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.matches-table, .stats-table, .players-table, .teams-table, .remaining-matches-table, .table-calendar, .standings-table, .schedule-table) {
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.matches-table, .stats-table, .players-table, .teams-table, .remaining-matches-table, .table-calendar, .standings-table, .schedule-table) :where(th, td) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.matches-table, .stats-table, .players-table, .teams-table, .remaining-matches-table, .table-calendar, .standings-table, .schedule-table) th {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.player-name-line, .player-name-lines, .player-name-lines-public, .team-player-line, .stats-player-cell, .stats-team-cell, .match-player-cell, .team-name-cell) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.player-name-line, .player-name-lines, .player-name-lines-public, .team-player-line, .stats-player-cell, .stats-team-cell, .match-player-cell, .team-name-cell) :where(a, span, strong, em, small) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.score-cell, .game-score-cell, .match-score-cell, .record-cell, .num, .numeric, .stat-value, .metric-value) {
  white-space: nowrap;
  text-align: right;
}

:where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.match-card, .team-card, .player-card, .stats-card, .calendar-card, .schedule-card) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 640px) {
  :where(.player-page-container, .players-container, .teams-container, .matches-container, .stats-container, .calendar-container, .approvals-container, .content, .main-content, .page-container) :where(.match-card, .team-card, .player-card, .stats-card, .calendar-card, .schedule-card) {
    overflow-x: auto;
  }
}


/* Phase 4 Step 411: CSS duplicate-selector consolidation batch 5.
   Additive, low-specificity rules for repeated modal, dialog, overlay,
   dropdown, popover, tooltip, and alert patterns. These rules preserve
   existing page-specific behavior while improving containment and wrapping. */
:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) {
  box-sizing: border-box;
  max-width: min(100%, 48rem);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(h1, h2, h3, h4, h5, h6, p, div, span, li, label, small, strong, em) {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(table) {
  max-width: 100%;
  table-layout: auto;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(th, td) {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(th) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(.modal-actions, .dialog-actions, .popup-actions, .swal2-actions, .alert-actions, .admin-modal-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2, 0.5rem);
  max-width: 100%;
  min-width: 0;
}

:where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(.modal-actions, .dialog-actions, .popup-actions, .swal2-actions, .alert-actions, .admin-modal-actions) > :where(a, button, input[type=submit], input[type=button]) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

:where(.modal-backdrop, .dialog-backdrop, .popup-backdrop, .overlay, .loading-overlay, .swal2-container) {
  box-sizing: border-box;
  max-width: 100vw;
}

@media (max-width: 640px) {
  :where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) {
    max-width: calc(100vw - 1rem);
  }

  :where(.modal, .dialog, .popup, .popover, .dropdown-menu, .tooltip, .swal2-popup, .sweet-alert, .alert-dialog, .admin-modal, .admin-dialog) :where(.modal-actions, .dialog-actions, .popup-actions, .swal2-actions, .alert-actions, .admin-modal-actions) {
    align-items: stretch;
  }
}

/* Phase 4 Step 412: CSS duplicate-selector consolidation batch 6.
   Additive, low-specificity rules for repeated print/export/download,
   copyable-output, log, and audit/result panel patterns. These rules preserve
   existing page-specific behavior while improving containment and wrapping. */
:where(.export-panel, .download-panel, .download-links, .report-downloads, .print-actions, .copy-panel, .copyable-output, .generated-file, .generated-files, .audit-output, .audit-result, .validation-output, .log-output, .debug-output) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.export-panel, .download-panel, .download-links, .report-downloads, .print-actions, .copy-panel, .generated-file, .generated-files) :where(a, button, input[type=submit], input[type=button]) {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.export-panel, .download-panel, .download-links, .report-downloads, .print-actions, .copy-panel) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2, 0.5rem);
  align-items: center;
}

:where(.copyable-output, .audit-output, .audit-result, .validation-output, .log-output, .debug-output, .sql-output, .json-output, .csv-output, .manifest-output) {
  overflow-x: auto;
  white-space: pre-wrap;
}

:where(.copyable-output, .audit-output, .audit-result, .validation-output, .log-output, .debug-output, .sql-output, .json-output, .csv-output, .manifest-output) :where(code, pre, samp) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: pre-wrap;
}

:where(.file-download-link, .manifest-download-link, .sql-download-link, .json-download-link, .csv-download-link, .report-download-link, .generated-file-link) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(.admin-report-shell, .admin-page-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container) :where(.download-links, .report-downloads, .print-actions, .export-panel, .download-panel) {
  margin-block: var(--ui-space-2, 0.5rem);
}

@media print {
  :where(.download-links, .report-downloads, .print-actions, .export-panel, .download-panel, .admin-nav, .admin-subnav, .nav, .navbar) {
    display: none !important;
  }

  :where(.admin-report-shell, .admin-page-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .content, .main-content, .page-container) {
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* STEP414 CSS TOKEN ADOPTION PASS 1: low-risk shared token use for common admin/report spacing. */
:where(.admin-page-container, .admin-report-shell, .diagnostics-container, .admin-development-container) {
    gap: var(--ui-space-3, 0.75rem);
}
:where(.admin-page-container, .admin-report-shell, .diagnostics-container) > :where(h1, h2, h3, h4) {
    margin-top: 0;
    margin-bottom: var(--ui-space-3, 0.75rem);
}
:where(.admin-report-section, .admin-health-details, .admin-card, .report-card, .dashboard-card) {
    border-radius: var(--ui-radius-md, 8px);
    border: var(--ui-border-standard, 1px solid var(--css-color-ddd));
}
:where(.admin-table, .diagnostic-table, .report-table) :where(th, td) {
    padding-block: var(--ui-table-cell-padding-y, 0.35rem);
    padding-inline: var(--ui-table-cell-padding-x, 0.5rem);
}

/* STEP415 CSS TOKEN ADOPTION PASS 2: token-backed controls, notices, badges, and report content. */
:where(.admin-page-container, .admin-report-shell, .diagnostics-container) :where(.notice, .warning, .error, .success, .info, .validation-message, .admin-notice) {
    border-radius: var(--ui-radius-md, 8px);
    padding: var(--ui-space-3, 0.75rem);
}
:where(.admin-page-container, .admin-report-shell, .diagnostics-container) :where(button, .button, input[type='submit'], input[type='button']) {
    border-radius: var(--ui-radius-sm, 6px);
    padding-block: var(--ui-space-2, 0.5rem);
    padding-inline: var(--ui-space-3, 0.75rem);
}
:where(.admin-page-container, .admin-report-shell, .diagnostics-container) :where(.badge, .pill, .tag, .status-badge) {
    border-radius: var(--ui-radius-sm, 6px);
    padding-block: calc(var(--ui-space-1, 0.25rem) / 2);
    padding-inline: var(--ui-space-2, 0.5rem);
}
:where(.admin-page-container, .admin-report-shell, .diagnostics-container) :where(dl, .key-value-list, .summary-list) {
    margin-block: var(--ui-space-3, 0.75rem);
}

/* STEP421 PLAYER-FACING TABLE CONTRACT PASS: structure-preserving overflow/wrapping rules. */
:where(.page-container, .main-content, .content) :where(.matches-table, .players-table, .teams-table, .stats-table, .calendar-table, table) {
    max-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}
:where(.page-container, .main-content, .content) :where(.matches-table, .players-table, .teams-table, .stats-table, .calendar-table, table) :where(th) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: normal;
}
:where(.page-container, .main-content, .content) :where(.matches-table, .players-table, .teams-table, .stats-table, .calendar-table, table) :where(td) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}
:where(.page-container, .main-content, .content) :where(.score-cell, .rank-cell, .stat-number, .game-score, .numeric) {
    white-space: nowrap;
    text-align: center;
}


/** ADDED v2026-05-20.424: Profile and admin input formatting refinements. */
.players-container .profile-summary-table {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
.players-container .profile-summary-table .profile-photo {
    text-align: left;
}
.profile-field-label {
    display: block;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}
.profile-login-field {
    max-width: min(100%, 28rem);
    margin-bottom: 0.5rem;
}
.profile-login-field .login-largetext {
    padding-right: 12px;
}
.people-access-form input,
.people-access-form select,
.people-access-form textarea,
.people-access-input {
    box-sizing: border-box;
    max-width: 100%;
}

/* Phase 4 Step 429/431/433: admin normalization finishing pass. */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(details) {
  max-width: 100%;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(summary) {
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(input, select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
}

:where(.admin-action-row, .form-action-row, .button-row, .bulk-action-row, .admin-button-row) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, .5rem);
  align-items: center;
}

/** ADDED v2026-05-20.435: Profile summary left alignment and grouped survey list containment. */
.players-container .profile-summary-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}
.players-container .profile-summary-wrap .profile-summary-table {
    margin-left: 0;
    margin-right: auto;
}
.admin-compact-list {
    margin: 0;
    padding-left: 1.25rem;
}
.admin-compact-list li {
    margin: 0.15rem 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/** ADDED v2026-05-20.436: Admin input radius normalization.
 *  Scope: admin containers only. Checkboxes/radios/hidden fields are excluded so native controls keep their expected shape.
 */
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .people-access-form, .admin-form, .admin-filter-form) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-radius: var(--ui-radius-sm, 6px);
}


/** ADDED v2026-05-20.438: Site-wide admin input radius and People / Access input text normalization.
 *  Applies to any admin surface generated by DisplayPageHeader, not only the older admin container classes.
 */
:where(.ui-surface-admin, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-radius: var(--ui-radius-sm, 6px);
    box-sizing: border-box;
    max-width: 100%;
}

:where(.people-access-form, .admin-people-edit-table) :where(input, select, textarea),
:where(.people-access-form, .admin-people-edit-table) input[type="tel"] {
    font: inherit;
    font-size: inherit;
    line-height: inherit;
}


/** ADDED v2026-05-20.439: Strong player profile summary left-alignment override.
 *  Keeps the player/partner table directly beside the profile photo instead of right-aligning in the available row.
 */
.player-page-container.players-container .profile-summary-wrap,
.players-container .profile-summary-wrap {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}
.player-page-container.players-container .profile-summary-table,
.players-container .profile-summary-wrap .profile-summary-table,
.players-container .profile-summary-table {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}
.player-page-container.players-container .profile-summary-table td,
.players-container .profile-summary-table td {
    text-align: left;
}


/** ADDED v2026-05-20.441: Admin details health contract reinforcement. */
:where(.ui-surface-admin, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) details.admin-section-outline-error > summary {
    border-color: var(--color-error, var(--css-color-b00020));
    background: var(--color-error-bg, var(--css-color-ffecec));
}
:where(.ui-surface-admin, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) details.admin-section-outline-warning > summary {
    border-color: var(--color-warning, var(--css-color-9a6a00));
    background: var(--color-warning-bg, var(--css-color-fff8e1));
}
:where(.ui-surface-admin, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) details.admin-section-outline-info > summary {
    border-color: var(--color-info, var(--css-color-2271b1));
    background: var(--color-info-bg, var(--css-color-eef7ff));
}
:where(.ui-surface-admin, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) details.admin-section-outline-none > summary {
    border-color: var(--ui-border-color, var(--css-color-ddd));
    background: inherit;
}


/** ADDED v2026-05-20.448: Admin form-field consistency pass 2. */
:where(.ui-surface-admin, .admin-page-container, .admin-action-shell, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row) {
    box-sizing: border-box;
    max-width: 100%;
    gap: var(--space-sm, 0.5rem);
}
:where(.ui-surface-admin, .admin-page-container, .admin-action-shell, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .divborder) :where(label, .field-label, .setting-label) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/** ADDED v2026-05-20.449: People / Access page normalization. */
.people-access-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.people-access-table :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.admin-people-edit-table :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-radius: var(--radius-sm, 6px);
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    max-width: 100%;
}

/** ADDED v2026-05-20.452: Player profile left-alignment verification override. */
.profile-summary-left,
.players-container .profile-summary-left,
.player-page-container .profile-summary-left {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}
.profile-summary-left > .profile-summary-table {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: auto !important;
    text-align: left !important;
}

/** ADDED v2026-05-20.453: Player-facing rounded input pass. */
:where(.content, .main-content, .page-container, .players-container, .matches-container, .teams-container, .stats-container, .calendar-container, .login-container, .feedback-container) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border-radius: var(--radius-sm, 6px);
    max-width: 100%;
}

/* ADDED v2026-05-20.491-495: Admin CSS normalization pass for inputs, filters, buttons, notices, and table contract. */
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm, 6px);
  font: inherit;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(fieldset, .filter-form, .admin-filter-form, .search-form, .report-filter-form) {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(.filter-row, .search-row, .admin-filter-row, .report-filter-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-sm, .5rem);
  min-width: 0;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(button, .button, .btn, input[type="submit"], input[type="button"], a.button, a.btn, .download-link, .export-link, .archive-link, .restore-link, .cancel-link) {
  border-radius: var(--radius-sm, 6px);
  min-height: 2.2rem;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(.notice, .admin-notice, .callout, .message, .warning, .error, .success, .info, .validation-message, .alert, .smallnote) {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(.table-container, .admin-table-container) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(table.admin-table, .admin-table-container table) {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(table.admin-table th, .admin-table-container table th) {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
:where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(table.admin-table td, .admin-table-container table td) {
  max-width: 34rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}
@media (max-width: 720px) {
  :where(.admin-action-shell, .admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .divborder) :where(.filter-row, .search-row, .admin-filter-row, .report-filter-row) {
    display: block;
  }
}:where(.admin-confirmation-form, .admin-sensitive-form) {
  display: grid;
  gap: var(--space-sm, .5rem);
  max-width: 52rem;
}
:where(.admin-confirmation-phrase) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, .35rem);
  align-items: baseline;
  max-width: 100%;
  margin: var(--space-sm, .5rem) 0;
}
:where(.admin-confirmation-phrase code, .admin-path-value, .admin-file-name, .admin-route-path, .admin-output-path) {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
:where(.admin-checkbox-row, .admin-radio-row) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs, .35rem);
  max-width: 100%;
  line-height: 1.35;
}
:where(.admin-checkbox-row input[type="checkbox"], .admin-radio-row input[type="radio"]) {
  flex: 0 0 auto;
  margin-top: .18em;
  width: auto;
  min-width: 0;
  min-height: 0;
  border-radius: initial;
}
:where(.admin-danger-action-notice, .admin-warning-action-notice) {
  border-left: .35rem solid var(--color-warning, var(--css-color-9a6a00));
  padding-left: var(--space-sm, .5rem);
}
:where(.admin-button-danger, .button-danger, .danger-button, .admin-danger-action-row button) {
  font-weight: 700;
}
:where(.admin-generated-output, .admin-generated-status, .admin-safety-check, .admin-log-output, .admin-output-block) {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
:where(.admin-generated-output pre, .admin-log-output pre, .admin-output-block pre) {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}
@media (max-width: 720px) {
  :where(.admin-confirmation-form, .admin-sensitive-form) {
    max-width: 100%;
  }
  :where(.admin-confirmation-phrase) {
    display: block;
  }
}


/* ADDED v2026-05-20.515: Admin generated-output normalization pass. */
:where(.admin-page-container, .admin-action-shell, .admin-report-shell, .admin-tool-page) :where(.admin-generated-output, .admin-log-output, .admin-result-output, .admin-json-output, .admin-sql-output, .admin-validation-output) {
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
}
:where(.admin-page-container, .admin-action-shell, .admin-report-shell, .admin-tool-page) :where(pre.admin-generated-output, pre.admin-log-output, pre.admin-result-output, pre.admin-json-output, pre.admin-sql-output) {
    white-space: pre-wrap;
}:where(.admin-selector-page, .admin-entity-edit-form, .admin-tool-success-output, .admin-reload-prompt) {
  max-width: 100%;
  box-sizing: border-box;
}
:where(.admin-selector-page) :where(.admin-table-container, .table-container),
:where(.admin-entity-edit-form) :where(.admin-table-container, .table-container) {
  max-width: 100%;
  overflow-x: auto;
}
:where(.admin-tool-success-output, .admin-reload-prompt, .admin-deployment-result) {
  overflow-wrap: anywhere;
  word-break: normal;
}:where(.admin-selector-page, .admin-selector-section) {
  border: var(--admin-border, 1px solid var(--css-color-rgba-0-0-0-16));
  border-radius: var(--admin-radius, .6rem);
  padding: var(--admin-space-md, .75rem);
  margin: var(--admin-space-md, .75rem) 0;
  background: var(--admin-surface, var(--color-white));
}
:where(.admin-entity-edit-form, .admin-confirmation-form) :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
  border-radius: var(--admin-input-radius, .45rem);
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
}
:where(.admin-entity-edit-form) :where(th, td),
:where(.admin-selector-page) :where(th, td) {
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}
:where(.admin-confirmation-form) .admin-confirmation-phrase code,
:where(.admin-danger-action-notice) code {
  font-weight: 700;
}
:where(.admin-tool-success-output, .admin-generated-output, .admin-result-output, .admin-log-output) {
  border-radius: var(--admin-radius, .6rem);
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}
:where(.admin-output-link, .admin-path-value, .admin-file-name, .admin-route-value) {
  overflow-wrap: anywhere;
  word-break: normal;
}
:where(.admin-css-removal-dry-run, .admin-dead-rule-dry-run) {
  border: var(--admin-border, 1px solid var(--css-color-rgba-0-0-0-16));
  border-radius: var(--admin-radius, .6rem);
  padding: var(--admin-space-md, .75rem);
  background: var(--admin-muted-surface, var(--css-color-rgba-0-0-0-03));
}


/* ADDED v2026-05-20.542-551: Admin CSS normalization checkpoint 9 refinements. */
:where(.admin-page-container,.admin-action-shell,.admin-tool-page,.admin-development-container,.admin-diagnostics-container) :where(.admin-selector-page,.admin-selector-section,.admin-entity-edit-form,.admin-confirmation-form,.admin-generated-output,.admin-result-output) {
    max-width: 100%;
    box-sizing: border-box;
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-selector-page,.admin-selector-section) {
    border: var(--admin-standard-border, 1px solid var(--border-color, var(--css-color-ddd)));
    border-radius: var(--admin-radius-lg, 12px);
    padding: var(--admin-spacing-md, 1rem);
    margin: var(--admin-spacing-md, 1rem) 0;
    background: var(--panel-bg, var(--color-white));
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-entity-edit-form,.admin-confirmation-form) {
    display: block;
    width: 100%;
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-entity-edit-form .admin-action-row,.admin-confirmation-form .admin-action-row,.admin-success-reload-prompt,.admin-generated-links,.admin-report-links) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-spacing-sm, .5rem);
    align-items: center;
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-generated-output,.admin-result-output,.admin-log-output,.admin-report-output,.admin-json-output,.admin-sql-output) {
    overflow-x: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
    border-radius: var(--admin-radius-md, 8px);
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-confirmation-phrase strong code) {
    font-weight: 700;
}
:where(.admin-page-container,.admin-action-shell,.admin-tool-page) :where(.admin-generated-link,.admin-download-link,.admin-report-link,.admin-file-link) {
    overflow-wrap: anywhere;
    word-break: normal;
}:where(.admin-sensitive-action-form) {
  border: var(--admin-standard-border, 1px solid var(--border-color, var(--css-color-ddd)));
  border-radius: var(--admin-radius-lg, 12px);
  padding: var(--admin-spacing-md, 1rem);
  background: var(--panel-bg, var(--color-white));
  max-width: 100%;
  box-sizing: border-box;
}
:where(.admin-unzip-action-form) {
  border-left: 4px solid var(--warning-border, var(--css-color-b76e00));
}
:where(.admin-delete-zip-action-form) {
  border-left: 4px solid var(--danger-border, var(--css-color-b00020));
  background: var(--admin-danger-surface, var(--css-color-rgba-176-0-32-035));
}
:where(.admin-button-secondary-danger) {
  border: 1px solid var(--danger-border, var(--css-color-b00020));
  color: var(--danger-text, var(--css-color-7a0016));
  background: var(--color-transparent);
  border-radius: var(--admin-input-radius, .45rem);
  min-height: 2.25rem;
  padding: .45rem .75rem;
  cursor: pointer;
}
:where(.admin-button-secondary-danger:hover, .admin-button-secondary-danger:focus-visible) {
  background: var(--admin-danger-surface, var(--css-color-rgba-176-0-32-08));
}:where(.admin-form-section, .admin-tool-form-section, .admin-confirmation-section, .admin-result-section) {
  border-radius: var(--admin-radius-lg, 12px);
  max-width: 100%;
  box-sizing: border-box;
}
:where(.admin-sensitive-tool-page) :where(.admin-action-row, .admin-danger-action-row, .admin-result-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-spacing-sm, .5rem);
  align-items: center;
}
:where(.admin-tool-result, .admin-action-result, .admin-generated-output, .admin-result-output, .admin-log-output) {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  box-sizing: border-box;
}
:where(.admin-entity-selector, .admin-entity-selector-section, .admin-entity-management-page) {
  max-width: 100%;
  box-sizing: border-box;
}
:where(.admin-delete-action, .admin-archive-action, .admin-restore-action, .admin-deploy-action) {
  white-space: normal;
}
@media (max-width: 700px) {
  :where(.admin-sensitive-action-form) { padding: var(--admin-spacing-sm, .75rem); }
  :where(.admin-sensitive-tool-page) :where(.admin-action-row, .admin-danger-action-row) { align-items: stretch; }
  :where(.admin-sensitive-tool-page) :where(button, .admin-button) { width: 100%; }
}

/* Phase 4 Steps 564-573 / 574-583: admin alert, deployment, retention, and file-reorg UI normalization. */
:where(.admin-swal-contract, .admin-alert-contract, .admin-modal-contract) {
  max-width: 100%;
  box-sizing: border-box;
}:where(.admin-button-delete-zip, .admin-button-archive-root-shim) {
  white-space: normal;
}
:where(.admin-result-message, .admin-tool-result-message, .admin-delete-only-result, .admin-retention-result) {
  overflow-wrap: anywhere;
  word-break: normal;
  border-radius: var(--admin-radius-md, 8px);
}@media (max-width: 700px) {}


/* ADDED v2026-05-20.584-593: Admin CSS normalization checkpoint 12. */
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-errors,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-warnings,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-info {
    display:block;
    margin: var(--admin-space-sm, 0.5rem) 0 var(--admin-space-md, 0.75rem);
    padding: var(--admin-space-sm, 0.5rem) var(--admin-space-md, 0.75rem);
    border-radius: var(--admin-radius-md, 0.5rem);
    overflow-wrap:anywhere;
}
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-errors { border:1px solid var(--error-color,var(--css-color-b00020)); background:var(--error-bg,var(--css-color-fff0f0)); }
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-warnings { border:1px solid var(--warning-color,var(--css-color-9a6700)); background:var(--warning-bg,var(--css-color-fff8e5)); }
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.admin-report-shell,.admin-action-shell,.admin-tool-page) .admin-form-info { border:1px solid var(--info-color,var(--css-color-2f6f9f)); background:var(--info-bg,var(--css-color-eef7ff)); }
:where(.admin-sensitive-action,.admin-sensitive-action-form,.admin-confirmation-form,.admin-archive-action,.admin-restore-action,.admin-delete-action,.admin-deploy-action) { max-width:100%; overflow-wrap:anywhere; }
:where(.admin-sensitive-action-row,.admin-danger-action-row,.admin-confirmation-actions,.admin-tool-action-row) { display:flex; flex-wrap:wrap; gap:var(--admin-space-sm,0.5rem); align-items:center; margin-top:var(--admin-space-sm,0.5rem); }
:where(.admin-generated-output,.admin-result-output,.admin-log-output,.admin-report-output,.admin-route-output,.admin-sql-output,.admin-json-output) { max-width:100%; overflow-x:auto; overflow-wrap:anywhere; border-radius:var(--admin-radius-md,0.5rem); }
:where(.admin-generated-link,.admin-report-link,.admin-download-link,.admin-log-link,.admin-manifest-link) { overflow-wrap:anywhere; word-break:break-word; }
:where(.admin-swal-contract-note,.admin-modal-contract-note) { font-size:0.95em; color:var(--muted-text,var(--css-color-555)); overflow-wrap:anywhere; }
/* ADDED v2026-05-20.604-613: Admin CSS normalization checkpoint 13 contracts. */
:where(.admin-form-errors,.admin-form-warnings,.admin-form-info){
  border:var(--admin-standard-border,1px solid var(--css-color-d0d7de));
  border-radius:var(--admin-radius,8px);
  padding:var(--admin-space-3,.75rem);
  margin:var(--admin-space-3,.75rem) 0;
  overflow-wrap:anywhere;
}
:where(.admin-form-errors){border-color:var(--danger,var(--css-color-b00020));}
:where(.admin-form-warnings){border-color:var(--warning,var(--css-color-b26b00));}
:where(.admin-form-info){border-color:var(--info,var(--css-color-1f6feb));}
:where(.admin-sensitive-action-copy,.admin-sensitive-action-copy strong){overflow-wrap:anywhere;}
:where(.admin-root-shim-action-table td,.admin-root-shim-action-table th){vertical-align:top;}
:where(.admin-route-qa-checklist li,.admin-visual-qa-checklist li){overflow-wrap:anywhere;}

/* ADDED v2026-05-20.614-623: File reorg admin UI polish. */
:where(.admin-root-shim-classification-form,.admin-root-shim-archive-form,.admin-root-shim-restore-form){
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}
:where(.admin-root-shim-classification-form input[type="text"]){min-width:min(28rem,100%);}
:where(.admin-root-policy-warning){border-left:4px solid var(--warning,var(--css-color-b26b00));}/* ADDED v2026-05-20.624: Hierarchical Development / Testing admin navigation. */
.admin-development-hierarchical-nav {
    align-items: stretch;
    gap: var(--space-sm, 0.5rem);
}
.admin-development-hierarchical-nav .admin-nav-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.35rem);
    min-width: min(18rem, 100%);
    max-width: 100%;
    padding: var(--space-xs, 0.35rem);
    border: 1px solid var(--border-color, var(--css-color-d7dce2));
    border-radius: var(--radius-md, 0.6rem);
    background: var(--surface-muted, var(--css-color-rgba-255-255-255-0-55));
}
.admin-nav-category-label {
    display: block;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}
.admin-nav-section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs, 0.25rem);
}
.admin-nav-section-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs, 0.25rem);
    min-width: 0;
}
.admin-development-hierarchy-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 1rem);
}
.admin-development-category {
    border: 1px solid var(--border-color, var(--css-color-d7dce2));
    border-radius: var(--radius-lg, 0.8rem);
    padding: var(--space-md, 0.75rem);
    background: var(--surface-color, var(--color-white));
}
.admin-development-category > h3,
.admin-development-section > h4 {
    margin-top: 0;
}
.admin-development-section {
    margin-top: var(--space-md, 0.75rem);
}
.admin-development-card-grid {
    margin-top: var(--space-xs, 0.35rem);
}
@media (max-width: 720px) {
    .admin-development-hierarchical-nav .admin-nav-category,
    .admin-development-category {
        min-width: 100%;
    }
}


/* PHASE4 STEP634-643: Admin formatting contract finalization */
.admin-page-container details,
.admin-dashboard-container details,
.admin-development-container details,
.admin-diagnostics-container details,
.diagnostics-container details,
.admin-report-shell details {
    border-radius: var(--admin-radius, 8px);
}
.admin-health-details.admin-section-outline-error > summary,
.admin-health-details.has-error > summary,
details.has-error > summary {
    border-color: var(--admin-error-border, var(--css-color-b42318));
    background: var(--admin-error-bg, var(--css-color-fff1f0));
    color: var(--admin-error-text, var(--css-color-7a271a));
}
.admin-health-details.admin-section-outline-warning > summary,
.admin-health-details.has-warning > summary,
details.has-warning > summary {
    border-color: var(--admin-warning-border, var(--css-color-b54708));
    background: var(--admin-warning-bg, var(--css-color-fff8e6));
    color: var(--admin-warning-text, var(--css-color-7a3b00));
}
.admin-health-details.admin-section-outline-info > summary,
.admin-health-details.has-info > summary,
details.has-info > summary {
    border-color: var(--admin-info-border, var(--css-color-175cd3));
    background: var(--admin-info-bg, var(--css-color-eff8ff));
    color: var(--admin-info-text, var(--css-color-1849a9));
}
.admin-health-details.admin-section-outline-none,
.admin-health-details.admin-section-outline-none > summary,
details.admin-section-outline-none > summary {
    border-color: var(--admin-border, var(--css-color-d0d5dd));
    background: inherit;
    color: inherit;
    box-shadow: none;
}
.admin-page-container .table-container,
.admin-dashboard-container .table-container,
.admin-development-container .table-container,
.admin-diagnostics-container .table-container,
.diagnostics-container .table-container,
.admin-report-shell .table-container,
.admin-page-container .admin-table-container,
.admin-dashboard-container .admin-table-container,
.admin-development-container .admin-table-container,
.admin-diagnostics-container .admin-table-container,
.diagnostics-container .admin-table-container,
.admin-report-shell .admin-table-container {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    box-sizing: border-box;
}
.admin-page-container table,
.admin-dashboard-container table,
.admin-development-container table,
.admin-diagnostics-container table,
.diagnostics-container table,
.admin-report-shell table,
table.admin-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    max-width: none;
    border-collapse: collapse;
}
.admin-page-container th,
.admin-dashboard-container th,
.admin-development-container th,
.admin-diagnostics-container th,
.diagnostics-container th,
.admin-report-shell th,
table.admin-table th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.admin-page-container td,
.admin-dashboard-container td,
.admin-development-container td,
.admin-diagnostics-container td,
.diagnostics-container td,
.admin-report-shell td,
table.admin-table td {
    max-width: min(42rem, 70vw);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
    box-sizing: border-box;
}
.admin-page-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-page-container select,
.admin-page-container textarea,
.admin-dashboard-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-dashboard-container select,
.admin-dashboard-container textarea,
.admin-development-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-development-container select,
.admin-development-container textarea,
.admin-diagnostics-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-diagnostics-container select,
.admin-diagnostics-container textarea,
.diagnostics-container input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.diagnostics-container select,
.diagnostics-container textarea,
.admin-report-shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.admin-report-shell select,
.admin-report-shell textarea {
    border-radius: var(--admin-input-radius, 8px);
}
.admin-table .status-error, .admin-table .error, .admin-table tr.error, .admin-table td.error, .admin-table .severity-error {
    background: var(--admin-error-bg, var(--css-color-fff1f0));
    color: var(--admin-error-text, var(--css-color-7a271a));
}
.admin-table .status-warning, .admin-table .warning, .admin-table tr.warning, .admin-table td.warning, .admin-table .severity-warning {
    background: var(--admin-warning-bg, var(--css-color-fff8e6));
    color: var(--admin-warning-text, var(--css-color-7a3b00));
}
.admin-table .status-info, .admin-table .info, .admin-table tr.info, .admin-table td.info, .admin-table .severity-info {
    background: var(--admin-info-bg, var(--css-color-eff8ff));
    color: var(--admin-info-text, var(--css-color-1849a9));
}
.admin-issue-list .admin-error-list,
.admin-issue-list .admin-warning-list,
.admin-issue-list .admin-info-list {
    margin-block: .5rem;
}

/* PHASE4 STEP644-653: File reorg workflow visual polish */
.admin-root-shim-workflow, .admin-route-qa-checklist, .admin-root-policy-warning {
    border: 1px solid var(--admin-border, var(--css-color-d0d5dd));
    border-radius: var(--admin-radius, 8px);
    padding: 1rem;
    margin: 1rem 0;
    overflow-wrap: anywhere;
}
.admin-root-policy-warning {
    border-color: var(--admin-warning-border, var(--css-color-b54708));
    background: var(--admin-warning-bg, var(--css-color-fff8e6));
}


/* ADDED v2026-05-20.654-663: Admin CSS normalization checkpoint 16.
   Consolidates status summaries, severity rows, section outlines, form controls,
   report cards, buttons, notices, details, and overflow-safe table behavior. */
:root {
  --admin-input-radius: var(--ui-radius-sm, 0.35rem);
  --admin-section-outline-error-border: var(--color-message-error);
  --admin-section-outline-warning-border: var(--color-message-warning);
  --admin-section-outline-info-border: var(--color-link, #2f5d9f);
  --admin-section-outline-none-border: var(--color-table-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-status-summary, .admin-report-summary, .admin-health-summary) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2, 0.5rem);
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 var(--ui-space-3, 0.75rem) 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-section-outline-error, .has-error) {
  border-color: var(--admin-section-outline-error-border) !important;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-section-outline-warning, .has-warning) {
  border-color: var(--admin-section-outline-warning-border) !important;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-section-outline-info, .has-info) {
  border-color: var(--admin-section-outline-info-border) !important;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-section-outline-none, .has-no-findings) {
  border-color: var(--admin-section-outline-none-border) !important;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) details.admin-section-outline-info > summary,
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) details.has-info > summary {
  background: var(--css-color-rgba-47-93-159-0-10);
  color: var(--color-link, var(--css-color-2f5d9f));
  border-radius: calc(var(--admin-ui-radius, 0.75rem) - 0.2rem);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.severity-error, .status-error, tr.error, .admin-notice-error) {
  background: var(--admin-ui-error-bg, var(--admin-ui-error-bg));
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.severity-warning, .status-warning, tr.warning, .admin-notice-warning) {
  background: var(--admin-ui-warning-bg, var(--admin-ui-warning-bg));
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.severity-info, .status-info, tr.info, .admin-notice-info) {
  background: var(--css-color-rgba-47-93-159-0-08);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], input[type="file"], select, textarea) {
  border-radius: var(--admin-input-radius);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.admin-report-card, .report-card, .admin-card, .dashboard-card) {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.button-danger, .btn-danger, .admin-action-danger) {
  border-color: var(--color-message-error);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell) :where(.button-warning, .btn-warning, .admin-action-warning) {
  border-color: var(--color-message-warning);
}


/* ADDED v2026-05-20.674-683: Admin CSS normalization checkpoint 17.
   Additive contract layer for admin form rows, filters, report toolbars,
   destructive actions, compact tables, mobile spacing, and shared variables. */
:root {
  --admin-control-gap: var(--ui-space-2, 0.5rem);
  --admin-control-gap-lg: var(--ui-space-3, 0.75rem);
  --admin-card-gap: var(--ui-space-3, 0.75rem);
  --admin-control-border: var(--color-table-border, #d0d5dd);
  --admin-control-bg: var(--color-surface, #fff);
  --admin-muted-text: var(--color-muted, #667085);
  --admin-button-danger-border: var(--color-message-error, #b00020);
  --admin-button-danger-bg: var(--admin-ui-error-bg, #ffe5df);
  --admin-button-warning-border: var(--color-message-warning, #9a6a00);
  --admin-button-warning-bg: var(--admin-ui-warning-bg, #fff8e1);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-form-row, .form-row, .field-row, .input-row, .setting-row, .control-row, .report-form-row, .admin-inline-form) {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-control-gap);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-form-row, .form-row, .field-row, .input-row, .setting-row, .control-row, .report-form-row, .admin-inline-form) > :where(label, input, select, textarea, button, a, span, code, small) {
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-filter-panel, .admin-filter-bar, .filter-panel, .filter-bar, .filters, .filter-row, .admin-filters, .search-controls, .report-controls) {
  align-items: end;
  background: var(--admin-control-bg);
  border: 1px solid var(--admin-control-border);
  border-radius: var(--admin-ui-radius, 0.75rem);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-control-gap);
  margin-block: var(--admin-control-gap-lg);
  max-width: 100%;
  min-width: 0;
  padding: var(--admin-control-gap-lg);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-report-toolbar, .report-toolbar, .page-toolbar, .admin-toolbar, .admin-action-row, .page-actions, .report-actions, .form-actions, .action-buttons) {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-control-gap);
  justify-content: flex-start;
  margin-block: var(--admin-control-gap-lg);
  max-width: 100%;
  min-width: 0;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-report-toolbar, .report-toolbar, .page-toolbar, .admin-toolbar, .admin-action-row, .page-actions, .report-actions, .form-actions, .action-buttons) :where(a, button, input[type="submit"], input[type="button"]) {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-action-danger, .button-danger, .btn-danger, .danger, .delete-button, .archive-button, button[name*="delete"], button[name*="remove"], button[name*="reject"]) {
  background: var(--admin-button-danger-bg);
  border-color: var(--admin-button-danger-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-action-warning, .button-warning, .btn-warning, .warning-button, button[name*="void"], button[name*="forfeit"], button[name*="archive"]) {
  background: var(--admin-button-warning-bg);
  border-color: var(--admin-button-warning-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-table-compact, .compact-table, table.compact, .admin-table.compact, .diagnostic-table.compact) :where(th, td) {
  padding: clamp(0.25rem, 0.8vw, 0.5rem);
  vertical-align: top;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-muted, .muted, .admin-help-text, small.help, .admin-inline-note) {
  color: var(--admin-muted-text);
}

@media (max-width: 720px) {
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) {
    padding-inline: clamp(0.5rem, 3vw, 1rem);
  }
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-filter-panel, .admin-filter-bar, .filter-panel, .filter-bar, .filters, .filter-row, .admin-filters, .search-controls, .report-controls, .admin-report-toolbar, .report-toolbar, .page-toolbar, .admin-toolbar, .admin-action-row, .page-actions, .report-actions, .form-actions, .action-buttons, .admin-form-row, .form-row, .field-row, .input-row, .setting-row, .control-row, .report-form-row, .admin-inline-form) {
    align-items: stretch;
    gap: var(--admin-control-gap);
  }
  :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-filter-panel, .admin-filter-bar, .filter-panel, .filter-bar, .filters, .filter-row, .admin-filters, .search-controls, .report-controls, .admin-form-row, .form-row, .field-row, .input-row, .setting-row, .control-row, .report-form-row, .admin-inline-form) > :where(input, select, textarea, button, a) {
    flex: 1 1 100%;
  }
}


/* ADDED v2026-05-20.694-704: Admin CSS normalization checkpoint 18.
   Applies the calendar 2+ teams dark-grey outline request and extends shared
   admin input/form/filter/toolbar/button contracts for the next adoption batch. */
:root {
  --calendar-overlap-outline: #4a4a4a;
  --calendar-overlap-outline-dark: #5f6368;
  --admin-control-radius: var(--admin-input-radius, 0.35rem);
  --admin-control-padding-y: 0.32rem;
  --admin-control-padding-x: 0.5rem;
  --admin-table-compact-padding-y: 0.25rem;
  --admin-table-compact-padding-x: 0.4rem;
}

.calendar-overlap::before {
  border-color: var(--calendar-overlap-outline, var(--calendar-overlap-outline));
}

@media (prefers-color-scheme: dark) {
  .calendar-overlap {
    box-shadow:
      inset 0 0 0 1px var(--color-white),
      inset 0 0 0 2px var(--calendar-overlap-outline-dark, var(--calendar-overlap-outline-dark)),
      0 0 4px var(--css-color-rgba-95-99-104-0-65);
  }

  .calendar-overlap::before {
    border-color: var(--calendar-overlap-outline-dark, var(--calendar-overlap-outline-dark));
  }
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-input, .admin-select, .admin-textarea) {
  border: 1px solid var(--admin-control-border, var(--color-table-border));
  border-radius: var(--admin-control-radius);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: var(--admin-control-padding-y) var(--admin-control-padding-x);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-form, .admin-inline-form) :where(input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea) {
  border-radius: var(--admin-control-radius);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-button-neutral, .admin-button-secondary, .admin-button-warning, .admin-button-danger) {
  border-radius: var(--admin-control-radius);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-button-danger, .admin-action-danger) {
  background: var(--admin-button-danger-bg);
  border-color: var(--admin-button-danger-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-button-warning, .admin-action-warning) {
  background: var(--admin-button-warning-bg);
  border-color: var(--admin-button-warning-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-table-compact, .compact-table) :where(th, td) {
  padding: var(--admin-table-compact-padding-y) var(--admin-table-compact-padding-x);
}


/** ADDED v2026-05-20.775-784
 *  Profile/photo card and remaining admin form normalization.
 */
.admin-input-uppercase {
    text-transform: uppercase;
}

.admin-people-edit-table-container {
    margin-top: 0.5rem;
}

.profile-photo-card-grid,
.team-profile-member-grid {
    align-items: stretch;
}

.profile-photo-card,
.team-profile-member-card {
    box-sizing: border-box;
}

.team-profile-member-card .profile-initials-avatar-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.team-profile-member-photo-link:focus-visible,
.team-profile-member-name:focus-visible {
    outline: 2px solid var(--admin-focus-outline, var(--css-color-57606a));
    outline-offset: 3px;
    border-radius: 0.375rem;
}

@media (max-width: 420px) {
    .team-profile-member-card {
        gap: 0.625rem;
        padding: 0.625rem;
    }

    .team-profile-member-meta {
        font-size: 0.85rem;
    }
}


/** ADDED v2026-05-20.795-804
 *  Admin CSS checkpoint 23 policy/grouping hooks.
 *  Static layout styling should use shared classes. Dashboard chart inline
 *  styles remain allowed only for data-derived widths, pie gradients, and
 *  swatch colours generated by report helpers.
 */
:root {
    --admin-profile-photo-size: 72px;
    --admin-profile-photo-radius: 999px;
    --admin-report-chrome-gap: 0.75rem;
}

.admin-report-chrome,
.admin-report-toolbar,
.report-actions.admin-report-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-report-chrome-gap);
    margin: 0.75rem 0 1rem 0;
}

.admin-profile-photo-normalized,
.profile-photo-card .image-oval,
.team-profile-member-card .image-oval,
.profile-photo-card .profile-initials-avatar-profile,
.team-profile-member-card .profile-initials-avatar-profile {
    border-radius: var(--admin-profile-photo-radius);
}

.admin-chart-inline-policy-note {
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem 0;
}

/* Admin CSS grouping checkpoint: forms/buttons/tables/reports/profile cards/calendar/diagnostics are intentionally grouped by nearby section comments rather than moved wholesale, preserving cascade order. */


/** ADDED v2026-05-20.815-824
 *  Player-facing UI/UX normalization checkpoint 24.
 *  Purpose: create a shared public/player page contract for mobile and desktop
 *  without rewriting page-specific business markup in this first pass.
 */
:root {
    --control-text-bg: #f6f8fa;
    --control-text-bg-focus: #e6e8eb;
    --control-text-border: var(--color-table-border, #d0d7de);
    --control-text-border-focus: var(--color-button-bg, #0969da);
    --player-page-max-width: 1180px;
    --player-page-gap: 1rem;
    --player-card-radius: 0.85rem;
    --player-card-border: var(--color-table-border, #d0d7de);
    --player-card-bg: var(--color-section-bg, rgba(255,255,255,0.82));
    --player-card-shadow: 0 1px 2px rgba(27,31,36,0.05);
    --player-touch-target-min: 44px;
}

/* Subtle text-control background requested for forms. Excludes checkboxes, radios,
   hidden fields, buttons, and submit controls so score/buttons retain existing UI. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select {
    background-color: var(--control-text-bg);
    border-color: var(--control-text-border);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
    background-color: var(--control-text-bg-focus);
    border-color: var(--control-text-border-focus);
    box-shadow: 0 0 0 2px var(--css-color-rgba-9-105-218-0-12);
}

.page-title {
    line-height: 1.2;
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.page-title-rule {
    margin: 0.35rem 0 0.85rem;
}

.player-page-container {
    max-width: var(--player-page-max-width);
    margin-inline: auto;
    padding: 0.25rem 0.25rem 1.25rem;
}

.player-page-container h3,
.player-page-container h4 {
    line-height: 1.3;
    margin-block: 0.85rem 0.55rem;
}

.player-page-container :where(.table-container, .stats-table-container) {
    margin-block: 0.75rem;
}

.player-page-container :where(table:not(.table-calendar)) {
    border-collapse: collapse;
    max-width: 100%;
}

.player-page-container :where(th, td) {
    overflow-wrap: anywhere;
}

.player-page-container :where(a, button, input, select, textarea) {
    scroll-margin-top: 0.75rem;
}

.player-page-container :where(button, input[type="submit"], .button, .btn, .action-button) {
    min-height: var(--player-touch-target-min);
}

.player-section-card,
.player-card,
.team-profile-section,
.profile-photo-card,
.team-profile-member-card,
.donation-form,
.feedback-form {
    border: 1px solid var(--player-card-border);
    border-radius: var(--player-card-radius);
    background: var(--player-card-bg);
    box-shadow: var(--player-card-shadow);
}

.team-profile-section,
.profile-photo-card,
.donation-form,
.feedback-form {
    padding: 0.85rem;
}

.player-action-row,
.player-toolbar,
.player-filter-row,
.player-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.player-page-container :where(.small-link, .team-profile-link) {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

.calendar-container {
    max-width: 100%;
}

.calendar-container .table-calendar {
    width: max-content;
    min-width: 100%;
}

.calendar-container .calendar-team-legend {
    align-items: stretch;
    gap: 0;
    margin-bottom: 0.6rem;
}

.calendar-container .calendar-team-legend-line {
    min-height: 0;
    padding-block: 0;
}

.teams-container,
.players-container,
.stats-container,
.team-profile-container,
.calendar-container,
.donations-container,
.feedback-container {
    container-type: inline-size;
}

.team-profile-member-grid {
    width: 100%;
}

@container (max-width: 620px) {
    .team-profile-member-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --player-page-gap: 0.75rem;
    }

    .page-title {
        font-size: clamp(1.25rem, 5.6vw, 1.75rem);
    }

    .player-page-container {
        padding-inline: 0.15rem;
    }

    .player-page-container :where(th, td) {
        padding: 0.42rem 0.5rem;
    }

    .player-page-container :where(button, input[type="submit"], select) {
        width: 100%;
    }

    .player-action-row,
    .player-toolbar,
    .player-filter-row,
    .player-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-container .table-calendar {
        font-size: 0.92rem;
    }

    .calendar-container .calendar-team-legend-line {
        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --control-text-bg: #1f242b;
        --control-text-bg-focus: #0d1117;
        --control-text-border: #3d444d;
        --player-card-border: #3d444d;
        --player-card-bg: rgba(22,27,34,0.76);
        --player-card-shadow: none;
        --player-muted-text: #9aa4af;
    }
}

/* UI/UX benchmark note: player-facing pages should prioritize readable hierarchy,
   consistent touch targets, contained horizontal overflow, reusable cards, and
   focus-visible controls on both mobile and desktop. */

.profile-summary-table-left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.feedback-form-table-container,
.feedback-recent-table-container,
.eligible-subs-table-container,
.team-availability-table-container {
    margin-block: 0.5rem;
}

/** ADDED v2026-05-20.835-864
 *  Checkpoint 25 / player-facing checkpoint 25.
 *  Purpose: maintain a clear admin/player CSS boundary while applying the
 *  shared player-facing layout contract to more public pages.
 */
:root {
    --player-section-padding: 0.9rem;
    --player-section-gap: 0.85rem;
    --player-toolbar-gap: 0.55rem;
    --player-card-border-strong: color-mix(in srgb, var(--player-card-border) 72%, #000 8%);
}

.ui-surface-admin .player-section-card,
.ui-surface-admin .player-card,
.admin-page-container .player-section-card,
.admin-page-container .player-card {
    /* Boundary guard: player-facing card classes should not alter admin density. */
    box-shadow: none;
}

.admin-page-container :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
    background-color: var(--control-text-bg);
}

.admin-page-container :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select):focus {
    background-color: var(--control-text-bg-focus);
}

.player-page-container :where(.divborder.player-section-card, .player-section-card, .player-card) {
    padding: var(--player-section-padding);
    margin-block: var(--player-section-gap);
}

.player-page-container :where(.divborder.player-section-card) {
    border-color: var(--player-card-border);
    background: var(--player-card-bg);
}

.player-page-container :where(details.team-profile-section, details.stats-details, details.admin-section, details.approvals-exclusive-details) {
    border: 1px solid var(--player-card-border);
    border-radius: var(--player-card-radius);
    background: var(--player-card-bg);
    padding: 0.65rem 0.8rem;
    margin-block: 0.75rem;
}

.player-page-container :where(details.team-profile-section, details.stats-details, details.admin-section, details.approvals-exclusive-details) > summary {
    cursor: pointer;
    font-weight: 650;
    min-height: 34px;
    align-content: center;
}

.season-select-list form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--player-toolbar-gap);
}

.season-select-button {
    min-height: var(--player-touch-target-min);
}

.player-page-container :where(.feedback-submit-button, .stats-advanced-toggle, .primary-button, .season-select-button, button[type="submit"]) {
    min-height: var(--player-touch-target-min);
}

.player-page-container :where(.profile-summary-wrap, .team-profile-member-grid, .stats-progress-grid) {
    gap: var(--player-section-gap);
}

.player-page-container :where(.profile-summary-table, .stats-table, .remaining-matches-table, .team-insight-table, .round-trends-table) th {
    white-space: normal;
}

.player-page-container :where(.profile-summary-table, .stats-table, .remaining-matches-table, .team-insight-table, .round-trends-table) td {
    vertical-align: middle;
}

.player-page-container :where(.info, .warning, .error, .success) {
    border-radius: var(--player-card-radius);
    margin-block: 0.65rem;
}

.calendar-container .calendar-team-legend,
.teams-container .stats-table-container,
.players-container .stats-table-container,
.stats-container .stats-table-container,
.matches-container .match-pool-container {
    max-width: 100%;
}

@media (max-width: 768px) {
    .player-page-container :where(.divborder.player-section-card, .player-section-card, .player-card) {
        padding: 0.75rem;
    }

        align-items: stretch;
        flex-direction: column;
    }

    .season-select-list form,
    .season-select-list button {
        width: 100%;
    }

    .player-page-container :where(details.team-profile-section, details.stats-details, details.admin-section, details.approvals-exclusive-details) {
        padding: 0.55rem 0.65rem;
    }
}

/* CSS ownership checkpoint: shared controls and theme variables live above; admin
   report chrome stays admin-scoped; player-facing cards/forms/tables are scoped
   to .player-page-container where practical to avoid leaking desktop admin density. */

.stats-overview-card,
.stats-progress-panel.player-section-card {
    padding: var(--player-section-padding);
}

/** ADDED v2026-05-20.865
 *  Admin desktop and player mobile optimization pass.
 *  Purpose: improve scan density and workstation layouts for admin pages while
 *  keeping player-facing pages thumb-friendly and single-column on mobile.
 */
:root {
    --admin-desktop-content-max: 1480px;
    --admin-desktop-card-gap: 1rem;
    --admin-desktop-section-padding: 1rem;
    --player-mobile-side-padding: 0.5rem;
    --player-mobile-card-padding: 0.7rem;
}

nav .nav-approval-count {
    min-width: 1.45em;
    text-align: center;
}

.admin-dashboard-error-warning-summary {
    margin-block: 0.75rem;
}

.admin-dashboard-error-warning-table td,
.admin-dashboard-error-warning-table th {
    vertical-align: top;
}

.admin-dashboard-error-warning-table .dashboard-status-blocked td:first-child {
    color: var(--css-color-8a1f11);
}

.admin-dashboard-error-warning-table .dashboard-status-warning td:first-child {
    color: var(--css-color-5f4b00);
}

@media (min-width: 1024px) {
    .admin-page-container,
    .admin-dashboard-container,
    .admin-tool-page,
    .admin-report-chrome {
        max-width: var(--admin-desktop-content-max);
        margin-left: auto;
        margin-right: auto;
    }

    .admin-dashboard-container .dashboard-overview,
    .admin-page-container .admin-section,
    .admin-page-container .admin-tool-section,
    .admin-page-container .admin-generated-output-section,
    .admin-report-chrome,
    .admin-tool-page {
        padding: var(--admin-desktop-section-padding);
    }

    .admin-dashboard-container .dashboard-card-grid,
    .admin-card-grid,
    .admin-overview-card-grid,
    .admin-report-card-grid {
        gap: var(--admin-desktop-card-gap);
    }

    .admin-page-container .admin-action-row,
    .admin-page-container .admin-report-toolbar,
    .admin-page-container .admin-filter-row,
    .admin-page-container .admin-toolbar {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .admin-page-container .table-container,
    .admin-dashboard-container .table-container,
    .admin-tool-page .table-container {
        overflow-x: auto;
        scrollbar-gutter: stable both-edges;
    }

    .admin-page-container table.admin-table,
    .admin-dashboard-container table.admin-dashboard-table,
    .admin-tool-page table.admin-table {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .player-page-container {
        padding-left: var(--player-mobile-side-padding);
        padding-right: var(--player-mobile-side-padding);
    }

    .player-page-container :where(.player-section-card, .player-card, .divborder.player-section-card, details.team-profile-section, details.stats-details, details.approvals-exclusive-details) {
        padding: var(--player-mobile-card-padding);
        margin-block: 0.65rem;
    }

    .player-page-container :where(.page-title, h1, h2, h3) {
        line-height: 1.18;
        text-wrap: balance;
    }

        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .player-page-container :where(a.button-link, .button-link, button, input[type="submit"], input[type="button"], select) {
        min-height: var(--player-touch-target-min);
    }

    .player-page-container :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }

    .player-page-container :where(.table-container, .table-wrap, .stats-table-container, .calendar-table-wrap) {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .player-page-container :where(th, td) {
        line-height: 1.25;
    }

    .calendar-container .calendar-team-legend-line,
    .team-profile-member-card,
    .player-profile-card,
    .profile-summary-wrap > * {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .player-page-container {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .player-page-container :where(.player-section-card, .player-card, .divborder.player-section-card) {
        border-radius: 10px;
    }

    .calendar-container .calendar-team-legend-line {
        gap: 0.15rem;
    }
}

@media (prefers-color-scheme: dark) {
    .admin-dashboard-error-warning-table .dashboard-status-blocked td:first-child {
        color: var(--css-color-ffb4a8);
    }

    .admin-dashboard-error-warning-table .dashboard-status-warning td:first-child {
        color: var(--css-color-ead678);
    }
}

/** ADDED v2026-05-20.866
 * Active text-entry field highlight.
 * Keeps idle text inputs subtly grey and focused/active text-entry fields a
 * slightly stronger light grey instead of a stark white flash.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    background-color: var(--css-color-eef1f4);
    border-color: var(--css-color-7f8a96);
    box-shadow: 0 0 0 2px var(--css-color-rgba-127-138-150-0-16);
    outline: none;
}

/** ADDED v2026-05-20.866
 * Sysadmin donation-management layout.
 */
.admin-donations-container .admin-action-shell,
.admin-donations-container .admin-page-container {
    max-width: 1440px;
}

.admin-donation-summary-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.admin-donation-form .admin-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 0.7fr) minmax(190px, 1fr);
    gap: 12px;
    align-items: end;
}

.admin-donations-table select,
.admin-donations-table input[type="number"],
.admin-donations-table input[type="datetime-local"] {
    min-width: 150px;
    width: 100%;
}

.admin-donations-table .admin-donation-inline-form {
    display: contents;
}

@media (max-width: 720px) {
    .admin-donation-summary-grid,
    .admin-donation-form .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-donations-table select,
    .admin-donations-table input[type="number"],
    .admin-donations-table input[type="datetime-local"] {
        min-width: 180px;
    }
}


/** ADDED v2026-05-20.895-914
 * Admin desktop and player-mobile normalization checkpoint 26.
 * Purpose: keep donation/admin operation pages dense on desktop, keep player
 * facing forms touch-friendly on mobile, and make focused text-entry controls
 * subtly light grey without changing checkbox/radio/button controls.
 */
:root {
    --control-active-bg: #e6e8eb;
    --control-active-border: #8b96a3;
    --control-active-shadow: rgba(139, 150, 163, 0.16);
    --admin-table-cell-pad-y-desktop: 0.42rem;
    --admin-table-cell-pad-x-desktop: 0.58rem;
    --player-mobile-field-gap: 0.55rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
    background-color: var(--control-active-bg);
    border-color: var(--control-active-border);
    box-shadow: 0 0 0 2px var(--control-active-shadow);
    outline: none;
}

.admin-donations-container .admin-action-shell {
    display: grid;
    gap: 1rem;
}

.admin-donation-summary,
.admin-donation-add-card,
.admin-donation-list-card {
    margin-block: 0;
}

.admin-donation-summary-grid .admin-dashboard-warning-card,
.admin-summary-card {
    min-height: 4.25rem;
}

.admin-donation-form label,
.admin-inline-edit-form label,
.admin-form-grid label {
    display: grid;
    gap: 0.28rem;
}

.admin-donations-table td:last-child,
.admin-donations-table th:last-child {
    text-align: right;
    white-space: nowrap;
}

.admin-donations-table .admin-button {
    min-height: 2.15rem;
}

@media (min-width: 1024px) {
    .admin-page-container .admin-section-card,
    .admin-action-shell .admin-section-card,
    .admin-dashboard-error-warning-summary {
        padding: 1rem;
    }

    .admin-page-container :where(table.admin-table, table.admin-dashboard-table) th,
    .admin-page-container :where(table.admin-table, table.admin-dashboard-table) td,
    .admin-action-shell :where(table.admin-table, table.admin-dashboard-table) th,
    .admin-action-shell :where(table.admin-table, table.admin-dashboard-table) td {
        padding: var(--admin-table-cell-pad-y-desktop) var(--admin-table-cell-pad-x-desktop);
    }

    .admin-donation-form .admin-form-grid {
        grid-template-columns: minmax(260px, 1.6fr) minmax(150px, 0.65fr) minmax(220px, 0.9fr);
    }

    .admin-donations-table {
        table-layout: auto;
    }
}

@media (max-width: 768px) {
        gap: var(--player-mobile-field-gap);
    }

    .player-page-container :where(label, .form-row, .player-form-row) {
        display: grid;
        gap: 0.35rem;
    }

    .player-page-container :where(button, .button-link, input[type="submit"], input[type="button"]) {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .player-page-container :where(.admin-notice, .notice, .status-box, .workflow-status-box) {
        overflow-wrap: anywhere;
    }

        position: sticky;
        bottom: 0;
        padding-block: 0.45rem;
        background: var(--page-bg, var(--color-white));
        z-index: 2;
    }
}

@media (max-width: 420px) {
    .player-page-container :where(.calendar-container, .stats-container, .matches-container, .feedback-container) {
        padding-inline: 0.25rem;
    }

    .player-page-container :where(.player-section-card, .player-card) {
        padding: 0.6rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --control-active-bg: #20252b;
        --control-active-border: #87919d;
        --control-active-shadow: rgba(135, 145, 157, 0.24);
    }

        background: var(--page-bg, var(--css-color-111418));
    }
}

/* ADDED v2026-05-20.925: Dashboard badge source breakdown so nav badge and Dashboard rows reconcile clearly. */
.admin-dashboard-badge-breakdown {
    margin: 0.75rem 0 1rem;
    padding: 0.875rem 1rem;
}
.admin-dashboard-badge-breakdown p {
    margin: 0 0 0.75rem;
}
.admin-dashboard-badge-breakdown-table th.num,
.admin-dashboard-badge-breakdown-table td.num {
    text-align: right;
    white-space: nowrap;
}
.admin-dashboard-badge-total-row td {
    border-top: 2px solid var(--admin-border-color, var(--css-color-d7d7d7));
}
@media (max-width: 640px) {
    .admin-dashboard-badge-breakdown {
        padding: 0.75rem;
    }
    .admin-dashboard-badge-breakdown-table th,
    .admin-dashboard-badge-breakdown-table td {
        white-space: normal;
    }
}

/** ADDED v2026-05-20.955-964
 * Admin Dashboard badge-breakdown and report-chrome stabilization checkpoint 28.
 */
:root {
    --admin-dashboard-breakdown-bg: #f6f7f8;
    --admin-dashboard-breakdown-border: #d9dee4;
    --admin-dashboard-breakdown-accent: #4f5965;
}

.admin-dashboard-badge-breakdown {
    border: 1px solid var(--admin-dashboard-breakdown-border);
    border-left: 4px solid var(--admin-dashboard-breakdown-accent);
    border-radius: var(--admin-card-radius, 10px);
    background: var(--admin-dashboard-breakdown-bg);
}

.admin-dashboard-badge-breakdown-table-container {
    margin-top: 0.5rem;
}

.admin-dashboard-badge-breakdown-table th,
.admin-dashboard-badge-breakdown-table td {
    vertical-align: top;
}

.admin-report-chrome,
.admin-report-toolbar,
.admin-dashboard-error-warning-summary,
.admin-dashboard-badge-breakdown {
    overflow-wrap: anywhere;
}

.nav-approval-count {
    line-height: 1;
    min-width: 1.35em;
    text-align: center;
}

@media (min-width: 1024px) {
    .admin-dashboard-badge-breakdown-table {
        table-layout: auto;
    }
    .admin-dashboard-badge-breakdown-table td:nth-child(3) {
        max-width: 46rem;
    }
}

@media (max-width: 640px) {
    .admin-dashboard-badge-breakdown-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-dashboard-badge-breakdown-table {
        min-width: 560px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --admin-dashboard-breakdown-bg: #1b2026;
        --admin-dashboard-breakdown-border: #39414a;
        --admin-dashboard-breakdown-accent: #7c8794;
    }
}

/** ADDED v2026-05-20.965-974
 * Player-facing mobile refinement checkpoint 28.
 */
@media (max-width: 768px) {
    .player-page-container :where(.player-action-row, .player-toolbar, .player-filter-row, .player-page-actions) {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        align-items: stretch;
    }

    .player-page-container :where(.player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend) {
        border-radius: 10px;
    }

    .player-page-container :where(.calendar-team-legend-row, .calendar-team-row, .team-row, .player-row) {
        gap: 0.35rem;
        overflow-wrap: anywhere;
    }

    .player-page-container :where(input, textarea, select) {
        max-width: 100%;
    }

    .player-page-container :where(.table-container, .responsive-table-wrap, .calendar-table-wrap) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .player-page-container :where(.workflow-status-box, .match-status-box, .approval-status-box) {
        padding: 0.7rem;
    }
}

@media (max-width: 480px) {
    .player-page-container :where(.page-title, h1) {
        font-size: clamp(1.35rem, 8vw, 1.8rem);
        line-height: 1.12;
    }

    .player-page-container :where(.team-profile-member-grid, .player-card-grid, .stats-card-grid) {
        grid-template-columns: 1fr;
    }

        margin-inline: 0;
    }
}


/** ADDED v2026-05-20.1015-1034
 *  Harmonized semantic colour layer.
 *  Calendar/player identity colours are intentionally preserved: .c1/.c2,
 *  .c3/.c4, .c5/.c6, and .c7/.c8 remain paired dark/light player colours
 *  for same-team contrast and are not reused for generic UI states.
 */
:root {
    /* Neutral foundation */
    --color-text: #24292f;
    --color-text-muted: #57606a;
    --color-muted: #667085;
    --color-surface: #ffffff;
    --color-section-bg: #ffffff;
    --color-surface-muted: #f6f8fa;
    --color-surface-subtle: #eef1f4;
    --color-page-bg: #f4f5f7;
    --color-border-subtle: #d0d7de;
    --color-table-border: #d0d7de;
    --color-table-header-bg: #e6e8eb;

    /* Primary/link states */
    --color-link: #2563eb;
    --color-link-hover: #1849a9;
    --color-button-bg: #2f8f4f;
    --color-button-hover-bg: #267640;
    --color-button-text: var(--color-white);
    --color-focus-ring: rgba(9, 105, 218, 0.16);

    /* Semantic status palette; do not substitute these for calendar player identity colours. */
    --color-success: #1f7a3f;
    --color-success-bg: #e8f8ed;
    --color-success-border: #9ad4aa;
    --color-success-text: #195c2e;
    --color-warning: #9a6700;
    --color-warning-bg: #fff8e1;
    --color-warning-border: #d99a00;
    --color-warning-text: #5f4b00;
    --color-danger: #b42318;
    --color-danger-bg: #fdecea;
    --color-danger-border: #d92d20;
    --color-danger-text: #7a271a;
    --color-info: #2271b1;
    --color-info-bg: #eef7ff;
    --color-info-border: #84c5f4;
    --color-info-text: #1849a9;
    --color-neutral-bg: #f6f8fa;
    --color-neutral-border: #d0d7de;
    --color-neutral-text: #57606a;
    --color-neutral-outline: #4a4a4a;

    /* Message aliases kept for older templates. */
    --color-message-warning: var(--color-warning);
    --color-message-info: var(--color-info);
    --color-message-error: var(--color-danger);
    --color-message-failure: var(--color-danger);

    /* Admin aliases */
    --admin-surface: var(--color-surface);
    --admin-muted-surface: var(--color-surface-muted);
    --admin-border: var(--color-border-subtle);
    --admin-muted-text: var(--color-text-muted);
    --admin-ui-muted-text: var(--color-text-muted);
    --admin-ui-soft-bg: var(--color-surface-muted);
    --admin-ui-error-bg: var(--color-danger-bg);
    --admin-ui-warning-bg: var(--color-warning-bg);
    --admin-ui-ok-bg: var(--color-success-bg);
    --admin-error-bg: var(--color-danger-bg);
    --admin-error-border: var(--color-danger-border);
    --admin-error-text: var(--color-danger-text);
    --admin-warning-bg: var(--color-warning-bg);
    --admin-warning-border: var(--color-warning-border);
    --admin-warning-text: var(--color-warning-text);
    --admin-info-bg: var(--color-info-bg);
    --admin-info-border: var(--color-info-border);
    --admin-info-text: var(--color-info-text);
    --admin-focus-outline: var(--color-focus-ring);
    --admin-control-border: var(--color-border-subtle);
    --admin-control-bg: var(--color-surface);
    --admin-button-danger-border: var(--color-danger-border);
    --admin-button-danger-bg: var(--color-danger-bg);
    --admin-button-warning-border: var(--color-warning-border);
    --admin-button-warning-bg: var(--color-warning-bg);

    /* Shared form control aliases */
    --control-text-bg: var(--color-surface-muted);
    --control-text-bg-focus: #e5e7eb;
    --control-active-bg: var(--control-text-bg-focus);
    --control-text-border: var(--color-border-subtle);
    --control-text-border-focus: var(--color-link);
    --control-active-border: var(--color-link);
    --control-active-shadow: 0 0 0 2px var(--color-focus-ring);

    /* Player-facing aliases */
    --player-card-border: var(--color-border-subtle);
    --player-card-bg: var(--color-surface);
    --player-card-shadow: 0 1px 2px rgba(27, 31, 36, 0.06);
    --player-muted-text: var(--color-text-muted);

    /* Calendar non-player UI colours. Player .c1-.c8 identity colours remain unchanged above. */
    --calendar-overlap-outline: var(--color-neutral-outline);
    --calendar-overlap-outline-dark: #5f6368;
}


/** ADDED v2026-05-20.1045-1064
 *  Palette regression polish after semantic colour normalization.
 *  Do not alter .c1-.c8 calendar player identity colours: those colours are
 *  intentionally paired as dark/light teammates for calendar contrast.
 */
:root {
    /* Harmonized semantic component aliases */
    --admin-notice-radius: 0.55rem;
    --admin-notice-padding: 0.65rem 0.8rem;
    --admin-table-hover-bg: #f9fafb;
    --admin-button-secondary-bg: #f6f8fa;
    --admin-button-secondary-border: #d0d7de;
    --admin-button-secondary-text: #24292f;
    --admin-badge-bg: #eef1f4;
    --admin-badge-text: #24292f;
    --admin-badge-warning-bg: var(--color-warning-bg);
    --admin-badge-warning-text: var(--color-warning-text);
    --admin-badge-danger-bg: var(--color-danger-bg);
    --admin-badge-danger-text: var(--color-danger-text);
    --player-action-secondary-bg: var(--color-surface-muted);
    --player-action-secondary-border: var(--color-border-subtle);
    --player-status-success-bg: var(--color-success-bg);
    --player-status-warning-bg: var(--color-warning-bg);
    --player-status-danger-bg: var(--color-danger-bg);
    --player-status-info-bg: var(--color-info-bg);
    --calendar-ui-today-bg: var(--color-info-bg);
    --calendar-ui-selected-bg: var(--color-success-bg);
    --calendar-ui-hover-bg: var(--color-surface-muted);
    --calendar-ui-unavailable-bg: var(--color-danger-bg);
    --calendar-ui-withdrawn-bg: var(--color-warning-bg);
    --calendar-ui-border: var(--color-border-subtle);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-notice, .notice, .alert, .admin-status-box) {
    border-radius: var(--admin-notice-radius);
    padding: var(--admin-notice-padding);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) table tr:hover td {
    background-color: var(--admin-table-hover-bg);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.admin-button-secondary, .button-secondary, a.secondary, button.secondary) {
    background-color: var(--admin-button-secondary-bg);
    border-color: var(--admin-button-secondary-border);
    color: var(--admin-button-secondary-text);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.badge, .admin-badge, .status-pill) {
    background-color: var(--admin-badge-bg);
    color: var(--admin-badge-text);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.badge-warning, .status-warning, .admin-badge-warning) {
    background-color: var(--admin-badge-warning-bg);
    color: var(--admin-badge-warning-text);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.badge-danger, .status-danger, .admin-badge-danger) {
    background-color: var(--admin-badge-danger-bg);
    color: var(--admin-badge-danger-text);
}

.player-page-container :where(.player-action-row, .player-toolbar, .player-page-actions) :where(a.secondary, button.secondary, .button-secondary) {
    background-color: var(--player-action-secondary-bg);
    border-color: var(--player-action-secondary-border);
    color: var(--color-text);
}

.player-page-container :where(.status-success, .notice-success, .message-success) {
    background-color: var(--player-status-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}

.player-page-container :where(.status-warning, .notice-warning, .message-warning) {
    background-color: var(--player-status-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.player-page-container :where(.status-danger, .notice-danger, .message-error) {
    background-color: var(--player-status-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}

.player-page-container :where(.status-info, .notice-info, .message-info) {
    background-color: var(--player-status-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
}

.calendar-team-legend, .calendar-availability-legend {
    border-color: var(--calendar-ui-border);
}

.calendar-overlap {
    outline-color: var(--calendar-overlap-outline);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.warning, .dashboard-status-warning, .admin-section-outline-warning, .admin-health-warning, .status-warning) {
    color: var(--admin-warning-summary-text);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.dashboard-status-warning, tr.dashboard-status-warning, .admin-table-row-warning) {
    background-color: var(--admin-warning-summary-bg);
    border-color: var(--admin-warning-summary-border);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.error, .dashboard-status-error, .admin-section-outline-error, .admin-health-error, .status-error) {
    color: var(--admin-danger-summary-text);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.dashboard-status-error, tr.dashboard-status-error, .admin-table-row-error) {
    background-color: var(--admin-danger-summary-bg);
    border-color: var(--admin-danger-summary-border);
}

.matches-table-game .input-score,
.matches-table .input-score,
input.input-score,
span.input-score,
:where(.player-page-container, .matches-container, .team-profile-container, .match-container) :where(.score-cell, .game-score-cell, .match-score-cell, .game-score) {
    font-size: var(--game-score-display-font-size) !important;
    line-height: var(--game-score-display-line-height);
}

.matches-table-game .input-score,
input.input-score,
span.input-score {
    width: var(--game-score-display-width) !important;
    min-width: var(--game-score-display-width) !important;
    max-width: var(--game-score-display-width) !important;
    height: var(--game-score-display-height) !important;
    min-height: var(--game-score-display-height) !important;
}

.admin-external-links-list td:nth-child(3) {
    max-width: var(--external-links-url-max-width);
}

@media (max-width: 768px) {
    .matches-table-game .input-score,
    .matches-table .input-score,
    input.input-score,
    span.input-score,
    :where(.player-page-container, .matches-container, .team-profile-container, .match-container) :where(.score-cell, .game-score-cell, .match-score-cell, .game-score) {
        font-size: var(--game-score-display-font-size-mobile) !important;
    }

        max-width: 100%;
    }

        max-width: 92%;
        min-width: 0;
    }
}

.admin-external-links-list {
    table-layout: fixed;
    width: 100%;
}

.admin-external-links-list th:nth-child(1),
.admin-external-links-list td:nth-child(1) {
    width: var(--admin-external-links-order-width);
}

.admin-external-links-list th:nth-child(2),
.admin-external-links-list td:nth-child(2) {
    width: var(--admin-external-links-label-width);
}

.admin-external-links-list th:nth-child(4),
.admin-external-links-list td:nth-child(4) {
    width: var(--admin-external-links-active-width);
}

.admin-external-links-list th:nth-child(5),
.admin-external-links-list td:nth-child(5) {
    width: var(--admin-external-links-action-width);
    text-align: center;
}

.admin-external-link-form-table input[type='text'],
.admin-external-link-form-table input[type='url'],
.admin-external-link-form-table input[type='number'] {
    width: 100%;
    max-width: 100%;
}

.admin-external-links-list details summary,
.admin-external-links-list button,
.admin-inline-table-action,
.admin-table-action button {
    min-width: var(--admin-inline-action-min-width);
}

.admin-dashboard-container :where(.dashboard-status-warning, .admin-warning-summary, .status-warning, .notice-warning) {
    background-color: var(--admin-warning-summary-bg);
    border-color: var(--admin-warning-summary-border);
    color: var(--admin-warning-summary-text);
}

.admin-dashboard-container :where(.dashboard-status-error, .admin-danger-summary, .status-error, .notice-error) {
    background-color: var(--admin-danger-summary-bg);
    border-color: var(--admin-danger-summary-border);
    color: var(--admin-danger-summary-text);
}

.admin-report-shell,
.admin-dashboard-container,
.admin-action-shell {
    max-width: var(--admin-report-readable-max-width);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-action-shell, .admin-report-shell) :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--admin-focus-outline-width) solid var(--admin-focus-outline-color);
    outline-offset: var(--admin-focus-outline-offset);
}

.player-page-container :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--player-focus-outline-width) solid var(--color-focus-border);
    outline-offset: var(--player-focus-outline-offset);
}

:where(.match-container, .matches-container, .player-page-container) :where(.match-score-cell, .game-score-cell, .score-cell, .game-score) {
    font-size: var(--player-match-score-font-size) !important;
    font-weight: var(--ui-font-weight-semibold, 600);
}

:where(.player-page-container) :where(.team-name, .player-name, .team-link, .player-link) {
    line-height: var(--ui-line-height-normal);
}

.about-external-links-list,
details summary + .content ul {
    row-gap: var(--player-about-link-list-gap);
}

@media (max-width: 768px) {
    .admin-external-links-list {
        min-width: 44rem;
    }

        align-items: stretch;
    }

        width: 100%;
    }

    :where(.match-container, .matches-container, .player-page-container) :where(.match-score-cell, .game-score-cell, .score-cell, .game-score) {
        font-size: var(--player-match-score-font-size-mobile) !important;
    }
}


/* Patch 52: keep calendar team legend vertically compact; player names should read like DisplayTeamLink rows, not padded cards. */
.calendar-container .calendar-team-legend {
    gap: 0;
    padding-block: 2px;
}
.calendar-container .calendar-team-legend-line {
    min-height: 0;
    padding-block: 0;
    line-height: 1.15;
}:where(.admin-table-actions, .admin-inline-actions, .admin-row-actions) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--admin-table-action-gap);
}
:where(.admin-report-shell, .admin-diagnostics-container, .admin-development-container) table :where(th, td) {
    padding-block: var(--admin-table-compact-padding-y);
    padding-inline: var(--admin-table-compact-padding-x);
}
:where(.admin-status-pill, .status-pill, .admin-badge, .badge) {
    font-size: var(--admin-status-pill-font-size);
    line-height: var(--admin-status-pill-line-height);
    padding: var(--admin-status-pill-padding-y) var(--admin-status-pill-padding-x);
}
:where(.admin-page-container, .admin-dashboard-container, .admin-action-shell, .admin-report-shell) :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--admin-focus-outline-width) solid var(--admin-focus-outline-color);
    outline-offset: var(--admin-focus-outline-offset);
}

.calendar-container .calendar-team-legend {
    gap: var(--calendar-team-legend-row-gap-compact);
    padding: var(--calendar-team-legend-padding-compact);
}
.calendar-container .calendar-team-legend-line {
    gap: var(--calendar-team-legend-swatch-gap-compact);
    min-height: 0;
    padding-block: 0;
    line-height: var(--calendar-team-legend-line-height-compact);
    align-items: baseline;
}
.calendar-container .calendar-team-legend-line a {
    padding-block: 0;
}
.calendar-container .calendar-team-legend-swatch {
    flex: 0 0 auto;
}
.calendar-container .calendar-team-legend-line :where(a, button):focus-visible {
    outline: var(--player-focus-outline-width) solid var(--player-focus-outline-color);
    outline-offset: var(--player-focus-outline-offset);
}
.player-page-container :where(a, button, summary, input, select, textarea):focus-visible {
    outline: var(--player-focus-outline-width) solid var(--player-focus-outline-color);
    outline-offset: var(--player-focus-outline-offset);
}

@media (max-width: 640px) {
    .calendar-container .calendar-team-legend-line {
        line-height: var(--calendar-team-legend-line-height-compact);
    }
        gap: var(--player-space-sm);
    }
        min-height: 3.2rem;
    }
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.warning, .admin-warning, .notice-warning, .status-warning, .dashboard-status-warning, .admin-health-warning) {
    background-color: var(--admin-alert-warning-bg);
    border-color: var(--admin-alert-warning-border);
    color: var(--admin-alert-warning-text);
}
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(tr.dashboard-status-warning, tr.admin-table-row-warning) {
    background-color: var(--admin-alert-warning-bg);
    border-left-color: var(--admin-alert-warning-border);
    color: var(--admin-alert-warning-text);
}
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(details.admin-section-outline-warning > summary, details.dashboard-status-warning > summary) {
    background-color: var(--admin-alert-warning-bg);
    border-color: var(--admin-alert-warning-border);
    color: var(--admin-alert-warning-text);
}
:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell) :where(.error, .errors, .admin-error, .notice-danger, .status-danger, .dashboard-status-error, .admin-health-error) {
    background-color: var(--admin-alert-danger-bg);
    border-color: var(--admin-alert-danger-border);
    color: var(--admin-alert-danger-text);
}
@media (max-width: 640px) {
        width: 100%;
        max-width: 100%;
    }
        max-width: 94%;
    }
        flex-direction: column;
    }
        width: 100%;
    }
}:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell, .admin-tool-page) :where(details.admin-section-outline-warning > summary, details.has-warning > summary, tr.dashboard-status-warning, tr.admin-table-row-warning, td.warning, th.warning, .severity-warning) {
    background-color: var(--admin-warning-final-bg) !important;
    border-color: var(--admin-warning-final-border) !important;
    color: var(--admin-warning-final-text) !important;
}
@media (max-width: 640px) {
        width: 100%;
        max-width: 100%;
    }
        padding: var(--ui-space-2);
    }
    }
    }
        max-width: 94%;
        min-width: 0;
    }
        flex-direction: column;
    }
        width: 100%;
    }
}

@media (max-width: 720px) {
    }
}

@media (max-width: 720px) {
    }
}:where(.admin-page-container, .admin-dashboard-container, .admin-report-shell) :where(.status-pill, .admin-status-pill, .badge, .admin-badge) {
    line-height: var(--admin-status-pill-line-height-final);
    padding-block: var(--admin-status-pill-padding-block-final);
    padding-inline: var(--admin-status-pill-padding-inline-final);
}

@media (max-width: 720px) {
    }
}:where(.admin-page-container, .admin-dashboard-container, .admin-report-shell, .admin-action-shell) :where(.admin-alert-stack, .notice-stack, .alert-stack) {
    display: grid;
    gap: var(--admin-alert-stack-gap);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-report-shell) :where(.validation-message, .field-error, .admin-validation-message) {
    font-size: var(--admin-validation-message-font-size);
}

:where(.admin-report-shell, .admin-diagnostics-container, .diagnostics-container) :where(table.admin-compact-table, table.diagnostics-table, table.checkpoint-table) :where(th, td) {
    padding-block: var(--admin-diagnostic-table-cell-padding-y);
    padding-inline: var(--admin-diagnostic-table-cell-padding-x);
}


/* ADDED v2026-05-21.1945-2034: Checkpoint 43/35 stabilization variables and guardrails. */
:root {
    --admin-alert-stack-margin-block: var(--ui-space-3);
    --admin-alert-map-warning-bg: var(--admin-warning-stable-bg);
    --admin-alert-map-warning-border: var(--admin-warning-stable-border);
    --admin-alert-map-warning-text: var(--admin-warning-stable-text);
    --admin-alert-map-danger-bg: var(--color-danger-bg);
    --admin-alert-map-danger-border: var(--color-danger-border);
    --admin-alert-map-danger-text: var(--color-danger-text);
    --admin-report-readability-gap: var(--ui-space-4);
    --admin-table-action-min-width: 8rem;
    --admin-inline-edit-control-min-width: 7rem;
    --admin-validation-summary-gap: var(--ui-space-2);
    --calendar-compact-link-min-height: 1.5rem;
}.admin-alert-stack > * + *,
.admin-notice-stack > * + *,
.admin-dashboard-alert-stack > * + * {
    margin-top: var(--admin-alert-stack-margin-block);
}

.admin-table .admin-action-column,
.admin-table .action-column,
table .admin-action-column,
table .action-column {
    min-width: var(--admin-table-action-min-width);
    text-align: right;
}

.admin-table input,
.admin-table select,
.admin-table textarea {
    min-width: min(100%, var(--admin-inline-edit-control-min-width));
}

.admin-validation-summary,
.validation-summary,
.form-error-summary {
    display: grid;
    gap: var(--admin-validation-summary-gap);
}

.admin-report-shell .admin-report-section,
.admin-report-shell details,
.admin-report-shell .admin-report-card {
    margin-block-end: var(--admin-report-readability-gap);
}

.calendar-team-legend a,
.calendar-team-legend .player-link,
.calendar-team-legend .team-profile-icon-link {
    min-height: var(--calendar-compact-link-min-height);
}

@media (max-width: 720px) {
    }

    }
}:where(.admin-page-container, .admin-dashboard-container, .admin-report-shell, .admin-action-shell) :where(.admin-alert-stack, .notice-stack, .alert-stack, .deployment-result-stack) {
    gap: var(--admin-alert-severity-map-gap);
}.admin-table :where(.admin-action-column, .action-column, .table-actions),
table :where(.admin-action-column, .action-column, .table-actions) {
    gap: var(--admin-inline-action-gap-final);
}

.admin-table :where(input, select, textarea),
.admin-inline-edit :where(input, select, textarea) {
    min-width: min(100%, var(--admin-table-control-min-width-final));
}

.admin-report-shell :where(.admin-report-section, .admin-report-card, details) {
    margin-block-end: var(--admin-report-section-gap-final);
}

:where(.admin-page-container, .admin-dashboard-container, .admin-report-shell, .player-page-container) :where(a, button, input, select, textarea, summary):focus-visible {
    outline-offset: var(--admin-focus-ring-offset-final);
}

@media (max-width: 720px) {
    }
}

/* ADDED v2026-05-21.2125-2214: Sub Stats player-profile link stabilization. */
.stats-player-link-cell a {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .stats-player-link-cell a {
        white-space: normal;
    }
}


/* ADDED v2026-05-21.2245-2274: What's New header controls and Player Profile table alignment regression fix. */
:root {
    --whats-new-header-gap: var(--space-2, 0.5rem);
    --whats-new-header-padding: var(--space-3, 0.75rem);
    --whats-new-header-border: 1px solid var(--color-border);
    --whats-new-header-bg: var(--color-surface-muted);
    --whats-new-message-font-size: 0.95rem;
    --whats-new-control-gap: var(--space-2, 0.5rem);
    --whats-new-scroll-max-height: min(48vh, 420px);
    --player-profile-summary-photo-gap: 0.45rem;
}

/* Player Profile: keep the player/partner table directly beside the profile photo. */
.player-page-container.players-container .profile-summary-wrap.profile-summary-left,
.players-container .profile-summary-wrap.profile-summary-left,
.profile-summary-wrap.profile-summary-left {
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    gap: 0 !important;
    text-align: left !important;
}

.player-page-container.players-container .profile-summary-wrap.profile-summary-left > .profile-summary-table,
.players-container .profile-summary-wrap.profile-summary-left > .profile-summary-table,
.profile-summary-wrap.profile-summary-left > .profile-summary-table,
.profile-summary-table.profile-summary-table-left {
    display: table !important;
    width: auto !important;
    max-width: max-content !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    text-align: left !important;
}

.player-page-container.players-container .profile-summary-table-left .profile-photo,
.players-container .profile-summary-table-left .profile-photo,
.profile-summary-table-left .profile-photo {
    padding-left: 0 !important;
    padding-right: var(--player-profile-summary-photo-gap) !important;
    vertical-align: top !important;
    width: 1% !important;
    white-space: nowrap !important;
}

.player-page-container.players-container .profile-summary-table-left td:not(.profile-photo),
.players-container .profile-summary-table-left td:not(.profile-photo),
.profile-summary-table-left td:not(.profile-photo) {
    width: auto !important;
    max-width: 34rem;
    vertical-align: top !important;
    text-align: left !important;
}

/* What's New: keep message, donate action, and dismissal checkbox visible in the modal header area. */
.changelog-alert-header {
    box-sizing: border-box;
    display: grid;
    gap: var(--whats-new-header-gap);
    margin: 0 0 var(--whats-new-header-gap) 0;
    padding: var(--whats-new-header-padding);
    border: var(--whats-new-header-border);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--whats-new-header-bg);
    text-align: left;
}

.changelog-alert-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--whats-new-control-gap);
}

.changelog-alert-title-text {
    font-weight: 700;
    font-size: 1.05rem;
}

.changelog-alert-header-message {
    margin: 0;
    font-size: var(--whats-new-message-font-size);
    line-height: 1.35;
    color: var(--color-text-muted);
}

.changelog-alert-header-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--whats-new-control-gap);
}

.changelog-alert-header .changelog-donate-link {
    margin: 0;
}

.changelog-alert-header .changelog-alert-disable {
    margin: 0 !important;
    min-height: var(--player-touch-target-min, 44px);
}

.changelog-alert-scroll {
    max-height: var(--whats-new-scroll-max-height);
}

@media (max-width: 640px) {
    .changelog-alert-header-row,
    .changelog-alert-header-controls {
        align-items: stretch;
        flex-direction: column;
    }
    .changelog-alert-header .changelog-donate-link {
        text-align: center;
        width: 100%;
    }
}


/* ADDED v2026-05-21.2305-2394: What's New, Player Profile, and stabilization checkpoint 47/39 refinements. */
:root {
    --whats-new-header-gap: 0.65rem;
    --whats-new-header-padding: 0.25rem 0 0.8rem;
    --whats-new-control-gap: 0.6rem;
    --whats-new-body-margin-top: 0.7rem;
    --player-profile-photo-table-gap-final: 0.35rem;
    --player-profile-summary-max-width-final: max-content;
    --profile-link-cell-gap: 0.25rem;
}

.changelog-alert-header {
    display: flex;
    flex-direction: column;
    gap: var(--whats-new-header-gap);
    padding: var(--whats-new-header-padding);
    border-bottom: var(--border-width, 1px) solid var(--color-border-muted, var(--color-border));
    margin-bottom: var(--whats-new-body-margin-top);
    text-align: left;
}

.changelog-alert-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--whats-new-control-gap);
}

.changelog-alert-title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.changelog-alert-header-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--whats-new-control-gap);
}

.changelog-alert-header-message {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-normal, 1.45);
}

.changelog-alert-header .changelog-alert-disable {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0 !important;
    padding: 0 !important;
    min-height: var(--touch-target-min, 44px);
    line-height: var(--line-height-normal, 1.45);
}

.changelog-alert-header .changelog-alert-disable input[type="checkbox"] {
    margin: 0;
}

.changelog-alert-header .changelog-donate-link {
    white-space: nowrap;
}

.changelog-alert-scroll {
    margin-top: 0;
}

.player-page-container.players-container .profile-summary-wrap.profile-summary-left,
.players-container .profile-summary-wrap.profile-summary-left,
.profile-summary-wrap.profile-summary-left {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: auto !important;
    max-width: var(--player-profile-summary-max-width-final) !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    gap: var(--player-profile-photo-table-gap-final) !important;
}

.player-page-container.players-container .profile-summary-wrap.profile-summary-left > .profile-summary-table,
.players-container .profile-summary-wrap.profile-summary-left > .profile-summary-table,
.profile-summary-wrap.profile-summary-left > .profile-summary-table,
.profile-summary-table.profile-summary-table-left {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
    width: auto !important;
    max-width: max-content !important;
    table-layout: auto !important;
}

.profile-summary-table-left .profile-photo,
.players-container .profile-summary-table-left .profile-photo,
.player-page-container.players-container .profile-summary-table-left .profile-photo {
    padding-right: var(--player-profile-photo-table-gap-final) !important;
}

.stats-player-link-cell {
    white-space: nowrap;
}

.stats-player-link-cell a,
.stats-player-link-cell .player-profile-link {
    display: inline-flex;
    align-items: center;
    gap: var(--profile-link-cell-gap);
}

@media (max-width: 720px) {
    .changelog-alert-header-row,
    .changelog-alert-header-controls {
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .changelog-alert-header .changelog-donate-link,
    .changelog-alert-header .changelog-alert-disable {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-summary-wrap.profile-summary-left,
    .players-container .profile-summary-wrap.profile-summary-left,
    .player-page-container.players-container .profile-summary-wrap.profile-summary-left {
        max-width: 100% !important;
    }
}


/* Patch 66: What's New header order, Calendar compact separator, and Team Availability verification. */
.changelog-alert-header {
    align-items: stretch;
    text-align: center;
}
.changelog-alert-header .changelog-alert-header-message {
    order: 1;
    text-align: center;
}
.changelog-alert-donate-row {
    order: 2;
    display: flex;
    justify-content: center;
    width: 100%;
}
.changelog-alert-disable-row {
    order: 3;
    display: flex;
    justify-content: center;
    width: 100%;
}
.changelog-alert-header .changelog-alert-disable {
    justify-content: center;
}
.changelog-alert-title-text,
.changelog-alert-header-row,
.changelog-alert-header-controls {
    display: none;
}
.calendar-container .calendar-team-legend-line {
    column-gap: 0;
    row-gap: 0;
}
.calendar-container .calendar-team-legend-line .team-profile-icon-link {
    margin-right: 0;
}
.calendar-container .calendar-team-legend-player {
    gap: 0;
}
.calendar-container .calendar-team-legend-swatch {
    margin-right: 0.08rem;
}
.calendar-container .calendar-team-legend-line .team-pair-separator {
    margin-inline: 0.08rem;
}

/* Patch 67: What's New wording/layout, Calendar compact team rows, and ZIP deploy simplification. */
.changelog-alert-header .changelog-alert-header-message {
    margin-block: 0 0.45rem;
}
.changelog-alert-donate-row,
.changelog-alert-disable-row {
    justify-content: center;
    text-align: center;
}
.calendar-container .calendar-team-legend {
    gap: 0;
    padding-block: 0;
}
.calendar-container .calendar-team-legend-line {
    align-items: center;
    column-gap: 0;
    row-gap: 0;
    line-height: 1;
    min-height: 0;
    margin-block: 0;
    padding-block: 0;
}
.calendar-container .calendar-team-legend-line .team-profile-icon-link,
.calendar-container .calendar-team-legend-line a,
.calendar-container .calendar-team-legend-player,
.calendar-container .calendar-team-legend-swatch {
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}
.calendar-container .calendar-team-legend-line .team-profile-icon-link {
    display: inline-flex;
    margin-inline-end: 0;
}
.calendar-container .calendar-team-legend-player {
    display: inline-flex;
    gap: 0;
    margin-inline: 0;
    padding-inline: 0;
}
.calendar-container .calendar-team-legend-swatch {
    margin-inline: 0 0.06rem;
}
.calendar-container .calendar-team-legend-line .team-pair-separator {
    display: none;
}


/* Patch 68: What's New title casing/login-only behaviour and calendar team-row alignment. */
.calendar-container .calendar-team-legend-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 0;
}
.calendar-container .calendar-team-legend-line .team-profile-icon-link,
.calendar-container .calendar-team-legend-line .calendar-team-legend-player,
.calendar-container .calendar-team-legend-line .calendar-team-legend-player a,
.calendar-container .calendar-team-legend-line .calendar-team-legend-swatch {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.calendar-container .calendar-team-legend-line .team-profile-icon-link {
    align-self: center;
    margin-block: 0;
    padding-block: 0;
}
.calendar-container .calendar-team-legend-player {
    align-self: center;
    margin-block: 0;
    padding-block: 0;
}
.calendar-container .calendar-team-legend-player + .calendar-team-legend-player {
    margin-inline-start: 0.38rem;
}
.calendar-container .calendar-team-legend-swatch {
    align-self: center;
    margin-block: 0;
    margin-inline: 0 0.08rem;
}

/* Patch 70: Team Profile guest/static member links and unplayed score alignment. */
.team-profile-member-photo-static {
    cursor: default;
}

.team-profile-member-name-static {
    color: var(--color-text);
    text-decoration: none;
}

.team-profile-score-na {
    text-align: center;
}

/* ADDED v2026-05-21.3145: Details accordion, What's New inline donation copy, and Swal heading reset. */
.changelog-alert-popup .changelog-alert-html h3,
.swal2-popup .changelog-alert-html h3 {
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.changelog-alert-donate-message {
  display: grid;
  gap: var(--space-2);
  text-align: left;
}

.changelog-alert-donate-message p {
  margin-block: 0;
}

/* Patch 78: About What's New launcher and SweetAlert title clipping fix. */
.about-whats-new-panel {
  border: var(--border-width, 1px) solid var(--color-border-muted, var(--color-border));
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: var(--color-surface-muted, var(--color-surface));
}

.about-whats-new-panel h3 {
  margin-block: 0 0.4rem;
}

.about-whats-new-panel p {
  margin-block: 0 0.65rem;
}

.changelog-alert-popup .changelog-alert-title,
.swal2-popup.changelog-alert-popup .swal2-title {
  margin-block: 0 0.35rem !important;
  padding-block: 0.35rem 0.1rem !important;
  line-height: 1.25 !important;
  overflow: visible !important;
}

.swal2-popup.changelog-alert-popup {
  padding-top: 1.35rem !important;
}


/* Patch 79: What's New alert icon/title spacing and About link placement. */
.about-whats-new-panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.about-whats-new-link-row {
  margin-block: 0.26rem var(--space-3, 0.75rem);
}

/** CHANGED v2026-05-24.4104
 *  Format the About -> What's New launcher like a standard expandable/details
 *  summary while keeping the existing SweetAlert launcher behavior.
 */
.about-whats-new-link {
  align-items: center;
  background: color-mix(in srgb, var(--color-accent, #aaffaa) 22%, #fff 78%);
  border-left: 0.38rem solid var(--color-accent, #aaffaa);
  border-radius: 0.64rem;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-weight: bold;
  line-height: 1.16;
  margin: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0.34rem 0.55rem;
  text-decoration: none;
  width: 100%;
}

.about-whats-new-link::before {
  content: "▶";
  display: inline-block;
  font-size: 0.74em;
  line-height: 1;
  margin-right: 0.45rem;
  transform: translateY(-0.02rem);
}

.about-whats-new-link:hover,
.about-whats-new-link:focus-visible {
  background: color-mix(in srgb, var(--color-accent, #aaffaa) 30%, #fff 70%);
  text-decoration: none;
}

.swal2-popup.changelog-alert-popup {
  overflow: visible !important;
  padding-top: 1.9rem !important;
}

.swal2-popup.changelog-alert-popup .swal2-icon {
  flex-shrink: 0 !important;
  overflow: visible !important;
  margin: 0.2rem auto 0.85rem !important;
}

.changelog-alert-popup .changelog-alert-title,
.swal2-popup.changelog-alert-popup .swal2-title {
  margin-block: 0 0.45rem !important;
  padding-block: 0.2rem 0.1rem !important;
  line-height: 1.3 !important;
  overflow: visible !important;
}

.changelog-alert-donate-message {
  gap: var(--space-3, 0.75rem);
}

.changelog-alert-donate-message p {
  line-height: var(--line-height-normal, 1.45);
}

/* Patch 81: keep What's New SweetAlert actions inside popup and neutralize h3 formatting in Swal content. */
.swal2-popup.changelog-alert-popup {
  box-sizing: border-box !important;
  max-height: calc(100vh - 2rem) !important;
  overflow: hidden !important;
  padding-block-start: 2.25rem !important;
  padding-block-end: 1.25rem !important;
}

.swal2-popup.changelog-alert-popup .swal2-icon {
  margin-block-start: 0 !important;
  margin-block-end: 0.85rem !important;
  flex: 0 0 auto !important;
}

.swal2-popup.changelog-alert-popup .swal2-title,
.changelog-alert-popup .changelog-alert-title {
  flex: 0 0 auto !important;
  margin-block: 0 0 0.45rem !important;
  padding-block: 0.15rem 0.1rem !important;
  line-height: 1.3 !important;
  overflow: visible !important;
}

.swal2-popup.changelog-alert-popup .swal2-html-container,
.swal2-popup.changelog-alert-popup .changelog-alert-html {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin-inline: 0 !important;
}

.swal2-popup.changelog-alert-popup .changelog-alert-scroll {
  max-height: min(48vh, 28rem) !important;
  overflow-y: auto !important;
  padding-inline-end: 0.15rem !important;
}

.swal2-popup.changelog-alert-popup .swal2-actions,
.swal2-popup.changelog-alert-popup .changelog-alert-actions {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 1rem auto 0 !important;
  padding: 0 !important;
  position: static !important;
}

.swal2-popup.changelog-alert-popup .swal2-confirm,
.swal2-popup.changelog-alert-popup .changelog-alert-ok {
  position: static !important;
}

.swal2-popup h3,
.swal2-popup :where(h3),
.swal2-container h3,
.swal2-container :where(h3),
.sweet-alert h3,
.sweet-alert :where(h3),
.swal2-popup .swal2-html-container h3,
.swal2-popup .swal2-html-container :where(h3),
.swal2-popup .changelog-alert-html h3,
.swal2-popup .changelog-alert-html :where(h3),
.changelog-alert-popup .changelog-alert-html h3 {
  display: block !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.swal2-popup h3::before,
.swal2-popup h3::after,
.swal2-container h3::before,
.swal2-container h3::after,
.sweet-alert h3::before,
.sweet-alert h3::after {
  content: none !important;
  display: none !important;
}


/** ADDED v2026-05-21.5095
 *  Shared UI component shell classes.
 *
 *  These classes give admin and player pages the same component vocabulary while
 *  preserving distinct densities and page goals. They are additive and can be
 *  adopted page-by-page as legacy wrappers are removed.
 */
.ui-component {
    box-sizing: border-box;
    max-width: 100%;
}

.ui-component-container {
    width: 100%;
    max-width: 100%;
}

.ui-component-card {
    border: 1px solid var(--color-border);
    border-radius: var(--ui-section-radius);
    background: var(--color-white);
    margin-block: 0.6rem;
    max-width: 100%;
}

.ui-admin-card,
.ui-component-admin.ui-component-card {
    padding: var(--ui-section-padding-admin);
}

.ui-player-card,
.ui-component-player.ui-component-card {
    padding: var(--ui-section-padding-player);
}

.ui-card-title,
.ui-report-intro {
    margin-block-start: 0;
}

.ui-card-title {
    line-height: 1.2;
}

.ui-component-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    max-width: 100%;
}

.ui-admin-actions {
    justify-content: flex-start;
}

.ui-player-actions {
    justify-content: center;
}

.ui-component-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.ui-component-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ui-admin-table th,
.ui-admin-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.ui-player-table th,
.ui-player-table td {
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.ui-surface-admin .ui-component-card,
.ui-surface-admin .ui-component-table-wrap {
    font-size: var(--ui-density-admin-font-size);
}

.ui-surface-player .ui-component-card,
.ui-surface-player .ui-component-table-wrap {
    font-size: var(--ui-density-player-font-size);
}

/* Named component hooks for gradually moving page-specific styles out of broad selectors. */
.component-admin-report,
.admin-report-shell.ui-component-container {
    width: 100%;
}

.component-admin-form :is(input, select, textarea),
.component-player-form :is(input, select, textarea) {
    max-width: 100%;
}

@media (max-width: 720px) {
    .ui-component-actions {
        gap: 0.35rem;
    }

    .ui-player-card,
    .ui-component-player.ui-component-card {
        padding: var(--ui-section-padding-player);
    }
}


/* ADDED v2026-05-21.94: Calendar team legend as a borderless table/grid. */
.calendar-container .calendar-team-legend {
    display: inline-grid;
    grid-auto-rows: minmax(0, auto);
    row-gap: var(--space-1);
    align-items: center;
}

.calendar-container .calendar-team-legend-line.component-calendar-team-legend-row {
    display: grid;
    grid-template-columns: auto minmax(9rem, 1fr) minmax(9rem, 1fr);
    column-gap: var(--space-3);
    align-items: center;
    border: 0;
    padding-block: var(--space-1);
}

.calendar-container .calendar-team-legend-team-cell,
.calendar-container .calendar-team-legend-player-cell,
.calendar-container .calendar-team-legend-player {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    line-height: 1.2;
    vertical-align: middle;
}

.calendar-container .calendar-team-legend-player-cell {
    justify-content: flex-start;
}

.calendar-container .calendar-team-legend-player-empty {
    visibility: hidden;
}

.calendar-container .calendar-team-legend-swatch {
    flex: 0 0 auto;
    margin-inline-end: var(--space-1);
}

@media (max-width: 640px) {
    .calendar-container .calendar-team-legend-line.component-calendar-team-legend-row {
        grid-template-columns: auto minmax(7rem, 1fr) minmax(7rem, 1fr);
        column-gap: var(--space-2);
    }
}

/* ADDED v2026-05-21.3895
 * Shared Admin + Player UI/UX normalization pass.
 * Scope: presentation-only CSS. No schema, data, routing, or POST semantics change.
 * Intent: make admin and player surfaces share one spacing/card/form/table contract
 * while preserving admin's desktop-first workflow and player's mobile-first workflow.
 */
:root {
    --ui-page-gutter: clamp(0.45rem, 1.8vw, 1.1rem);
    --ui-player-max-width: 880px;
    --ui-admin-max-width: 1240px;
    --ui-section-gap: 0.85rem;
    --ui-card-padding: clamp(0.72rem, 1.6vw, 1rem);
    --ui-card-radius: 12px;
    --ui-card-shadow: 0 2px 10px var(--css-color-rgba-0-0-0-0-06);
    --ui-field-radius: 8px;
    --ui-focus-ring: 0 0 0 3px var(--css-color-rgba-47-93-159-0-10);
    --ui-muted-text: var(--color-muted-text, var(--css-color-555));
    --ui-section-bg: var(--color-section-bg, var(--color-white));
    --ui-subtle-bg: var(--color-subtle-bg, var(--css-color-f0f0f0));
    --ui-warning-bg: var(--color-status-warning-bg, var(--css-color-fff8db));
    --ui-info-bg: var(--color-status-info-bg, var(--css-color-eef7ff));
    --ui-error-bg: var(--color-status-error-bg, var(--css-color-fdecea));
}

body {
    box-sizing: border-box;
    width: min(calc(100% - (var(--ui-page-gutter) * 2)), var(--ui-player-max-width));
    max-width: var(--ui-player-max-width);
    margin: var(--ui-page-gutter) auto;
    line-height: 1.38;
}

body:has(.ui-surface-admin),
body:has(.admin-page-container),
body:has(.admin-dashboard-container),
body:has(.admin-diagnostics-container) {
    width: min(calc(100% - (var(--ui-page-gutter) * 2)), var(--ui-admin-max-width));
    max-width: var(--ui-admin-max-width);
}

header,
.mainbody {
    box-sizing: border-box;
    max-width: 100%;
}

header {
    box-shadow: var(--ui-card-shadow);
}

.mainbody {
    margin-top: var(--ui-section-gap);
}

.site-league-title {
    line-height: 1.15;
}

nav,
.nav-primary-row,
.nav-secondary-row {
    max-width: 100%;
}

.nav-primary-row,
.nav-secondary-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.45rem;
}

.nav-secondary-row {
    margin-top: 0.4rem;
}

.nav-link,
.admin-subnav-link,
.admin-subnav-top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    border-radius: 999px;
    touch-action: manipulation;
}

.page-title {
    margin: 0.9rem 0 0.35rem;
    line-height: 1.18;
}

.page-title-rule {
    margin: 0.35rem 0 0.85rem;
}

.ui-surface-admin,
.ui-surface-player,
.admin-page-container,
.player-page-container,
.approvals-container {
    box-sizing: border-box;
    display: grid;
    gap: var(--ui-section-gap);
    max-width: 100%;
}

.divborder,
.admin-dashboard-section,
.approvals-section-group,
details,
.ui-panel,
.ui-card {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 var(--ui-section-gap) 0;
    padding: var(--ui-card-padding);
    border: 1px solid var(--color-border, var(--color-table-border));
    border-radius: var(--ui-card-radius);
    background: var(--ui-section-bg);
    box-shadow: var(--ui-card-shadow);
}

.divborder > :first-child,
.admin-dashboard-section > :first-child,
details > :first-child,
.ui-panel > :first-child,
.ui-card > :first-child {
    margin-top: 0;
}

.divborder > :last-child,
.admin-dashboard-section > :last-child,
details > :last-child,
.ui-panel > :last-child,
.ui-card > :last-child {
    margin-bottom: 0;
}

details {
    overflow: clip;
}

summary {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.25;
    margin: calc(var(--ui-card-padding) * -1);
    padding: 0.72rem var(--ui-card-padding);
    border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0;
    background: var(--ui-subtle-bg);
}

details[open] > summary {
    margin-bottom: var(--ui-card-padding);
    border-bottom: 1px solid var(--color-border, var(--color-table-border));
}

button,
.button-link,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 2.25rem;
    border-radius: var(--ui-field-radius);
    line-height: 1.2;
    touch-action: manipulation;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 2.15rem;
    border-radius: var(--ui-field-radius);
}

textarea {
    min-height: 5.5rem;
}

button:focus-visible,
.button-link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: var(--ui-focus-ring);
}

form {
    max-width: 100%;
}

form .form-row,
.admin-form-row,
.player-form-row,
.admin-action-row,
.player-action-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
}

.admin-action-row,
.player-action-row {
    margin-top: 0.55rem;
}

.table-container,
.table-wrap,
.admin-table-container,
.responsive-table-wrap {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.ui-surface-player table,
.player-page-container table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.ui-surface-player th,
.ui-surface-player td,
.player-page-container th,
.player-page-container td {
    padding: 0.34rem 0.42rem;
    vertical-align: top;
}

.ui-surface-player th,
.player-page-container th {
    line-height: 1.15;
}

.ui-surface-player td,
.player-page-container td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.ui-surface-player td.num,
.ui-surface-player td.center,
.player-page-container td.num,
.player-page-container td.center,
.score-cell,
.game-score,
.points-cell {
    white-space: nowrap;
    text-align: center;
}

.ui-surface-admin table,
.admin-page-container table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.ui-surface-admin th,
.admin-page-container th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.ui-surface-admin td,
.admin-page-container td {
    max-width: 38rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    vertical-align: top;
}

.ui-surface-admin td code,
.admin-page-container td code,
.ui-surface-player td code,
.player-page-container td code,
.displaysql,
pre,
code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

.admin-subnav-multilevel,
.admin-nav-container,
.admin-subnav-top-row,
.admin-subnav-row {
    max-width: 100%;
}

.admin-subnav-top-row,
.admin-subnav-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-subnav-multilevel {
    padding: 0.55rem;
    border: 1px solid var(--color-border, var(--color-table-border));
    border-radius: var(--ui-card-radius);
    background: var(--ui-section-bg);
}

.admin-subnav-section-label,
.admin-subnav-group-label {
    color: var(--ui-muted-text);
    font-size: 0.86rem;
    font-weight: 700;
}

.admin-action-note,
.admin-inline-note,
.player-inline-note,
.help-text,
.form-help,
small {
    color: var(--ui-muted-text);
    line-height: 1.35;
}

.admin-status-badge,
.status-pill,
.nav-approval-count,
.permission-pill,
.role-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.35rem;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    line-height: 1.1;
    white-space: nowrap;
}

.admin-alert,
.admin-alert-info,
.admin-alert-warning,
.admin-alert-error,
.player-alert,
.notice,
.warning,
.error,
.success {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0.65rem 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border, var(--color-table-border));
    border-radius: var(--ui-card-radius);
    overflow-wrap: anywhere;
}

.admin-alert-info,
.player-alert-info,
.notice {
    background: var(--ui-info-bg);
}

.admin-alert-warning,
.player-alert-warning,
.warning {
    background: var(--ui-warning-bg);
}

.admin-alert-error,
.player-alert-error,
.error {
    background: var(--ui-error-bg);
}

.profile-summary-wrap {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-summary-table {
    width: max-content;
    min-width: min(100%, 30rem);
}

.profile-photo img,
.player-photo img,
img.profile-photo,
img.player-photo {
    max-width: min(100%, 10rem);
    height: auto;
    border-radius: var(--ui-card-radius);
}

@media (max-width: 760px) {
    body,
    body:has(.ui-surface-admin),
    body:has(.admin-page-container),
    body:has(.admin-dashboard-container),
    body:has(.admin-diagnostics-container) {
        width: calc(100% - 0.7rem);
        max-width: none;
        margin: 0.35rem auto;
    }

    header {
        padding: 0.75rem;
        border-radius: 10px;
    }

    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.16rem; }
    h3 { font-size: 1.03rem; }

    .nav-primary-row,
    .nav-secondary-row,
    .admin-subnav-top-row,
    .admin-subnav-row {
        gap: 0.28rem;
    }

    .nav-link,
    .admin-subnav-link,
    .admin-subnav-top-link {
        flex: 1 1 auto;
        min-width: max-content;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .divborder,
    .admin-dashboard-section,
    .approvals-section-group,
    details,
    .ui-panel,
    .ui-card {
        padding: 0.68rem;
        border-radius: 10px;
    }

    summary {
        margin: -0.68rem -0.68rem 0 -0.68rem;
        padding: 0.68rem;
    }

    details[open] > summary {
        margin-bottom: 0.68rem;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button,
    .button-link,
    input[type="submit"] {
        width: 100%;
    }

    .admin-action-row,
    .player-action-row,
    form .form-row,
    .admin-form-row,
    .player-form-row {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .ui-surface-player th,
    .ui-surface-player td,
    .player-page-container th,
    .player-page-container td,
    .ui-surface-admin th,
    .ui-surface-admin td,
    .admin-page-container th,
    .admin-page-container td {
        padding: 0.34rem 0.38rem;
    }

    .profile-summary-table {
        min-width: 100%;
    }
}

@media print {
    body,
    body:has(.ui-surface-admin),
    body:has(.admin-page-container) {
        width: 100%;
        max-width: none;
        margin: 0;
        background: var(--color-white);
    }

    header,
    nav,
    .admin-subnav-multilevel,
    button,
    .button-link {
        box-shadow: none !important;
    }

    .table-container,
    .admin-table-container,
    .responsive-table-wrap {
        overflow: visible;
    }
}



/** ADDED v2026-05-21.3896
 * Shared named UI components. Admin and player surfaces intentionally use the
 * same component contract with distinct density/width rules.
 */
.ui-component-container {
    box-sizing: border-box;
    width: 100%;
    margin: 0.75rem 0;
}
.ui-admin-container {
    max-width: 1180px;
    padding: 0.85rem;
}
.ui-player-container {
    max-width: 800px;
    padding: 0.6rem;
}
.ui-page-header {
    margin-bottom: 0.75rem;
}
.ui-page-header h2,
.ui-page-header h3 {
    margin-top: 0;
}
.ui-page-intro,
.ui-section-intro {
    margin: 0.25rem 0 0.75rem;
    line-height: 1.35;
}
.ui-component-card,
.ui-details-card,
.ui-file-link-card {
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    padding: 0.75rem;
    margin: 0.75rem 0;
    box-shadow: 0 1px 2px var(--css-color-rgba-0-0-0-0-06);
}
.ui-admin-card,
.ui-admin-details-card,
.ui-admin-notice {
    border-left: 4px solid var(--css-color-2f5d9f);
}
.ui-player-card,
.ui-player-details-card,
.ui-player-notice {
    border-left: 4px solid var(--color-primary);
}
.ui-card-title {
    margin: 0 0 0.5rem;
}
.ui-details-card summary {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.3;
}
.ui-table-container,
.ui-component-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 0.5rem 0;
}
.ui-table {
    width: 100%;
    border-collapse: collapse;
}
.ui-admin-table th,
.ui-admin-table td {
    padding: 0.45rem 0.5rem;
    vertical-align: top;
}
.ui-player-table th,
.ui-player-table td {
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
}
.ui-key-value-table th {
    width: 32%;
    text-align: left;
}
.ui-component-form,
.ui-form {
    display: grid;
    gap: 0.65rem;
    margin: 0.75rem 0;
}
.ui-component-form label,
.ui-form label {
    font-weight: 600;
}
.ui-component-form input,
.ui-component-form select,
.ui-component-form textarea,
.ui-form input,
.ui-form select,
.ui-form textarea {
    box-sizing: border-box;
    max-width: 100%;
}
.ui-component-actions,
.ui-form-actions,
.admin-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.ui-notice {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--css-color-fff8e6);
    padding: 0.65rem 0.75rem;
    margin: 0.75rem 0;
}
.ui-notice-ok,
.ui-notice-success {
    background: var(--css-color-eef8ee);
}
.ui-notice-error,
.ui-notice-danger {
    background: var(--css-color-fdecea);
}
.ui-file-link-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}
.ui-file-link-list li {
    margin: 0.25rem 0;
}
.ui-file-link code {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .ui-admin-container,
    .ui-player-container {
        padding: 0.5rem;
    }
    .ui-component-card,
    .ui-details-card,
    .ui-file-link-card {
        padding: 0.55rem;
        border-radius: 8px;
    }
    .ui-admin-table th,
    .ui-admin-table td,
    .ui-player-table th,
    .ui-player-table td {
        padding: 0.32rem;
    }
    .ui-key-value-table th {
        width: auto;
    }
}


/** ADDED v2026-05-21.3898
 * Named shared component layer for ongoing admin/player normalization.
 * Page-specific classes should extend these contracts instead of redefining
 * container, card, table, form, grid, and generated-output behaviour.
 */
.ui-component-section {
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    padding: 0.75rem;
    margin: 0.75rem 0;
}
.ui-admin-section {
    max-width: 1180px;
}
.ui-player-section {
    max-width: 800px;
}
.ui-section-title {
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.ui-component-grid,
.ui-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}
.ui-admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ui-player-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ui-action-row,
.ui-admin-actions,
.ui-player-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.ui-component-generated-output,
.ui-generated-output {
    box-sizing: border-box;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    padding: 0.75rem;
    margin: 0.75rem 0;
    overflow-x: auto;
}
.ui-admin-generated-output {
    max-width: 1180px;
}
.ui-player-generated-output {
    max-width: 800px;
}
.ui-component-table-wrap .ui-component-table,
.ui-component-table-wrap .ui-table {
    min-width: 100%;
}
.ui-component-table-wrap th,
.ui-component-table-wrap td {
    overflow-wrap: anywhere;
}
.ui-admin-container .divborder,
.ui-admin-section .divborder,
.ui-player-container .divborder,
.ui-player-section .divborder {
    max-width: 100%;
}
@media (max-width: 720px) {
    .ui-component-grid,
    .ui-card-grid,
    .ui-admin-grid,
    .ui-player-grid {
        grid-template-columns: 1fr;
    }
    .ui-component-section {
        padding: 0.55rem;
        border-radius: 8px;
    }
}


/** ADDED v2026-05-21.3899
 * Continued admin/player CSS normalization.
 * These rules define named component contracts so pages can stop redefining
 * containers, cards, form clusters, field tables, reports, and details panels.
 */
:root {
    --ui-admin-max-width: 1180px;
    --ui-player-max-width: 820px;
    --ui-admin-density-padding: 0.85rem;
    --ui-player-density-padding: 0.6rem;
    --ui-component-radius: 10px;
    --ui-component-gap: 0.75rem;
}
.ui-surface-page {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
}
.ui-admin-page {
    max-width: var(--ui-admin-max-width);
    padding: var(--ui-admin-density-padding);
}
.ui-player-page {
    max-width: var(--ui-player-max-width);
    padding: var(--ui-player-density-padding);
}
.ui-admin-section-panel,
.ui-admin-card,
.ui-admin-details-card {
    --ui-surface-accent: var(--css-color-2f5d9f);
}
.ui-player-section-panel,
.ui-player-card,
.ui-player-details-card {
    --ui-surface-accent: var(--color-primary);
}
.ui-admin-section-panel,
.ui-player-section-panel,
.ui-admin-details-card,
.ui-player-details-card,
.player-profile-summary-card,
.admin-operation-section,
.admin-report-section {
    border-left: 4px solid var(--ui-surface-accent, var(--color-border));
}
.ui-normalized-details {
    display: block;
}
.ui-normalized-details > summary {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.45rem;
}
.ui-field-table th,
.ui-field-table td {
    vertical-align: top;
}
.ui-admin-field-table th {
    width: 34%;
    text-align: left;
}
.ui-player-field-table th {
    width: 38%;
    text-align: left;
}
.ui-form-row,
.ui-filter-row,
.ui-report-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.ui-admin-form-cluster,
.ui-player-form-cluster {
    display: grid;
    gap: 0.65rem;
}
.ui-admin-report,
.ui-player-report {
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--ui-component-radius);
    background: var(--color-white);
    padding: 0.75rem;
    margin: 0.75rem 0;
}
.ui-admin-report {
    max-width: var(--ui-admin-max-width);
}
.ui-player-report {
    max-width: var(--ui-player-max-width);
}
.admin-scrambles-section .admin-form,
.admin-scrambles-section .admin-inline-form,
.ui-admin-section-panel .admin-form,
.ui-admin-section-panel .admin-inline-form {
    margin: 0.5rem 0;
}
.admin-scrambles-section table,
.ui-admin-section-panel table,
.ui-player-section-panel table {
    max-width: 100%;
}
.player-profile-summary-card {
    background: var(--color-white);
    border-radius: var(--ui-component-radius);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}
.player-profile-details,
.player-availability-details,
.player-match-history-details,
.player-subs-details {
    margin: 0.75rem 0;
}
.ui-component-table-wrap,
.ui-table-container,
.admin-table-container,
.eligible-subs-table-container,
.team-availability-table-container {
    scrollbar-width: thin;
}
@media (max-width: 720px) {
    :root {
        --ui-admin-density-padding: 0.55rem;
        --ui-player-density-padding: 0.45rem;
        --ui-component-gap: 0.5rem;
    }
    .ui-admin-page,
    .ui-player-page,
    .ui-admin-report,
    .ui-player-report {
        max-width: 100%;
    }
    .ui-admin-field-table th,
    .ui-player-field-table th {
        width: auto;
    }
    .ui-form-row,
    .ui-filter-row,
    .ui-report-row {
        align-items: stretch;
    }
    .ui-form-row > *,
    .ui-filter-row > * {
        max-width: 100%;
    }
}

/* ADDED v2026-05-21.3900: admin/player named component normalization contracts. */
:root {
  --ui-surface-radius: 14px;
  --ui-surface-gap: 1rem;
  --ui-surface-border: 1px solid rgba(0,0,0,.12);
  --ui-surface-shadow: 0 1px 4px rgba(0,0,0,.08);
  --ui-admin-max-width: 1320px;
  --ui-player-max-width: 980px;
}

.ui-component-container,
.ui-surface-page,
.ui-named-report {
  box-sizing: border-box;
  width: min(100%, var(--ui-player-max-width));
  margin-inline: auto;
}

.ui-component-admin.ui-component-container,
.ui-admin-page,
.admin-normalized-page,
.ui-component-admin.ui-named-report {
  width: min(100%, var(--ui-admin-max-width));
}

.ui-component-player.ui-component-container,
.ui-player-page,
.player-normalized-page {
  width: min(100%, var(--ui-player-max-width));
}

.ui-page-header,
.ui-section-title,
.ui-card-title { overflow-wrap: anywhere; }

.ui-card-body,
.ui-section-intro,
.ui-page-intro,
.ui-generated-output,
.ui-definition-list dd,
.ui-definition-list dt { overflow-wrap: anywhere; }

.ui-normalized-card,
.ui-component-card,
.ui-component-section,
.ui-details-card,
.ui-generated-output,
.ui-definition-list,
.admin-normalized-section,
.player-normalized-section {
  border: var(--ui-surface-border);
  border-radius: var(--ui-surface-radius);
  box-shadow: var(--ui-surface-shadow);
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  margin-block: var(--ui-surface-gap);
  box-sizing: border-box;
}

.ui-component-admin.ui-component-card,
.ui-admin-section-panel,
.admin-normalized-section,
.ui-admin-details-card,
.ui-component-admin.ui-generated-output {
  background: rgba(255,255,255,.96);
}

.ui-component-player.ui-component-card,
.ui-player-section-panel,
.player-normalized-section,
.ui-player-details-card,
.ui-component-player.ui-generated-output {
  background: rgba(255,255,255,.92);
}

.ui-card-grid,
.ui-normalized-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--ui-surface-gap);
  align-items: start;
}

.ui-action-row,
.ui-action-link-row,
.ui-form-actions,
.player-action-row,
.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-block: .75rem;
}

.ui-form,
.admin-normalized-form,
.player-normalized-form {
  display: block;
  max-width: 100%;
}

.ui-form input,
.ui-form select,
.ui-form textarea,
.admin-normalized-form input,
.admin-normalized-form select,
.admin-normalized-form textarea,
.player-normalized-form input,
.player-normalized-form select,
.player-normalized-form textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.ui-button,
.ui-admin-button,
.ui-player-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.35rem;
  padding: .5rem .8rem;
  border-radius: .65rem;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}

.ui-player-button { min-height: 2.65rem; }
.ui-admin-button { min-height: 2.25rem; }

.ui-button-primary,
.ui-admin-button-primary,
.ui-player-button-primary { font-weight: 700; }
.ui-button-danger,
.ui-admin-button-danger { font-weight: 700; }

.ui-table-container,
.ui-component-table-wrap,
.admin-table-container,
.table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-table,
.ui-component-table,
.ui-admin-table,
.ui-player-table {
  width: 100%;
  border-collapse: collapse;
}

.ui-table th,
.ui-table td,
.ui-component-table th,
.ui-component-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ui-definition-list {
  display: grid;
  gap: .5rem;
}
.ui-definition-row {
  display: grid;
  grid-template-columns: minmax(8rem, 18rem) 1fr;
  gap: .5rem 1rem;
  align-items: start;
}
.ui-definition-row dt { font-weight: 700; }
.ui-definition-row dd { margin: 0; }

.ui-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .875em;
  font-weight: 700;
  border: var(--ui-surface-border);
}

.ui-file-link-list {
  display: grid;
  gap: .35rem;
  padding-left: 1.25rem;
}

.season-select-page .ui-form-actions { display: none; }
.season-select-form .season-select-button { margin-block: .25rem; }

@media (max-width: 720px) {
  .ui-component-container,
  .ui-surface-page,
  .ui-named-report,
  .ui-component-admin.ui-component-container,
  .ui-admin-page,
  .ui-component-player.ui-component-container,
  .ui-player-page {
    width: 100%;
  }
  .ui-definition-row { grid-template-columns: 1fr; }
  .ui-action-row,
  .ui-action-link-row,
  .ui-form-actions,
  .player-action-row,
  .admin-action-row { align-items: stretch; }
  .ui-player-button,
  .season-select-button { width: 100%; }
}

@media print {
  .ui-action-row,
  .ui-action-link-row,
  .ui-form-actions { display: none !important; }
  .ui-component-card,
  .ui-component-section,
  .ui-generated-output { box-shadow: none; }
}


/* ADDED v2026-05-21.3902 - safe SQL file link components for ModSecurity-safe admin downloads */
.ui-safe-sql-file-card .ui-file-link-list,
.ui-safe-sql-file-list {
    display: grid;
    gap: 0.5rem;
    margin-left: 0;
    padding-left: 1.1rem;
}

.ui-safe-sql-file-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ui-safe-sql-file-card .file-path {
    overflow-wrap: anywhere;
}

/* ADDED v2026-05-21.3903 - admin/player CSS normalization and named component contracts */
.ui-report-surface,
.ui-component-container,
.ui-surface-page {
    box-sizing: border-box;
}

.ui-admin-page,
.ui-component-admin.ui-component-container,
.ui-report-surface.ui-component-admin {
    --ui-surface-max-width: min(1500px, calc(100vw - 2rem));
    width: var(--ui-surface-max-width);
    margin-inline: auto;
}

.ui-player-page,
.ui-component-player.ui-component-container,
.ui-report-surface.ui-component-player {
    --ui-surface-max-width: min(980px, calc(100vw - 1rem));
    width: var(--ui-surface-max-width);
    margin-inline: auto;
}

.ui-component-section,
.ui-component-card,
.ui-report-card,
.ui-report-table-card,
.ui-empty-state,
.ui-details-card {
    box-sizing: border-box;
    border: var(--ui-surface-border, 1px solid rgba(0,0,0,.12));
    border-radius: var(--ui-surface-radius, 12px);
    background: var(--ui-surface-bg, rgba(255,255,255,.9));
    padding: var(--ui-surface-padding, 1rem);
    margin-block: .85rem;
}

.ui-component-admin.ui-component-section,
.ui-component-admin.ui-component-card,
.ui-admin-section-panel,
.admin-normalized-card {
    --ui-surface-padding: 1rem;
}

.ui-component-player.ui-component-section,
.ui-component-player.ui-component-card,
.ui-player-section-panel,
.player-normalized-card {
    --ui-surface-padding: .85rem;
}

.ui-field-row {
    display: grid;
    grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr);
    gap: .45rem 1rem;
    align-items: start;
    margin-block: .65rem;
}
.ui-field-label { font-weight: 700; }
.ui-field-control { min-width: 0; }
.ui-field-help { margin-top: .25rem; font-size: .925em; opacity: .82; }
.ui-input,
.ui-select,
.ui-textarea,
.ui-admin-input,
.ui-admin-select,
.ui-player-input,
.ui-player-select {
    max-width: 100%;
    box-sizing: border-box;
}

.ui-report-table-card .ui-table-container,
.ui-component-table-wrap {
    margin-block: .5rem;
}

.ui-empty-state {
    text-align: center;
    opacity: .95;
}
.ui-empty-state-title { margin-top: 0; }
.ui-empty-state-message { margin-bottom: 0; }

.dashboard-card-grid,
.ui-card-grid,
.admin-dashboard-card-grid,
.player-card-grid {
    align-items: stretch;
}
.dashboard-card,
.ui-component-card,
.ui-report-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-normalized-page .dashboard-card-grid,
.ui-admin-page .dashboard-card-grid {
    gap: .85rem;
}
.player-normalized-page .ui-card-grid,
.ui-player-page .ui-card-grid {
    gap: .65rem;
}

@media (max-width: 720px) {
    .ui-field-row { grid-template-columns: 1fr; }
    .ui-admin-page,
    .ui-player-page,
    .ui-component-admin.ui-component-container,
    .ui-component-player.ui-component-container {
        width: 100%;
        margin-inline: 0;
    }
    .ui-component-section,
    .ui-component-card,
    .ui-report-card,
    .ui-report-table-card,
    .ui-empty-state,
    .ui-details-card {
        border-radius: 10px;
        padding: .75rem;
    }
}


/* ADDED v2026-05-21.3911 - continued admin/player CSS normalization and named presentation components. */
.ui-toolbar,
.ui-report-header,
.ui-filter-panel {
    box-sizing: border-box;
}

.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-block: .65rem;
}

.ui-toolbar-item {
    min-width: 0;
}

.ui-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-block: .85rem;
}

.ui-report-heading {
    min-width: 0;
}

.ui-report-heading h1,
.ui-report-heading h2,
.ui-report-heading h3,
.ui-filter-title {
    margin-top: 0;
}

.ui-filter-panel {
    border: var(--ui-surface-border, 1px solid rgba(0,0,0,.12));
    border-radius: var(--ui-surface-radius, 12px);
    background: var(--ui-surface-bg, rgba(255,255,255,.88));
    padding: var(--ui-surface-padding, 1rem);
    margin-block: .85rem;
}

.ui-admin-toolbar,
.ui-admin-report-header,
.ui-admin-filter-panel {
    --ui-surface-padding: 1rem;
}

.ui-player-toolbar,
.ui-player-report-header,
.ui-player-filter-panel {
    --ui-surface-padding: .85rem;
}

.ui-admin-filter-panel {
    max-width: min(1500px, 100%);
}

.ui-player-filter-panel {
    max-width: min(980px, 100%);
}

@media (max-width: 720px) {
    .ui-report-header {
        display: block;
    }
    .ui-report-actions,
    .ui-toolbar {
        margin-top: .5rem;
    }
}

/* ADDED v2026-05-21.3912: Create League scoped rule package selection. */
.ui-admin-section-row th {
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-align: left;
}
.ui-admin-rule-package-row select {
    max-width: 34rem;
    width: min(100%, 34rem);
}
.ui-admin-rule-package-row .admin-action-note {
    display: inline-block;
    margin-left: 0.35rem;
}
@media (max-width: 720px) {
    .ui-admin-rule-package-row .admin-action-note {
        display: block;
        margin-left: 0;
        margin-top: 0.35rem;
    }
}
/* ADDED v2026-05-21.3913 - shared component contracts for admin/player normalization. */
.ui-panel,
.ui-summary-card,
.ui-timeline,
.ui-form-table {
    box-sizing: border-box;
}

.ui-panel {
    border: var(--ui-surface-border, 1px solid rgba(0,0,0,.12));
    border-radius: var(--ui-surface-radius, 12px);
    background: var(--ui-surface-bg, rgba(255,255,255,.92));
    padding: var(--ui-surface-padding, 1rem);
    margin-block: var(--ui-surface-gap, 1rem);
}

.ui-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}

.ui-panel-title {
    margin: 0;
}

.ui-panel-body > :first-child,
.ui-card-body > :first-child,
.ui-filter-body > :first-child {
    margin-top: 0;
}

.ui-panel-body > :last-child,
.ui-card-body > :last-child,
.ui-filter-body > :last-child {
    margin-bottom: 0;
}

.ui-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-block: .9rem;
}

.ui-summary-card {
    border: var(--ui-surface-border, 1px solid rgba(0,0,0,.10));
    border-radius: var(--ui-surface-radius, 12px);
    background: var(--ui-summary-bg, rgba(255,255,255,.84));
    padding: .85rem;
    min-width: 0;
}

.ui-summary-label {
    font-size: .78rem;
    line-height: 1.25;
    opacity: .72;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ui-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: .2rem;
}

.ui-summary-note {
    font-size: .85rem;
    opacity: .78;
    margin-top: .25rem;
}

.ui-form-table th,
.ui-form-table td {
    vertical-align: top;
}

.ui-form-table th:first-child,
.ui-form-table td:first-child {
    width: 28%;
    min-width: 11rem;
}

.ui-timeline {
    list-style: none;
    margin: .85rem 0;
    padding: 0;
}

.ui-timeline-item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: .6rem;
    margin-bottom: .8rem;
}

.ui-timeline-marker {
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: currentColor;
    opacity: .42;
    margin-top: .35rem;
}

.ui-timeline-content {
    min-width: 0;
}

.ui-timeline-title {
    display: block;
}

.ui-timeline-meta {
    display: block;
    font-size: .82rem;
    opacity: .72;
    margin-top: .1rem;
}

.ui-timeline-body {
    margin-top: .25rem;
}

.ui-timeline-empty {
    display: block;
    opacity: .72;
}

@media (max-width: 720px) {
    .ui-panel-header {
        display: block;
    }
    .ui-panel-actions {
        margin-top: .5rem;
    }
    .ui-form-table th:first-child,
    .ui-form-table td:first-child {
        width: auto;
        min-width: 0;
    }
}
/* ADDED v2026-05-21.3913 - admin theme refinements. */
.ui-component-admin,
.ui-admin-page,
.ui-admin-section,
.ui-admin-card,
.ui-admin-panel,
.ui-admin-table-wrap,
.ui-admin-form,
.ui-admin-report-header,
.ui-admin-filter-panel {
    --ui-surface-radius: 12px;
    --ui-surface-padding: 1rem;
    --ui-surface-gap: 1rem;
    --ui-summary-bg: rgba(255,255,255,.90);
}

.ui-admin-page {
    max-width: min(1540px, calc(100vw - 2rem));
}

.ui-admin-panel,
.ui-admin-card,
.ui-admin-section,
.ui-admin-filter-panel,
.ui-admin-table-wrap {
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.ui-admin-toolbar .ui-button,
.ui-admin-actions .ui-button,
.ui-admin-form-actions .ui-button {
    min-height: 2.15rem;
}
/* ADDED v2026-05-21.3913 - player-facing theme refinements. */
.ui-component-player,
.ui-player-page,
.ui-player-section,
.ui-player-card,
.ui-player-panel,
.ui-player-table-wrap,
.ui-player-form,
.ui-player-report-header,
.ui-player-filter-panel {
    --ui-surface-radius: 14px;
    --ui-surface-padding: .9rem;
    --ui-surface-gap: .85rem;
    --ui-summary-bg: rgba(255,255,255,.86);
}

.ui-player-page {
    max-width: min(1040px, calc(100vw - 1rem));
}

.ui-player-toolbar,
.ui-player-actions,
.ui-player-form-actions {
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .ui-player-page {
        max-width: 100%;
        padding-inline: .35rem;
    }
    .ui-player-toolbar .ui-button,
    .ui-player-actions .ui-button,
    .ui-player-form-actions .ui-button {
        width: 100%;
        justify-content: center;
    }
}

/** ADDED v2026-05-21.3914
 * Player/site-side details density normalization.
 * Keep admin diagnostics/details readable, but reduce the stacked vertical space
 * between player-facing details cards generated by Ui_OpenPlayerDetails().
 */
.ui-component-player.ui-player-details-card,
.player-page-container .ui-player-details-card,
.players-container .ui-player-details-card,
.player-profile-details,
.player-availability-details,
.player-match-history-details,
.player-subs-details,
.ui-player-details-card .ui-player-normalized-details > summary,
.player-page-container .ui-normalized-details > summary,
.players-container .ui-normalized-details > summary {
    margin-bottom: 0.28rem;
}

.ui-player-details-card + .ui-player-details-card,
.ui-component-player.ui-player-details-card + .ui-component-player.ui-player-details-card,
.player-page-container .ui-player-details-card + .ui-player-details-card,
.players-container .ui-player-details-card + .ui-player-details-card {
    margin-top: 0.35rem;
}

.ui-player-details-card .ui-normalized-details > :last-child {
    margin-bottom: 0;
}

.profile-photo img.image-oval,
.player-photo img.image-oval,
img.image-oval {
    border-radius: 50%;
    object-fit: cover;
}
/* ADDED v2026-05-21.3915: shared link-card/detail/form-action component contracts. */
.ui-link-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 0.85rem 0;
}
.ui-link-card {
    display: block;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    background: rgba(255,255,255,0.82);
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ui-link-card:hover,
.ui-link-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    border-color: rgba(0,0,0,0.22);
    outline: none;
}
.ui-link-card-title {
    font-weight: 700;
    line-height: 1.2;
}
.ui-link-card-value {
    margin-top: 0.35rem;
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0.82;
}
.ui-link-card-detail {
    margin-top: 0.45rem;
    font-size: 0.88rem;
    line-height: 1.35;
    opacity: 0.78;
}
.ui-details-list {
    display: grid;
    gap: 0.65rem;
}
.ui-details-list .ui-details-card,
.ui-player-page details.ui-player-details-card,
.ui-component-player details.ui-player-details-card {
    margin-block: 0.45rem;
}
.ui-details-body {
    padding-top: 0.5rem;
}
.ui-form-actions {
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
@media (max-width: 640px) {
    .ui-link-card-grid { grid-template-columns: 1fr; gap: 0.65rem; }
    .ui-link-card { padding: 0.75rem 0.8rem; }
    .ui-form-actions { flex-direction: column; align-items: stretch; }
    .ui-form-actions .ui-button { width: 100%; text-align: center; }
}
/* ADDED v2026-05-21.3915: admin-specific component density. */
.ui-admin-link-card {
    background: rgba(255,255,255,0.92);
}
.ui-admin-link-card .ui-link-card-title {
    font-size: 0.98rem;
}
.ui-admin-details-list {
    gap: 0.8rem;
}
/* ADDED v2026-05-21.3915: player-specific component density. */
.ui-player-link-card {
    background: rgba(255,255,255,0.86);
}
.ui-player-link-card .ui-link-card-title {
    font-size: 1rem;
}
.player-about-details,
.player-about-rule-details {
    margin-block: 0.35rem;
}
.player-about-rule-details summary {
    padding-block: 0.45rem;
}

/** ADDED v2026-05-21.3916
 * Stronger sitewide details-density correction.
 * Earlier component rules still inherited large global card margins from the
 * generic `details` block. This late rule intentionally wins the cascade and
 * reduces the visible vertical gap between adjacent details panels across the
 * public/player site and admin tools while preserving readable open-content
 * padding.
 */
:where(details, .ui-details-card, .ui-player-details-card, .ui-admin-details-card, .player-about-details, .player-about-rule-details) {
    margin-block: 0 0.35rem !important;
}

:where(details + details, .ui-details-card + .ui-details-card, .ui-player-details-card + .ui-player-details-card, .ui-admin-details-card + .ui-admin-details-card) {
    margin-top: 0 !important;
}

:where(details) > summary {
    padding-block: 0.48rem !important;
}

:where(details[open]) > summary {
    margin-bottom: 0.45rem !important;
}

:where(.player-page-container, .players-container, .ui-player-page, .site-page-container) :where(details, .ui-details-card, .ui-player-details-card) {
    padding-block: 0.48rem !important;
}

:where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .admin-report-shell, .admin-action-shell) :where(details, .ui-details-card, .ui-admin-details-card) {
    padding-block: 0.58rem !important;
}


/** ADDED v2026-05-21.3917
 * Corrective sitewide details-density override.
 * Some pages output legacy <br> elements after componentized <details> wrappers,
 * and some parent containers use grid gaps. Hide those legacy spacers and tighten
 * the component gaps instead of relying only on details margins.
 */
:where(.ui-component-details-card, .ui-details-card, .ui-player-details-card, .ui-admin-details-card, details) + br,
:where(details) + br {
    display: none !important;
}

:where(.ui-details-list, .ui-player-page, .player-page-container, .players-container, .site-page-container) {
    gap: 0.35rem !important;
}

:where(.ui-component-details-card, .ui-details-card, .ui-player-details-card, .ui-admin-details-card) {
    margin-top: 0 !important;
    margin-bottom: 0.3rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

:where(.ui-component-details-card, .ui-details-card, .ui-player-details-card, .ui-admin-details-card) > details,
:where(.ui-component-details-card, .ui-details-card, .ui-player-details-card, .ui-admin-details-card) .ui-normalized-details {
    margin: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

:where(.ui-normalized-details, details) > summary {
    padding-top: 0.42rem !important;
    padding-bottom: 0.42rem !important;
}

:where(.ui-normalized-details[open], details[open]) > summary {
    margin-bottom: 0.35rem !important;
}

/* ADDED v2026-05-21.3919: robust routed profile-photo frame/fallback. */
.profile-photo-frame {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}
.profile-photo-frame .profile-photo-image {
    display: inline-block;
    object-fit: cover;
}
.profile-photo-frame .profile-initials-avatar[hidden] {
    display: none !important;
}
.profile-photo-frame .profile-photo-image[hidden] + .profile-initials-avatar {
    display: inline-flex !important;
}

/* ADDED v2026-05-21.3920: profile photos render over an always-visible initials fallback. */
.profile-photo-frame.profile-photo-frame-has-image {
    position: relative;
    width: var(--profile-photo-size, 32px);
    height: var(--profile-photo-size, 32px);
    min-width: var(--profile-photo-size, 32px);
    min-height: var(--profile-photo-size, 32px);
    line-height: 1;
}
.profile-photo-frame.profile-photo-frame-has-image .profile-photo-fallback-avatar {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.profile-photo-frame.profile-photo-frame-has-image .profile-photo-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: var(--profile-photo-size, 32px) !important;
    height: var(--profile-photo-size, 32px) !important;
    max-width: var(--profile-photo-size, 32px) !important;
    max-height: var(--profile-photo-size, 32px) !important;
    object-fit: cover;
    background: var(--color-page-bg);
}


/* ADDED v2026-05-22.3916: Calendar density corrections.
 * - Team/member legend shrink-wraps to its content instead of expanding the page.
 * - Hour cells have no internal spacing; availability bars fill the full cell width.
 * - Date column is compact and uses the existing two-line weekday/month-day format.
 */
.calendar-container .calendar-team-legend,
.calendar-team-legend.component-calendar-team-legend {
    display: inline-grid !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: start !important;
    align-items: start !important;
    justify-items: start !important;
    justify-self: start !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    margin-inline: 0 auto !important;
    padding: 0 !important;
}

.calendar-container .calendar-team-legend-line.component-calendar-team-legend-row,
.calendar-container .calendar-team-legend-line {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    width: max-content !important;
    max-width: 100% !important;
    justify-content: start !important;
    align-items: center !important;
    column-gap: 0.45rem !important;
    row-gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 1.1 !important;
}

.calendar-container .calendar-team-legend-team-cell,
.calendar-container .calendar-team-legend-player-cell,
.calendar-container .calendar-team-legend-player {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
}

.calendar-container .calendar-team-legend-player-empty {
    display: none !important;
}

.table-calendar {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.table-calendar :where(th, td) {
    padding: 0 !important;
}

.table-calendar .calendar-date-header,
.table-calendar :where(td.datepad, td.calendar-date-cell),
.table-calendar th:first-child {
    width: 1% !important;
    min-width: 0 !important;
    max-width: max-content !important;
    white-space: nowrap !important;
    padding: 0.08rem 0.22rem !important;
    text-align: center !important;
    line-height: 1.05 !important;
}

.table-calendar .calendar-date-dow,
.table-calendar .calendar-date-md,
.table-calendar .calendar-date-header-label {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.05;
}

.table-calendar .calendar-clickable-cell {
    padding: 0 !important;
    min-width: 1.85rem;
    vertical-align: top;
    line-height: 0;
}

.table-calendar .calendar-clickable-cell > div,
.table-calendar .calendar-clickable-cell > :where(.c0, .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 0.48rem !important;
    min-height: 0.48rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.table-calendar .calendar-clickable-cell > div + div {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .calendar-container .calendar-team-legend-line.component-calendar-team-legend-row,
    .calendar-container .calendar-team-legend-line {
        grid-template-columns: max-content max-content max-content !important;
        column-gap: 0.35rem !important;
    }

    .table-calendar .calendar-clickable-cell {
        min-width: 1.55rem;
    }

    .table-calendar .calendar-clickable-cell > div,
    .table-calendar .calendar-clickable-cell > :where(.c0, .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8) {
        height: 0.42rem !important;
        min-height: 0.42rem !important;
    }
}



/* ADDED v2026-05-22.3921: shared message/confirm/checkbox-table components. */
.ui-message-list {
    margin: 0.45rem 0;
    padding-left: 1.1rem;
}
.ui-message-list-item {
    margin: 0.16rem 0;
    line-height: 1.35;
}
.ui-message-list-item-info { color: var(--text, #222); }
.ui-message-list-item-warning { color: #7a4d00; }
.ui-message-list-item-error { color: #8a1f11; }
.ui-message-list-item-success { color: #176c2f; }
.ui-confirm-box {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.65rem 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 0.55rem;
    background: rgba(0,0,0,0.025);
    line-height: 1.35;
}
.ui-admin-confirm-box {
    background: rgba(40, 80, 120, 0.045);
}
.ui-player-confirm-box {
    background: rgba(40, 120, 80, 0.04);
}
.ui-checkbox-table input[type='checkbox'] {
    transform: translateY(0.08rem);
}
.ui-admin-table.ui-checkbox-table th:first-child,
.ui-admin-table.ui-checkbox-table td:first-child,
.ui-player-table.ui-checkbox-table th:first-child,
.ui-player-table.ui-checkbox-table td:first-child {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}
.ui-admin-page .ui-report-table-card,
.ui-player-page .ui-report-table-card {
    overflow-x: auto;
}

/* ADDED v2026-05-22.3921: admin/player theme hooks. */
.ui-admin-message-list { font-size: 0.96rem; }
.ui-player-message-list { font-size: 0.98rem; }
.ui-admin-confirm-box { border-color: rgba(40,80,120,0.18); }
.ui-player-confirm-box { border-color: rgba(40,120,80,0.16); }
/* ADDED v2026-05-22.3922: focused player-facing CSS/UX normalization.
 * Scope: player/public pages only. Admin layout remains governed by admin-theme files.
 */
:root {
    --player-surface-max-width: min(100%, 1100px);
    --player-surface-pad-y: clamp(0.45rem, 1vw, 0.85rem);
    --player-surface-pad-x: clamp(0.55rem, 1.6vw, 1rem);
    --player-section-gap: 0.38rem;
    --player-card-radius: 0.72rem;
    --player-table-cell-y: 0.22rem;
    --player-table-cell-x: 0.38rem;
}

/* Canonical public/player page shell. */
.ui-component-player.ui-component-container,
.ui-player-container,
.player-normalized-page,
.player-page-compact,
.player-calendar-page,
.player-team-profile-page,
.player-stats-page,
.player-feedback-page,
.player-donate-page,
.season-select-page {
    box-sizing: border-box;
    width: var(--player-surface-max-width);
    max-width: 100%;
    margin: 0 auto;
    padding: var(--player-surface-pad-y) var(--player-surface-pad-x);
}

.player-page-compact {
    padding-top: 0.35rem;
    padding-bottom: 0.45rem;
}

/* Canonical public/player sections and cards. */
.ui-component-player.ui-component-section,
.ui-player-section,
.player-normalized-section,
.player-section-card,
.ui-player-card,
.player-profile-card,
.stats-overview-card,
.stats-progress-panel,
.player-feedback-page .ui-component-section,
.player-recent-feedback-section {
    box-sizing: border-box;
    max-width: 100%;
    margin: var(--player-section-gap) 0;
    padding: 0.58rem 0.68rem;
    border-radius: var(--player-card-radius);
}

.ui-player-page-header,
.ui-player-section-title,
.ui-player-card-title,
.player-section-heading {
    margin-block: 0 0.32rem;
    line-height: 1.15;
}

.ui-page-intro,
.ui-section-intro,
.player-inline-message {
    margin-block: 0.18rem 0.42rem;
    line-height: 1.32;
}

/* Unified details density for all public/player details sections. */
body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) {
    box-sizing: border-box;
    max-width: 100%;
    margin-block: 0.26rem !important;
    padding: 0 !important;
    border-radius: 0.62rem;
    overflow: clip;
}

body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) > summary {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.34rem 0.55rem !important;
    line-height: 1.16 !important;
    cursor: pointer;
}

body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details)[open] {
    padding-bottom: 0.36rem !important;
}

body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) > :where(div, p, ul, ol, table, section, .table-container, .ui-details-body):not(summary) {
    margin-top: 0.34rem;
    margin-bottom: 0.34rem;
}

/* Remove legacy visual gaps without altering document semantics. */
body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section) + br {
    display: none !important;
}

/* FIX v2026-05-22.3927:
 * Do not hide components that follow legacy <br> spacers. Earlier density cleanup
 * used `br + details` / `br + .ui-player-details-card`, which removed About
 * sections after League Details and removed the player-owned My Profile panel
 * after the profile-summary break. Only the spacer <br> should be hidden.
 */
body:not(.admin) br + :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section) {
    display: revert !important;
}

/* Unified public/player tables. */
body:not(.admin) :where(.table-container, .ui-player-table-wrap, .ui-component-player.ui-component-table-wrap) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-block: 0.32rem;
}

body:not(.admin) :where(table, .ui-player-table, .table-calendar) {
    max-width: 100%;
    border-collapse: collapse;
}

body:not(.admin) :where(th, td) {
    line-height: 1.22;
}

body:not(.admin) :where(.ui-player-table, .table-container > table, .stats-details table, .team-profile-section table, .profile-summary-table) :where(th, td) {
    padding: var(--player-table-cell-y) var(--player-table-cell-x);
    vertical-align: middle;
}

body:not(.admin) :where(.profile-summary-table th, .team-profile-section table th, .stats-details table th) {
    width: 1%;
    white-space: nowrap;
}

body:not(.admin) :where(.stats-player-link-cell, .stats-player-cell, .team-profile-member-name, .stacked-name) {
    overflow-wrap: anywhere;
}

/* Unified public/player forms. */
body:not(.admin) :where(.ui-player-form, .player-normalized-form, form.player-normalized-form, .season-select-form, .player-feedback-page form) {
    box-sizing: border-box;
    max-width: 100%;
    margin-block: 0.4rem;
}

body:not(.admin) :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
}

body:not(.admin) :where(.ui-player-actions, .ui-player-form-actions, .player-action-row, .season-select-list) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.36rem;
    margin-block: 0.42rem;
}

/* Player profile/team profile alignment. */
.profile-summary-wrap.player-profile-card,
.team-profile-member-grid {
    width: max-content;
    max-width: 100%;
}

.team-profile-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.45rem;
    margin-block: 0.35rem;
}

.team-profile-member-card {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.42rem 0.5rem;
    border-radius: 0.62rem;
}

.team-profile-member-info {
    min-width: 0;
}

.team-profile-member-meta {
    line-height: 1.2;
}

/* Player calendar stays dense while remaining inside the normalized player shell. */
.player-calendar-page .calendar-instructions-heading {
    font-size: 0.98rem;
    font-weight: 600;
}

.player-calendar-page .table-calendar {
    width: auto;
    max-width: 100%;
}

/* Mobile player pages: reduce chrome before reducing content. */
@media (max-width: 720px) {
    :root {
        --player-surface-pad-y: 0.32rem;
        --player-surface-pad-x: 0.38rem;
        --player-section-gap: 0.24rem;
        --player-table-cell-y: 0.18rem;
        --player-table-cell-x: 0.28rem;
    }

    .ui-component-player.ui-component-container,
    .ui-player-container,
    .player-normalized-page,
    .player-page-compact {
        padding-inline: var(--player-surface-pad-x);
    }

    body:not(.admin) :where(details, .ui-player-details-card, .player-details-card, .stats-details, .team-profile-section) > summary {
        padding: 0.3rem 0.44rem !important;
    }

    .profile-summary-wrap.player-profile-card,
    .team-profile-member-grid {
        width: 100%;
    }
}


/* Step 3923: Stats moved from main nav into About. */
.player-about-stats-details .player-about-stats-links,
.player-about-stats-links {
    display: grid;
    gap: 0.35rem;
}

.player-about-stats-links p {
    margin: 0;
}

.player-about-stats-links .ui-link-button,
.player-about-stats-links .ui-player-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 640px) {
    .player-about-stats-links .ui-link-button,
    .player-about-stats-links .ui-player-link-button {
        width: 100%;
    }
}

/* ADDED v2026-05-22.3923
   Unified component density and responsive defaults.
   Keep admin/player themes visually distinct while normalizing behavior. */
:root {
    --ui-space-2xs: 0.125rem;
    --ui-space-xs: 0.25rem;
    --ui-space-sm: 0.5rem;
    --ui-space-md: 0.75rem;
    --ui-space-lg: 1rem;
    --ui-radius-sm: 0.375rem;
    --ui-radius-md: 0.625rem;
    --ui-radius-lg: 0.875rem;
    --ui-border-subtle: rgba(0,0,0,0.14);
    --ui-shadow-soft: 0 1px 3px rgba(0,0,0,0.08);
    --ui-max-readable: 76rem;
    --ui-max-player: 60rem;
    --ui-max-admin: 96rem;
}
.ui-component { box-sizing: border-box; }
.ui-surface-page,
.ui-component-container {
    width: min(100%, var(--ui-max-readable));
    margin-inline: auto;
    padding-inline: clamp(0.5rem, 2vw, 1.25rem);
}
.ui-admin-page { width: min(100%, var(--ui-max-admin)); }
.ui-player-page { width: min(100%, var(--ui-max-player)); }
.ui-page-header { margin-block: var(--ui-space-md) var(--ui-space-lg); }
.ui-page-header h1,
.ui-page-header h2,
.ui-section-title,
.ui-card-title { margin-block: 0 var(--ui-space-sm); line-height: 1.2; }
.ui-section-intro,
.ui-page-intro { margin-block: 0 var(--ui-space-md); max-width: 70ch; }
.ui-card,
.ui-panel,
.ui-report-card,
.ui-details-card,
.ui-component-section,
.ui-filter-panel,
.ui-page-note {
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-soft);
    background: var(--surface-bg, #fff);
}
.ui-card,
.ui-panel,
.ui-report-card,
.ui-filter-panel,
.ui-page-note { padding: var(--ui-space-md); margin-block: var(--ui-space-md); }
.ui-component-section { padding: var(--ui-space-md); margin-block: var(--ui-space-md); }
.ui-details-card { margin-block: var(--ui-space-sm); overflow: clip; }
.ui-details-card > summary,
.ui-normalized-details > summary,
details.ui-player-details-card > summary,
details.ui-admin-details-card > summary {
    cursor: pointer;
    padding: var(--ui-space-sm) var(--ui-space-md);
    line-height: 1.25;
}
.ui-normalized-details > :not(summary),
details.ui-player-details-card > :not(summary),
details.ui-admin-details-card > :not(summary) { margin-inline: var(--ui-space-md); }
.ui-normalized-details > :last-child,
details.ui-player-details-card > :last-child,
details.ui-admin-details-card > :last-child { margin-bottom: var(--ui-space-md); }
.ui-stack { display: grid; gap: var(--ui-space-sm); }
.ui-inline-meta { display: flex; flex-wrap: wrap; gap: var(--ui-space-xs) var(--ui-space-md); align-items: center; }
.ui-inline-meta-item { display: inline-flex; gap: var(--ui-space-xs); align-items: baseline; }
.ui-card-grid,
.ui-component-grid,
.ui-link-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--ui-space-md); }
.ui-action-row,
.ui-compact-actions,
.ui-form-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-sm); align-items: center; }
.ui-table-container { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table,
.ui-component-table { width: 100%; border-collapse: collapse; }
.ui-table th,
.ui-table td,
.ui-component-table th,
.ui-component-table td { padding: var(--ui-space-sm); vertical-align: top; }
.ui-field-row { display: grid; gap: var(--ui-space-xs); margin-block: var(--ui-space-sm); }
.ui-field-row label,
.ui-field-row .ui-field-label { font-weight: 600; }
.ui-admin-page .ui-card,
.ui-admin-page .ui-panel,
.ui-admin-page .ui-component-section { --surface-bg: #fff; }
.ui-player-page .ui-card,
.ui-player-page .ui-panel,
.ui-player-page .ui-component-section { --surface-bg: rgba(255,255,255,0.96); }
@media (max-width: 700px) {
    .ui-surface-page,
    .ui-component-container { padding-inline: 0.5rem; }
    .ui-card,
    .ui-panel,
    .ui-report-card,
    .ui-component-section,
    .ui-filter-panel,
    .ui-page-note { padding: var(--ui-space-sm); margin-block: var(--ui-space-sm); }
    .ui-action-row,
    .ui-compact-actions,
    .ui-form-actions { align-items: stretch; }
    .ui-action-row > *,
    .ui-compact-actions > *,
    .ui-form-actions > * { max-width: 100%; }
    .ui-table th,
    .ui-table td,
    .ui-component-table th,
    .ui-component-table td { padding: var(--ui-space-xs) var(--ui-space-sm); }
}


/* ADDED v2026-05-22.3923: Admin theme refinements. */
.ui-admin-page,
.ui-component-admin { --ui-admin-accent: #29364a; }
.ui-admin-page .ui-page-header,
.ui-component-admin .ui-page-header { border-bottom: 1px solid var(--ui-border-subtle); padding-bottom: var(--ui-space-sm); }
.ui-admin-details-card { background: #fff; }
.ui-admin-table th { white-space: nowrap; }
.ui-admin-page input,
.ui-admin-page select,
.ui-admin-page textarea { max-width: 100%; }
@media (min-width: 900px) {
    .ui-admin-page .ui-field-row { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr); align-items: start; }
}


/* ADDED v2026-05-22.3923: Player theme refinements. */
.ui-player-page,
.ui-component-player { --ui-player-accent: #1d5f64; }
.ui-player-page .ui-page-header,
.ui-component-player .ui-page-header { text-align: left; }
.ui-player-details-card { background: rgba(255,255,255,0.96); }
.ui-player-page details + details,
.ui-player-page .ui-details-card + .ui-details-card,
.ui-component-player details + details { margin-top: var(--ui-space-xs) !important; }
.ui-player-page .ui-table th,
.ui-player-page .ui-table td { padding-block: var(--ui-space-xs); }
@media (max-width: 700px) {
    .ui-player-page { font-size: 0.98rem; }
    .ui-player-page .ui-page-header { margin-block: var(--ui-space-sm); }
}


/* ADDED v2026-05-22.3924: consolidated shared component normalization. */
:root {
    --ui-gap-xs: .25rem;
    --ui-gap-sm: .45rem;
    --ui-gap-md: .75rem;
    --ui-gap-lg: 1rem;
    --ui-radius-sm: .35rem;
    --ui-radius-md: .65rem;
    --ui-radius-lg: .9rem;
    --ui-border-soft: 1px solid rgba(0,0,0,.12);
    --ui-shadow-soft: 0 1px 2px rgba(0,0,0,.06);
    --ui-line-height: 1.42;
}
.ui-component { box-sizing: border-box; }
.ui-component-container, .ui-admin-container, .ui-player-container { width: min(100%, var(--ui-page-max-width, 1180px)); margin-inline: auto; }
.ui-card, .ui-panel, .ui-report-card, .ui-data-table-card, .ui-action-panel, .ui-callout, .ui-fieldset { border: var(--ui-border-soft); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-soft); background: var(--ui-surface-bg, #fff); }
.ui-card, .ui-panel, .ui-report-card, .ui-data-table-card, .ui-action-panel, .ui-callout { padding: var(--ui-card-padding, .75rem); }
.ui-content-grid, .ui-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--ui-grid-gap, .75rem); align-items: start; }
.ui-stack { display: grid; gap: var(--ui-stack-gap, .5rem); }
.ui-inline-meta { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; font-size: .92em; opacity: .92; }
.ui-action-row, .ui-compact-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ui-table-container, .table-container { max-width: 100%; overflow-x: auto; }
.ui-table, .admin-table, .ui-player-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td, .admin-table th, .admin-table td, .ui-player-table th, .ui-player-table td { vertical-align: top; line-height: var(--ui-line-height); }
.ui-field-row { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: .35rem .75rem; align-items: start; }
.ui-field-row-control :is(input,select,textarea) { max-width: 100%; }
.ui-form-actions { margin-top: .75rem; }
.ui-callout-title { display: block; margin-bottom: .25rem; }
.ui-page-note { border-radius: var(--ui-radius-sm); padding: .55rem .7rem; border: var(--ui-border-soft); }
@media (max-width: 760px) {
    :root { --ui-card-padding: .62rem; --ui-grid-gap: .55rem; }
    .ui-field-row { grid-template-columns: 1fr; }
    .ui-action-row, .ui-compact-actions { align-items: stretch; }
    .ui-action-row > *, .ui-compact-actions > * { max-width: 100%; }
    .ui-table th, .ui-table td, .admin-table th, .admin-table td, .ui-player-table th, .ui-player-table td { padding: .38rem .45rem; }
}

/* ADDED v2026-05-22.3924: admin theme consistency pass. */
.ui-admin-container { --ui-page-max-width: 1380px; --ui-surface-bg: #fff; --ui-card-padding: .85rem; --ui-grid-gap: .85rem; }
.ui-admin-card, .ui-admin-panel, .ui-admin-data-table-card, .ui-admin-report-card, .ui-admin-action-panel { background: #fff; }
.ui-admin-details-card, .ui-admin-container details { margin-block: .55rem; }
.ui-admin-details-card > summary, .ui-admin-container details > summary { padding: .55rem .7rem; cursor: pointer; }
.ui-admin-form :is(input,select,textarea), .admin-feedback-action-form textarea { width: min(100%, 46rem); }
.admin-feedback-action-form textarea { min-width: 14rem; }
.admin-feedback-actions { margin-top: .35rem; }
@media (max-width: 900px) {
    .ui-admin-container { --ui-card-padding: .7rem; }
    .admin-feedback-table-card .ui-table { min-width: 58rem; }
}

/* ADDED v2026-05-22.3924: player theme consistency pass. */
.ui-player-container { --ui-page-max-width: 1040px; --ui-surface-bg: #fff; --ui-card-padding: .68rem; --ui-grid-gap: .6rem; }
.ui-player-card, .ui-player-panel, .ui-player-data-table-card, .ui-player-action-panel { background: #fff; }
.ui-player-details-card, .ui-player-container details, .player-page details { margin-block: .28rem !important; }
.ui-player-details-card > summary, .ui-player-container details > summary, .player-page details > summary { padding: .38rem .55rem !important; }
.ui-player-details-card > :not(summary), .ui-player-container details > :not(summary) { margin-top: .35rem; }
.ui-player-form :is(input,select,textarea), .player-feedback-form :is(input,select,textarea) { width: min(100%, 40rem); }
.player-feedback-form .ui-field-row { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); }
.player-recent-feedback-section .ui-table { min-width: 34rem; }
@media (max-width: 680px) {
    .ui-player-container { --ui-card-padding: .55rem; }
    .player-feedback-form .ui-field-row { grid-template-columns: 1fr; }
    .ui-player-container { padding-inline: .35rem; }
}


/* ADDED v2026-05-22.3925: unified component density and responsive defaults. */
:root {
    --ui-space-2xs: .18rem;
    --ui-space-xs: .32rem;
    --ui-space-sm: .5rem;
    --ui-space-md: .75rem;
    --ui-space-lg: 1rem;
    --ui-space-xl: 1.35rem;
    --ui-focus-ring: 0 0 0 3px rgba(38, 132, 255, .24);
}
.ui-section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ui-space-md); margin-bottom: var(--ui-space-sm); }
.ui-section-header-copy h3 { margin: 0; }
.ui-section-header-copy p { margin: .18rem 0 0; color: var(--ui-muted-text, #5f6368); }
.ui-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--ui-space-sm); }
.ui-metric-card { display: grid; gap: .15rem; padding: var(--ui-space-sm); border: var(--ui-border-soft); border-radius: var(--ui-radius-md); background: var(--ui-surface-bg, #fff); }
.ui-metric-label, .ui-metric-note { font-size: .84rem; color: var(--ui-muted-text, #5f6368); }
.ui-metric-value { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.1; }
.ui-inline-form { display: inline-flex; flex-wrap: wrap; gap: var(--ui-space-xs); align-items: center; margin: 0; }
.ui-inline-form :is(input, select, textarea) { max-width: 100%; }
.ui-responsive-table-card .ui-table-container { margin-top: var(--ui-space-sm); }
.ui-component :is(button, .admin-button, .player-button, .ui-button, input, select, textarea):focus-visible { outline: none; box-shadow: var(--ui-focus-ring); }
.ui-component details { overflow: clip; }
.ui-component summary { touch-action: manipulation; }
@media (max-width: 760px) {
    .ui-section-header { display: grid; gap: var(--ui-space-xs); }
    .ui-section-header-actions { justify-content: flex-start; }
    .ui-inline-form { display: grid; width: 100%; }
    .ui-inline-form-submit { width: 100%; }
}


/* ADDED v2026-05-22.3925: admin theme cleanup and desktop-first consistency. */
.ui-component-admin { --ui-muted-text: #4f5b66; }
.ui-admin-container, .ui-component-admin { --ui-page-max-width: 1380px; }
.ui-admin-section, .ui-admin-card, .ui-admin-panel, .ui-admin-report-card { margin-block: var(--ui-space-md); }
.ui-admin-metric-card { min-height: 4.25rem; }
.ui-admin-table-wrap { border-radius: var(--ui-radius-md); }
.ui-admin-inline-form textarea { min-width: min(22rem, 100%); }
.ui-admin-page-header { margin-block: var(--ui-space-md); }
@media (max-width: 820px) {
    .ui-admin-container { padding-inline: var(--ui-space-sm); }
    .ui-admin-table { font-size: .92rem; }
    .ui-admin-section, .ui-admin-card, .ui-admin-panel { margin-block: var(--ui-space-sm); }
}


/* ADDED v2026-05-22.3925: player theme cleanup and mobile-first consistency. */
.ui-component-player { --ui-muted-text: #53605f; }
.ui-player-container, .ui-component-player { --ui-page-max-width: 1040px; }
.ui-player-section, .ui-player-card, .ui-player-panel, .ui-player-report-card { margin-block: var(--ui-space-sm); }
.ui-player-metric-card { min-height: 3.8rem; }
.ui-player-details-card { border-radius: var(--ui-radius-md); }
.ui-player-details-card + .ui-player-details-card, .player-page details + details { margin-top: var(--ui-space-2xs) !important; }
.ui-player-table-wrap { border-radius: var(--ui-radius-md); }
.ui-player-page-header { margin-block: var(--ui-space-sm); }
@media (max-width: 680px) {
    .ui-player-container { padding-inline: var(--ui-space-xs); }
    .ui-player-table { font-size: .9rem; }
    .ui-player-section, .ui-player-card, .ui-player-panel { margin-block: var(--ui-space-xs); }
    .ui-player-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



/* ADDED v2026-05-22.3928: About -> Stats renders inline instead of redirecting. */
.player-about-stats-inline {
    padding: 0.25rem 0 0;
}
.player-about-stats-inline .player-stats-page {
    margin: 0;
    padding: 0;
    max-width: none;
}
.player-about-stats-inline .stats-overview-card {
    margin-top: 0.35rem;
}
.player-about-stats-inline .stats-overview-card > h3:first-child {
    margin-top: 0;
}


/* ADDED v2026-05-22.3928: Unified expandable-section summary treatment.
 * Ensure all <details> summaries share the same left accent/curved highlight,
 * including stats sections rendered from older presentation helpers.
 */
:root {
    --ui-expandable-summary-accent: var(--color-accent, #aaffaa);
    --ui-expandable-summary-bg: var(--ui-subtle-bg, rgba(170,255,170,0.12));
}

:where(details, .ui-details-card, .ui-player-details-card, .ui-admin-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) > summary {
    box-sizing: border-box;
    display: list-item;
    border-left: 0.38rem solid var(--ui-expandable-summary-accent) !important;
    border-top-left-radius: 0.64rem !important;
    border-bottom-left-radius: 0.64rem !important;
    background: var(--ui-expandable-summary-bg) !important;
    padding-left: max(0.55rem, var(--ui-space-sm, 0.5rem)) !important;
}

:where(details[open], .ui-details-card[open], .ui-player-details-card[open], .ui-admin-details-card[open], .stats-details[open], .team-profile-section[open], .player-about-details[open], .player-about-rule-details[open]) > summary {
    border-bottom-left-radius: 0.28rem !important;
}

:where(.ui-player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) > summary {
    --ui-expandable-summary-accent: var(--color-accent, #aaffaa);
    --ui-expandable-summary-bg: color-mix(in srgb, var(--color-accent, #aaffaa) 22%, #fff 78%);
}

:where(.ui-admin-details-card, .admin-card, .admin-dashboard-details, .admin-report-section, .admin-health-details) > summary {
    --ui-expandable-summary-accent: var(--color-primary, #29364a);
    --ui-expandable-summary-bg: color-mix(in srgb, var(--color-primary, #29364a) 10%, #fff 90%);
}

@supports not (background: color-mix(in srgb, #fff 50%, #000 50%)) {
    :where(.ui-player-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details) > summary {
        --ui-expandable-summary-bg: #f2fff2;
    }
    :where(.ui-admin-details-card, .admin-card, .admin-dashboard-details, .admin-report-section, .admin-health-details) > summary {
        --ui-expandable-summary-bg: #f4f6f8;
    }
}

/* === Step 3928: canonical admin/player theme consolidation ===
   Keep selectors named and scoped. Avoid broad sibling selectors that can hide sections. */
:root {
  --ui-space-0: 0;
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.625rem;
  --ui-radius-lg: 0.875rem;
  --ui-border-soft: 1px solid rgba(15, 23, 42, 0.12);
  --ui-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ui-max-player-width: 72rem;
  --ui-max-admin-width: 116rem;
}

.ui-page,
.ui-admin-page,
.ui-player-page {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ui-admin-page {
  max-width: var(--ui-max-admin-width);
  padding-inline: clamp(var(--ui-space-2), 1.5vw, var(--ui-space-5));
}

.ui-player-page {
  max-width: var(--ui-max-player-width);
  padding-inline: clamp(var(--ui-space-2), 3vw, var(--ui-space-4));
}

.ui-card,
.ui-panel,
.ui-section,
.ui-report-card,
.ui-data-table-card,
.ui-action-panel,
.ui-admin-card,
.ui-player-card {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: var(--ui-radius-lg);
  border: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-soft);
  overflow-wrap: anywhere;
}

.ui-card-grid,
.ui-content-grid,
.ui-link-card-grid,
.ui-metric-grid {
  display: grid;
  gap: var(--ui-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
}

.ui-stack,
.ui-admin-stack,
.ui-player-stack,
.ui-report-surface,
.ui-generated-output {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
}

.ui-toolbar,
.ui-action-row,
.ui-form-actions,
.ui-compact-actions,
.ui-admin-toolbar,
.ui-player-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-table-wrap,
.ui-responsive-table-card,
.ui-data-table-card,
.ui-report-table-card {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-table-wrap table,
.ui-responsive-table-card table,
.ui-data-table-card table,
.ui-report-table-card table,
.ui-admin-page table,
.ui-player-page table {
  max-width: 100%;
}

.ui-admin-page input,
.ui-admin-page select,
.ui-admin-page textarea,
.ui-player-page input,
.ui-player-page select,
.ui-player-page textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.ui-field-row,
.ui-inline-form,
.ui-filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--ui-space-2) var(--ui-space-3);
}

.ui-field-row > *,
.ui-inline-form > *,
.ui-filter-panel > * {
  min-width: 0;
}

.ui-admin-page details,
.ui-player-page details,
.player-page details,
.site-page details {
  max-width: 100%;
  box-sizing: border-box;
}

.ui-admin-page details + details,
.ui-admin-page .ui-details-card + .ui-details-card,
.ui-admin-page .ui-admin-details-card + .ui-admin-details-card {
  margin-top: var(--ui-space-3);
}

.ui-player-page details + details,
.ui-player-page .ui-details-card + .ui-details-card,
.ui-player-page .ui-player-details-card + .ui-player-details-card,
.player-page details + details,
.site-page details + details {
  margin-top: var(--ui-space-2);
}

.ui-admin-page summary,
.ui-player-page summary,
.player-page summary,
.site-page summary {
  cursor: pointer;
  min-height: 2.25rem;
}

.ui-player-page .ui-action-row,
.ui-player-page .ui-form-actions,
.player-page .ui-action-row,
.player-page .ui-form-actions {
  gap: var(--ui-space-2);
}

@media (max-width: 720px) {
  .ui-admin-page,
  .ui-player-page {
    padding-inline: var(--ui-space-2);
  }

  .ui-field-row,
  .ui-inline-form,
  .ui-filter-panel,
  .ui-toolbar,
  .ui-action-row,
  .ui-form-actions,
  .ui-compact-actions {
    align-items: stretch;
  }

  .ui-field-row > *,
  .ui-inline-form > *,
  .ui-filter-panel > * {
    flex: 1 1 100%;
  }

  .ui-action-row > a,
  .ui-action-row > button,
  .ui-action-row > input[type="submit"],
  .ui-form-actions > a,
  .ui-form-actions > button,
  .ui-form-actions > input[type="submit"] {
    flex: 1 1 auto;
  }
}



/* ADDED v2026-05-22.3929: Admin-wide table overflow safety.
   Admin reports often contain long file paths, SQL names, diagnostics output, or
   category labels. Any admin table that is not already wrapped by a helper must
   remain contained by its parent and become horizontally scrollable instead of
   expanding the surrounding card/details/div. */
:where(
  body:has(.admin-subnav),
  body:has(.admin-page-container),
  body:has(.ui-admin-page),
  body:has(.admin-report-shell),
  body:has(.admin-dashboard-container),
  body:has(.admin-development-container),
  body:has(.admin-diagnostics-container)
) :where(
  .mainbody,
  .content,
  .main-content,
  .page-container,
  .admin-page-container,
  .ui-admin-page,
  .admin-report-shell,
  .admin-dashboard-container,
  .admin-development-container,
  .admin-diagnostics-container,
  .ui-admin-container,
  .ui-admin-card,
  .ui-admin-panel,
  .ui-admin-details-card,
  details
) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .admin-page-container,
  .ui-admin-page,
  .admin-report-shell,
  .admin-dashboard-container,
  .admin-development-container,
  .admin-diagnostics-container,
  .ui-admin-container,
  .ui-admin-card,
  .ui-admin-panel,
  .ui-admin-details-card,
  .ui-admin-report-card,
  .ui-admin-table-card,
  .ui-admin-form,
  details
) :where(.table-container, .ui-table-container, .admin-table-container, .admin-table-scroll, .table-scroll, .wide-table, .responsive-table, .ui-table-wrap, .ui-admin-table-wrap) {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

:where(
  .admin-page-container,
  .ui-admin-page,
  .admin-report-shell,
  .admin-dashboard-container,
  .admin-development-container,
  .admin-diagnostics-container,
  .ui-admin-container,
  .ui-admin-card,
  .ui-admin-panel,
  .ui-admin-details-card,
  .ui-admin-report-card,
  .ui-admin-table-card,
  details
) :where(table):not(.calendar-table):not(.availability-table):not(.admin-no-scroll-table):not(.ui-no-scroll-table) {
  max-width: 100%;
  width: max-content;
  min-width: min(100%, max-content);
}

:where(
  .admin-page-container,
  .ui-admin-page,
  .admin-report-shell,
  .admin-dashboard-container,
  .admin-development-container,
  .admin-diagnostics-container,
  .ui-admin-container,
  .ui-admin-card,
  .ui-admin-panel,
  .ui-admin-details-card,
  .ui-admin-report-card,
  .ui-admin-table-card,
  details
) > :where(table):not(.calendar-table):not(.availability-table):not(.admin-no-scroll-table):not(.ui-no-scroll-table) {
  display: block;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

:where(.ui-admin-table, .admin-page-container table, .admin-report-shell table) :where(th, td) {
  max-width: 32rem;
  overflow-wrap: anywhere;
}

:where(.ui-admin-table, .admin-page-container table, .admin-report-shell table) :where(td code, th code) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  :where(.admin-page-container, .ui-admin-page, .admin-report-shell) :where(table):not(.admin-no-scroll-table):not(.ui-no-scroll-table) {
    font-size: 0.92rem;
  }
}


/* ADDED v2026-05-22.3934: Unified admin severity outlines/backgrounds.
   Keep error/warning/info/none/ok visual treatment consistent across admin
   dashboards, diagnostics, readiness reports, approval summaries and legacy
   details wrappers. Later cascade only; no markup changes required. */
:root {
  --admin-severity-error-border: var(--color-message-error, #c2410c);
  --admin-severity-error-bg: #fff1f0;
  --admin-severity-error-summary-bg: #ffe4e0;
  --admin-severity-error-text: #7a271a;
  --admin-severity-warning-border: var(--color-message-warning, #b76e00);
  --admin-severity-warning-bg: #fff8e6;
  --admin-severity-warning-summary-bg: #fff0c2;
  --admin-severity-warning-text: #7a3b00;
  --admin-severity-info-border: var(--color-status-info, #2563eb);
  --admin-severity-info-bg: var(--color-status-info-bg, #eef7ff);
  --admin-severity-info-summary-bg: #dbeafe;
  --admin-severity-info-text: #174ea6;
  --admin-severity-neutral-border: var(--css-color-ddd, #ddd);
  --admin-severity-neutral-bg: var(--css-color-fff, #fff);
  --admin-severity-neutral-summary-bg: var(--css-color-f7f7f7, #f7f7f7);
  --admin-severity-neutral-text: var(--css-color-222, #222);
}

:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-error,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-error {
  border-color: var(--admin-severity-error-border) !important;
  background: var(--admin-severity-error-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-severity-error-border) 35%, transparent) !important;
}
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-error > summary,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-error > summary {
  background: var(--admin-severity-error-summary-bg) !important;
  color: var(--admin-severity-error-text) !important;
  border-left: .4rem solid var(--admin-severity-error-border) !important;
}

:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-warning,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-warning {
  border-color: var(--admin-severity-warning-border) !important;
  background: var(--admin-severity-warning-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-severity-warning-border) 35%, transparent) !important;
}
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-warning > summary,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-warning > summary {
  background: var(--admin-severity-warning-summary-bg) !important;
  color: var(--admin-severity-warning-text) !important;
  border-left: .4rem solid var(--admin-severity-warning-border) !important;
}

:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-info,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-info {
  border-color: var(--admin-severity-info-border) !important;
  background: var(--admin-severity-info-bg) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--admin-severity-info-border) 35%, transparent) !important;
}
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-info > summary,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-info > summary {
  background: var(--admin-severity-info-summary-bg) !important;
  color: var(--admin-severity-info-text) !important;
  border-left: .4rem solid var(--admin-severity-info-border) !important;
}

:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-none,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-ok,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-no-findings {
  border-color: var(--admin-severity-neutral-border) !important;
  background: var(--admin-severity-neutral-bg) !important;
  box-shadow: none !important;
}
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-none > summary,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(details.admin-section,details.admin-health-details,details.dashboard-exclusive-details,details.database-tools-exclusive-details).admin-section-outline-ok > summary,
:where(.admin-page-container,.admin-dashboard-container,.admin-development-container,.admin-diagnostics-container,.diagnostics-container,.approvals-container,.admin-report-shell,.admin-action-shell,.admin-tool-page)
:where(.admin-section,.admin-health-details,.dashboard-exclusive-details,.database-tools-exclusive-details).has-no-findings > summary {
  background: var(--admin-severity-neutral-summary-bg) !important;
  color: var(--admin-severity-neutral-text) !important;
  border-left: .4rem solid var(--admin-severity-neutral-border) !important;
}



/* PHASE4 STEP3935: Final admin details severity cascade.
   Apply severity directly from the details element, without relying on a
   specific page container. This fixes dashboard/diagnostic accordions where
   warning/error summaries were still inheriting the generic green expandable
   accent. */
:root {
  --admin-severity-error-border-final: #b42318;
  --admin-severity-error-bg-final: #fff1f0;
  --admin-severity-error-summary-bg-final: #ffe4e0;
  --admin-severity-error-text-final: #7a271a;
  --admin-severity-warning-border-final: #b54708;
  --admin-severity-warning-bg-final: #fff8e6;
  --admin-severity-warning-summary-bg-final: #fff0c2;
  --admin-severity-warning-text-final: #7a3b00;
  --admin-severity-info-border-final: #175cd3;
  --admin-severity-info-bg-final: #eff8ff;
  --admin-severity-info-summary-bg-final: #dbeafe;
  --admin-severity-info-text-final: #1849a9;
  --admin-severity-neutral-border-final: #d0d5dd;
  --admin-severity-neutral-bg-final: #fff;
  --admin-severity-neutral-summary-bg-final: #f7f7f7;
  --admin-severity-neutral-text-final: #101828;
}

details.admin-section-outline-error,
details.has-error {
  border-color: var(--admin-severity-error-border-final) !important;
  background: var(--admin-severity-error-bg-final) !important;
  box-shadow: inset 0 0 0 1px rgba(180,35,24,.25) !important;
}
details.admin-section-outline-error > summary,
details.has-error > summary {
  --ui-expandable-summary-accent: var(--admin-severity-error-border-final) !important;
  --ui-expandable-summary-bg: var(--admin-severity-error-summary-bg-final) !important;
  border-left-color: var(--admin-severity-error-border-final) !important;
  background: var(--admin-severity-error-summary-bg-final) !important;
  color: var(--admin-severity-error-text-final) !important;
}

details.admin-section-outline-warning,
details.has-warning {
  border-color: var(--admin-severity-warning-border-final) !important;
  background: var(--admin-severity-warning-bg-final) !important;
  box-shadow: inset 0 0 0 1px rgba(181,71,8,.25) !important;
}
details.admin-section-outline-warning > summary,
details.has-warning > summary {
  --ui-expandable-summary-accent: var(--admin-severity-warning-border-final) !important;
  --ui-expandable-summary-bg: var(--admin-severity-warning-summary-bg-final) !important;
  border-left-color: var(--admin-severity-warning-border-final) !important;
  background: var(--admin-severity-warning-summary-bg-final) !important;
  color: var(--admin-severity-warning-text-final) !important;
}

details.admin-section-outline-info,
details.admin-section-info-only,
details.has-info {
  border-color: var(--admin-severity-info-border-final) !important;
  background: var(--admin-severity-info-bg-final) !important;
  box-shadow: inset 0 0 0 1px rgba(23,92,211,.18) !important;
}
details.admin-section-outline-info > summary,
details.admin-section-info-only > summary,
details.has-info > summary {
  --ui-expandable-summary-accent: var(--admin-severity-info-border-final) !important;
  --ui-expandable-summary-bg: var(--admin-severity-info-summary-bg-final) !important;
  border-left-color: var(--admin-severity-info-border-final) !important;
  background: var(--admin-severity-info-summary-bg-final) !important;
  color: var(--admin-severity-info-text-final) !important;
}

details.admin-section-outline-none,
details.admin-section-outline-ok,
details.has-no-findings {
  border-color: var(--admin-severity-neutral-border-final) !important;
  background: var(--admin-severity-neutral-bg-final) !important;
  box-shadow: none !important;
}
details.admin-section-outline-none > summary,
details.admin-section-outline-ok > summary,
details.has-no-findings > summary {
  --ui-expandable-summary-accent: var(--admin-severity-neutral-border-final) !important;
  --ui-expandable-summary-bg: var(--admin-severity-neutral-summary-bg-final) !important;
  border-left-color: var(--admin-severity-neutral-border-final) !important;
  background: var(--admin-severity-neutral-summary-bg-final) !important;
  color: var(--admin-severity-neutral-text-final) !important;
}

/* Phase 4 Step 3939: Team profile round status and admin info-severity consistency. */
.team-profile-section tr.team-round-status-unavailable td,
.team-profile-section tr.team-round-status-withdrew td {
  background: rgba(245, 158, 11, 0.08);
}
.team-profile-section tr.team-round-status-withdrew td {
  background: rgba(239, 68, 68, 0.08);
}
.team-profile-section tr.team-round-status-unavailable td:nth-child(2),
.team-profile-section tr.team-round-status-withdrew td:nth-child(2) {
  font-weight: 700;
}

/* Phase 4 Step 3936: canonical admin severity, table, details, and input contract.
   This late-cascade contract intentionally overrides older dashboard/admin rules. */
:root {
  --admin-severity-error-bg: #fde8e8;
  --admin-severity-error-border: #b42318;
  --admin-severity-error-text: #7a1c12;
  --admin-severity-warning-bg: #fff4ce;
  --admin-severity-warning-border: #b7791f;
  --admin-severity-warning-text: #744210;
  --admin-severity-info-bg: #e8f3ff;
  --admin-severity-info-border: #2b6cb0;
  --admin-severity-info-text: #1a4f85;
  --admin-severity-none-bg: #ffffff;
  --admin-severity-none-border: var(--color-table-border, #d0d7de);
  --admin-severity-none-text: var(--color-text, #111827);
  --admin-input-bg: #f7f7f7;
  --admin-input-focus-bg: #e9e9e9;
}

.admin-page-container details,
.admin-dashboard-container details,
.admin-diagnostics-container details,
.admin-development-container details,
.admin-settings-container details,
.admin-league-settings-container details,
.admin-leagues-container details,
.admin-global-players-container details,
.admin-league-roster-container details,
.admin-teams-container details,
.admin-dupr-container details,
.admin-rounds-container details,
.diagnostics-container details,
.approvals-container details {
  box-sizing: border-box;
  max-width: 100%;
}

.admin-page-container details > summary,
.admin-dashboard-container details > summary,
.admin-diagnostics-container details > summary,
.admin-development-container details > summary,
.admin-settings-container details > summary,
.admin-league-settings-container details > summary,
.admin-leagues-container details > summary,
.admin-global-players-container details > summary,
.admin-league-roster-container details > summary,
.admin-teams-container details > summary,
.admin-dupr-container details > summary,
.admin-rounds-container details > summary,
.diagnostics-container details > summary,
.approvals-container details > summary {
  box-sizing: border-box;
  border-radius: 0.65rem;
  color: var(--admin-severity-none-text);
}

/* 0 errors / 0 warnings / 0 info: no colored outline or colored summary. */
.admin-page-container details.admin-section-outline-none,
.admin-page-container details.has-no-findings,
.admin-dashboard-container details.admin-section-outline-none,
.admin-dashboard-container details.has-no-findings,
.admin-diagnostics-container details.admin-section-outline-none,
.admin-diagnostics-container details.has-no-findings,
.admin-development-container details.admin-section-outline-none,
.admin-development-container details.has-no-findings,
.diagnostics-container details.admin-section-outline-none,
.diagnostics-container details.has-no-findings,
.approvals-container details.admin-section-outline-none,
.approvals-container details.has-no-findings {
  border-color: var(--admin-severity-none-border) !important;
  box-shadow: none !important;
}

.admin-page-container details.admin-section-outline-none > summary,
.admin-page-container details.has-no-findings > summary,
.admin-dashboard-container details.admin-section-outline-none > summary,
.admin-dashboard-container details.has-no-findings > summary,
.admin-diagnostics-container details.admin-section-outline-none > summary,
.admin-diagnostics-container details.has-no-findings > summary,
.admin-development-container details.admin-section-outline-none > summary,
.admin-development-container details.has-no-findings > summary,
.diagnostics-container details.admin-section-outline-none > summary,
.diagnostics-container details.has-no-findings > summary,
.approvals-container details.admin-section-outline-none > summary,
.approvals-container details.has-no-findings > summary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--admin-severity-none-text) !important;
}

/* Severity priority: error > warning > info > none. */
.admin-page-container details.admin-section-outline-error,
.admin-page-container details.has-error,
.admin-dashboard-container details.admin-section-outline-error,
.admin-dashboard-container details.has-error,
.admin-diagnostics-container details.admin-section-outline-error,
.admin-diagnostics-container details.has-error,
.admin-development-container details.admin-section-outline-error,
.admin-development-container details.has-error,
.diagnostics-container details.admin-section-outline-error,
.diagnostics-container details.has-error,
.approvals-container details.admin-section-outline-error,
.approvals-container details.has-error {
  border-color: var(--admin-severity-error-border) !important;
}
.admin-page-container details.admin-section-outline-error > summary,
.admin-page-container details.has-error > summary,
.admin-dashboard-container details.admin-section-outline-error > summary,
.admin-dashboard-container details.has-error > summary,
.admin-diagnostics-container details.admin-section-outline-error > summary,
.admin-diagnostics-container details.has-error > summary,
.admin-development-container details.admin-section-outline-error > summary,
.admin-development-container details.has-error > summary,
.diagnostics-container details.admin-section-outline-error > summary,
.diagnostics-container details.has-error > summary,
.approvals-container details.admin-section-outline-error > summary,
.approvals-container details.has-error > summary {
  background: var(--admin-severity-error-bg) !important;
  border: 1px solid var(--admin-severity-error-border) !important;
  color: var(--admin-severity-error-text) !important;
}

.admin-page-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.admin-page-container details.has-warning:not(.admin-section-outline-error):not(.has-error),
.admin-dashboard-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.admin-dashboard-container details.has-warning:not(.admin-section-outline-error):not(.has-error),
.admin-diagnostics-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.admin-diagnostics-container details.has-warning:not(.admin-section-outline-error):not(.has-error),
.admin-development-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.admin-development-container details.has-warning:not(.admin-section-outline-error):not(.has-error),
.diagnostics-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.diagnostics-container details.has-warning:not(.admin-section-outline-error):not(.has-error),
.approvals-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error),
.approvals-container details.has-warning:not(.admin-section-outline-error):not(.has-error) {
  border-color: var(--admin-severity-warning-border) !important;
}
.admin-page-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-page-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-dashboard-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-dashboard-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-diagnostics-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-diagnostics-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-development-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.admin-development-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.diagnostics-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.diagnostics-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.approvals-container details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error) > summary,
.approvals-container details.has-warning:not(.admin-section-outline-error):not(.has-error) > summary {
  background: var(--admin-severity-warning-bg) !important;
  border: 1px solid var(--admin-severity-warning-border) !important;
  color: var(--admin-severity-warning-text) !important;
}

.admin-page-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-page-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-dashboard-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-dashboard-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-diagnostics-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-diagnostics-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-development-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.admin-development-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.diagnostics-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.diagnostics-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.approvals-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning),
.approvals-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) {
  border-color: var(--admin-severity-info-border) !important;
}
.admin-page-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-page-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-dashboard-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-dashboard-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-diagnostics-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-diagnostics-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-development-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.admin-development-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.diagnostics-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.diagnostics-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.approvals-container details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary,
.approvals-container details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning) > summary {
  background: var(--admin-severity-info-bg) !important;
  border: 1px solid var(--admin-severity-info-border) !important;
  color: var(--admin-severity-info-text) !important;
}

/* Admin tables: parent stays bounded; table may widen; wrapper scrolls horizontally. */
.admin-page-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card),
.admin-dashboard-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card),
.admin-diagnostics-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card),
.admin-development-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card),
.diagnostics-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card),
.approvals-container :where(.table-container,.admin-table-container,.admin-table-scroll,.ui-table-scroll,.admin-report-table-card,.ui-data-table-card) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
.admin-page-container table,
.admin-dashboard-container table,
.admin-diagnostics-container table,
.admin-development-container table,
.diagnostics-container table,
.approvals-container table {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
}
.admin-page-container th,
.admin-dashboard-container th,
.admin-diagnostics-container th,
.admin-development-container th,
.diagnostics-container th,
.approvals-container th {
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  vertical-align: top;
}
.admin-page-container td,
.admin-dashboard-container td,
.admin-diagnostics-container td,
.admin-development-container td,
.diagnostics-container td,
.approvals-container td {
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  text-overflow: clip;
  vertical-align: top;
  max-width: 34rem;
}
.admin-page-container td :where(code,pre),
.admin-dashboard-container td :where(code,pre),
.admin-diagnostics-container td :where(code,pre),
.admin-development-container td :where(code,pre),
.diagnostics-container td :where(code,pre),
.approvals-container td :where(code,pre) {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
}
.admin-page-container tr.dashboard-status-blocked,
.admin-page-container tr.dashboard-status-error,
.admin-page-container tr.has-error,
.admin-dashboard-container tr.dashboard-status-blocked,
.admin-dashboard-container tr.dashboard-status-error,
.admin-dashboard-container tr.has-error,
.admin-diagnostics-container tr.dashboard-status-blocked,
.admin-diagnostics-container tr.dashboard-status-error,
.admin-diagnostics-container tr.has-error,
.admin-development-container tr.dashboard-status-blocked,
.admin-development-container tr.dashboard-status-error,
.admin-development-container tr.has-error,
.diagnostics-container tr.dashboard-status-blocked,
.diagnostics-container tr.dashboard-status-error,
.diagnostics-container tr.has-error,
.approvals-container tr.dashboard-status-blocked,
.approvals-container tr.dashboard-status-error,
.approvals-container tr.has-error {
  background: var(--admin-severity-error-bg) !important;
  color: var(--admin-severity-error-text);
}
.admin-page-container tr.dashboard-status-warning,
.admin-page-container tr.has-warning,
.admin-dashboard-container tr.dashboard-status-warning,
.admin-dashboard-container tr.has-warning,
.admin-diagnostics-container tr.dashboard-status-warning,
.admin-diagnostics-container tr.has-warning,
.admin-development-container tr.dashboard-status-warning,
.admin-development-container tr.has-warning,
.diagnostics-container tr.dashboard-status-warning,
.diagnostics-container tr.has-warning,
.approvals-container tr.dashboard-status-warning,
.approvals-container tr.has-warning {
  background: var(--admin-severity-warning-bg) !important;
  color: var(--admin-severity-warning-text);
}
.admin-page-container tr.dashboard-status-info,
.admin-page-container tr.has-info,
.admin-dashboard-container tr.dashboard-status-info,
.admin-dashboard-container tr.has-info,
.admin-diagnostics-container tr.dashboard-status-info,
.admin-diagnostics-container tr.has-info,
.admin-development-container tr.dashboard-status-info,
.admin-development-container tr.has-info,
.diagnostics-container tr.dashboard-status-info,
.diagnostics-container tr.has-info,
.approvals-container tr.dashboard-status-info,
.approvals-container tr.has-info {
  background: var(--admin-severity-info-bg) !important;
  color: var(--admin-severity-info-text);
}
.admin-page-container input[type="text"],
.admin-page-container input[type="search"],
.admin-page-container input[type="number"],
.admin-page-container input[type="url"],
.admin-page-container input[type="email"],
.admin-page-container input[type="password"],
.admin-page-container select,
.admin-page-container textarea,
.admin-dashboard-container input[type="text"],
.admin-dashboard-container input[type="search"],
.admin-dashboard-container input[type="number"],
.admin-dashboard-container input[type="url"],
.admin-dashboard-container input[type="email"],
.admin-dashboard-container input[type="password"],
.admin-dashboard-container select,
.admin-dashboard-container textarea,
.admin-diagnostics-container input[type="text"],
.admin-diagnostics-container input[type="search"],
.admin-diagnostics-container input[type="number"],
.admin-diagnostics-container input[type="url"],
.admin-diagnostics-container input[type="email"],
.admin-diagnostics-container input[type="password"],
.admin-diagnostics-container select,
.admin-diagnostics-container textarea,
.admin-development-container input[type="text"],
.admin-development-container input[type="search"],
.admin-development-container input[type="number"],
.admin-development-container input[type="url"],
.admin-development-container input[type="email"],
.admin-development-container input[type="password"],
.admin-development-container select,
.admin-development-container textarea,
.diagnostics-container input[type="text"],
.diagnostics-container input[type="search"],
.diagnostics-container input[type="number"],
.diagnostics-container input[type="url"],
.diagnostics-container input[type="email"],
.diagnostics-container input[type="password"],
.diagnostics-container select,
.diagnostics-container textarea {
  background: var(--admin-input-bg) !important;
  border: 1px solid var(--color-table-border, #d0d7de) !important;
  border-radius: 0.55rem !important;
  box-sizing: border-box;
  max-width: 100%;
}
.admin-page-container input:focus,
.admin-page-container select:focus,
.admin-page-container textarea:focus,
.admin-dashboard-container input:focus,
.admin-dashboard-container select:focus,
.admin-dashboard-container textarea:focus,
.admin-diagnostics-container input:focus,
.admin-diagnostics-container select:focus,
.admin-diagnostics-container textarea:focus,
.admin-development-container input:focus,
.admin-development-container select:focus,
.admin-development-container textarea:focus,
.diagnostics-container input:focus,
.diagnostics-container select:focus,
.diagnostics-container textarea:focus {
  background: var(--admin-input-focus-bg) !important;
  outline: 2px solid rgba(80, 80, 80, 0.24);
  outline-offset: 1px;
}


/* ADDED v2026-05-22.3937: Modern data display contract.
   Admin keeps dense scrollable data grids. Player pages keep tables on desktop
   and convert table rows to labelled cards on narrow screens. */
.ui-data-display,
.ui-responsive-data-display {
    width: 100%;
    min-width: 0;
}
.ui-data-display-wrap,
.ui-responsive-table-wrap,
.ui-admin-table-wrap,
.ui-player-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.ui-data-display-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.ui-data-display-table th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.ui-data-display-table td {
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
    max-width: 34rem;
    vertical-align: top;
}
.ui-admin-data-display .ui-data-display-table,
.ui-component-admin .ui-data-display-table {
    font-size: 0.92rem;
}
.ui-player-data-display .ui-data-display-table,
.ui-component-player .ui-data-display-table {
    font-size: 0.95rem;
}
@media (max-width: 720px) {
    .ui-player-data-display .ui-responsive-table-wrap,
    .ui-component-player.ui-responsive-data-display .ui-responsive-table-wrap {
        overflow-x: visible;
    }
    .ui-player-data-display .ui-responsive-data-table,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table,
    .ui-player-data-display .ui-responsive-data-table thead,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table thead,
    .ui-player-data-display .ui-responsive-data-table tbody,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table tbody,
    .ui-player-data-display .ui-responsive-data-table tr,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table tr,
    .ui-player-data-display .ui-responsive-data-table td,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table td {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .ui-player-data-display .ui-responsive-data-table,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .ui-player-data-display .ui-responsive-data-table thead,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .ui-player-data-display .ui-responsive-data-table tr,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table tr {
        margin: 0 0 0.75rem;
        padding: 0.65rem 0.7rem;
        border: 1px solid rgba(27, 77, 62, 0.18);
        border-radius: 0.8rem;
        background: rgba(255,255,255,0.96);
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }
    .ui-player-data-display .ui-responsive-data-table td,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 38%) 1fr;
        gap: 0.5rem;
        padding: 0.38rem 0;
        border: 0;
        border-bottom: 1px solid rgba(0,0,0,0.055);
        overflow-wrap: anywhere;
    }
    .ui-player-data-display .ui-responsive-data-table td:last-child,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table td:last-child {
        border-bottom: 0;
    }
    .ui-player-data-display .ui-responsive-data-table td::before,
    .ui-component-player.ui-responsive-data-display .ui-responsive-data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #315345;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* ADDED v2026-05-22.3937: player expandable-summary highlight consistency.
 * Player-facing details previously displayed two left accents at once: a dark
 * green outline on the details container plus a lighter summary accent. Use a
 * single named player accent on the summary only so About, Profile, Calendar,
 * Teams, Players, Stats, Feedback and related public pages render consistently.
 */
:root {
    --ui-player-expandable-accent: #8ee99c;
    --ui-player-expandable-bg: #f1fff2;
    --ui-player-expandable-border: rgba(35, 96, 45, 0.18);
}

body:not(.admin) :where(
    details,
    .ui-player-details-card,
    .ui-details-card,
    .stats-details,
    .team-profile-section,
    .player-about-details,
    .player-about-rule-details,
    .player-profile-details,
    .player-availability-details,
    .player-match-history-details,
    .player-subs-details,
    .approvals-exclusive-details
) {
    border-left: 0 !important;
    background-clip: padding-box;
}

body:not(.admin) :where(
    details,
    .ui-player-details-card,
    .ui-details-card,
    .stats-details,
    .team-profile-section,
    .player-about-details,
    .player-about-rule-details,
    .player-profile-details,
    .player-availability-details,
    .player-match-history-details,
    .player-subs-details,
    .approvals-exclusive-details
) > summary {
    border-left: 0.34rem solid var(--ui-player-expandable-accent) !important;
    border-top-left-radius: 0.62rem !important;
    border-bottom-left-radius: 0.62rem !important;
    background: var(--ui-player-expandable-bg) !important;
    box-shadow: inset 0 0 0 1px var(--ui-player-expandable-border) !important;
    color: inherit !important;
}

body:not(.admin) :where(
    details[open],
    .ui-player-details-card[open],
    .ui-details-card[open],
    .stats-details[open],
    .team-profile-section[open],
    .player-about-details[open],
    .player-about-rule-details[open],
    .player-profile-details[open],
    .player-availability-details[open],
    .player-match-history-details[open],
    .player-subs-details[open],
    .approvals-exclusive-details[open]
) > summary {
    border-bottom-left-radius: 0.34rem !important;
}

body:not(.admin) :where(.player-page-title, .ui-player-page-header, .site-page-header, .page-title) {
    --ui-expandable-summary-accent: var(--ui-player-expandable-accent);
}


/* ADDED v2026-05-22.3938: Team/player roster profile-photo size parity.
 * Uploaded photos now inherit the same visual box as generated initials avatars
 * inside player/team roster cards. This prevents real photos from rendering
 * larger than no-photo initials placeholders.
 */
.team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image,
.profile-photo-card .profile-photo-frame.profile-photo-frame-has-image {
    --profile-photo-size: 88px !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    flex: 0 0 88px;
}

.team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-image,
.team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-fallback-avatar,
.profile-photo-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-image,
.profile-photo-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-fallback-avatar {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    font-size: 2rem !important;
}

@media (max-width: 520px) {
    .team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image,
    .profile-photo-card .profile-photo-frame.profile-photo-frame-has-image {
        --profile-photo-size: 72px !important;
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        flex-basis: 72px;
    }

    .team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-image,
    .team-profile-member-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-fallback-avatar,
    .profile-photo-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-image,
    .profile-photo-card .profile-photo-frame.profile-photo-frame-has-image .profile-photo-fallback-avatar {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        font-size: 1.55rem !important;
    }
}


/* ADDED v2026-05-22.3942: profile-card avatar size parity and leaked-comment guard. */
.team-profile-member-card .profile-photo-frame,
.profile-photo-card .profile-photo-frame,
.team-profile-member-photo-link .profile-photo-frame {
    --profile-photo-size: 88px !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    flex: 0 0 88px !important;
}
.team-profile-member-card .profile-photo-frame .profile-photo-image,
.team-profile-member-card .profile-photo-frame .profile-photo-fallback-avatar,
.team-profile-member-card .profile-initials-avatar-profile,
.profile-photo-card .profile-photo-frame .profile-photo-image,
.profile-photo-card .profile-photo-frame .profile-photo-fallback-avatar,
.profile-photo-card .profile-initials-avatar-profile,
.team-profile-member-photo-link .profile-photo-frame .profile-photo-image,
.team-profile-member-photo-link .profile-photo-frame .profile-photo-fallback-avatar,
.team-profile-member-photo-link .profile-initials-avatar-profile {
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    min-height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    font-size: 2rem !important;
}
@media (max-width: 520px) {
    .team-profile-member-card .profile-photo-frame,
    .profile-photo-card .profile-photo-frame,
    .team-profile-member-photo-link .profile-photo-frame,
    .team-profile-member-card .profile-initials-avatar-profile,
    .profile-photo-card .profile-initials-avatar-profile,
    .team-profile-member-photo-link .profile-initials-avatar-profile {
        --profile-photo-size: 72px !important;
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        flex-basis: 72px !important;
    }
}


/* ADDED v2026-05-22.3945: player-facing UI regression fixes and neutral details contract. */
.profile-photo-editor #profile-photo-warning:empty,
.profile-photo-editor .warning:empty {
    display: none !important;
}

/* Top-level admin/player nav badges should render as centered circles. */
nav .nav-approval-count,
.nav-approval-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 1.45rem !important;
    height: 1.45rem !important;
    min-height: 1.45rem !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    border-radius: 999px !important;
    text-align: center !important;
}

/* Neutral player/site details should not use green success highlighting. Severity classes may still opt into colour. */
body:not(.admin) :where(
    details,
    .ui-player-details-card,
    .ui-details-card,
    .stats-details,
    .team-profile-section,
    .player-about-details,
    .player-about-rule-details,
    .player-profile-details,
    .player-availability-details,
    .player-match-history-details,
    .player-subs-details,
    .approvals-exclusive-details
):not(.has-error):not(.has-warning):not(.has-info):not(.admin-section-outline-error):not(.admin-section-outline-warning):not(.admin-section-outline-info) > summary {
    border-left: 0 !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px var(--color-table-border, #d0d7de) !important;
    color: inherit !important;
}

body:not(.admin) :where(
    details.has-error,
    details.admin-section-outline-error
) > summary {
    border-left: 0.34rem solid var(--color-status-error, #b42318) !important;
    background: var(--color-status-error-bg, #fdecea) !important;
}

body:not(.admin) :where(
    details.has-warning,
    details.admin-section-outline-warning
) > summary {
    border-left: 0.34rem solid var(--color-status-warning, #b7791f) !important;
    background: var(--color-status-warning-bg, #fff8db) !important;
}

body:not(.admin) :where(
    details.has-info,
    details.admin-section-outline-info
) > summary {
    border-left: 0.34rem solid var(--color-status-info, #2563eb) !important;
    background: var(--color-status-info-bg, #eef7ff) !important;
}

/* Team-profile comparison/history tables: shrink numeric/action columns and protect linked team names from wrapping. */
.team-profile-head-to-head-data .ui-responsive-data-table th,
.team-profile-match-history-data .ui-responsive-data-table th,
.team-profile-game-history-data .ui-responsive-data-table th {
    white-space: pre-line !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.12;
}

.team-profile-head-to-head-data .ui-responsive-data-table th:not(:first-child),
.team-profile-head-to-head-data .ui-responsive-data-table td:not(:first-child),
.team-profile-match-history-data .ui-responsive-data-table th:not(:nth-child(3)),
.team-profile-match-history-data .ui-responsive-data-table td:not(:nth-child(3)),
.team-profile-game-history-data .ui-responsive-data-table th:not(:nth-child(3)),
.team-profile-game-history-data .ui-responsive-data-table td:not(:nth-child(3)) {
    width: 1% !important;
    max-width: 7.5rem !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.team-profile-head-to-head-data .ui-responsive-data-table th:first-child,
.team-profile-head-to-head-data .ui-responsive-data-table td:first-child,
.team-profile-match-history-data .ui-responsive-data-table th:nth-child(3),
.team-profile-match-history-data .ui-responsive-data-table td:nth-child(3),
.team-profile-game-history-data .ui-responsive-data-table th:nth-child(3),
.team-profile-game-history-data .ui-responsive-data-table td:nth-child(3) {
    min-width: 14rem !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.team-profile-head-to-head-data .ui-responsive-data-table a,
.team-profile-match-history-data .ui-responsive-data-table a,
.team-profile-game-history-data .ui-responsive-data-table a {
    white-space: nowrap !important;
}

@media (max-width: 720px) {
    .team-profile-head-to-head-data .ui-responsive-data-table th,
    .team-profile-head-to-head-data .ui-responsive-data-table td,
    .team-profile-match-history-data .ui-responsive-data-table th,
    .team-profile-match-history-data .ui-responsive-data-table td,
    .team-profile-game-history-data .ui-responsive-data-table th,
    .team-profile-game-history-data .ui-responsive-data-table td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
    .team-profile-head-to-head-data .ui-responsive-data-table a,
    .team-profile-match-history-data .ui-responsive-data-table a,
    .team-profile-game-history-data .ui-responsive-data-table a {
        white-space: normal !important;
    }
}

/* ADDED v2026-05-22.3946: Final player-facing UI/UX contract.
 * Scope: player-facing pages only. Admin pages use the separate admin contract.
 * Goals: neutral default sections, severity-only highlighting, mobile-first
 * cards/forms/tables, predictable spacing, readable touch targets, and stable
 * avatar/table behavior.
 */
:root {
    --player-page-max-width: 980px;
    --player-page-pad-inline: clamp(0.75rem, 2.4vw, 1.4rem);
    --player-page-pad-block: clamp(0.65rem, 1.8vw, 1.15rem);
    --player-gap-xs: 0.25rem;
    --player-gap-sm: 0.45rem;
    --player-gap-md: 0.75rem;
    --player-gap-lg: 1rem;
    --player-radius-sm: 0.45rem;
    --player-radius-md: 0.7rem;
    --player-radius-lg: 1rem;
    --player-border: #d0d7de;
    --player-border-soft: #e5e7eb;
    --player-bg: #f6f8fa;
    --player-surface: #ffffff;
    --player-surface-muted: #f8fafc;
    --player-text: #111827;
    --player-muted: #4b5563;
    --player-link: #0645d9;
    --player-focus-bg: #edf2f7;
    --player-focus-ring: rgba(37, 99, 235, 0.23);
    --player-error: #b42318;
    --player-error-bg: #fdecea;
    --player-warning: #b7791f;
    --player-warning-bg: #fff8db;
    --player-info: #2563eb;
    --player-info-bg: #eef7ff;
    --player-avatar-md: 88px;
    --player-avatar-sm: 72px;
}

body.app-player {
    background: var(--player-bg);
    color: var(--player-text);
    overflow-x: hidden;
}

body.app-player .mainbody {
    box-sizing: border-box;
    width: min(100%, var(--player-page-max-width));
    margin-inline: auto;
    padding: var(--player-page-pad-block) var(--player-page-pad-inline);
}

body.app-player .site-league-title,
body.app-player h1,
body.app-player h2,
body.app-player h3 {
    text-wrap: balance;
}

body.app-player a {
    color: var(--player-link);
    overflow-wrap: break-word;
}

body.app-player nav {
    box-sizing: border-box;
    max-width: var(--player-page-max-width);
    margin-inline: auto;
    padding-inline: var(--player-page-pad-inline);
}

body.app-player .nav-primary-row,
body.app-player .nav-secondary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

body.app-player .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    line-height: 1.15;
    text-decoration: none;
}

body.app-player .nav-link:focus-visible,
body.app-player a:focus-visible,
body.app-player button:focus-visible,
body.app-player summary:focus-visible,
body.app-player input:focus-visible,
body.app-player select:focus-visible,
body.app-player textarea:focus-visible {
    outline: 3px solid var(--player-focus-ring);
    outline-offset: 2px;
}

body.app-player :where(.ui-player-page, .player-page-compact, .player-card, .ui-player-card, .ui-card, .profile-photo-card, .team-profile-member-card) {
    box-sizing: border-box;
}

body.app-player :where(.ui-player-card, .ui-card, .player-card, .profile-photo-card, .team-profile-member-card, .ui-report-card, .ui-panel) {
    background: var(--player-surface);
    border: 1px solid var(--player-border);
    border-radius: var(--player-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: clamp(0.75rem, 2.2vw, 1rem);
}

body.app-player :where(.ui-card-grid, .ui-player-card-grid, .team-profile-member-grid, .player-card-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--player-gap-md);
    align-items: stretch;
}

body.app-player :where(details, .ui-player-details-card, .ui-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details, .player-profile-details, .player-availability-details, .player-match-history-details, .player-subs-details, .approvals-exclusive-details) {
    box-sizing: border-box;
    margin-block: var(--player-gap-sm) !important;
    border: 1px solid var(--player-border) !important;
    border-left: 1px solid var(--player-border) !important;
    border-radius: var(--player-radius-md) !important;
    background: var(--player-surface) !important;
    overflow: clip;
}

body.app-player :where(details, .ui-player-details-card, .ui-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details, .player-profile-details, .player-availability-details, .player-match-history-details, .player-subs-details, .approvals-exclusive-details) > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.48rem 0.72rem !important;
    margin: 0 !important;
    border-left: 0 solid transparent !important;
    border-radius: var(--player-radius-md) var(--player-radius-md) 0 0 !important;
    background: var(--player-surface) !important;
    box-shadow: none !important;
    color: var(--player-text) !important;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

body.app-player :where(details, .ui-player-details-card, .ui-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details, .player-profile-details, .player-availability-details, .player-match-history-details, .player-subs-details, .approvals-exclusive-details)[open] > summary {
    border-bottom: 1px solid var(--player-border-soft) !important;
}

body.app-player :where(details.has-error, details.admin-section-outline-error, .has-error) > summary {
    border-left: 0.34rem solid var(--player-error) !important;
    background: var(--player-error-bg) !important;
}
body.app-player :where(details.has-warning, details.admin-section-outline-warning, .has-warning) > summary {
    border-left: 0.34rem solid var(--player-warning) !important;
    background: var(--player-warning-bg) !important;
}
body.app-player :where(details.has-info, details.admin-section-outline-info, .has-info) > summary {
    border-left: 0.34rem solid var(--player-info) !important;
    background: var(--player-info-bg) !important;
}

body.app-player details > :not(summary) {
    margin-inline: 0;
}

body.app-player :where(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='password'], input[type='search'], input[type='file'], select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 2.35rem;
    border: 1px solid var(--player-border);
    border-radius: var(--player-radius-sm);
    background: var(--player-surface-muted);
    color: var(--player-text);
    padding: 0.4rem 0.55rem;
    font: inherit;
}

body.app-player :where(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='password'], input[type='search'], input[type='file'], select, textarea):focus {
    background: var(--player-focus-bg);
}

body.app-player :where(button, input[type='submit'], input[type='button'], .button, .ui-button, .ui-link-button) {
    min-height: 2.35rem;
    border-radius: var(--player-radius-sm);
    touch-action: manipulation;
}

body.app-player :where(table, .ui-responsive-data-table) {
    border-collapse: collapse;
    max-width: 100%;
    table-layout: auto;
}

body.app-player :where(.ui-table-scroll, .ui-responsive-data-scroll, .ui-responsive-table-card, .table-scroll, .scroll-x) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.app-player th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

body.app-player td {
    max-width: 26rem;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}

body.app-player :where(.ui-responsive-data-display, .player-responsive-data-display) {
    max-width: 100%;
}

body.app-player .ui-responsive-data-card-list {
    display: none;
}

body.app-player :where(.profile-photo-frame, .profile-initials-avatar-profile, .profile-photo-image, .profile-photo-fallback-avatar) {
    box-sizing: border-box;
}

body.app-player :where(.team-profile-member-card, .profile-photo-card, .team-profile-member-photo-link) :where(.profile-photo-frame, .profile-initials-avatar-profile, .profile-photo-image, .profile-photo-fallback-avatar) {
    width: var(--player-avatar-md) !important;
    height: var(--player-avatar-md) !important;
    min-width: var(--player-avatar-md) !important;
    min-height: var(--player-avatar-md) !important;
    max-width: var(--player-avatar-md) !important;
    max-height: var(--player-avatar-md) !important;
    flex: 0 0 var(--player-avatar-md) !important;
    object-fit: cover;
}

body.app-player .profile-photo-editor #profile-photo-warning:empty,
body.app-player .profile-photo-editor .warning:empty {
    display: none !important;
}

@media (max-width: 720px) {
    body.app-player .mainbody {
        width: 100%;
        padding-inline: 0.65rem;
    }

    body.app-player :where(.ui-player-card, .ui-card, .player-card, .profile-photo-card, .team-profile-member-card, .ui-report-card, .ui-panel) {
        border-radius: var(--player-radius-md);
        padding: 0.72rem;
    }

    body.app-player :where(details, .ui-player-details-card, .ui-details-card, .stats-details, .team-profile-section, .player-about-details, .player-about-rule-details, .player-profile-details, .player-availability-details, .player-match-history-details, .player-subs-details, .approvals-exclusive-details) {
        margin-block: 0.38rem !important;
    }

    body.app-player .ui-responsive-data-table {
        min-width: 0;
        width: 100%;
    }

    body.app-player .ui-responsive-data-display.has-card-list .ui-responsive-data-table-wrap {
        display: none;
    }

    body.app-player .ui-responsive-data-display.has-card-list .ui-responsive-data-card-list {
        display: grid;
        gap: 0.55rem;
    }

    body.app-player .ui-responsive-data-card {
        border: 1px solid var(--player-border);
        border-radius: var(--player-radius-md);
        background: var(--player-surface);
        padding: 0.65rem;
    }

    body.app-player .ui-responsive-data-card-row {
        display: grid;
        grid-template-columns: minmax(7.25rem, 42%) 1fr;
        gap: 0.5rem;
        padding-block: 0.18rem;
        border-bottom: 1px solid var(--player-border-soft);
    }

    body.app-player .ui-responsive-data-card-row:last-child {
        border-bottom: 0;
    }

    body.app-player .ui-responsive-data-card-label {
        color: var(--player-muted);
        font-size: 0.9rem;
        font-weight: 700;
    }

    body.app-player .ui-responsive-data-card-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    body.app-player :where(.team-profile-member-card, .profile-photo-card, .team-profile-member-photo-link) :where(.profile-photo-frame, .profile-initials-avatar-profile, .profile-photo-image, .profile-photo-fallback-avatar) {
        width: var(--player-avatar-sm) !important;
        height: var(--player-avatar-sm) !important;
        min-width: var(--player-avatar-sm) !important;
        min-height: var(--player-avatar-sm) !important;
        max-width: var(--player-avatar-sm) !important;
        max-height: var(--player-avatar-sm) !important;
        flex-basis: var(--player-avatar-sm) !important;
    }
}

@media (max-width: 420px) {
    body.app-player .ui-responsive-data-card-row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    body.app-player .nav-link {
        padding-inline: 0.52rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-player *,
    body.app-player *::before,
    body.app-player *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ADDED v2026-05-22.3947: cleanup confirmation checkbox shrink/wrap contract. */
.ui-confirm-box {
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}
.ui-confirm-box .ui-confirm-box-checkbox,
.ui-confirm-box input[type='checkbox'] {
    flex: 0 0 auto;
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem;
    margin: 0.12rem 0 0 0;
    padding: 0;
}
.ui-confirm-box .ui-confirm-box-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.ui-admin-table.ui-checkbox-table th:first-child,
.ui-admin-table.ui-checkbox-table td:first-child {
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.ui-checkbox-table input[type='checkbox'] {
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem;
    margin: 0;
}

/** ADDED v2026-05-22.3949a
 *  Purpose: Restore player-facing main navigation link colour after the player
 *  link theme made generic anchors blue. Main nav links sit on the dark header
 *  surface and must remain white for contrast. Admin nav styling is handled by
 *  its own admin theme rules and is intentionally not changed here.
 */
body.app-player header nav a.nav-link,
body.app-player nav a.nav-link,
body:not(.app-admin) header nav a.nav-link,
body:not(.app-admin) nav a.nav-link {
    color: var(--color-white) !important;
}

body.app-player header nav a.nav-link:visited,
body.app-player nav a.nav-link:visited,
body:not(.app-admin) header nav a.nav-link:visited,
body:not(.app-admin) nav a.nav-link:visited {
    color: var(--color-white) !important;
}

body.app-player header nav a.nav-link:hover,
body.app-player nav a.nav-link:hover,
body:not(.app-admin) header nav a.nav-link:hover,
body:not(.app-admin) nav a.nav-link:hover,
body.app-player header nav a.nav-link:focus-visible,
body.app-player nav a.nav-link:focus-visible,
body:not(.app-admin) header nav a.nav-link:focus-visible,
body:not(.app-admin) nav a.nav-link:focus-visible {
    color: var(--color-accent) !important;
}

/* ADDED v2026-05-22.3951: admin/player normalization for roster/member data displays. */
:root {
    --ui-table-cell-pad-y: 0.42rem;
    --ui-table-cell-pad-x: 0.55rem;
    --ui-card-radius: 0.7rem;
}
body.app-admin .admin-table-scroll,
body.app-admin .ui-admin-table-scroll,
body.app-admin .ui-data-table-card {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
body.app-admin table.ui-admin-table,
body.app-admin table.admin-table,
body.app-admin .ui-data-table-card table {
    width: max-content;
    min-width: 100%;
    max-width: none;
    border-collapse: collapse;
    table-layout: auto;
}
body.app-admin table.ui-admin-table th,
body.app-admin table.admin-table th,
body.app-admin table.ui-admin-table td,
body.app-admin table.admin-table td {
    padding: var(--ui-table-cell-pad-y) var(--ui-table-cell-pad-x);
    overflow-wrap: normal;
    word-break: normal;
    vertical-align: top;
}
body.app-player .ui-responsive-data-display,
body.app-player .player-card,
body.app-player .ui-player-card,
body.app-player details.ui-player-details-card {
    max-width: 100%;
    box-sizing: border-box;
}
body.app-player .ui-responsive-data-card,
body.app-player .team-roster-member-card {
    border: 1px solid var(--player-border-soft, #d9e6dc);
    border-radius: var(--ui-card-radius);
    background: var(--player-surface, #fff);
    padding: 0.65rem 0.75rem;
}
body.app-player .team-roster-member-card + .team-roster-member-card {
    margin-top: 0.45rem;
}
body.app-player details > summary {
    word-break: normal;
    overflow-wrap: break-word;
}
@media (max-width: 720px) {
    body.app-player .ui-responsive-data-table {
        display: none;
    }
    body.app-player .ui-responsive-data-cards {
        display: grid;
        gap: 0.55rem;
    }
}
@media (min-width: 721px) {
    body.app-player .ui-responsive-data-cards {
        display: none;
    }
}

/* ADDED v2026-05-22.3952: runtime CSS consolidation for read-model/report components. */
.ui-read-model-card { border-radius: 12px; overflow: hidden; }
.ui-read-model-card > summary { word-break: normal; overflow-wrap: break-word; }
.ui-responsive-data-display,
.ui-table-scroll,
.admin-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-responsive-data-display table,
.ui-table-scroll table,
.admin-table-scroll table { width: max-content; min-width: 100%; }
body.app-admin body.admin body.app-admin .ui-read-model-card,
body.admin .ui-read-model-card { background: #ffffff; border: 1px solid #d9dee5; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
body.app-admin body.admin body.app-admin .ui-read-model-card > summary,
body.admin .ui-read-model-card > summary { background: #f8fafc; color: #1f2937; padding: 0.7rem 0.9rem; }
body.app-admin .admin-table-scroll th,
body.admin .admin-table-scroll th { white-space: normal; word-break: normal; overflow-wrap: break-word; }
body.app-admin .admin-table-scroll td,
body.admin .admin-table-scroll td { max-width: 32rem; overflow-wrap: anywhere; }
body.app-player .ui-player-page,
body.player .ui-player-page { max-width: min(100%, 96rem); margin-inline: auto; }
@media (max-width: 760px) { body.app-player .ui-responsive-data-display, body.player .ui-responsive-data-display { overflow-x: visible; } }

/* ADDED v2026-05-22.3953: player/admin CSS contract tokens for roster and rules-engine surfaces. */
:root {
    --ui-normalized-surface-bg: var(--color-white);
    --ui-normalized-surface-border: var(--css-color-d9d9d9);
    --ui-normalized-surface-muted-bg: var(--css-color-f8fafc);
    --ui-normalized-surface-muted-text: var(--css-color-333);
    --ui-normalized-card-gap: 0.65rem;
    --ui-normalized-card-padding: 0.75rem;
}

.ui-roster-member-list,
.ui-rule-resolution-list,
body.app-player .ui-roster-member-list,
body.app-admin .ui-rule-resolution-list {
    display: grid;
    gap: var(--ui-normalized-card-gap);
}

.ui-roster-member-card,
.ui-rule-resolution-card,
.ui-normalized-contract-card {
    box-sizing: border-box;
    border: 1px solid var(--ui-normalized-surface-border);
    border-radius: var(--ui-card-radius);
    background: var(--ui-normalized-surface-bg);
    padding: var(--ui-normalized-card-padding);
}

.ui-roster-member-card[data-member-type="team_substitute_pool"],
.ui-roster-member-card[data-member-type="league_substitute_pool"],
.ui-roster-member-card[data-member-type="match_substitute"] {
    background: var(--css-color-eef8ee);
}

body.app-admin .ui-rule-resolution-card,
body.admin .ui-rule-resolution-card,
body.app-admin .ui-normalized-contract-card,
body.admin .ui-normalized-contract-card {
    background: var(--ui-normalized-surface-bg);
    border-color: var(--ui-normalized-surface-border);
}

body.app-player .ui-roster-member-card,
body.player .ui-roster-member-card {
    max-width: 100%;
    overflow-wrap: break-word;
}

@media (max-width: 720px) {
    .ui-normalized-contract-card,
    .ui-rule-resolution-card,
    .ui-roster-member-card {
        padding: 0.65rem;
    }
}

/* ADDED v2026-05-22.3978: Player release polish.
   Make the 2+ complete-teams calendar highlight thinner and lighter. */
:root {
    --calendar-overlap-outline: #aeb4bb;
    --calendar-overlap-outline-dark: #8f969e;
}

.calendar-overlap {
    box-shadow:
        inset 0 0 0 1px var(--calendar-overlap-outline, #aeb4bb),
        0 0 2px rgba(110, 118, 129, 0.25) !important;
}

.calendar-overlap::before {
    border: 1px solid var(--calendar-overlap-outline, #aeb4bb) !important;
    box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    .calendar-overlap {
        box-shadow:
            inset 0 0 0 1px var(--calendar-overlap-outline-dark, #8f969e),
            0 0 2px rgba(143, 150, 158, 0.35) !important;
    }

    .calendar-overlap::before {
        border-color: var(--calendar-overlap-outline-dark, #8f969e) !important;
    }
}


/* ADDED v2026-05-22.3984: Calendar 2+ complete-team cells use
   a light-grey background fill as well as the thin neutral outline. */
:root {
    --calendar-overlap-bg: #f1f3f5;
    --calendar-overlap-bg-dark: #2f3338;
}

.calendar-overlap {
    background-color: var(--calendar-overlap-bg, #f1f3f5) !important;
}

@media (prefers-color-scheme: dark) {
    .calendar-overlap {
        background-color: var(--calendar-overlap-bg-dark, #2f3338) !important;
    }
}

/* ADDED v2026-05-22.3985: Calendar overlap background needs to show
   through the per-player availability strips. Earlier background-color on the
   td was mostly hidden by .c0 white strips. Keep player colour strips intact,
   but tint empty strips and the cell itself light grey for visible contrast. */
:root {
    --calendar-overlap-bg: #edf0f2;
    --calendar-overlap-bg-dark: #2f3338;
}

.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell.calendar-overlap {
    background: var(--calendar-overlap-bg, #edf0f2) !important;
    background-color: var(--calendar-overlap-bg, #edf0f2) !important;
}

.table-calendar .calendar-clickable-cell.calendar-overlap > .c0,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .c0 {
    background: var(--calendar-overlap-bg, #edf0f2) !important;
    background-color: var(--calendar-overlap-bg, #edf0f2) !important;
}

@media (prefers-color-scheme: dark) {
    .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell.calendar-overlap,
    .table-calendar .calendar-clickable-cell.calendar-overlap > .c0,
    .table-calendar td.calendar-clickable-cell.calendar-overlap > .c0 {
        background: var(--calendar-overlap-bg-dark, #2f3338) !important;
        background-color: var(--calendar-overlap-bg-dark, #2f3338) !important;
    }
}

/* ADDED v2026-05-23.4014: Mobile Players photo/name spacing and Player Profile team link polish. */
.player-profile-team-link {
    display: inline-block;
    margin-left: 0.45rem;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .players-container .stats-player-cell a.align-photo,
    .player-page-container .stats-context-players .stats-player-cell a.align-photo {
        display: inline-flex !important;
        align-items: center !important;
        column-gap: 0.45rem !important;
        row-gap: 0 !important;
        width: max-content !important;
        max-width: none !important;
    }

    .players-container .stats-player-cell a.align-photo .profile-photo-frame,
    .player-page-container .stats-context-players .stats-player-cell a.align-photo .profile-photo-frame,
    .players-container .stats-player-cell a.align-photo .profile-initials-avatar,
    .player-page-container .stats-context-players .stats-player-cell a.align-photo .profile-initials-avatar {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
    }
}

/* ADDED v2026-05-23.4035: keep player-facing details/card body content off the left border. */
body.app-player :where(details.ui-player-details-card, details.stats-details, details.player-details-card, details.player-about-details, details.player-about-rule-details, details.ui-expandable-section) > :where(div, p, ul, ol, section, .round-trend-insights, .ui-details-body):not(summary) {
    box-sizing: border-box;
    padding-inline: 0.72rem;
}

body.app-player :where(details.ui-player-details-card, details.stats-details, details.player-details-card, details.player-about-details, details.player-about-rule-details, details.ui-expandable-section) > .table-container:not(summary) {
    box-sizing: border-box;
    width: calc(100% - 1.44rem);
    margin-inline: 0.72rem;
}

body.app-player :where(.player-community-standard-card) > :where(p, ul, ol):not(.ui-card-title) {
    margin-inline: 0.72rem;
}

body.app-player :where(.player-community-standard-card) > :where(ul, ol):not(.ui-card-title) {
    padding-left: 1.65rem;
}

/** ADDED v2026-05-23.4067
 *  Suppress the legacy left heading accent when a section heading is explicitly
 *  centered. The accent remains for normal left-aligned content headings, but it
 *  no longer appears as a disconnected vertical bar beside centered h2/h3 text.
 */
:where(h2, h3):where(.center, .centered, .text-center, .align-center, [align="center"]),
:where([style*="text-align:center"], [style*="text-align: center"], .center, .centered, .text-center, .align-center, [align="center"]) > :where(h2, h3),
:where([style*="text-align:center"], [style*="text-align: center"], .center, .centered, .text-center, .align-center, [align="center"]) :where(.ui-page-header, .player-page-title) > :where(h2, h3) {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/** ADDED v2026-05-23.4069
 *  Centered login/card headings are intentionally detached from the legacy
 *  document-heading accent. The global h2/h3 accent remains for normal
 *  left-aligned page content, but centered headings inside cards must not carry
 *  the left border/padding because it renders as a stray vertical bar.
 */
.login-modern-page-v268 :where(.login-modern-title, h2, h3):where(.login-modern-title, .text-center, .center, .centered, .align-center),
.login-modern-page-v268 .login-modern-card > :where(h2, h3):first-child,
.login-modern-page-v268 .divborder > :where(h2, h3):first-child,
.login-modern-page-v268 :where(.login-modern-card, .divborder) > :where(.login-modern-title) {
    border-left: 0 !important;
    padding-left: 0 !important;
}


/* ADDED v2026-05-24.4081: Signup phone country-code split layout. */
.login-modern-page-v268 .signup-phone-split {
    display: grid;
    grid-template-columns: minmax(6.75rem, auto) 1fr;
    gap: .5rem;
    align-items: center;
}

.login-modern-page-v268 .signup-phone-split select,
.login-modern-page-v268 .signup-phone-split input {
    width: 100%;
}

.login-modern-page-v268 .login-field-help {
    margin: .35rem 0 0;
    color: var(--color-muted-text, #555);
    font-size: .9rem;
    line-height: 1.3;
}

@media (max-width: 520px) {
    .login-modern-page-v268 .signup-phone-split {
        grid-template-columns: 1fr;
    }
}

/** CHANGED v2026-05-24.4084
 *  Tune public signup field widths and keep country code + phone number on
 *  one mobile row while making the phone and DUPR fields match their expected
 *  character counts.
 *
 *  ADDED v2026-05-24.4083
 *  Tune public signup field widths after splitting the phone input. Name needs
 *  more room for full names, DUPR ID should visually match its 6-character
 *  constraint, and the national phone field should not stretch wider than a
 *  practical 12-digit entry area on desktop.
 */
.login-modern-page-v268 .signup-name-input {
    width: min(100%, 28rem);
}

.login-modern-page-v268 .signup-dupr-id-input {
    width: 9.5ch;
    max-width: 9.5ch;
    min-width: 9.5ch;
    letter-spacing: .08em;
    text-align: center;
}

.login-modern-page-v268 .signup-phone-split {
    grid-template-columns: minmax(7.75rem, max-content) minmax(10ch, 12ch);
    justify-content: start;
}

.login-modern-page-v268 .signup-phone-split select {
    width: auto;
    min-width: 7.75rem;
}

.login-modern-page-v268 .signup-phone-national-input {
    width: 12ch;
    max-width: 12ch;
}

@media (max-width: 520px) {
    .login-modern-page-v268 .signup-phone-split {
        grid-template-columns: minmax(7.75rem, max-content) minmax(10ch, 12ch);
        justify-content: start;
        max-width: 100%;
    }

    .login-modern-page-v268 .signup-phone-split select {
        width: auto;
        min-width: 7.75rem;
        max-width: 8.5rem;
    }

    .login-modern-page-v268 .signup-phone-national-input {
        width: 12ch;
        max-width: 12ch;
    }

    .login-modern-page-v268 .signup-dupr-id-input {
        width: 9.5ch;
        max-width: 9.5ch;
        min-width: 9.5ch;
        text-align: center;
    }

    .login-modern-page-v268 .signup-name-input {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }
}

/** ADDED v2026-05-24.4087
 *  Desktop/mobile emoji font support for country-code dropdown flags.
 *
 *  Note:
 *  Native <select>/<option> rendering is partly controlled by the browser/OS.
 *  This font stack enables flag emoji wherever the platform has a color emoji
 *  font with regional-flag glyph support; platforms without flag glyphs may
 *  still display regional indicator letters.
 */
.login-modern-page-v268 .signup-phone-split select,
.login-modern-page-v268 .signup-phone-split option,
.login-modern-page-v268 .phone-country-code-select,
.login-modern-page-v268 .phone-country-code-select option,
body.app-player .profile-phone-split select,
body.app-player .profile-phone-split option,
body.app-player .phone-country-code-select,
body.app-player .phone-country-code-select option {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/** ADDED v2026-05-24.4087
 *  Reuse the Sign-Up phone entry pattern inside Player Profile -> My Profile
 *  without inheriting oversized legacy login input widths.
 */
body.app-player .profile-phone-field {
    max-width: 100%;
}

body.app-player .profile-phone-split {
    display: grid;
    grid-template-columns: minmax(7.75rem, max-content) minmax(13ch, 16ch);
    gap: .5rem;
    align-items: center;
    justify-content: start;
}

body.app-player .profile-phone-split select,
body.app-player .profile-phone-split input {
    width: 100%;
}

body.app-player .profile-phone-split select {
    width: auto;
    min-width: 7.75rem;
}

body.app-player .profile-phone-split .signup-phone-national-input {
    width: 16ch;
    max-width: 16ch;
}

body.app-player .profile-phone-field .login-field-help {
    margin: .35rem 0 0;
    color: var(--color-muted-text, #555);
    font-size: .9rem;
    line-height: 1.3;
}

@media (max-width: 520px) {
    body.app-player .profile-phone-split {
        grid-template-columns: minmax(7.75rem, max-content) minmax(12ch, 1fr);
        max-width: 100%;
    }

    body.app-player .profile-phone-split select {
        min-width: 7.75rem;
        max-width: 8.75rem;
    }

    body.app-player .profile-phone-split .signup-phone-national-input {
        width: 14ch;
        max-width: 100%;
    }
}


/** ADDED v2026-05-24.4091
 *  Makes Access Requests -> Pending Requests team notes use the available
 *  approval-options cell width instead of the browser's default narrow input.
 */
.admin-access-team-note {
    box-sizing: border-box;
    width: 100%;
    min-width: 16rem;
    max-width: 100%;
}


/* ADDED v2026-05-24.4094: Final admin/player formatting contract audit normalization.
   Scope: broad body-scoped contract after older rules so admin/player pages share
   severity, table, details, and text-input behavior consistently. */
:root {
  --format-contract-error-bg: #fde8e8;
  --format-contract-error-border: #b42318;
  --format-contract-error-text: #7a1c12;
  --format-contract-warning-bg: #fff4ce;
  --format-contract-warning-border: #b7791f;
  --format-contract-warning-text: #744210;
  --format-contract-info-bg: #e8f3ff;
  --format-contract-info-border: #2b6cb0;
  --format-contract-info-text: #1a4f85;
  --format-contract-input-bg: #f6f8fa;
  --format-contract-input-focus-bg: #e5e7eb;
}

body.app-admin :where(details, .ui-details-card),
body.app-player :where(details, .ui-details-card) {
  box-sizing: border-box;
  max-width: 100%;
}

body.app-admin :where(details > summary),
body.app-player :where(details > summary) {
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 0.65rem;
}

body.app-admin :where(details.admin-section-outline-none, details.has-no-findings),
body.app-player :where(details.admin-section-outline-none, details.has-no-findings) {
  box-shadow: none !important;
}

body.app-admin :where(details.admin-section-outline-none, details.has-no-findings) > summary,
body.app-player :where(details.admin-section-outline-none, details.has-no-findings) > summary {
  background: transparent !important;
  border-color: transparent !important;
}

body.app-admin :where(details.admin-section-outline-error, details.has-error),
body.app-player :where(details.admin-section-outline-error, details.has-error) {
  border-color: var(--format-contract-error-border) !important;
}
body.app-admin :where(details.admin-section-outline-error, details.has-error) > summary,
body.app-player :where(details.admin-section-outline-error, details.has-error) > summary {
  background: var(--format-contract-error-bg) !important;
  border: 1px solid var(--format-contract-error-border) !important;
  color: var(--format-contract-error-text) !important;
}

body.app-admin :where(details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error), details.has-warning:not(.admin-section-outline-error):not(.has-error)),
body.app-player :where(details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error), details.has-warning:not(.admin-section-outline-error):not(.has-error)) {
  border-color: var(--format-contract-warning-border) !important;
}
body.app-admin :where(details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error), details.has-warning:not(.admin-section-outline-error):not(.has-error)) > summary,
body.app-player :where(details.admin-section-outline-warning:not(.admin-section-outline-error):not(.has-error), details.has-warning:not(.admin-section-outline-error):not(.has-error)) > summary {
  background: var(--format-contract-warning-bg) !important;
  border: 1px solid var(--format-contract-warning-border) !important;
  color: var(--format-contract-warning-text) !important;
}

body.app-admin :where(details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning), details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning)),
body.app-player :where(details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning), details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning)) {
  border-color: var(--format-contract-info-border) !important;
}
body.app-admin :where(details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning), details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning)) > summary,
body.app-player :where(details.admin-section-outline-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning), details.has-info:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning)) > summary {
  background: var(--format-contract-info-bg) !important;
  border: 1px solid var(--format-contract-info-border) !important;
  color: var(--format-contract-info-text) !important;
}

body.app-admin :where(.table-container, .admin-table-container, .admin-table-scroll, .ui-table-scroll, .ui-responsive-data-scroll, .ui-responsive-table-card, .scroll-x),
body.app-player :where(.table-container, .admin-table-container, .admin-table-scroll, .ui-table-scroll, .ui-responsive-data-scroll, .ui-responsive-table-card, .scroll-x) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

body.app-admin :where(table),
body.app-player :where(table) {
  border-collapse: collapse;
  box-sizing: border-box;
  table-layout: auto !important;
  width: max-content;
  min-width: 100%;
  max-width: none;
}

body.app-admin :where(th),
body.app-player :where(th) {
  box-sizing: border-box;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  vertical-align: top;
}

body.app-admin :where(td),
body.app-player :where(td) {
  box-sizing: border-box;
  white-space: normal !important;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  text-overflow: clip;
  vertical-align: top;
}

body.app-admin :where(tr.dashboard-status-blocked, tr.dashboard-status-error, tr.has-error, tr.error, .severity-error, .status-error, .admin-notice-error),
body.app-player :where(tr.dashboard-status-blocked, tr.dashboard-status-error, tr.has-error, tr.error, .severity-error, .status-error, .admin-notice-error) {
  background: var(--format-contract-error-bg) !important;
  color: var(--format-contract-error-text);
}

body.app-admin :where(tr.dashboard-status-warning, tr.has-warning, tr.warning, .severity-warning, .status-warning, .admin-notice-warning),
body.app-player :where(tr.dashboard-status-warning, tr.has-warning, tr.warning, .severity-warning, .status-warning, .admin-notice-warning) {
  background: var(--format-contract-warning-bg) !important;
  color: var(--format-contract-warning-text);
}

body.app-admin :where(tr.dashboard-status-info, tr.has-info, tr.info, .severity-info, .status-info, .admin-notice-info),
body.app-player :where(tr.dashboard-status-info, tr.has-info, tr.info, .severity-info, .status-info, .admin-notice-info) {
  background: var(--format-contract-info-bg) !important;
  color: var(--format-contract-info-text);
}

body.app-admin :where(input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="file"], textarea),
body.app-player :where(input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="file"], textarea) {
  background: var(--format-contract-input-bg) !important;
  border: 1px solid var(--color-table-border, #d0d7de) !important;
  border-radius: 0.55rem !important;
  box-sizing: border-box;
  max-width: 100%;
}

body.app-admin :where(input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="file"], textarea):focus,
body.app-player :where(input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="file"], textarea):focus {
  background: var(--format-contract-input-focus-bg) !important;
}


/* ADDED v2026-05-24.4095: Admin-facing CSS/UI/UX standardization pass.
   Scope: admin surfaces only. This layer intentionally avoids player-facing selectors
   and reinforces common page, card, details, form, action, and table behavior after
   older operation-specific rules. */
body.app-admin {
  --admin-ui-card-bg: var(--color-surface, #fff);
  --admin-ui-card-border: var(--color-table-border, #d0d7de);
  --admin-ui-card-radius: 0.75rem;
  --admin-ui-card-shadow: 0 1px 2px rgba(0,0,0,.04);
  --admin-ui-gap: 0.75rem;
  --admin-ui-control-radius: 0.55rem;
  --admin-ui-control-bg: var(--format-contract-input-bg, #f6f8fa);
  --admin-ui-control-focus-bg: var(--format-contract-input-focus-bg, #e5e7eb);
}

body.app-admin :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell, .admin-tool-page, .divborder) {
  box-sizing: border-box;
  max-width: 100%;
}

body.app-admin :where(.admin-page-container, .admin-dashboard-container, .admin-development-container, .admin-diagnostics-container, .diagnostics-container, .admin-report-shell, .admin-action-shell, .admin-tool-page) {
  display: flex;
  flex-direction: column;
  gap: var(--admin-ui-gap);
}

body.app-admin :where(.admin-card, .admin-section, .admin-normalized-section, .admin-report-section, .admin-health-details, .admin-panel, .settings-panel, .dashboard-card, .diagnostic-card, .report-card, .ui-admin-card, .ui-admin-details-card) {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--admin-ui-card-border);
  border-radius: var(--admin-ui-card-radius);
  background: var(--admin-ui-card-bg);
  box-shadow: var(--admin-ui-card-shadow);
  padding: 0.75rem;
}

body.app-admin :where(details, .ui-admin-details-card, .admin-health-details) {
  overflow: hidden;
}

body.app-admin :where(details > summary) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.65rem;
  font-weight: 700;
  line-height: 1.25;
  list-style-position: inside;
}

body.app-admin :where(details > summary + *) {
  margin-top: 0.65rem;
}

body.app-admin :where(.admin-form, .admin-filter-form, .admin-inline-form, .admin-entity-form, form.admin-normalized-form) {
  box-sizing: border-box;
  max-width: 100%;
}

body.app-admin :where(.admin-form-grid, .admin-controls-grid, .admin-filter-grid, .admin-card-grid, .admin-dashboard-card-grid, .ui-card-grid, .ui-content-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--admin-ui-gap);
  align-items: start;
}

body.app-admin :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row, .filter-row, .admin-filter-row) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: 100%;
}

body.app-admin :where(label, .field-label, .setting-label) {
  font-weight: 650;
}

body.app-admin :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 2.15rem;
  padding: 0.35rem 0.5rem;
  background: var(--admin-ui-control-bg) !important;
  border: 1px solid var(--admin-ui-card-border) !important;
  border-radius: var(--admin-ui-control-radius) !important;
  box-sizing: border-box;
}

body.app-admin :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
  background: var(--admin-ui-control-focus-bg) !important;
  outline: 2px solid rgba(31,111,235,.18);
  outline-offset: 1px;
}

body.app-admin :where(.button, .btn, .button-link, button, input[type="submit"], input[type="button"], a.button, a.btn, .download-link, .export-link) {
  border-radius: 0.55rem;
  line-height: 1.2;
  min-height: 2.1rem;
  padding: 0.42rem 0.7rem;
  box-sizing: border-box;
}

body.app-admin :where(.admin-actions, .button-row, .form-actions, .dashboard-actions, .report-actions, .page-actions, .action-buttons, .admin-action-row, .admin-toolbar, .report-toolbar) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

body.app-admin :where(.table-container, .admin-table-container, .admin-report-table-container, .ui-admin-table-wrap, .ui-table-container, .ui-table-scroll, .admin-table-scroll, .scroll-x, .divborder) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

body.app-admin :where(table.admin-table, table.admin-dashboard-table, table.ui-admin-table, .admin-table-container table, .table-container table) {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto !important;
}

body.app-admin :where(table.admin-table, table.admin-dashboard-table, table.ui-admin-table, .admin-table-container table, .table-container table) :where(th, td) {
  max-width: 34rem;
  padding: 0.45rem 0.55rem;
  line-height: 1.25;
}

body.app-admin :where(table.admin-table, table.admin-dashboard-table, table.ui-admin-table, .admin-table-container table, .table-container table) th {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.app-admin :where(table.admin-table, table.admin-dashboard-table, table.ui-admin-table, .admin-table-container table, .table-container table) td {
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

body.app-admin :where(pre, code, .admin-generated-output, .admin-json-output) {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.app-admin :where(.admin-notice, .notice, .alert, .message, .callout, .admin-status-box, .validation-message) {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
}

body.app-admin :where(.admin-notice-error, .notice.error, .alert.error, .message.error, .callout.error, .severity-error, .status-error) {
  border-color: var(--format-contract-error-border, #b42318) !important;
  background: var(--format-contract-error-bg, #fde8e8) !important;
  color: var(--format-contract-error-text, #7a1c12) !important;
}

body.app-admin :where(.admin-notice-warning, .notice.warning, .alert.warning, .message.warning, .callout.warning, .severity-warning, .status-warning) {
  border-color: var(--format-contract-warning-border, #b7791f) !important;
  background: var(--format-contract-warning-bg, #fff4ce) !important;
  color: var(--format-contract-warning-text, #744210) !important;
}

body.app-admin :where(.admin-notice-info, .notice.info, .alert.info, .message.info, .callout.info, .severity-info, .status-info) {
  border-color: var(--format-contract-info-border, #2b6cb0) !important;
  background: var(--format-contract-info-bg, #e8f3ff) !important;
  color: var(--format-contract-info-text, #1a4f85) !important;
}

@media (max-width: 700px) {
  body.app-admin :where(.admin-actions, .button-row, .form-actions, .dashboard-actions, .report-actions, .page-actions, .action-buttons, .admin-action-row, .admin-toolbar, .report-toolbar, .form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row, .filter-row, .admin-filter-row) {
    align-items: stretch;
  }

  body.app-admin :where(.admin-actions, .button-row, .form-actions, .dashboard-actions, .report-actions, .page-actions, .action-buttons, .admin-action-row, .admin-toolbar, .report-toolbar) > :where(a, button, input[type="submit"], input[type="button"]) {
    flex: 1 1 12rem;
    text-align: center;
  }

  body.app-admin :where(.form-row, .field-row, .input-row, .setting-row, .control-row, .admin-form-row, .report-form-row, .filter-row, .admin-filter-row) > :where(input, select, textarea) {
    flex: 1 1 14rem;
  }
}

.player-lazy-details-body {
    min-width: 0;
    max-width: 100%;
}


/** CHANGED v2026-05-24.4115
 *  About page details density and What's New consistency.
 *
 *  Purpose:
 *  Player lazy-details wrappers receive page-specific classes on the wrapper
 *  element. Do not style those wrappers as their own details cards on About;
 *  the nested native <details> owns the visible border/summary. This removes the
 *  large visual gap between League Details and Community Standards while keeping
 *  the current player-facing details UX. The What's New launcher now uses the
 *  same visual contract as a standard closed player details summary.
 */
body.app-player .player-lazy-details-wrapper.player-about-details {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-block: 0.28rem !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.app-player .player-lazy-details-wrapper.player-about-details > details.player-lazy-details {
    margin-block: 0 !important;
}

body.app-player .player-lazy-details-wrapper.player-about-details + br,
body.app-player .about-whats-new-link-row {
    margin: 0.28rem 0 !important;
    padding: 0 !important;
}

body.app-player .about-whats-new-link {
    align-items: center;
    background: var(--player-surface, #fff) !important;
    border: 1px solid var(--player-border, var(--color-table-border, #bfbfbf)) !important;
    border-left: 1px solid var(--player-border, var(--color-table-border, #bfbfbf)) !important;
    border-radius: var(--player-radius-md, 0.62rem) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: var(--player-text, inherit) !important;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 0.4rem;
    line-height: 1.16 !important;
    margin: 0 !important;
    max-width: 100%;
    min-height: 2.35rem;
    padding: 0.48rem 0.72rem !important;
    text-decoration: none !important;
    touch-action: manipulation;
    width: 100%;
}

body.app-player .about-whats-new-link::before {
    content: "▶";
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0.74em;
    line-height: 1;
    margin-right: 0;
    transform: translateY(-0.02rem);
}

body.app-player .about-whats-new-link:hover,
body.app-player .about-whats-new-link:focus-visible {
    background: var(--player-surface, #fff) !important;
    box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(38, 132, 255, .24));
    text-decoration: none !important;
}

/** CHANGED v2026-05-24.4118
 *  About page What's New launcher matches the closed player <details> summary
 *  rows exactly while still opening the existing SweetAlert changelog dialog.
 *  The launcher is an action link, not an expandable section, so no disclosure
 *  marker is shown.
 */
body.app-player .about-whats-new-link-row {
    box-sizing: border-box;
    margin-block: var(--player-gap-sm, 0.5rem) !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    width: 100%;
}

body.app-player .about-whats-new-link {
    align-items: center;
    background: var(--player-surface, #fff) !important;
    border: 1px solid var(--player-border, var(--color-table-border, #bfbfbf)) !important;
    border-left: 1px solid var(--player-border, var(--color-table-border, #bfbfbf)) !important;
    border-radius: var(--player-radius-md, 0.62rem) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: var(--player-text, inherit) !important;
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 0.4rem;
    line-height: 1.16 !important;
    margin: 0 !important;
    max-width: 100%;
    min-height: 2.35rem;
    padding: 0.48rem 0.72rem !important;
    text-decoration: none !important;
    touch-action: manipulation;
    width: 100%;
}

body.app-player .about-whats-new-link::before,
body.app-player .about-whats-new-link::after {
    content: none !important;
    display: none !important;
}

body.app-player .about-whats-new-link:hover,
body.app-player .about-whats-new-link:focus-visible {
    background: var(--player-surface, #fff) !important;
    text-decoration: none !important;
}


/** CHANGED v2026-05-24.4120
 *  About League Details nested-section density.
 *
 *  Purpose:
 *  When League Details is open, its first nested section (Important Dates) should
 *  sit directly under the parent summary with the same compact spacing as other
 *  section headers. Remove legacy top spacing introduced by lazy-details body
 *  wrappers/content blocks without changing the rest of the About page layout.
 */
body.app-player .player-lazy-details-wrapper.player-about-details > details.player-lazy-details[open] > .player-lazy-details-body {
    padding-top: 0 !important;
}

body.app-player .player-lazy-details-wrapper.player-about-details > details.player-lazy-details[open] > .player-lazy-details-body > .content:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.app-player .player-lazy-details-wrapper.player-about-details > details.player-lazy-details[open] > .player-lazy-details-body > .content:first-child > details:first-child {
    margin-top: 0 !important;
}

/* Phase 4 Step 4146: Confirm SweetAlert action button width policy without
   forcing hidden actions visible. Confirm, cancel, and deny buttons are
   constrained to 75% of the action container width and centered when SweetAlert2
   shows them; this rule intentionally does not set display so hidden deny/cancel
   buttons remain hidden on one-button alerts. */
.swal2-popup .swal2-actions {
    align-items: center !important;
    box-sizing: border-box;
    justify-content: center !important;
    width: 100% !important;
}

.swal2-popup .swal2-actions .swal2-styled,
.swal2-popup .swal2-actions .swal2-confirm,
.swal2-popup .swal2-actions .swal2-cancel,
.swal2-popup .swal2-actions .swal2-deny {
    box-sizing: border-box !important;
    flex: 0 1 75% !important;
    max-width: 75% !important;
    width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.swal2-popup .swal2-actions .swal2-confirm {
    background-color: var(--color-button-bg, #339955) !important;
    color: var(--color-button-text, #fff) !important;
}

.swal2-popup .swal2-actions .swal2-confirm:hover {
    background-color: var(--color-button-hover-bg, #297a44) !important;
}

.swal2-popup .swal2-icon {
    font-size: 0.9em !important;
}

/* Phase 4 Step 4147: Large standalone form/action button width policy.
   Applies the 75%-width centered button treatment only to large standalone action
   rows and form-action containers. Inline table actions, compact admin buttons,
   toolbars, nav links, and SweetAlert buttons keep their existing specialized
   rules. */
:where(
    .ui-form-actions,
    .ui-player-form-actions,
    .ui-admin-form-actions,
    .form-actions,
    .page-actions,
    .admin-action-row,
    .admin-entity-action-row,
    .admin-danger-action-row,
    .player-action-row,
    .season-select-list,
    .workflow-bulk-delete-actions,
    .login-actions,
    .login-provider-stack,
    .passkey-login-panel
) > :where(
    button,
    input[type="submit"],
    input[type="button"],
    a.button,
    a.button-link,
    a.primary-button,
    .ui-button,
    .admin-action-button,
    .login-provider-button,
    .login-passkey-button
):not(.admin-button-small):not(.stats-advanced-toggle):not(.matches-team-action) {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 75% !important;
    width: 75% !important;
}


/* STEP4178: Database Readiness may correctly have an error outline, but that
   section-level severity must not make every nested row/details item look like
   an error. Keep actual subsection summaries free to show their own severity. */
.database-readiness-body,
.database-readiness-body :where(p, table, th, td, details, summary, textarea, code, pre) {
  color: var(--color-text, inherit);
}

.database-readiness-body details.data-validation-check:not(.admin-section-outline-error):not(.has-error):not(.admin-section-outline-warning):not(.has-warning):not(.admin-section-outline-info):not(.has-info) > summary {
  background: var(--admin-severity-neutral-summary-bg-final, var(--color-table-header-bg, #f7f7f7)) !important;
  color: var(--admin-severity-neutral-text-final, var(--color-text, #222)) !important;
  border-left-color: var(--admin-severity-neutral-border, var(--color-table-border, #ddd)) !important;
}

.database-readiness-body details.database-readiness-review-only > summary {
  background: var(--admin-severity-info-summary-bg-final, var(--color-background, #fff)) !important;
  color: var(--admin-severity-info-text, var(--color-text, #222)) !important;
}

/** ADDED v2026-05-25.4189: Player-owned notification preference controls. */
.profile-notifications-section {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
    max-width: min(100%, 34rem);
}
.profile-notification-option {
    display: block;
    padding: 0.5rem 0;
}
.player-checkbox-option-label {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
}
.profile-notification-option input {
    margin-right: 0;
}
.player-checkbox-option-description {
    display: block;
    margin: 0.75rem 0 0 0;
}
.player-checkbox-option-status {
    display: block;
    margin: 0.75rem 0 0 0;
}

/* ADDED v2026-05-26.4225: rounded My Profile / portfolio sections. */
.profile-portfolio-section {
    border: 1px solid var(--border-color, #d0d7de);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 0 1rem 0;
    background: var(--card-bg, rgba(255,255,255,0.65));
}
.profile-notification-option-disabled {
    opacity: 0.75;
}
.profile-notification-option-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* ADDED v2026-05-26.4227: tighten My Profile subsection spacing now that each field has its own card heading. */
.profile-portfolio-section > h4:first-child {
    margin-top: 0;
    margin-bottom: 0.55rem;
}
.profile-portfolio-section > :where(.login-field, .profile-login-field, .profile-phone-field):first-of-type {
    margin-top: 0;
}
.profile-portfolio-section > :where(p, .single, .warning):first-child {
    margin-top: 0;
}

/* ADDED v2026-05-26.4229: compact My Profile subsections to match player details-card density. */
body.app-player .profile-portfolio-section {
    padding: 0.52rem 0.72rem !important;
    margin: 0 0 var(--player-gap-sm, 0.5rem) 0 !important;
    border-radius: var(--player-radius-md, 12px) !important;
}
body.app-player .profile-portfolio-section > h4:first-child {
    margin: 0 0 0.38rem 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}
body.app-player .profile-portfolio-section > :where(.login-field, .profile-login-field, .profile-phone-field, .profile-notifications-section, p, .single, .warning):first-child,
body.app-player .profile-portfolio-section > h4:first-child + :where(.login-field, .profile-login-field, .profile-phone-field, .profile-notifications-section, p, .single, .warning) {
    margin-top: 0 !important;
}
body.app-player .profile-portfolio-section :where(.login-field, .profile-login-field) {
    margin-block: 0.28rem !important;
}
body.app-player .profile-portfolio-section :where(p.single, p.warning, .single, .warning) {
    margin-block: 0.32rem !important;
}

/* ADDED v2026-05-26.4231: realtime Create/Change Password feedback in My Profile. */
.password-feedback {
    display: block;
    font-size: 0.92rem;
    line-height: 1.25;
    margin: 0.18rem 0 0.34rem 0;
}
.password-feedback-empty { color: var(--muted-text, #57606a); }
.password-feedback-weak,
.password-feedback-mismatch { color: var(--danger-text, #b42318); }
.password-feedback-okay { color: var(--warning-text, #8a5a00); }
.password-feedback-strong,
.password-feedback-match { color: var(--success-text, #116329); }
body.app-player .profile-portfolio-section-password .login-field {
    margin-bottom: 0.18rem !important;
}


/* ADDED v2026-05-26.4234: Standard admin boolean checkbox layout. */
body.app-admin .admin-bool-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: start;
  max-width: 58rem;
}
body.app-admin .admin-bool-input {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.05rem;
}
body.app-admin .admin-bool-copy {
  display: block;
  min-width: 0;
}
body.app-admin .admin-bool-label {
  display: block;
  font-weight: 600;
}
body.app-admin .admin-bool-description {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.9em;
  color: var(--ui-muted-text, #666);
  line-height: 1.3;
}
body.app-admin .admin-form-table td .admin-bool-control,
body.app-admin .admin-rules-table td .admin-bool-control {
  text-align: left;
}

/* ADDED v2026-05-26.4243: remove legacy heading/accent bands from SweetAlert content.
   SweetAlert titles and HTML content can contain h2/h3 elements while the page
   theme gives headings a left accent border. Alert modals are self-contained UI
   components, so neutralize heading accents and popup edge accents inside them. */
.swal2-container .swal2-popup,
.sweet-alert {
    border-left: 0 !important;
    border-inline-start: 0 !important;
}

.swal2-container .swal2-popup :where(.swal2-title, h1, h2, h3, h4, h5, h6),
.swal2-container .swal2-popup .swal2-html-container :where(h1, h2, h3, h4, h5, h6),
.swal2-container .swal2-popup .changelog-alert-html :where(h1, h2, h3, h4, h5, h6),
.sweet-alert :where(h1, h2, h3, h4, h5, h6) {
    border: 0 !important;
    border-left: 0 !important;
    border-inline-start: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.swal2-container .swal2-popup :where(.swal2-title, h1, h2, h3, h4, h5, h6)::before,
.swal2-container .swal2-popup :where(.swal2-title, h1, h2, h3, h4, h5, h6)::after,
.sweet-alert :where(h1, h2, h3, h4, h5, h6)::before,
.sweet-alert :where(h1, h2, h3, h4, h5, h6)::after {
    content: none !important;
    display: none !important;
}


/* STEP4269: player/mobile About and feedback polish. */
@media (max-width: 760px) {
  /* Remove the desktop-optimized admin warning from workflow pages such as Approvals. */
  .approvals-container::before,
  .player-page-approvals::before,
  .approvals-container .ui-surface-admin::before,
  .approvals-container .admin-page-container::before {
    display: none !important;
    content: none !important;
  }

  /* Keep green/info blurb text aligned with desktop card indentation. */
  body.app-player :where(.ui-page-intro, .player-page-container .ui-page-intro, .ui-player-page-header .ui-page-intro, .player-about-details > .content, .player-about-details > .indented, .player-about-feedback-anchor .indented) {
    box-sizing: border-box !important;
    padding-left: 0.82rem !important;
    padding-right: 0.82rem !important;
  }

  /* Round Trends should use the same player mobile font scale as nearby sections. */
  body.app-player :where(.round-trends-container, .round-trends-table, .round-trend-insights, .round-trend-insights li) {
    font-size: var(--player-mobile-font-size, 0.92rem) !important;
    line-height: 1.35 !important;
  }

  /* Ensure the urgent-bug checkbox remains visible in the mobile feedback table layout. */
  body.app-player .player-feedback-form-table .feedback-urgent-checkbox {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 0.45rem !important;
    width: 100% !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.app-player .player-feedback-form-table .feedback-urgent-checkbox input[type='checkbox'] {
    display: inline-block !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 1.05rem !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.app-player .player-feedback-form-table .feedback-urgent-checkbox span {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    min-width: 0 !important;
  }
}

body.app-player .stats-round-details {
  margin: 0.55rem 0;
}


/* STEP4269: do not inject desktop-optimized admin copy into mobile page bodies. */
@media (max-width: 760px) {
  .ui-surface-admin::before,
  .admin-page-container::before,
  .admin-dashboard-container::before,
  .admin-diagnostics-container::before {
    display: none !important;
    content: none !important;
  }
}

/* STEP4270: tighten mobile Round Trends note typography to the normal player text scale. */
@media (max-width: 760px) {
  body.app-player .round-trend-insights,
  body.app-player .round-trend-insights *,
  body.app-player .round-trend-insights strong,
  body.app-player .round-trend-insights ul,
  body.app-player .round-trend-insights li,
  body.app-player .round-trend-insights p {
    font-size: var(--player-mobile-font-size, 0.92rem) !important;
    line-height: 1.35 !important;
  }
}

/* STEP4271: definitive mobile Round Trends note typography and feedback lazy-submit binding support. */
@media (max-width: 760px) {
  body.app-player :where(.player-about-details, .stats-details, .ui-player-details-card) :where(.round-trend-insights, .round-trend-insights *, .round-trend-label) {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }
  body.app-player :where(.player-about-details, .stats-details, .ui-player-details-card) .round-trend-label {
    display: inline !important;
    font-weight: 700 !important;
  }
  body.app-player :where(.player-about-details, .stats-details, .ui-player-details-card) .round-trend-insights ul {
    margin-top: 0.32rem !important;
  }
}

/* STEP4272: final mobile override for About -> Stats -> Round Trends note text.
   This intentionally avoids body-class and details-card dependencies because the
   About page can be lazy-rendered inside different public containers. */
@media (max-width: 760px) {
  html body .round-trend-insights,
  html body .round-trend-insights .round-trend-label,
  html body .round-trend-insights ul,
  html body .round-trend-insights ol,
  html body .round-trend-insights li,
  html body .round-trend-insights p,
  html body .round-trend-insights span,
  html body .round-trend-insights strong,
  html body .round-trend-insights em,
  html body .round-trend-insights * {
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
  }

  html body .round-trend-insights {
    margin-top: 0.45rem !important;
    margin-bottom: 0.55rem !important;
  }

  html body .round-trend-insights .round-trend-label {
    display: inline !important;
    font-weight: 700 !important;
  }

  html body .round-trend-insights ul,
  html body .round-trend-insights ol {
    margin-top: 0.28rem !important;
    margin-bottom: 0 !important;
    padding-left: 1.15rem !important;
  }

  html body .round-trend-insights li {
    margin: 0.12rem 0 !important;
    padding: 0 !important;
  }
}

/* STEP4273: hard-stop iOS mobile text autosizing for About -> Stats -> Round Trends notes. */
.round-trend-insights,
.round-trend-insights .round-trend-label,
.round-trend-insights .round-trend-note-list,
.round-trend-insights .round-trend-note-item,
.round-trend-insights ul,
.round-trend-insights li {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .round-trend-insights,
    .round-trend-insights .round-trend-label,
    .round-trend-insights .round-trend-note-list,
    .round-trend-insights .round-trend-note-item,
    .round-trend-insights ul,
    .round-trend-insights li,
    .round-trend-insights * {
        font-size: 0.875rem !important;
        line-height: 1.35 !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/** ADDED v2026-05-30.6367
 *  Player-facing score-table polish.
 *  - Keep G1/G2/G3 score stacks at a stable vertical rhythm regardless of which team won.
 *  - Center administrative status badges such as void/forfeit inside the same score-cell contract.
 *  - Scope to player match tables so admin/editor pages are not affected.
 */
:root {
    --player-score-stack-gap: 0.34rem;
    --player-score-badge-radius: 0.55rem;
    --player-score-status-min-width: 2.65rem;
}

.matches-table .matches-score-cell,
.match-layout-table .matches-score-cell,
:where(.matches-container, .player-page-container) .component-player-score-cell {
    vertical-align: middle;
    text-align: center;
}

.matches-table .game-score-stack,
.match-layout-table .game-score-stack,
:where(.matches-container, .player-page-container) .game-score-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--player-score-stack-gap);
    line-height: 1;
    min-height: calc((var(--game-score-display-height) * 2) + var(--player-score-stack-gap));
}

.matches-table .game-score-stack--status,
.match-layout-table .game-score-stack--status,
:where(.matches-container, .player-page-container) .game-score-stack--status {
    min-height: var(--game-score-display-height);
}

.matches-table .game-score-stack .input-score,
.match-layout-table .game-score-stack .input-score,
:where(.matches-container, .player-page-container) .game-score-stack .input-score {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: var(--player-score-badge-radius);
    vertical-align: middle;
}

.matches-table .game-score-stack .game-status-badge,
.match-layout-table .game-score-stack .game-status-badge,
:where(.matches-container, .player-page-container) .game-score-stack .game-status-badge {
    min-width: var(--player-score-status-min-width) !important;
    padding-inline: 0.35rem !important;
    text-align: center;
    text-transform: lowercase;
}

.matches-table .game-score-stack br,
.match-layout-table .game-score-stack br,
:where(.matches-container, .player-page-container) .game-score-stack br {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --player-score-stack-gap: 0.38rem;
        --player-score-status-min-width: 2.85rem;
    }
}

/** ADDED v2026-05-30.6368
 *  Player-facing match score stack hardening.
 *  Rows are block-level in the HTML and are also centered here so score controls
 *  stay vertical even when older cached CSS is present during deployment.
 */
:root {
    --player-score-stack-gap: 0.34rem;
    --player-score-badge-radius: 0.55rem;
    --player-score-status-min-width: 2.65rem;
}

.matches-table .matches-score-cell,
.match-layout-table .matches-score-cell,
:where(.matches-container, .player-page-container) .component-player-score-cell {
    vertical-align: middle;
    text-align: center;
}

.matches-table .game-score-stack,
.match-layout-table .game-score-stack,
:where(.matches-container, .player-page-container) .game-score-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--player-score-stack-gap);
    line-height: 1;
    min-height: calc((var(--game-score-display-height) * 2) + var(--player-score-stack-gap));
}

.matches-table .game-score-stack--status,
.match-layout-table .game-score-stack--status,
:where(.matches-container, .player-page-container) .game-score-stack--status {
    min-height: var(--game-score-display-height);
}

.matches-table .game-score-row,
.match-layout-table .game-score-row,
:where(.matches-container, .player-page-container) .game-score-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--game-score-display-height);
    margin: 0;
    padding: 0;
}

.matches-table .game-score-stack .input-score,
.match-layout-table .game-score-stack .input-score,
:where(.matches-container, .player-page-container) .game-score-stack .input-score {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: var(--player-score-badge-radius);
    vertical-align: middle;
}

.matches-table .game-score-stack .game-status-badge,
.match-layout-table .game-score-stack .game-status-badge,
:where(.matches-container, .player-page-container) .game-score-stack .game-status-badge {
    min-width: var(--player-score-status-min-width) !important;
    padding: 0 0.35rem !important;
    text-align: center;
    text-transform: lowercase;
}

.matches-table .game-score-stack br,
.match-layout-table .game-score-stack br,
:where(.matches-container, .player-page-container) .game-score-stack br {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --player-score-stack-gap: 0.38rem;
        --player-score-status-min-width: 2.85rem;
    }
}


/* ADDED v2026-05-30.6370: Player match score-cell hardening.
   Loaded/duplicated after prior score rules so top/bottom winner spacing and void
   status centering remain stable across theme overrides. */
body.app-player .matches-table.match-layout-table td.component-player-score-cell {
    vertical-align: middle !important;
    text-align: center !important;
    padding-top: 0.28rem !important;
    padding-bottom: 0.28rem !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1.62rem 1.62rem !important;
    row-gap: 0.26rem !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
    min-height: 3.5rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-stack.game-score-stack--status {
    grid-template-rows: 1.62rem !important;
    row-gap: 0 !important;
    min-height: 1.62rem !important;
    align-content: center !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.62rem !important;
    height: 1.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row > input.input-score,
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row > span.input-score {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row > .game-status-badge,
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row > .void.input-score {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 0.42rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-radius: 0.55rem !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell br {
    display: none !important;
}


/* CHANGED v2026-05-30.6372: Center Manage Match icon without increasing match-row height. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell {
    position: relative !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
    padding-right: calc(var(--player-action-icon-size, 1.7rem) + .45rem) !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches .component-team-pair-action,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches .component-team-pair-action {
    position: absolute !important;
    right: .22rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--player-action-icon-size, 1.7rem) !important;
    min-width: var(--player-action-icon-size, 1.7rem) !important;
    height: var(--player-action-icon-size, 1.7rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-manage-link,
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-team-action,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-manage-link,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-team-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--player-action-icon-size, 1.7rem) !important;
    min-width: var(--player-action-icon-size, 1.7rem) !important;
    height: var(--player-action-icon-size, 1.7rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-align: center !important;
    float: none !important;
}

/* CHANGED v2026-05-30.6945: Profile-photo size classes replace inline CSS variables from DisplayPlayerPhoto(). */
.profile-photo-frame.profile-photo-frame-size-small {
    --profile-photo-size: 32px;
}

.profile-photo-frame.profile-photo-frame-size-card {
    --profile-photo-size: 88px;
}

.profile-photo-frame.profile-photo-frame-size-profile {
    --profile-photo-size: 160px;
}


/* CHANGED v2026-06-06.7650: Compact logged-in player profile-photo link fixed to the bottom-left with first name below the avatar. */
header {
    position: relative;
}

header .nav-profile-corner {
    position: absolute;
    bottom: 0.55rem;
    left: 0.65rem;
    z-index: 2;
}

header .nav-profile-corner .nav-profile-photo-link {
    font-weight: 700 !important; /** CHANGED v2026-06-08.8046: match main nav link weight. */
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.12rem !important;
    padding: 0.1rem !important;
    min-height: 0 !important;
    line-height: 1 !important;
    border-radius: 0.45rem;
    text-align: center !important;
    text-decoration: none !important;
}

header .nav-profile-corner .nav-profile-photo-link .profile-photo-frame,
header .nav-profile-corner .nav-profile-photo-link .profile-photo-frame.profile-photo-frame-has-image,
header .nav-profile-corner .nav-profile-photo-link .profile-photo-image,
header .nav-profile-corner .nav-profile-photo-link .profile-photo-fallback-avatar,
header .nav-profile-corner .nav-profile-photo-link .profile-initials-avatar,
header .nav-profile-corner .nav-profile-photo-link .profile-initials-avatar-small {
    --profile-photo-size: 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    box-sizing: border-box !important;
    font-size: 0.82rem !important;
    line-height: 34px !important;
}

header .nav-profile-corner .nav-profile-photo-link .profile-photo-image,
header .nav-profile-corner .nav-profile-photo-link .profile-photo-fallback-avatar,
header .nav-profile-corner .nav-profile-photo-link .profile-initials-avatar {
    border-radius: 999px !important;
}

header .nav-profile-corner .nav-profile-first-name {
    display: block !important;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important; /** CHANGED v2026-06-08.8046: keep profile label bold like main nav links. */
    line-height: 1.05 !important;
    text-shadow: none !important;
}

@media (max-width: 700px) {
    header .nav-profile-corner {
        bottom: 0.35rem;
        left: 0.45rem;
    }

    header .nav-profile-corner .nav-profile-first-name {
        max-width: 3.8rem;
        font-size: 0.66rem !important;
    }
}


/** ADDED v2026-05-31.7005
 *  Admin visual parity patch:
 *  - keep top/header nav links white on admin pages, matching player pages;
 *  - neutralize decorative tinted backgrounds on admin text blurbs without
 *    affecting warning/error/success/info alert panels or wide-table scrolling.
 */
body.app-admin header nav a.nav-link,
body.app-admin nav a.nav-link {
    color: var(--color-white) !important;
}

body.app-admin header nav a.nav-link:visited,
body.app-admin nav a.nav-link:visited {
    color: var(--color-white) !important;
}

body.app-admin header nav a.nav-link:hover,
body.app-admin nav a.nav-link:hover,
body.app-admin header nav a.nav-link:focus-visible,
body.app-admin nav a.nav-link:focus-visible {
    color: var(--color-accent) !important;
}

body.app-admin :where(.help-text, .admin-help-text, .hint, .muted, .small-note, .smallnote, .note, .admin-inline-note, .admin-action-note, .ui-page-note, .ui-section-intro, .ui-page-intro, .admin-page-intro, .admin-section-intro):not(.warning):not(.error):not(.success):not(.info):not(.alert):not(.validation-message) {
    background: var(--color-transparent) !important;
    background-color: var(--color-transparent) !important;
    box-shadow: none;
}

/* CHANGED v2026-05-31.7026
   Matches editable score inputs keep rounded badge corners and hidden later-game
   rows do not leave square placeholder boxes. */
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-row > input.input-score,
body.app-player .matches-table.match-layout-table td.component-player-score-cell input.input-score.player-score-badge,
body.app-player .player-matches-page input.input-score.player-score-badge {
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-clip: padding-box !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .score-input-hidden-row,
body.app-player .player-matches-page .score-input-hidden-row {
    display: none !important;
}
body.app-player .matches-table.match-layout-table td.component-player-score-cell .game-score-stack--suppressed {
    min-height: 0 !important;
    height: 0 !important;
}

/* CHANGED v2026-05-31.7029
   Score approval requests use the same pending-lock visual contract as
   void/forfeit requests. */
body.app-player .matches-table.match-layout-table td.pending-game-change-score::after,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score::after {
    content: "";
}
body.app-player .pending-game-change-score input.input-score,
body.app-player input.input-score.pending-game-change-score {
    cursor: not-allowed;
}


/* ADDED v2026-05-31.7059
 * Status legend toggles are buttons for behavior/accessibility, but should look
 * like the original small inline text bubbles rather than browser buttons.
 */
.status-filter-chip {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    padding: 0 4px;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    display: inline;
    vertical-align: baseline;
    box-shadow: none;
    text-align: inherit;
}

.status-filter-chip.unavailable {
    background-color: var(--color-status-unavailable-bg);
}

.status-filter-chip.withdrawn {
    background-color: var(--color-status-withdrawn-bg);
}

.status-filter-chip.single {
    background-color: var(--color-status-single-bg);
}


/* CHANGED v2026-05-31.7061
 * Keep status filter controls visually identical to the original inline legend
 * bubbles. This intentionally overrides broad button/input rules.
 */
.status-filter-chip,
span.status-filter-chip,
[role="button"].status-filter-chip {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    font: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    display: inline !important;
    vertical-align: baseline !important;
    box-shadow: none !important;
    text-align: inherit !important;
    text-decoration: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

.status-filter-chip.unavailable,
span.status-filter-chip.unavailable,
[role="button"].status-filter-chip.unavailable {
    background-color: var(--color-status-unavailable-bg) !important;
}

.status-filter-chip.withdrawn,
span.status-filter-chip.withdrawn,
[role="button"].status-filter-chip.withdrawn {
    background-color: var(--color-status-withdrawn-bg) !important;
}

.status-filter-chip.single,
span.status-filter-chip.single,
[role="button"].status-filter-chip.single {
    background-color: var(--color-status-single-bg) !important;
}


/* CHANGED v2026-05-31.7062
 * Status filter chips are inline links for reliable click behaviour, but must
 * continue to look like the original small legend bubbles.
 */
a.status-filter-chip,
a.status-filter-chip:link,
a.status-filter-chip:visited,
a.status-filter-chip:hover,
a.status-filter-chip:active {
    display: inline !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    min-width: 0 !important;
    min-height: 0 !important;
    cursor: pointer;
}

a.status-filter-chip.unavailable {
    background-color: var(--color-status-unavailable-bg) !important;
}

a.status-filter-chip.withdrawn {
    background-color: var(--color-status-withdrawn-bg) !important;
}

a.status-filter-chip.single {
    background-color: var(--color-status-single-bg) !important;
}


/* CHANGED v2026-05-31.7064
 * Status filter link foreground must remain black, not the default site teal/blue.
 */
a.status-filter-chip,
a.status-filter-chip:link,
a.status-filter-chip:visited,
a.status-filter-chip:hover,
a.status-filter-chip:active,
a.status-filter-chip:focus {
    color: #000 !important;
}


/* ADDED v2026-05-31.7066: Final foreground override for status bubble links. */
.teams-page-heading-meta a.status-filter-chip,
.players-page-heading-subtitle a.status-filter-chip {
    color: #000 !important;
}


/* ADDED v2026-05-31.7067
 * Server-side status filter links: black text and row highlighting on table cells.
 */
.teams-page-heading-meta a.status-filter-chip,
.players-page-heading-subtitle a.status-filter-chip,
.teams-page-heading-meta a.status-filter-chip:link,
.players-page-heading-subtitle a.status-filter-chip:link,
.teams-page-heading-meta a.status-filter-chip:visited,
.players-page-heading-subtitle a.status-filter-chip:visited,
.teams-page-heading-meta a.status-filter-chip:hover,
.players-page-heading-subtitle a.status-filter-chip:hover,
.teams-page-heading-meta a.status-filter-chip:active,
.players-page-heading-subtitle a.status-filter-chip:active {
    color: #000 !important;
}

tr.unavailable > td {
    background-color: var(--color-status-unavailable-bg) !important;
}

tr.withdrawn > td {
    background-color: var(--color-status-withdrawn-bg) !important;
}

tr.single > td {
    background-color: var(--color-status-single-bg) !important;
}


/* ADDED v2026-05-31.7068
 * Stronger Teams/Players status highlighting for table cells. Some table skins
 * set td backgrounds, so row-level background alone is not enough.
 */
body.app-player table.teams tbody tr.unavailable > td,
body.app-player .teams tbody tr.unavailable > td,
body.app-player tr.unavailable[data-status-filter-row~="unavailable"] > td,
body.app-player tr.unavailable > td {
    background-color: var(--color-status-unavailable-bg) !important;
}

body.app-player table.teams tbody tr.withdrawn > td,
body.app-player .teams tbody tr.withdrawn > td,
body.app-player tr.withdrawn[data-status-filter-row~="withdrawn"] > td,
body.app-player tr.withdrawn > td {
    background-color: var(--color-status-withdrawn-bg) !important;
}


/* ADDED v2026-05-31.7070
 * Final unavailable-row highlight fallback for Teams table cells.
 */
body.app-player .player-teams-page tr.unavailable > td,
body.app-player .player-teams-section tr.unavailable > td,
body.app-player tr.unavailable > td.align-middle,
body.app-player tr.unavailable > td.stats-team-cell {
    background-color: var(--color-status-unavailable-bg) !important;
}


/* ADDED v2026-05-31.7072
 * AJAX-filtered status bubbles remain normal-looking links; the browser URL
 * state controls which rows are displayed without a full page refresh.
 */
a.status-filter-chip[data-player-ajax-filter-link] {
    cursor: pointer;
}


/* ADDED v2026-05-31.7074
 * Filter refreshes keep the existing table visible until the replacement
 * fragment arrives. This avoids a full redraw/blank-panel effect.
 */
.player-ajax-panel[aria-busy="true"] .player-ajax-panel-body,
.player-ajax-details[aria-busy="true"] .player-ajax-details-body {
    opacity: 0.72;
}


/* ADDED v2026-05-31.7076: DUPR min/max league rule controls are fixed-step selects. */
.admin-dupr-rating-select {
    min-width: 6rem;
}


/* ADDED v2026-05-31.7077: Public signup DUPR opt-out checkbox. */
.signup-no-dupr-id-label {
    display: inline-block;
    margin-top: 0.45rem;
}


/* ADDED v2026-05-31.7078: Manual team seed ordering. */
.admin-manual-seed-order-table tr[draggable="true"] {
    cursor: move;
}

.admin-manual-seed-drag-handle {
    text-align: center;
    font-weight: 700;
    cursor: grab;
}

.admin-manual-seed-dragging {
    opacity: 0.55;
}


/* ADDED v2026-06-01.7113: Keep sysadmin maintenance date and time controls on one row. */
body.app-admin .admin-maintenance-datetime-inputs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    max-width: 100%;
}

body.app-admin .admin-maintenance-datetime-inputs input[type="date"],
body.app-admin .admin-maintenance-datetime-inputs select {
    width: auto;
    max-width: 14rem;
    flex: 0 0 auto;
}

/* ADDED v2026-06-01.7169: Center non-editable team availability badges within table cells. */
.team-availability-table-container td.availability-status-cell {
    text-align: center;
    vertical-align: middle;
}
.team-availability-table-container .team-availability-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    vertical-align: middle;
}

/* ADDED v2026-06-01.7174: Team Profile availability toggle is a real button so the visible switch surface is directly actionable on mobile and desktop. */
.team-availability-toggle-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  width: 100%;
  min-height: 34px;
  height: 34px;
  vertical-align: middle;
}

.team-availability-toggle-button:disabled {
  cursor: wait;
  opacity: 0.75;
}

.team-availability-switch-visual {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
  flex: 0 0 60px;
}

.team-availability-switch-visual .slider {
  position: absolute;
  inset: 0;
}

.team-availability-toggle-button.is-on .slider {
  background-color: var(--color-status-available-bg);
}

.team-availability-toggle-button.is-on .slider:before {
  transform: translateX(36px);
}


/* ADDED v2026-06-01.7178: Team Profile availability switch posts through a normal form fallback. */
.team-availability-post-form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}

/* ADDED v2026-06-01.7184: Make Team Profile availability forms use the full table-cell target, not only the small switch thumb. */
.availability-clickable-cell .team-availability-post-form,
.availability-clickable-cell .team-availability-toggle-button {
  width: 100%;
}

.team-availability-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ADDED v2026-06-02.7204: Team Profile withdrawal uses the same visible switch contract as availability and spans the full management table row. */
.team-withdrawal-row .withdrawal-clickable-cell {
  display: table-cell !important; /* CHANGED v2026-06-02.7205: override player pill styling on .withdrawn so colspan remains a real full-width table cell. */
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  text-align: center;
  width: 100%;
  border-radius: 0;
}

.team-withdrawal-row-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.team-withdrawal-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 60px;
}

.withdrawal-clickable-cell .team-withdrawal-toggle-button {
  width: 60px;
}

.withdrawal-clickable-cell .team-withdrawal-toggle-button.is-off .slider {
  background-color: var(--color-status-unavailable-bg);
}

@media (max-width: 640px) {
  .team-withdrawal-row-content {
    flex-direction: column;
    gap: 0.45rem;
  }
}


/* ADDED v2026-06-02.7209: compact match scheduler action beside Manage Match. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches {
    padding-right: calc((var(--player-action-icon-size, 1.7rem) * 2) + .75rem) !important;
}
body.app-player .matches-table.match-layout-table .matches-team-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .18rem !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
}
body.app-player .matches-table.match-layout-table .matches-schedule-link {
    font-size: .95rem !important;
    text-decoration: none !important;
    opacity: .82;
}
body.app-player .matches-table.match-layout-table .matches-schedule-link:hover,
body.app-player .matches-table.match-layout-table .matches-schedule-link:focus,
body.app-player .matches-table.match-layout-table .matches-schedule-link--set {
    opacity: 1;
}
.match-scheduler-modal {
    text-align: left;
}
.match-scheduler-summary,
.match-scheduler-note {
    margin: 0 0 .75rem;
    font-size: .9rem;
}
.match-scheduler-note {
    opacity: .75;
}
.match-scheduler-field {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: .5rem;
    align-items: center;
    margin: .45rem 0;
}
.match-scheduler-field--comment {
    align-items: start;
}
.match-scheduler-field select,
.match-scheduler-field input,
.match-scheduler-field textarea {
    width: 100%;
    box-sizing: border-box;
}


/* CHANGED v2026-06-02.7216: match-row action rail positions Manage Match top-right and Scheduler bottom-right. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches {
    padding-right: calc(var(--player-action-icon-size, 1.7rem) + .55rem) !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches .component-team-pair-action,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches .component-team-pair-action {
    top: .22rem !important;
    bottom: .22rem !important;
    right: .22rem !important;
    transform: none !important;
    width: var(--player-action-icon-size, 1.7rem) !important;
    min-width: var(--player-action-icon-size, 1.7rem) !important;
    height: auto !important;
    min-height: var(--player-action-icon-size, 1.7rem) !important;
    align-items: stretch !important;
}
body.app-player .matches-table.match-layout-table .matches-team-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .2rem !important;
    width: var(--player-action-icon-size, 1.7rem) !important;
    min-width: var(--player-action-icon-size, 1.7rem) !important;
    height: 100% !important;
    min-height: var(--player-action-icon-size, 1.7rem) !important;
}
body.app-player .matches-table.match-layout-table .matches-team-actions .matches-manage-link {
    align-self: flex-start !important;
}
body.app-player .matches-table.match-layout-table .matches-team-actions .matches-schedule-link {
    align-self: flex-end !important;
}


/* CHANGED v2026-06-02.7218: anchor match actions to the full table cell, not the compact team-name block. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell {
    position: relative !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches {
    padding-right: calc(var(--player-action-icon-size, 1.7rem) + .65rem) !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .component-team-pair--matches .component-team-pair-action,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .component-team-pair--matches .component-team-pair-action {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: contents !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.app-player .matches-table.match-layout-table .matches-team-actions {
    display: contents !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-manage-link,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-manage-link,
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link {
    position: absolute !important;
    right: .22rem !important;
    z-index: 3 !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-manage-link,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-manage-link {
    top: .22rem !important;
    bottom: auto !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link {
    top: auto !important;
    bottom: .22rem !important;
}

/* ADDED v2026-06-02.7228: visibly highlight Scheduler clock when a schedule exists for the match. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set {
    background: var(--color-status-warning-bg, #fff7cc) !important;
    border: 1px solid var(--color-status-warning, #c77800) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 2px rgba(199, 120, 0, .18) !important;
    color: var(--color-status-warning-text, #8a4b00) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    min-width: 1.45rem !important;
    min-height: 1.45rem !important;
    text-align: center !important;
    opacity: 1 !important;
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set:hover,
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set:focus,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set:hover,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2) !important;
}

/* ADDED v2026-06-02.7225: Scheduler searchable facility list and map preview. */
.match-scheduler-facility-picker {
    display: grid;
    gap: .45rem;
}
.match-scheduler-map-wrap {
    border: 1px solid #d7d7d7;
    border-radius: .35rem;
    overflow: hidden;
    min-height: 180px;
    background: #f8f8f8;
}
.match-scheduler-map {
    width: 100%;
    height: 180px;
    border: 0;
    display: block;
}
.match-scheduler-map--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    padding: 1rem;
    box-sizing: border-box;
}
.match-scheduler-map-link-wrap {
    font-size: .85rem;
}
.match-scheduler-map-link-empty {
    color: #666;
}
.match-scheduler-facility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}
.match-scheduler-facility-table td {
    border-top: 1px solid #e6e6e6;
    padding: .35rem .25rem;
    vertical-align: top;
}
.match-scheduler-facility-row--selected td {
    font-weight: 600;
}
.match-scheduler-facility-pick {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.match-scheduler-facility-address,
.match-scheduler-facility-empty {
    color: #666;
    font-size: .8rem;
}

/* ADDED v2026-06-02.7229: Facilities page collapsible create/edit sections and compact searchable picker. */
.admin-facilities-details {
  margin: 1rem 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.72);
}
.admin-facilities-details > summary {
  cursor: pointer;
  font-weight: 700;
  line-height: 1.35;
}
.admin-facility-picker {
  margin: 0.75rem 0 1rem;
}
.admin-facility-search {
  display: block;
  max-width: 34rem;
  width: 100%;
  margin: 0.25rem 0 0.5rem;
}
.admin-facility-picker-scroll {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.45rem;
}
.admin-facilities-picker-table {
  margin: 0;
}
.admin-facilities-picker-table th,
.admin-facilities-picker-table td {
  padding: 0.42rem 0.55rem;
}
.admin-facility-picker-row.is-selected td {
  font-weight: 700;
}
.admin-facility-picker-link {
  font-weight: 700;
}
.admin-facility-distance {
  color: #555;
  font-size: 0.9em;
  white-space: nowrap;
}


/* ADDED v2026-06-02.7230: widen scheduler popup content and provide explicit map zoom controls. */
.swal2-popup:has(.match-scheduler-modal) {
    max-width: min(760px, calc(100vw - 1.25rem)) !important;
}
.match-scheduler-map-wrap {
    position: relative;
}
.match-scheduler-map-controls {
    position: absolute;
    top: .45rem;
    left: .45rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.match-scheduler-map-zoom {
    width: 2rem;
    height: 2rem;
    border: 1px solid #b8b8b8;
    border-radius: .25rem;
    background: #fff;
    color: #222;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.match-scheduler-map-zoom:hover,
.match-scheduler-map-zoom:focus {
    background: #f2f2f2;
}
@media (max-width: 640px) {
    .match-scheduler-field {
        grid-template-columns: 1fr;
    }
    .match-scheduler-facility-table td {
        display: block;
        width: 100%;
    }
}

/* ADDED v2026-06-02.7233: scheduler popup facility chooser polish. */
.swal2-popup:has(.match-scheduler-modal) {
    width: min(920px, calc(100vw - 1.25rem)) !important;
    max-width: min(920px, calc(100vw - 1.25rem)) !important;
}
.match-scheduler-summary {
    margin-left: 0;
    text-align: center;
}
.match-scheduler-facility-scroll {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid #d7d7d7;
    border-radius: .35rem;
    background: #fff;
}
.match-scheduler-facility-table td:first-child {
    width: 58%;
}
.match-scheduler-facility-pick {
    color: #005eb8 !important;
    opacity: 1 !important;
    min-height: 1.2rem;
}
.match-scheduler-facility-row--selected .match-scheduler-facility-pick {
    color: #003f7a !important;
}
.match-scheduler-map-zoom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}
@media (max-width: 640px) {
    .match-scheduler-summary {
        margin-left: 0;
    }
}

/* ADDED v2026-06-02.7234: Facility edit Google Maps coordinate picker and tighter radio label alignment. */
.admin-facility-latlong-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.admin-facility-latitude,
.admin-facility-longitude {
  max-width: 11rem;
}
.admin-facility-map-picker {
  margin-top: 0.55rem;
  max-width: 44rem;
}
.admin-facility-map-frame-wrap {
  position: relative;
  height: 16rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0.45rem;
  overflow: hidden;
  background: #f2f4f7;
}
.admin-facility-map-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.admin-facility-map-click-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: crosshair;
  padding: 0;
}
.admin-facility-map-click-layer:focus-visible {
  outline: 3px solid rgba(0, 102, 204, 0.55);
  outline-offset: -3px;
}
.admin-facility-map-zoom {
  position: absolute;
  left: 0.5rem;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.35rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.admin-facility-map-zoom-in { top: 0.5rem; }
.admin-facility-map-zoom-out { top: 2.8rem; }
.admin-facility-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.45rem;
}
.admin-facility-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}
.admin-facility-radio-group .admin-radio-row {
  margin: 0;
  align-items: center;
  gap: 0.25rem;
}
.admin-facility-radio-group .admin-radio-row input[type="radio"] {
  margin-top: 0;
}

/* CHANGED v2026-06-02.7237: Facility form radio options use a compact, non-wrapping label contract without the global admin-radio-row wrapping behavior. */
.admin-facility-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 1rem 0 0;
  white-space: nowrap;
  line-height: 1.25;
  max-width: none;
}
.admin-facility-radio-option input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
}
.admin-facility-radio-option span {
  display: inline-block;
  white-space: nowrap;
}
.admin-facility-map-click-layer:hover,
.admin-facility-map-click-layer:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.game-location-controls,
.game-facility-select,
.game-court-label-input,
.game-court-label-options {
  display: none !important;
}

/* ADDED v2026-06-02.7236: Shared searchable facility dropdown/list layout for Facilities admin and Schedule Match. */
/* CHANGED v2026-06-02.7237: Use a compact native dropdown menu instead of a tall scrollable listbox. */
.facility-search-dropdown-layout {
    display: grid;
    gap: .45rem;
}
.facility-search-dropdown-input {
    width: 100%;
    box-sizing: border-box;
}
.facility-search-dropdown-list {
    width: 100%;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: visible;
    border: 1px solid #d7d7d7;
    border-radius: .35rem;
    background: #fff;
    box-sizing: border-box;
    font: inherit;
}
.facility-search-dropdown-list option {
    padding: .35rem .45rem;
    white-space: normal;
}
.match-scheduler-facility-dropdown,
.admin-facility-dropdown {
    height: auto;
    max-width: 48rem;
}

/* CHANGED v2026-06-02.7237: Keep Schedule Match team names centered regardless of earlier field-label spacing rules. */
.match-scheduler-modal .match-scheduler-summary {
    margin-left: 0 !important;
    text-align: center !important;
}

/* CHANGED v2026-06-02.7239: Facility radios use a standard horizontal radio/label layout and the map iframe remains directly interactive. */
.admin-facility-radio-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.85rem !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.admin-facility-radio-option {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.3rem !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 0.85rem 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  line-height: 1.25 !important;
}
.admin-facility-radio-option input[type="radio"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
}
.admin-facility-radio-option span {
  display: inline !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.admin-facility-map-frame-wrap:hover,
.admin-facility-map-frame:hover {
  background: #f2f4f7 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
}
.admin-facility-map-click-layer { display: none !important; pointer-events: none !important; }

/* ADDED v2026-06-02.7240: Facilities/Scheduler maps now rely on native Google Maps iframe controls; keep radio labels horizontal and compact. */
.match-scheduler-map-wrap--native,
.admin-facility-map-frame-wrap {
    cursor: auto !important;
}
.match-scheduler-map-controls,
.match-scheduler-map-zoom,
.admin-facility-map-zoom,
.admin-facility-map-click-layer {
    display: none !important;
    pointer-events: none !important;
}
.match-scheduler-map-note {
    font-size: .86rem;
    color: var(--color-text-muted, #666);
    margin: .25rem 0 .4rem 0;
}
.admin-facility-radio-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.1rem !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
}
.admin-facility-radio-option {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}
.admin-facility-radio-option input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.admin-facility-radio-option span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* CHANGED v2026-06-02.7241: Normalize Facility radios and map preview to the shared Scheduler/Facility map contract. */
.admin-facility-radio-cell {
    text-align: left !important;
    vertical-align: middle !important;
    white-space: normal !important;
}
.admin-facility-radio-cell .admin-facility-radio-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
}
.admin-facility-radio-cell .admin-facility-radio-option {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.admin-facility-radio-cell .admin-facility-radio-option input[type="radio"] {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.admin-facility-radio-cell .admin-facility-radio-option span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    text-align: left !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.25 !important;
}
.admin-facility-map-picker {
    max-width: 100% !important;
}
.admin-facility-map-frame-wrap,
.match-scheduler-map-wrap {
    border: 1px solid #d7d7d7 !important;
    border-radius: .35rem !important;
    overflow: hidden !important;
    min-height: 180px !important;
    height: 180px !important;
    background: #f8f8f8 !important;
}
.admin-facility-map-frame,
.match-scheduler-map {
    width: 100% !important;
    height: 180px !important;
    border: 0 !important;
    display: block !important;
}
.admin-facility-map-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
    align-items: center !important;
    margin-top: .45rem !important;
}
.admin-facility-map-refresh {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 2rem !important;
    padding: .25rem .65rem !important;
    border: 1px solid #cfd6de !important;
    border-radius: .35rem !important;
    background: #f7f9fb !important;
    color: #123 !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}
.admin-facility-map-refresh:hover,
.admin-facility-map-refresh:focus {
    background: #eef3f7 !important;
    color: #123 !important;
}

/* ADDED v2026-06-03.7340: Facility map coordinate display fields beside the external Google Maps link. */
.admin-facility-map-coordinates {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: .45rem !important;
    align-items: center !important;
}
.admin-facility-map-coordinates label {
    display: inline-flex !important;
    align-items: center !important;
    gap: .25rem !important;
    margin: 0 !important;
    font-size: .92rem !important;
    color: #344 !important;
}
.admin-facility-map-coordinates input[disabled] {
    width: 8.5rem !important;
    max-width: 8.5rem !important;
    padding: .25rem .4rem !important;
    border: 1px solid #d4dbe2 !important;
    border-radius: .3rem !important;
    background: #f7f9fb !important;
    color: #234 !important;
    font: inherit !important;
    opacity: 1 !important;
}

/* CHANGED v2026-06-02.7242: Isolate Facility radio controls from broad admin label wrapping rules. */
.admin-facility-radio-cell {
    text-align: left !important;
    vertical-align: middle !important;
}
.admin-facility-choice-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}
.admin-facility-choice-list .admin-facility-choice,
body.app-admin .admin-facility-choice-list .admin-facility-choice,
.admin-page-container .admin-facility-choice-list .admin-facility-choice {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
    line-height: 1.25 !important;
}
.admin-facility-choice-list .admin-facility-choice input[type="radio"] {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.admin-facility-choice-list .admin-facility-choice span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
    text-align: left !important;
}


/* CHANGED v2026-06-02.7244: keep embedded Google Maps previews interactive and normalize Facility radio rows. */
.admin-facility-map-frame,
.match-scheduler-map {
    pointer-events: auto !important;
}
.admin-facility-map-frame-wrap,
.match-scheduler-map-wrap {
    position: relative !important;
}
.admin-facility-radio-cell,
.admin-facility-radio-cell * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.admin-facility-radio-cell {
    text-align: left !important;
}
.admin-facility-choice-list {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .8rem 1.6rem !important;
    width: 100% !important;
    text-align: left !important;
}
.admin-facility-choice-list .admin-facility-choice {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .35rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: left !important;
    line-height: 1.3 !important;
}
.admin-facility-choice-list .admin-facility-choice input[type="radio"] {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
}
.admin-facility-choice-list .admin-facility-choice label,
body.app-admin .admin-facility-choice-list .admin-facility-choice label,
.admin-page-container .admin-facility-choice-list .admin-facility-choice label {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
}

/* ADDED v2026-06-02.7248: Scheduler disclaimer, completion, court, and calendar-entry controls. */
.match-scheduler-disclaimer {
    margin: 0 0 .85rem;
    padding: .55rem .7rem;
    border: 1px solid #e0e0e0;
    border-radius: .45rem;
    background: #fafafa;
    font-size: .86rem;
    line-height: 1.35;
    text-align: left;
}
.match-scheduler-complete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .45rem !important;
    margin: .6rem 0 .4rem 6.5rem !important;
    font-size: .9rem;
    line-height: 1.2;
    text-align: left !important;
}
.match-scheduler-complete input {
    width: auto !important;
    margin: 0 !important;
}
.match-scheduler-calendar-link-wrap {
    margin: .45rem 0 0 6.5rem;
    font-size: .9rem;
}
.match-scheduler-calendar-link-wrap a {
    font-weight: 600;
}
@media (max-width: 640px) {
    .match-scheduler-complete,
    .match-scheduler-calendar-link-wrap {
        margin-left: 0 !important;
    }
}


/* CHANGED v2026-06-02.7249: Scheduler court row always remains visible; non-bookable facilities disable the field and show placeholder text. */
.match-scheduler-field--court input:disabled {
    background: #f4f4f4 !important;
    color: #666 !important;
    cursor: not-allowed !important;
}
.match-scheduler-calendar-separator {
    color: var(--color-text-muted, #666);
    margin: 0 .35rem;
}


/* CHANGED v2026-06-02.7250: Non-bookable scheduler court rows keep the disabled input message but suppress the left-column label. */
.match-scheduler-field--court #matchScheduleCourtLabel:empty {
    display: block !important;
    min-height: 1px !important;
}
.match-scheduler-field--court input:disabled::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

/* CHANGED v2026-06-02.7250: About → Feedback helper text should use the standard white-on-green information treatment. */
body.app-player .player-end-season-feedback-intro.smallnote,
.player-page-container .player-end-season-feedback-intro.smallnote {
    display: block !important;
    margin: .5rem 0 .8rem !important;
    padding: .55rem .75rem !important;
    border-radius: .45rem !important;
    background: #2f8f46 !important;
    color: #fff !important;
    border: 1px solid #237338 !important;
    line-height: 1.35 !important;
}

/* CHANGED v2026-06-02.7251: Feedback page intro uses the standard player white-on-green information treatment. */
body.app-player .player-feedback-page .ui-page-header > .ui-page-intro,
body.app-player .player-feedback-page .component-player-page-header-final > .ui-page-intro,
body.app-player .player-feedback-page .ui-page-intro {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: .5rem 0 .8rem !important;
    padding: .55rem .75rem !important;
    border-radius: .45rem !important;
    background: #2f8f46 !important;
    color: #fff !important;
    border: 1px solid #237338 !important;
    line-height: 1.35 !important;
}
body.app-player .player-feedback-page .ui-page-intro a {
    color: #fff !important;
    text-decoration: underline !important;
}



/* ADDED v2026-06-02.7252: iframe-based Google Maps previews are not native Maps JavaScript API maps. Show a non-blocking watermark. */
.match-scheduler-map-wrap,
.admin-facility-map-frame-wrap {
    position: relative !important;
}
.google-map-preview-watermark {
    position: absolute;
    right: .55rem;
    top: .45rem;
    z-index: 2;
    padding: .16rem .45rem;
    border-radius: .45rem;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

/* ADDED v2026-06-02.7253: Scheduler court selection distinguishes total courts from bookable/selectable court labels. */
.match-scheduler-court-control {
    display: block;
    width: 100%;
}
.match-scheduler-court-select,
.match-scheduler-court-control input {
    width: 100%;
    box-sizing: border-box;
}
.match-scheduler-court-meta {
    grid-column: 2;
    display: block;
    margin-top: -.25rem;
    font-size: .82rem;
    color: var(--color-text-muted, #666);
}

/* ADDED v2026-06-03.7254: Shared facility search filters for Facilities admin and Schedule Match. */
.facility-search-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.facility-search-filter-row label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .95rem;
    white-space: nowrap;
}
.facility-search-filter-select {
    max-width: 12rem;
    padding: .25rem .35rem;
    font: inherit;
}

/* ADDED v2026-06-03.7255: Scheduler team summary and date/time row alignment. */
.match-scheduler-modal .match-scheduler-summary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .4rem !important;
    text-align: center !important;
    flex-wrap: wrap !important;
}
.match-scheduler-modal .match-scheduler-summary strong {
    font-weight: 700 !important;
}
.match-scheduler-field--datetime {
    /* CHANGED v2026-06-03.7264: Date, Start, and End render on one row using the Calendar hour range. */
    align-items: center;
}
.match-scheduler-field--datetime-range {
    grid-template-columns: 6rem minmax(0, 1fr);
}
.match-scheduler-datetime-inputs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    max-width: 100%;
}
.match-scheduler-datetime-inputs input[type="date"] {
    width: 10.5rem;
    max-width: 10.5rem;
    flex: 0 0 auto;
}
.match-scheduler-datetime-inputs select {
    width: 5.75rem;
    max-width: 5.75rem;
    flex: 0 0 auto;
}
.match-scheduler-time-range-separator {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .match-scheduler-field--datetime-range {
        grid-template-columns: 1fr;
    }
    .match-scheduler-datetime-inputs {
        flex-wrap: wrap;
    }
}


/* CHANGED v2026-06-03.7266: Soft scheduler glow applies only to the clock icon, not the whole match cell. */
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set {
    box-shadow: 0 0 0 2px rgba(199, 120, 0, .14), 0 0 12px rgba(255, 193, 7, .42) !important;
}
.match-scheduler-datetime-inputs select {
    width: 7.25rem !important;
    max-width: 7.25rem !important;
}
.match-scheduler-calendar-link-wrap {
    line-height: 1.55;
}
.match-scheduler-calendar-link-label {
    font-weight: 700;
}


/* CHANGED v2026-06-03.7267: Scheduled-match clock uses a pulsing icon-only glow. */
@keyframes matchSchedulerClockPulseGlow {
    0% { box-shadow: 0 0 0 2px rgba(199, 120, 0, .14), 0 0 8px rgba(255, 193, 7, .32); }
    50% { box-shadow: 0 0 0 3px rgba(199, 120, 0, .24), 0 0 18px rgba(255, 193, 7, .62); }
    100% { box-shadow: 0 0 0 2px rgba(199, 120, 0, .14), 0 0 8px rgba(255, 193, 7, .32); }
}
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set {
    animation: matchSchedulerClockPulseGlow 2.4s ease-in-out infinite !important;
    box-shadow: 0 0 0 2px rgba(199, 120, 0, .14), 0 0 8px rgba(255, 193, 7, .32) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set,
    body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set {
        animation: none !important;
    }
}

body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set:hover,
body.app-player .matches-table.match-layout-table td.matches-table-team-cell .matches-schedule-link--set:focus,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set:hover,
body.app-player .matches-table.match-layout-table td.component-player-match-team-cell .matches-schedule-link--set:focus {
    animation: matchSchedulerClockPulseGlow 2.4s ease-in-out infinite !important;
}

/* ADDED v2026-06-03.7273: Shared Maps JavaScript API renderer placeholders for Scheduler and Facilities. */
.google-map-js-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1rem;
  background: #f2f4f7;
  color: #334155;
  text-align: center;
}
.google-map-js-placeholder-message {
  max-width: 30rem;
  font-size: 0.92rem;
  line-height: 1.35;
}
.match-scheduler-map,
.admin-facility-map-frame {
  min-height: 16rem;
}

/* ADDED v2026-06-03.7282: Teams round movement explanation. */
body.app-player .teams-round-movement-details {
  margin-top: 1rem;
}
body.app-player .teams-round-movement-table-wrap {
  margin-top: 0.75rem;
}
body.app-player .teams-round-movement-table th,
body.app-player .teams-round-movement-table td {
  vertical-align: top;
}
body.app-player .teams-round-movement-reason {
  min-width: 18rem;
  max-width: 34rem;
  white-space: normal;
}

/** ADDED v2026-06-03.7283
 *  Tighten collapsed player/About profile section spacing to match Team Profile.
 *
 *  About and Player Profile use lazy-details wrappers plus legacy <br> spacers.
 *  The Team Profile page uses adjacent details cards without those large spacer
 *  gaps. Keep the existing card rendering, but normalize vertical spacing for
 *  the affected player-facing pages.
 */
body.app-player :where(.player-about-page-shell, .player-profile-page, .player-page-container) :where(.player-lazy-details-wrapper.player-about-details, .player-profile-details, .player-match-history-details, .player-subs-details) {
    margin-block: 0.26rem !important;
}

body.app-player :where(.player-about-page-shell, .player-profile-page, .player-page-container) :where(.player-lazy-details-wrapper.player-about-details, .player-profile-details, .player-match-history-details, .player-subs-details) + br {
    display: none !important;
}

body.app-player :where(.player-about-page-shell, .player-profile-page, .player-page-container) br + :where(.player-lazy-details-wrapper.player-about-details, .player-profile-details, .player-match-history-details, .player-subs-details) {
    margin-top: 0.26rem !important;
}

body.app-player .player-about-content-stack > :where(.player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row) {
    margin-block: 0.26rem !important;
}

body.app-player .player-profile-page :where(.profile-summary-wrap, .player-profile-summary-card) + br {
    display: none !important;
}



/** CHANGED v2026-06-03.7285
 * Keep the round-movement explanation inside the parent card on narrow screens.
 * The table keeps a readable minimum width, while the wrapper scrolls instead of
 * forcing the full Teams page wider than its container.
 */
body.app-player .teams-round-movement-body {
  max-width: 100%;
  overflow: hidden;
}
body.app-player .teams-round-movement-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
body.app-player .teams-round-movement-table {
  width: max-content;
  min-width: 52rem;
  max-width: none;
}
body.app-player .teams-round-movement-symbol {
  min-width: 3rem;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}
body.app-player .teams-round-movement-record {
  min-width: 6.5rem;
  white-space: nowrap;
  line-height: 1.25;
}
body.app-player .teams-round-movement-reason {
  min-width: 16rem;
  max-width: 28rem;
}

/** ADDED v2026-06-03.7286: Teams movement overlay replacing inline collapsed section. */
body.app-player .teams-round-movement-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}
body.app-player .teams-round-movement-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem 1rem;
  background: rgba(0,0,0,0.35);
}
body.app-player .teams-round-movement-overlay.is-hidden {
  display: none !important;
}
body.app-player .teams-round-movement-panel {
  width: min(96vw, 72rem);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
}
body.app-player .teams-round-movement-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
body.app-player .teams-round-movement-panel-header h3 {
  margin: 0;
  font-size: 1.05rem;
}
body.app-player .teams-round-movement-close {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
body.app-player .teams-round-movement-overlay .teams-round-movement-body {
  padding: 0.85rem 1rem 1rem;
  overflow: auto;
}
body.app-player .teams-round-movement-round-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.92rem;
}
body.app-player .teams-round-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.2);
  text-decoration: none;
}
body.app-player .teams-round-link-current {
  font-weight: 700;
  background: rgba(0,0,0,0.08);
}
body.app-player .teams-round-movement-pool {
  white-space: nowrap;
}
body.app-player .teams-round-movement-pool .teams-round-movement-symbol {
  display: inline-block;
  min-width: 1.35rem;
  margin-right: 0.2rem;
}

/** CHANGED v2026-06-03.7287
 * Movement overlay table is designed to fit the modal width so players can read
 * the Why column without horizontal scrolling on normal desktop/tablet widths.
 */
body.app-player .teams-round-movement-panel {
  width: min(98vw, 88rem) !important;
}
body.app-player .teams-round-movement-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
body.app-player .teams-round-movement-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  font-size: 0.86rem;
}
body.app-player .teams-round-movement-table th,
body.app-player .teams-round-movement-table td {
  padding: 0.28rem 0.36rem;
  vertical-align: top;
}
body.app-player .teams-round-rank-col { width: 7.5%; }
body.app-player .teams-round-team-col { width: 15%; }
body.app-player .teams-round-movement-col { width: 8%; }
body.app-player .teams-round-record-col { width: 9%; }
body.app-player .teams-round-why-col { width: 51.5%; }
body.app-player .teams-round-movement-rank,
body.app-player .teams-round-movement-pool,
body.app-player .teams-round-movement-record {
  white-space: normal !important;
  line-height: 1.18;
}
body.app-player .teams-round-movement-record {
  min-width: 0 !important;
  max-width: none !important;
  text-align: center;
}
body.app-player .teams-round-movement-net {
  display: inline-block;
  margin-top: 0.08rem;
  font-weight: 700;
}
body.app-player .teams-round-movement-reason {
  min-width: 0 !important;
  max-width: none !important;
  line-height: 1.16;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
}
body.app-player .teams-round-movement-body.is-loading {
  opacity: 0.62;
  pointer-events: none;
}
@media (max-width: 700px) {
  body.app-player .teams-round-movement-table {
    min-width: 46rem !important;
  }
}

/** CHANGED v2026-06-03.7288
 * Team Movement overlay refinements: compact title, pool-based striping, and
 * note above table.
 */
body.app-player .teams-round-movement-panel-header h3 {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
}
body.app-player .teams-round-movement-note {
  margin: 0.25rem 0 0.65rem;
}
body.app-player .teams-round-movement-pool-odd > td {
  background: #fff !important;
}
body.app-player .teams-round-movement-pool-even > td {
  background: rgba(0,0,0,0.045) !important;
}
body.app-player .teams-round-movement-table .teams-round-movement-reason {
  font-size: 0.84rem;
}


/** ADDED v2026-06-03.7292
 * Match About and Player Profile collapsed-section spacing to Team Profile.
 * About uses lazy wrapper elements around native details cards; Player Profile
 * uses direct details cards. Normalize both paths and remove legacy <br> gaps.
 */
body.app-player .player-about-page-shell :where(.player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row),
body.app-player .player-profile-page :where(.player-profile-details, .player-match-history-details, .player-subs-details) {
    margin-block: 0.26rem !important;
}

body.app-player .player-about-page-shell .player-lazy-details-wrapper.player-about-details > details.player-lazy-details,
body.app-player .player-profile-page :where(.player-profile-details, .player-match-history-details, .player-subs-details) {
    margin-block: 0 !important;
}

body.app-player .player-about-page-shell :where(.player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row) + br,
body.app-player .player-profile-page :where(.player-profile-details, .player-match-history-details, .player-subs-details, .profile-summary-wrap, .player-profile-summary-card) + br {
    display: none !important;
}

body.app-player .player-about-content-stack > :where(.player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row),
body.app-player .player-profile-page > :where(.player-profile-details, .player-match-history-details, .player-subs-details) {
    margin-block: 0.26rem !important;
}


/** CHANGED v2026-06-03.7293
 *  Keep the Team Movement close control visible as a clear X button.
 */
body.app-player .teams-round-movement-panel-header {
  position: relative;
}
body.app-player .teams-round-movement-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  z-index: 2;
}
body.app-player .teams-round-movement-close:hover,
body.app-player .teams-round-movement-close:focus {
  background: rgba(0,0,0,0.06);
  color: #000;
  outline: 2px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

/** CHANGED v2026-06-03.7294
 *  Force About and Player Profile collapsed-section spacing to use the same
 *  compact density as Team Profile. Earlier rules missed the actual Player
 *  Profile page shell (`.player-players-page--profile`) and the About grid gap.
 */
body.app-player .player-about-page-shell .player-about-content-stack {
    gap: var(--player-section-gap, 0.32rem) !important;
    row-gap: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-about-page-shell .player-about-content-stack > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row),
body.app-player .player-players-page--profile > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .profile-summary-wrap, .player-profile-summary-card),
body.app-player .player-players-page--profile :where(.player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details) {
    margin-top: var(--player-section-gap, 0.32rem) !important;
    margin-bottom: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-about-page-shell .player-about-content-stack > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-lazy-details-wrapper.player-about-details) > :where(details, .player-lazy-details),
body.app-player .player-players-page--profile > .ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"] > :where(details, .player-lazy-details) {
    margin: 0 !important;
}

body.app-player .player-players-page--profile > * + * {
    margin-top: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-about-page-shell :where(.player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row) + br,
body.app-player .player-players-page--profile :where(.profile-summary-wrap, .player-profile-summary-card, .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details, .ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"]) + br {
    display: none !important;
}


/** CHANGED v2026-06-03.7296
 *  Normalize collapsed-section spacing parity by using one adjacent-item gap.
 *  Earlier page-specific rules still combined grid gaps with child margins, so
 *  About and Player Profile rendered looser than Team Profile. Keep child
 *  wrappers marginless and let only the stack/adjacent rule create spacing.
 */
body.app-player .player-about-page-shell .player-about-content-stack {
    display: grid !important;
    gap: var(--player-section-gap, 0.32rem) !important;
    row-gap: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-about-page-shell .player-about-content-stack > *,
body.app-player .player-about-page-shell .player-about-content-stack > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-lazy-details-wrapper.player-about-details, .about-whats-new-link-row),
body.app-player .player-players-page--profile > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.app-player .player-players-page--profile > :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details)
+ :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details) {
    margin-top: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-players-page--profile > :where(.profile-summary-wrap, .player-profile-summary-card)
+ :where(.ui-component-player.ui-player-details-card[data-ui-details-wrapper="1"], .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details) {
    margin-top: var(--player-section-gap, 0.32rem) !important;
}

body.app-player .player-about-page-shell br,
body.app-player .player-players-page--profile br {
    display: none !important;
}

/** CHANGED v2026-06-03.7304
 *  About and Player Profile section-spacing parity with Team Profile.
 *  The earlier rules reduced some margins but still allowed global .ui-details-card
 *  and native details margins to compound on these two pages. Collapse child
 *  margins at the page shell and use a single compact adjacent-section gap.
 */
body.app-player .player-about-page-shell,
body.app-player .player-players-page--profile {
    --player-profile-section-parity-gap: var(--player-section-gap, 0.32rem);
}

body.app-player .player-about-page-shell .player-about-content-stack,
body.app-player .player-players-page--profile {
    display: grid !important;
    row-gap: var(--player-profile-section-parity-gap) !important;
    gap: var(--player-profile-section-parity-gap) !important;
}

body.app-player .player-about-page-shell .player-about-content-stack > *,
body.app-player .player-about-page-shell .player-about-content-stack > :where(.ui-component-player, .ui-details-card, .ui-player-details-card, .player-lazy-details-wrapper, .player-about-details, .about-whats-new-link-row),
body.app-player .player-players-page--profile > *,
body.app-player .player-players-page--profile > :where(.ui-component-player, .ui-details-card, .ui-player-details-card, .profile-summary-wrap, .player-profile-summary-card, .player-profile-details, .player-match-history-details, .player-subs-details, .player-availability-details) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.app-player .player-about-page-shell .player-about-content-stack > :where(.ui-component-player, .ui-details-card, .ui-player-details-card, .player-lazy-details-wrapper) > :where(details, .player-lazy-details, .player-ajax-details, .ui-normalized-details),
body.app-player .player-players-page--profile > :where(.ui-component-player, .ui-details-card, .ui-player-details-card) > :where(details, .player-lazy-details, .player-ajax-details, .ui-normalized-details) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.app-player .player-about-page-shell br,
body.app-player .player-players-page--profile br {
    display: none !important;
}


/* ADDED v2026-06-03.7345: Double the Facilities create/edit map height without changing Scheduler map sizing. */
.admin-facility-map-frame-wrap {
    min-height: 360px !important;
    height: 360px !important;
}
.admin-facility-map-frame {
    height: 360px !important;
}

/** ADDED v2026-06-03.7369
 * Pending competitive-result changes use one visual language. Scores,
 * forfeits, and void requests all show the same orange pending background;
 * status-specific meaning comes from the displayed score/status text.
 */
body.app-player .matches-table.match-layout-table td.pending-game-change-cell,
body.app-player .player-matches-page td.pending-game-change-cell {
    background-color: var(--color-status-pending-change-bg) !important;
    -webkit-print-color-adjust: exact;
}
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-forfeit::after,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-void::after,
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-forfeit::after,
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-void::after {
    background-color: var(--color-message-warning);
    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 2px var(--color-message-warning);
}
body.app-player .matches-table.match-layout-table .pending-void-status,
body.app-player .player-matches-page .pending-void-status {
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg)) !important;
    border-color: var(--player-score-status-void-bg, var(--color-status-void-bg)) !important;
    font-weight: 700;
    text-align: center;
}

/** ADDED v2026-06-03.7371
 * Pending void/forfeit cells must use the same light-orange cell background as
 * pending score cells. Stronger player-page selectors override later table/cell
 * background rules while leaving the darker void pill and provisional score
 * badges intact.
 */
body.app-player .matches-table.match-layout-table td.component-player-score-cell.pending-game-change-cell,
body.app-player .matches-table.match-layout-table td.matches-score-cell.pending-game-change-cell,
body.app-player .player-matches-page td.component-player-score-cell.pending-game-change-cell,
body.app-player .player-matches-page td.matches-score-cell.pending-game-change-cell {
    background-color: var(--color-status-pending-change-bg) !important;
    background: var(--color-status-pending-change-bg) !important;
    -webkit-print-color-adjust: exact;
}
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .game-score-stack,
body.app-player .player-matches-page td.pending-game-change-cell .game-score-stack {
    background-color: transparent !important;
}
body.app-player .matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score {
    background-color: var(--color-status-pending-change-bg) !important;
}
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status {
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg)) !important;
    border-color: var(--player-score-status-void-bg, var(--color-status-void-bg)) !important;
}

/** ADDED v2026-06-03.7373
 *  Pending void and forfeit cells must keep the same light-orange full-cell
 *  background as pending score cells even after later player-layout rules load.
 *  The compact void pill remains the darker void-orange so the pending cell and
 *  the requested status are visually distinct.
 */
.matches-table.match-layout-table td.component-player-score-cell.pending-game-change-cell,
.matches-table.match-layout-table td.matches-score-cell.pending-game-change-cell,
.player-matches-page td.component-player-score-cell.pending-game-change-cell,
.player-matches-page td.matches-score-cell.pending-game-change-cell,
body.app-player .matches-table.match-layout-table td.component-player-score-cell.pending-game-change-cell,
body.app-player .matches-table.match-layout-table td.matches-score-cell.pending-game-change-cell,
body.app-player .player-matches-page td.component-player-score-cell.pending-game-change-cell,
body.app-player .player-matches-page td.matches-score-cell.pending-game-change-cell {
    background-color: var(--color-status-pending-change-bg, #ffe6a6) !important;
    background: var(--color-status-pending-change-bg, #ffe6a6) !important;
    background-clip: padding-box !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
.matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
.player-matches-page td.pending-game-change-cell .pending-void-status,
.player-matches-page td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .player-status-badge--pending-void {
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    border-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
}


/** CHANGED v2026-06-03.7374
 *  Pending score cells keep the compact upper-right pending marker, but the
 *  score badge itself should not get an extra heavy border/outline. The full
 *  cell background continues to communicate pending approval state.
 */
.matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score input.input-score.pending-game-change-score,
.matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score span.input-score.pending-game-change-score,
.player-matches-page td.pending-game-change-cell.pending-game-change-score input.input-score.pending-game-change-score,
.player-matches-page td.pending-game-change-cell.pending-game-change-score span.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score input.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score span.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-score input.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-score span.input-score.pending-game-change-score {
    border-color: var(--color-border, #cbd5e1) !important;
    box-shadow: none !important;
    outline: none !important;
}

/** CHANGED v2026-06-03.7376
 *  Pending score approvals keep the upper-right pending marker and light-orange
 *  cell background, but no score badge or score cell should render the previous
 *  heavy pending border. The pending class may be attached to either the td or
 *  the input/span badge depending on page context, so the override must cover
 *  both markup shapes.
 */
.matches-table.match-layout-table td.pending-game-change-score,
.matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score,
.player-matches-page td.pending-game-change-score,
.player-matches-page td.pending-game-change-cell.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-score {
    box-shadow: none !important;
    outline: none !important;
}
.matches-table.match-layout-table input.input-score.pending-game-change-score,
.matches-table.match-layout-table span.input-score.pending-game-change-score,
.player-matches-page input.input-score.pending-game-change-score,
.player-matches-page span.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table input.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table span.input-score.pending-game-change-score,
body.app-player .player-matches-page input.input-score.pending-game-change-score,
body.app-player .player-matches-page span.input-score.pending-game-change-score {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


/** CHANGED v2026-06-03.7378
 *  Pending score approvals must not draw the old heavy score-border on any
 *  edge. Earlier cleanup covered the badge shadow, but browser/native input
 *  borders and table-cell edge styling could still show as right/bottom black
 *  lines. Keep the light-orange pending cell and upper-right marker only.
 */
.matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score,
.matches-table.match-layout-table td.pending-game-change-cell:has(input.input-score.pending-game-change-score),
.matches-table.match-layout-table td.pending-game-change-cell:has(span.input-score.pending-game-change-score),
.player-matches-page td.pending-game-change-cell.pending-game-change-score,
.player-matches-page td.pending-game-change-cell:has(input.input-score.pending-game-change-score),
.player-matches-page td.pending-game-change-cell:has(span.input-score.pending-game-change-score),
body.app-player .matches-table.match-layout-table td.pending-game-change-cell.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell:has(input.input-score.pending-game-change-score),
body.app-player .matches-table.match-layout-table td.pending-game-change-cell:has(span.input-score.pending-game-change-score),
body.app-player .player-matches-page td.pending-game-change-cell.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell:has(input.input-score.pending-game-change-score),
body.app-player .player-matches-page td.pending-game-change-cell:has(span.input-score.pending-game-change-score) {
    border-color: var(--color-table-border, #bfbfbf) !important;
    box-shadow: none !important;
    outline: none !important;
}
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score,
.matches-table.match-layout-table input.input-score.pending-game-change-score,
.matches-table.match-layout-table span.input-score.pending-game-change-score,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score,
.player-matches-page input.input-score.pending-game-change-score,
.player-matches-page span.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table input.input-score.pending-game-change-score,
body.app-player .matches-table.match-layout-table span.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score,
body.app-player .player-matches-page input.input-score.pending-game-change-score,
body.app-player .player-matches-page span.input-score.pending-game-change-score {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-clip: padding-box !important;
}

/** ADDED v2026-06-04.7412
 *  Mobile/touch usability pass.
 *  - Give touch users a reliable tap target instead of relying on hover/title.
 *  - Keep desktop layout unchanged by scoping size increases to narrow or coarse-pointer devices.
 */
.app-mobile-title-help {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
}
.app-mobile-title-help:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (pointer: coarse), (max-width: 700px) {
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .button,
    .btn,
    .button-link,
    a.button,
    a.btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .matches-table button,
    .match-layout-table button,
    .table-calendar button,
    .stats-table-container button,
    .admin-card button {
        margin-top: 0.15rem;
        margin-bottom: 0.15rem;
    }

    .app-mobile-title-help {
        -webkit-tap-highlight-color: rgba(0,0,0,0.12);
    }
}


/** ADDED v2026-06-04.7431
 *  Pending approval display refinement:
 *  - pending score changes keep the normal rounded score-badge/bubble shape;
 *  - the score cell keeps the light-orange pending background and corner marker;
 *  - pending void requests render the compact void-orange pill instead of plain
 *    text on the pending cell background.
 */
.matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
.matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
.player-matches-page input.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
.player-matches-page span.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
body.app-player .matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
body.app-player .matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
body.app-player .player-matches-page input.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status),
body.app-player .player-matches-page span.input-score.player-score-badge.pending-game-change-score:not(.game-status-badge):not(.pending-void-status) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    max-width: 2.35rem !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--color-border, #cbd5e1) !important;
    background-color: var(--color-input-bg, var(--color-background, #ffffff)) !important;
    background: var(--color-input-bg, var(--color-background, #ffffff)) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-clip: padding-box !important;
}
.matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score.score-win,
.matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score.win,
.matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score.score-win,
.matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score.win,
.player-matches-page input.input-score.player-score-badge.pending-game-change-score.score-win,
.player-matches-page input.input-score.player-score-badge.pending-game-change-score.win,
.player-matches-page span.input-score.player-score-badge.pending-game-change-score.score-win,
.player-matches-page span.input-score.player-score-badge.pending-game-change-score.win,
body.app-player .matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score.score-win,
body.app-player .matches-table.match-layout-table input.input-score.player-score-badge.pending-game-change-score.win,
body.app-player .matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score.score-win,
body.app-player .matches-table.match-layout-table span.input-score.player-score-badge.pending-game-change-score.win,
body.app-player .player-matches-page input.input-score.player-score-badge.pending-game-change-score.score-win,
body.app-player .player-matches-page input.input-score.player-score-badge.pending-game-change-score.win,
body.app-player .player-matches-page span.input-score.player-score-badge.pending-game-change-score.score-win,
body.app-player .player-matches-page span.input-score.player-score-badge.pending-game-change-score.win {
    background-color: var(--color-game-win-bg) !important;
    background: var(--color-game-win-bg) !important;
}
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
.matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
.player-matches-page td.pending-game-change-cell .pending-void-status,
.player-matches-page td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .player-status-badge--pending-void {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: var(--player-score-status-min-width, 2.65rem) !important;
    max-width: none !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    padding: 0 0.42rem !important;
    margin: 0 !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: lowercase;
}


/** CHANGED v2026-06-04.7433
 *  Pending approval display refinement.
 *  - Pending score changes must still show the winning score highlight inside
 *    the rounded score bubble.
 *  - Pending voids must render the text inside the compact void-orange pill.
 *  Use broad selectors because older score/status markup may omit the newer
 *  player-score-badge/player-status-badge helper classes.
 */
.matches-table.match-layout-table input.input-score.pending-game-change-score.score-win,
.matches-table.match-layout-table input.input-score.pending-game-change-score.win,
.matches-table.match-layout-table span.input-score.pending-game-change-score.score-win,
.matches-table.match-layout-table span.input-score.pending-game-change-score.win,
.player-matches-page input.input-score.pending-game-change-score.score-win,
.player-matches-page input.input-score.pending-game-change-score.win,
.player-matches-page span.input-score.pending-game-change-score.score-win,
.player-matches-page span.input-score.pending-game-change-score.win,
body.app-player .matches-table.match-layout-table input.input-score.pending-game-change-score.score-win,
body.app-player .matches-table.match-layout-table input.input-score.pending-game-change-score.win,
body.app-player .matches-table.match-layout-table span.input-score.pending-game-change-score.score-win,
body.app-player .matches-table.match-layout-table span.input-score.pending-game-change-score.win,
body.app-player .player-matches-page input.input-score.pending-game-change-score.score-win,
body.app-player .player-matches-page input.input-score.pending-game-change-score.win,
body.app-player .player-matches-page span.input-score.pending-game-change-score.score-win,
body.app-player .player-matches-page span.input-score.pending-game-change-score.win {
    background-color: var(--color-game-win-bg, #d1fae5) !important;
    background: var(--color-game-win-bg, #d1fae5) !important;
    border-color: var(--color-border, #cbd5e1) !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: var(--color-text, #111827) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
.matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
.matches-table.match-layout-table span.input-score.pending-void-status,
.player-matches-page td.pending-game-change-cell .pending-void-status,
.player-matches-page td.pending-game-change-cell .player-status-badge--pending-void,
.player-matches-page span.input-score.pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .matches-table.match-layout-table span.input-score.pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .player-matches-page span.input-score.pending-void-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: var(--player-score-status-min-width, 2.65rem) !important;
    max-width: none !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    padding: 0 0.42rem !important;
    margin: 0 !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: lowercase;
}

/** CHANGED v2026-06-04.7440
 * Pending approval score/status display hardening.
 * - Pending score approvals keep rounded bubbles and explicitly highlight the
 *   provisional winning score, including disabled input markup.
 * - Pending void approvals display the word "void" inside the void-orange pill.
 */
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-winner,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-winner,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-winner,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-winner,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-winner,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-winner,
body.app-player .player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-winner,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-winner {
    background-color: var(--color-game-win-bg, #d1fae5) !important;
    background: var(--color-game-win-bg, #d1fae5) !important;
    color: var(--color-text, #111827) !important;
    border: 1px solid var(--color-border, #cbd5e1) !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
}
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-loser,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-loser,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-loser,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-loser,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-loser,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-loser,
body.app-player .player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.pending-game-score-loser,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.pending-game-score-loser {
    background-color: var(--color-input-bg, var(--color-background, #ffffff)) !important;
    background: var(--color-input-bg, var(--color-background, #ffffff)) !important;
    color: var(--color-text, #111827) !important;
    border: 1px solid var(--color-border, #cbd5e1) !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
}
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status.void,
.matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--void.pending-void-status,
.player-matches-page td.pending-game-change-cell .pending-void-status,
.player-matches-page td.pending-game-change-cell .pending-void-status.void,
.player-matches-page td.pending-game-change-cell .player-status-badge--void.pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status.void,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--void.pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status.void,
body.app-player .player-matches-page td.pending-game-change-cell .player-status-badge--void.pending-void-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--player-score-status-min-width, 2.65rem) !important;
    width: auto !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    padding: 0 0.42rem !important;
    margin: 0 !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    text-transform: lowercase !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
}

/** CHANGED v2026-06-04.7465
 * Deployment Upload: further widen the native file chooser filename text field
 * so long deployment ZIP names remain readable before upload.
 */
.sysadmin-deployment-upload-details .sysadmin-deployment-file-input {
    display: block;
    width: min(100%, 96rem);
    max-width: 100%;
}


/** ADDED v2026-06-04.7452
 * What's New: visually emphasize changelog rows marked with the optional
 * changelog.highlightFlag column while preserving the existing list structure.
 */
.changelog-highlight-item {
    font-weight: 700;
}

.changelog-highlight-label {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.75em;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/** ADDED v2026-06-04.7453
 * Pending approval display hardening.
 * Keep provisional winning scores visibly highlighted after pending/disabled
 * input rules, and force pending void text into the void-orange badge even when
 * older markup/class combinations are rendered.
 */
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-score-winner,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-score-winner,
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.win,
.matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-change-score.score-win,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.win,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-change-score.score-win,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-score-winner,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-score-winner,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.win,
.player-matches-page td.pending-game-change-cell input.input-score.pending-game-change-score.score-win,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.win,
.player-matches-page td.pending-game-change-cell span.input-score.pending-game-change-score.score-win,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell input.input-score.pending-game-score-winner,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.pending-game-score-winner,
body.app-player .player-matches-page td.pending-game-change-cell input.input-score.pending-game-score-winner,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.pending-game-score-winner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-game-win-bg, #d1fae5) !important;
    background: var(--color-game-win-bg, #d1fae5) !important;
    color: var(--color-text, #111827) !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
    border: 1px solid var(--color-border, #cbd5e1) !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
.matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.game-status-badge.pending-void-status,
.player-matches-page td.pending-game-change-cell .pending-void-status,
.player-matches-page td.pending-game-change-cell .player-status-badge--pending-void,
.player-matches-page td.pending-game-change-cell span.input-score.game-status-badge.pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell .player-status-badge--pending-void,
body.app-player .player-matches-page td.pending-game-change-cell .pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell .player-status-badge--pending-void {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: var(--player-score-status-min-width, 2.65rem) !important;
    max-width: none !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    padding: 0 0.42rem !important;
    margin: 0 !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    text-transform: lowercase !important;
}


/** ADDED v2026-06-04.7454
 * Pending approval score/status renderer hardening.
 * Pending scores now render as readonly score badges instead of disabled inputs;
 * keep the provisional winner as the visible green winner and keep pending void
 * as a compact void-orange status pill across the active player stylesheet.
 */
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-winner,
.player-matches-page td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-winner,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-winner,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-winner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-game-win-bg, #d1fae5) !important;
    background: var(--color-game-win-bg, #d1fae5) !important;
    color: var(--color-text, #111827) !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
    border-color: var(--color-border, #cbd5e1) !important;
    opacity: 1 !important;
}
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-loser,
.player-matches-page td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-loser,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-loser,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.player-score-badge.pending-game-change-readonly.pending-game-score-loser {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
}
.matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-status-badge.game-status-badge.player-status-badge--void.pending-void-status,
.player-matches-page td.pending-game-change-cell span.input-score.player-status-badge.game-status-badge.player-status-badge--void.pending-void-status,
body.app-player .matches-table.match-layout-table td.pending-game-change-cell span.input-score.player-status-badge.game-status-badge.player-status-badge--void.pending-void-status,
body.app-player .player-matches-page td.pending-game-change-cell span.input-score.player-status-badge.game-status-badge.player-status-badge--void.pending-void-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: var(--player-score-status-min-width, 2.65rem) !important;
    max-width: none !important;
    height: 1.62rem !important;
    min-height: 1.62rem !important;
    padding: 0 0.42rem !important;
    border-radius: var(--player-score-radius, var(--player-score-badge-radius, 0.55rem)) !important;
    border: 1px solid var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background-color: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    background: var(--player-score-status-void-bg, var(--color-status-void-bg, #ff9466)) !important;
    color: var(--color-text, #111827) !important;
    -webkit-text-fill-color: var(--color-text, #111827) !important;
    text-transform: lowercase !important;
    opacity: 1 !important;
}


/* ADDED v2026-06-04.7466B: Override broad admin table scroll rules for Add Changelog Entry containment. */
body.app-admin .admin-changelog-entry-table-container,
body.admin .admin-changelog-entry-table-container,
.admin-changelog-entry-table-container {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.app-admin .admin-changelog-entry-table-container table.admin-changelog-entry-table,
body.app-admin table.admin-changelog-entry-table,
body.admin .admin-changelog-entry-table-container table.admin-changelog-entry-table,
body.admin table.admin-changelog-entry-table,
table.admin-changelog-entry-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

body.app-admin table.admin-changelog-entry-table th,
body.app-admin table.admin-changelog-entry-table td,
body.admin table.admin-changelog-entry-table th,
body.admin table.admin-changelog-entry-table td,
table.admin-changelog-entry-table th,
table.admin-changelog-entry-table td {
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0.28rem !important;
  padding-right: 0.28rem !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

body.app-admin table.admin-changelog-entry-table input[type="text"],
body.app-admin table.admin-changelog-entry-table input[type="datetime-local"],
body.admin table.admin-changelog-entry-table input[type="text"],
body.admin table.admin-changelog-entry-table input[type="datetime-local"],
table.admin-changelog-entry-table input[type="text"],
table.admin-changelog-entry-table input[type="datetime-local"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}


/* ADDED v2026-06-04.7469: Add Changelog Entry direct table layout without the shared extra wrapper. */
.admin-changelog-entry-table-direct {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  box-sizing: border-box;
}
.admin-changelog-entry-table-direct th {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}
.admin-changelog-entry-table-direct th,
.admin-changelog-entry-table-direct td {
  box-sizing: border-box;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.admin-changelog-entry-table-direct .admin-changelog-page-col {
  width: 11%;
}
.admin-changelog-entry-table-direct .admin-changelog-details-col {
  width: 53%;
}
.admin-changelog-entry-table-direct .admin-changelog-release-col {
  width: 22%;
  white-space: nowrap;
}
.admin-changelog-entry-table-direct .admin-changelog-publish-col,
.admin-changelog-entry-table-direct .admin-changelog-highlight-col {
  width: 7%;
  text-align: center;
  white-space: nowrap;
}
.admin-changelog-entry-table-direct input[type="text"],
.admin-changelog-entry-table-direct input[type="datetime-local"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.admin-changelog-entry-table-direct input[type="datetime-local"] {
  font-size: 0.82rem;
}
.admin-changelog-entry-row-hidden {
  display: none !important;
}
.admin-changelog-entry-actions {
  margin-top: 0.55rem;
  display: flex;
  justify-content: flex-start;
}


/* ADDED v2026-06-04.7471: Deployment upload / Admin Teams / Add Changelog hard overrides for changes that were not visible after v7470. */
.sysadmin-deployment-upload-details .sysadmin-deployment-file-input-row {
  width: 100% !important;
  max-width: none !important;
}
.sysadmin-deployment-upload-details input.sysadmin-deployment-file-input[type="file"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: min(100%, 96rem) !important;
  box-sizing: border-box !important;
}
.admin-teams-page-shell table.admin-current-season-teams-table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
}
.admin-teams-page-shell table.admin-current-season-teams-table .admin-team-seed-col {
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  max-width: 2.75rem !important;
  padding-left: 0.18rem !important;
  padding-right: 0.18rem !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.admin-teams-page-shell table.admin-current-season-teams-table .admin-team-seed-input {
  width: 2.55rem !important;
  min-width: 0 !important;
  max-width: 2.55rem !important;
  padding-left: 0.12rem !important;
  padding-right: 0.12rem !important;
  box-sizing: border-box !important;
}
#sysadmin-add-changelog table.admin-changelog-entry-table-direct th {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#sysadmin-add-changelog tr.admin-changelog-entry-row-hidden {
  display: none !important;
}

/* ADDED v2026-06-04.7508: Player Profile semantic summary layout repair.
   Keep the profile facts/table to the right of the photo in the current div-based markup. */
.player-profile-summary-card.player-profile-summary-semantic,
.profile-summary-wrap.player-profile-summary-semantic {
    box-sizing: border-box !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}
.player-profile-summary-semantic > .player-profile-summary-layout {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    grid-auto-flow: column !important;
    align-items: start !important;
    justify-content: start !important;
    column-gap: 0.5rem !important;
    width: max-content !important;
    max-width: none !important;
    min-width: max-content !important;
}
.player-profile-summary-semantic .player-profile-summary-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: max-content !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
}
.player-profile-summary-semantic .player-profile-summary-details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}
.player-profile-summary-semantic .player-profile-fact-list,
.player-profile-summary-semantic .profile-summary-facts {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
}
.player-profile-summary-semantic .player-profile-fact-row {
    display: table-row !important;
}
.player-profile-summary-semantic .player-profile-fact-row > dt,
.player-profile-summary-semantic .player-profile-fact-row > dd {
    display: table-cell !important;
    vertical-align: top !important;
    white-space: nowrap !important;
    padding: 0.15rem 0.35rem !important;
}

/* ADDED v2026-06-06.7719: Friendlies workflow layout. */
.player-friendlies-page .friendlies-intro {
    margin-bottom: 1rem;
}
.player-friendlies-page .friendlies-section {
    margin: 1.25rem 0;
}
.player-friendlies-page .friendlies-card {
    border: 1px solid var(--color-border, #d7d7d7);
    border-radius: 0.5rem;
    padding: 0.9rem;
    margin: 0.9rem 0;
    background: #fff;
}
.player-friendlies-page .friendlies-card-header,
.player-friendlies-page .friendlies-team-invite,
.player-friendlies-page .friendlies-actions,
.player-friendlies-page .friendlies-schedule-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}
.player-friendlies-page .friendlies-card-header {
    justify-content: space-between;
}
.player-friendlies-page .friendlies-status-pill {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f1f1f1;
    font-size: 0.85rem;
}
.player-friendlies-page .friendlies-schedule-summary {
    margin: 0.5rem 0;
}
.player-friendlies-page .friendlies-muted,
.player-friendlies-page .friendlies-unscheduled,
.player-friendlies-page .friendlies-empty,
.player-friendlies-page .friendlies-comment {
    color: #666;
}
.player-friendlies-page .friendlies-team-list {
    display: grid;
    gap: 0.5rem;
}
.player-friendlies-page .friendlies-team-invite {
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}
.player-friendlies-page .friendlies-inline-form {
    display: inline-block;
    margin: 0;
}
.player-friendlies-page .friendlies-schedule-details {
    margin-top: 0.35rem;
}
.player-friendlies-page .friendlies-schedule-form label {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
}
.player-friendlies-page .friendlies-availability {
    margin-top: 0.75rem;
}
.player-friendlies-page .friendlies-calendar-table td {
    cursor: default;
}

/* ADDED v2026-06-07.7729: Center Admin Review Game Change Requests decision checkboxes in header and row cells. */
.approvals-container table.approvals-table th.workflow-decision-header,
.approvals-container table.approvals-table th.workflow-decision-subheader,
.approvals-container table.approvals-table td.workflow-decision-cell {
  text-align: center;
  vertical-align: middle;
}

.approvals-container table.approvals-table td.workflow-decision-cell input[type="checkbox"],
.approvals-container table.approvals-table th.workflow-decision-subheader input[type="checkbox"] {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}


/* ADDED v2026-06-07.7731: Let Game Changes Requiring My Approval use the full available parent width.
 * The table already wraps cell text; this removes inherited shrink-to-content
 * behavior from nested details/table wrappers while keeping overflow contained.
 */
.approvals-container details.approvals-exclusive-details,
.approvals-container details.approvals-section,
.approvals-container details.admin-section {
  width: 100%;
  max-width: 100%;
}

.approvals-container .approvals-table-container {
  display: block;
  width: 100%;
  max-width: 100%;
}

.approvals-container table.approvals-game-change-table,
.approvals-container table.approvals-pending-table {
  width: 100%;
  max-width: 100%;
}

/* ADDED v2026-06-07.7732: Maximize Game Changes Requiring My Approval and My Game Change Requests table width.
 * Purpose: approvals workflow tables should occupy the full available width of
 * the parent card/details container instead of shrinking around content.
 */
.approvals-container,
.approvals-container .approvals-section-group,
.approvals-container details.approvals-exclusive-details,
.approvals-container details.approvals-section,
.approvals-container details.admin-section,
.approvals-container .approvals-table-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.approvals-container table.approvals-game-change-table,
.approvals-container table.approvals-pending-table,
.approvals-container table.approvals-workflow-status-table,
.approvals-container table.approvals-workflow-pending-table,
.approvals-container table.approvals-workflow-completed-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
}

.approvals-container table.approvals-workflow-status-table th,
.approvals-container table.approvals-workflow-status-table td,
.approvals-container table.approvals-pending-table th,
.approvals-container table.approvals-pending-table td {
  box-sizing: border-box;
}

/* ADDED v2026-06-07.7737: Compact game-change workflow table columns and keep team/score lines unwrapped. */
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(1),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(1),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(2),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(2) {
  width: 5% !important;
  white-space: nowrap !important;
}

.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(3),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(3) {
  width: 7% !important;
  white-space: nowrap !important;
}

.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(4),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(4) {
  width: 49% !important;
}

.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(5),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(5) {
  width: 18% !important;
}

.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table th:nth-child(6),
.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table td:nth-child(6) {
  width: 16% !important;
}

.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(1),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(1) {
  width: 6% !important;
  white-space: nowrap !important;
}

.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(2),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(2) {
  width: 7% !important;
  white-space: nowrap !important;
}

.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(3),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(3) {
  width: 43% !important;
}

.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(4),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(4) {
  width: 10% !important;
}

.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(5),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(5),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(6),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(6),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table th:nth-child(7),
.approvals-container table.approvals-workflow-bulk-table.approvals-workflow-pending-table td:nth-child(7) {
  width: 11% !important;
}

.approvals-container table.approvals-table .workflow-type-detail,
.approvals-container table.approvals-table .workflow-requested-stamp,
.approvals-container table.approvals-table .workflow-requested-time,
.approvals-container table.approvals-table .workflow-match-link {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}



/* CHANGED v2026-06-07.7739: Let game-change approval tables size from content, with compact fixed utility columns and horizontal scroll only when required. */
.approvals-container .approvals-table-container:has(table.approvals-game-change-table),
.approvals-container .approvals-table-container:has(table.approvals-own-game-change-table) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100%;
}

.approvals-container table.approvals-game-change-table.approvals-workflow-pending-table,
.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table,
.approvals-container table.approvals-own-game-change-table.approvals-workflow-completed-table {
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.approvals-container table.approvals-table col.workflow-col-decision { width: 64px; }
.approvals-container table.approvals-table col.workflow-col-cancel { width: 64px; }
.approvals-container table.approvals-table col.workflow-col-match { width: 52px; }
.approvals-container table.approvals-game-change-table col.workflow-col-request { width: auto; }
.approvals-container table.approvals-game-change-table col.workflow-col-requested-by { width: 1%; }
.approvals-container table.approvals-game-change-table col.workflow-col-requested-stamp { width: 1%; }
.approvals-container table.approvals-own-game-change-table col.workflow-col-request { width: auto; }
.approvals-container table.approvals-own-game-change-table col.workflow-col-status { width: 86px; }
.approvals-container table.approvals-own-game-change-table col.workflow-col-requested-by { width: 1%; }
.approvals-container table.approvals-own-game-change-table col.workflow-col-requested-stamp { width: 1%; }
.approvals-container table.approvals-own-game-change-table col.workflow-col-progress { width: 112px; }

.approvals-container table.approvals-game-change-table th,
.approvals-container table.approvals-own-game-change-table th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.approvals-container table.approvals-table th.workflow-decision-header,
.approvals-container table.approvals-table th.workflow-decision-subheader,
.approvals-container table.approvals-table td.workflow-decision-cell,
.approvals-container table.approvals-table td.workflow-match-cell {
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.approvals-container table.approvals-table th.workflow-decision-subheader label {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap !important;
}

.approvals-container table.approvals-table td.workflow-request-cell,
.approvals-container table.approvals-table td.workflow-requested-by-cell,
.approvals-container table.approvals-table td.workflow-status-cell,
.approvals-container table.approvals-table td.workflow-progress-cell,
.approvals-container table.approvals-table td.workflow-requested-stamp {
  overflow: visible !important;
  text-overflow: clip !important;
}

.approvals-container table.approvals-table td.workflow-request-cell {
  min-width: max-content;
}

/* CHANGED v2026-06-07.7742: Keep the request heading, including the game number, on one line; the only intended Request-column breaks are before each team/score line. */
.approvals-container table.approvals-table .workflow-type-primary {
  display: block;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.approvals-container table.approvals-table .workflow-type-detail {
  display: block;
}

.approvals-container table.approvals-table .workflow-type-detail,
.approvals-container table.approvals-table .workflow-match-link,
.approvals-container table.approvals-table .workflow-requested-by-cell,
.approvals-container table.approvals-table .workflow-requested-by-cell a,
.approvals-container table.approvals-table .workflow-requested-stamp,
.approvals-container table.approvals-table .workflow-requested-time {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.approvals-container table.approvals-table th,
.approvals-container table.approvals-table td {
  vertical-align: top;
}

.approvals-container table.approvals-table th.workflow-decision-header,
.approvals-container table.approvals-table th.workflow-decision-subheader,
.approvals-container table.approvals-table td.workflow-decision-cell,
.approvals-container table.approvals-table td.workflow-match-cell {
  vertical-align: middle !important;
}


/* ADDED v2026-06-07.7743: Remove extra spacer lines from Request-column details and center My Game Change Requests checkboxes.
 * Purpose: request/game heading plus one line per team-score detail, with no blank lines;
 * pending own-request selection checkboxes should be horizontally centered.
 */
.approvals-container table.approvals-table .workflow-type-primary {
  display: block;
  margin: 0 !important;
}

.approvals-container table.approvals-table .workflow-type-detail {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table th:first-child,
.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table td.workflow-select-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table th:first-child label {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap !important;
}

.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table th:first-child input[type="checkbox"],
.approvals-container table.approvals-own-game-change-table.approvals-workflow-pending-table td.workflow-select-cell input[type="checkbox"] {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}


/* ADDED v2026-06-07.7744: My Game Change Requests column order is Cancel/Match/Status/Requested/Progress/Request.
 * Purpose: remove redundant Requested By and give the moved Request detail column the flexible remaining width.
 */
.approvals-container table.approvals-own-game-change-table col.workflow-col-request {
  width: auto;
}

.approvals-container table.approvals-own-game-change-table col.workflow-col-status {
  width: 86px;
}

.approvals-container table.approvals-own-game-change-table col.workflow-col-requested-stamp {
  width: 1%;
}

.approvals-container table.approvals-own-game-change-table col.workflow-col-progress {
  width: 112px;
}

/* ADDED v2026-06-07.7751: Desktop profile link parity with mobile header placement.
 * Keep the logged-in player profile link anchored at the lower-left of the green
 * header and force white text on desktop, matching the mobile header treatment.
 */
body.app-player header {
    position: relative !important;
}

body.app-player header .nav-profile-corner,
body.player-surface header .nav-profile-corner {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 0.35rem !important;
    left: 0.45rem !important;
    z-index: 20 !important;
}

body.app-player header .nav-profile-corner .nav-profile-photo-link,
body.app-player header .nav-profile-corner .nav-profile-photo-link:link,
body.app-player header .nav-profile-corner .nav-profile-photo-link:visited,
body.app-player header .nav-profile-corner .nav-profile-photo-link:hover,
body.app-player header .nav-profile-corner .nav-profile-photo-link:active,
body.player-surface header .nav-profile-corner .nav-profile-photo-link,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:link,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:visited,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:hover,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:active {
    color: #fff !important;
    text-decoration: none !important;
}

body.app-player header .nav-profile-corner .nav-profile-first-name,
body.player-surface header .nav-profile-corner .nav-profile-first-name {
    color: #fff !important;
}

/* ADDED v2026-06-07.7756: Keep logged-in profile nav link consistent on admin and player surfaces.
 * Admin pages load admin surface CSS after the base stylesheet, so this rule is
 * repeated in admin-loaded bundles and includes body.app-admin/body.admin-surface.
 */
body.app-admin header,
body.admin-surface header,
body.app-player header,
body.player-surface header {
    position: relative !important;
}

body.app-admin header .nav-profile-corner,
body.admin-surface header .nav-profile-corner,
body.app-player header .nav-profile-corner,
body.player-surface header .nav-profile-corner {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 0.35rem !important;
    left: 0.45rem !important;
    z-index: 20 !important;
}

body.app-admin header .nav-profile-corner .nav-profile-photo-link,
body.app-admin header .nav-profile-corner .nav-profile-photo-link:link,
body.app-admin header .nav-profile-corner .nav-profile-photo-link:visited,
body.app-admin header .nav-profile-corner .nav-profile-photo-link:hover,
body.app-admin header .nav-profile-corner .nav-profile-photo-link:active,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link:link,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link:visited,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link:hover,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link:active,
body.app-player header .nav-profile-corner .nav-profile-photo-link,
body.app-player header .nav-profile-corner .nav-profile-photo-link:link,
body.app-player header .nav-profile-corner .nav-profile-photo-link:visited,
body.app-player header .nav-profile-corner .nav-profile-photo-link:hover,
body.app-player header .nav-profile-corner .nav-profile-photo-link:active,
body.player-surface header .nav-profile-corner .nav-profile-photo-link,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:link,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:visited,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:hover,
body.player-surface header .nav-profile-corner .nav-profile-photo-link:active {
    color: #fff !important;
    text-decoration: none !important;
}

body.app-admin header .nav-profile-corner .nav-profile-first-name,
body.admin-surface header .nav-profile-corner .nav-profile-first-name,
body.app-player header .nav-profile-corner .nav-profile-first-name,
body.player-surface header .nav-profile-corner .nav-profile-first-name {
    color: #fff !important;
}

/* ADDED v2026-06-07.7785: Checkbox/search Friendlies invite selector. */
.friendlies-invite-checkbox-form .friendlies-team-search {
    width: min(100%, 28rem);
}

.friendlies-invite-checkbox-form .friendlies-team-invite {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    cursor: pointer;
}

.friendlies-invite-checkbox-form .friendlies-team-invite input[type="checkbox"] {
    flex: 0 0 auto;
}


/* ADDED v2026-06-08.8039: Calendar date cell stack renders weekday and month/day on separate lines. */
body.app-player .player-calendar-page .table-calendar td.calendar-date-cell .calendar-date-stack,
body.app-player .calendar-container .table-calendar td.calendar-date-cell .calendar-date-stack {
    display: block !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: left !important;
}
body.app-player .player-calendar-page .table-calendar td.calendar-date-cell .calendar-date-dow,
body.app-player .player-calendar-page .table-calendar td.calendar-date-cell .calendar-date-md,
body.app-player .calendar-container .table-calendar td.calendar-date-cell .calendar-date-dow,
body.app-player .calendar-container .table-calendar td.calendar-date-cell .calendar-date-md {
    display: block !important;
    white-space: nowrap !important;
}

/** CHANGED v2026-06-08.8047
 *  Force the Approvals attention link text itself to black on the light-orange pill.
 *  Some header/nav link rules are loaded later and otherwise keep the anchor text white.
 */
nav a.nav-link.nav-link-attention,
nav a.nav-link.nav-link-attention:link,
nav a.nav-link.nav-link-attention:visited,
nav a.nav-link.nav-link-attention:hover,
nav a.nav-link.nav-link-attention:active,
nav a.nav-link.nav-link-attention:focus {
    color: #000000 !important;
}
nav a.nav-link.nav-link-attention .nav-approval-count {
    color: #000000 !important;
}

/** CHANGED v2026-06-08.8048
 *  Dedicated Approvals attention-link foreground override.
 *  This targets the Approvals anchor class directly so inherited/header link
 *  color rules cannot keep the word "Approvals" white on the light-orange pill.
 */
header nav a.nav-link-approvals.nav-link-attention,
header nav a.nav-link-approvals.nav-link-attention:link,
header nav a.nav-link-approvals.nav-link-attention:visited,
header nav a.nav-link-approvals.nav-link-attention:hover,
header nav a.nav-link-approvals.nav-link-attention:active,
header nav a.nav-link-approvals.nav-link-attention:focus,
body.app-player header nav a.nav-link-approvals.nav-link-attention,
body.app-player header nav a.nav-link-approvals.nav-link-attention:link,
body.app-player header nav a.nav-link-approvals.nav-link-attention:visited,
body.app-player header nav a.nav-link-approvals.nav-link-attention:hover,
body.app-player header nav a.nav-link-approvals.nav-link-attention:active,
body.app-player header nav a.nav-link-approvals.nav-link-attention:focus,
body.player-surface header nav a.nav-link-approvals.nav-link-attention,
body.player-surface header nav a.nav-link-approvals.nav-link-attention:link,
body.player-surface header nav a.nav-link-approvals.nav-link-attention:visited,
body.player-surface header nav a.nav-link-approvals.nav-link-attention:hover,
body.player-surface header nav a.nav-link-approvals.nav-link-attention:active,
body.player-surface header nav a.nav-link-approvals.nav-link-attention:focus,
body.app-admin header nav a.nav-link-approvals.nav-link-attention,
body.app-admin header nav a.nav-link-approvals.nav-link-attention:link,
body.app-admin header nav a.nav-link-approvals.nav-link-attention:visited,
body.app-admin header nav a.nav-link-approvals.nav-link-attention:hover,
body.app-admin header nav a.nav-link-approvals.nav-link-attention:active,
body.app-admin header nav a.nav-link-approvals.nav-link-attention:focus,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention:link,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention:visited,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention:hover,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention:active,
body.admin-surface header nav a.nav-link-approvals.nav-link-attention:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
header nav a.nav-link-approvals.nav-link-attention .nav-approval-count {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/** CHANGED v2026-06-08.8049
 *  Remove the pending approval corner-dot marker. The light-orange cell
 *  background now carries the pending-approval state by itself.
 */
.pending-game-change-cell::after,
.pending-game-change-cell.pending-game-change-forfeit::after,
.pending-game-change-cell.pending-game-change-void::after,
.pending-game-change-cell.pending-game-change-requires-my-approval::after,
td.pending-game-change-requires-my-approval::after {
    content: none !important;
    display: none !important;
}

/** CHANGED v2026-06-08.8050
 *  Restore the circled dot only for pending approval score cells that are
 *  actionable/clickable for the logged-in player.
 */
.pending-game-change-cell.pending-game-change-requires-my-approval::after,
td.pending-game-change-requires-my-approval::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background-color: #b45309;
    box-shadow: 0 0 0 1px var(--color-background, #ffffff), 0 0 0 2px #b45309;
    pointer-events: none;
}