/* ADDED v2026-05-28.4750
   Player-facing unified surface bridge.

   Purpose:
   - Keep player pages on one plain visual contract.
   - Preserve table readability and allow horizontal table scrolling when content
     is wider than the parent container.
   - Move player-facing layout ownership into the player theme instead of mixed.css.
*/

body.app-player,
body.player-surface {
  --app-page-max-width: var(--player-page-max-width, 980px);
  --app-page-pad-inline: var(--player-page-pad-inline, clamp(0.75rem, 2.4vw, 1.4rem));
  --app-page-pad-block: var(--player-page-pad-block, clamp(0.65rem, 1.8vw, 1.15rem));
  --app-gap-xs: var(--player-gap-xs, 0.25rem);
  --app-gap-sm: var(--player-gap-sm, 0.45rem);
  --app-gap-md: var(--player-gap-md, 0.75rem);
  --app-gap-lg: var(--player-gap-lg, 1rem);
  --app-radius-sm: var(--player-radius-sm, 0.45rem);
  --app-radius-md: var(--player-radius-md, 0.7rem);
  --app-radius-lg: var(--player-radius-lg, 1rem);
  --app-border: var(--player-border, #d0d7de);
  --app-border-soft: var(--player-border-soft, #e5e7eb);
  --app-bg: var(--player-bg, #f6f8fa);
  --app-surface: var(--player-surface, #fff);
  --app-surface-muted: var(--player-surface-muted, #f8fafc);
  --app-text: var(--player-text, #111827);
  --app-muted: var(--player-muted, #4b5563);
  --app-link: var(--player-link, #0645d9);
  background: var(--app-bg);
  color: var(--app-text);
  overflow-x: hidden;
}

body.app-player .mainbody,
body.player-surface .mainbody {
  box-sizing: border-box;
  width: min(100%, var(--app-page-max-width));
  margin-inline: auto;
  padding: var(--app-page-pad-block) var(--app-page-pad-inline);
}

body.app-player :where(.player-page-container, .player-normalized-page, .player-card, .player-panel, .ui-player-card, .ui-player-section, details.player-details-card),
body.player-surface :where(.player-page-container, .player-normalized-page, .player-card, .player-panel, .ui-player-card, .ui-player-section, details.player-details-card) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

body.app-player :where(.table-container, .stats-table-container, .matches-pool-table-wrap, .ui-table-container, .ui-player-table-wrap, .component-player-table-scroll, .component-player-scroll-x, .component-player-report-scroll, .ui-table-scroll, .table-scroll, .scroll-x),
body.player-surface :where(.table-container, .stats-table-container, .matches-pool-table-wrap, .ui-table-container, .ui-player-table-wrap, .component-player-table-scroll, .component-player-scroll-x, .component-player-report-scroll, .ui-table-scroll, .table-scroll, .scroll-x) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

body.app-player :where(table, .ui-responsive-data-table),
body.player-surface :where(table, .ui-responsive-data-table) {
  border-collapse: collapse;
  table-layout: auto;
}

body.app-player :where(th, td),
body.player-surface :where(th, td) {
  vertical-align: top;
}

body.app-player :where(input, select, textarea, button),
body.player-surface :where(input, select, textarea, button) {
  box-sizing: border-box;
  max-width: 100%;
}

/* CHANGED v2026-06-09.8200: Use one stacked, bold profile-link layout on admin and player header surfaces.
 * Admin nav normalization can otherwise treat .nav-link as a horizontal pill.
 */
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 {
    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;
    border-radius: 0.45rem !important;
    line-height: 1 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-align: center !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 {
    display: block !important;
    max-width: 4.5rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 1.25rem !important; /** CHANGED v2026-06-09.8204: match main header nav link size; remove remaining compact theme override. */
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

/* CHANGED v2026-06-09.8204: Force shared header profile-name typography parity after all legacy theme bundles. */
body.app-admin header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.app-player header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.player-surface header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
}

/** CHANGED v2026-06-09.8206
 *  Profile-link nav parity: the profile first-name label uses the same base
 *  text size/weight as the main header nav links. Keep the avatar stacked
 *  above the label without promoting the name to oversized display text.
 */
body.app-admin header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.admin-surface header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.app-player header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
body.player-surface header .nav-profile-corner .nav-profile-photo-link .nav-profile-first-name,
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: var(--color-white) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

/* ADDED v2026-06-10.8264: Sitewide card title top-spacing normalization.
 * Purpose: apply the v8263 Approvals title-spacing fix to similar card-like
 * sections across player, admin, and sysadmin pages. When a bordered/card
 * section starts with a title, the title should sit near the section border
 * instead of appearing after a visible blank band. Internal row/table spacing
 * below titles is intentionally preserved.
 */
body.app-admin :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-dupr-step-card, .admin-section-card, .admin-nav-section-group, .approvals-section-group, .ui-card, .ui-panel):has(> :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title):first-child),
body.admin-surface :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-dupr-step-card, .admin-section-card, .admin-nav-section-group, .approvals-section-group, .ui-card, .ui-panel):has(> :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title):first-child),
body.app-player :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .approvals-section-group, .ui-card, .ui-panel):has(> :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title, .component-player-card-title-final, .player-card-header):first-child),
body.player-surface :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .approvals-section-group, .ui-card, .ui-panel):has(> :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title, .component-player-card-title-final, .player-card-header):first-child) {
  padding-top: 0.45rem !important;
}

body.app-admin :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-dupr-step-card, .admin-section-card, .admin-nav-section-group, .approvals-section-group, .ui-card, .ui-panel) > :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title):first-child,
body.admin-surface :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-dupr-step-card, .admin-section-card, .admin-nav-section-group, .approvals-section-group, .ui-card, .ui-panel) > :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title):first-child,
body.app-player :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .approvals-section-group, .ui-card, .ui-panel) > :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title, .component-player-card-title-final, .player-card-header):first-child,
body.player-surface :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .approvals-section-group, .ui-card, .ui-panel) > :where(h1, h2, h3, h4, .ui-card-title, .ui-panel-header, .ui-panel-title, .component-player-card-title-final, .player-card-header):first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.app-admin :where(.ui-panel) > .ui-panel-header:first-child,
body.admin-surface :where(.ui-panel) > .ui-panel-header:first-child,
body.app-player :where(.ui-panel) > .ui-panel-header:first-child,
body.player-surface :where(.ui-panel) > .ui-panel-header:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* ADDED v2026-06-10.8265: Sitewide compact section padding normalization.
 * Purpose: make bordered/card section headers use the same compact padding
 * density as the tighter row-style sections instead of leaving a large blank
 * band above/beside titles. This affects section shells only; table cells,
 * buttons, form controls, and workflow logic are unchanged.
 */
:root {
  --ui-section-compact-padding-y: 0.45rem;
  --ui-section-compact-padding-x: 0.65rem;
  --ui-section-compact-padding: var(--ui-section-compact-padding-y) var(--ui-section-compact-padding-x);
}

body.app-admin :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-panel, .admin-section, .admin-section-card, .admin-report-card, .admin-filter-panel, .admin-dashboard-card, .admin-details-card, .admin-dupr-step-card, .admin-nav-section-group, .admin-health-details, details.admin-health-details, details.admin-section, details.admin-details-section, details.admin-sysadmin-details, .ui-admin-card, .ui-admin-panel, .ui-admin-section, .ui-card, .ui-panel, .approvals-section-group),
body.admin-surface :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-panel, .admin-section, .admin-section-card, .admin-report-card, .admin-filter-panel, .admin-dashboard-card, .admin-details-card, .admin-dupr-step-card, .admin-nav-section-group, .admin-health-details, details.admin-health-details, details.admin-section, details.admin-details-section, details.admin-sysadmin-details, .ui-admin-card, .ui-admin-panel, .ui-admin-section, .ui-card, .ui-panel, .approvals-section-group),
body.app-player :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .ui-card, .ui-panel, .approvals-section-group),
body.player-surface :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .ui-card, .ui-panel, .approvals-section-group) {
  padding: var(--ui-section-compact-padding) !important;
}

body.app-admin :where(.admin-lazy-details, details.admin-health-details, details.admin-section, details.admin-details-section, details.admin-sysadmin-details) > summary,
body.admin-surface :where(.admin-lazy-details, details.admin-health-details, details.admin-section, details.admin-details-section, details.admin-sysadmin-details) > summary,
body.app-player :where(details.divborder, details.player-card, details.player-section-card) > summary,
body.player-surface :where(details.divborder, details.player-card, details.player-section-card) > summary {
  padding: var(--ui-section-compact-padding) !important;
}

body.app-admin :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-panel, .admin-section, .admin-section-card, .admin-report-card, .admin-filter-panel, .admin-dashboard-card, .admin-details-card, .admin-dupr-step-card, .admin-nav-section-group, .admin-health-details, .ui-admin-card, .ui-admin-panel, .ui-admin-section, .ui-card, .ui-panel, .approvals-section-group) > :where(h1,h2,h3,h4,.ui-card-title,.ui-panel-header,.ui-panel-title):first-child,
body.admin-surface :where(.divborder, .admin-dashboard-section, .admin-development-category, .admin-diagnostics-group, .admin-card, .admin-panel, .admin-section, .admin-section-card, .admin-report-card, .admin-filter-panel, .admin-dashboard-card, .admin-details-card, .admin-dupr-step-card, .admin-nav-section-group, .admin-health-details, .ui-admin-card, .ui-admin-panel, .ui-admin-section, .ui-card, .ui-panel, .approvals-section-group) > :where(h1,h2,h3,h4,.ui-card-title,.ui-panel-header,.ui-panel-title):first-child,
body.app-player :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .ui-card, .ui-panel, .approvals-section-group) > :where(h1,h2,h3,h4,.ui-card-title,.ui-panel-header,.ui-panel-title,.component-player-card-title-final,.player-card-header):first-child,
body.player-surface :where(.divborder, .player-section-card, .player-card, .team-profile-member-card, .calendar-team-legend, .ui-card, .ui-panel, .approvals-section-group) > :where(h1,h2,h3,h4,.ui-card-title,.ui-panel-header,.ui-panel-title,.component-player-card-title-final,.player-card-header):first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ADDED v2026-06-10.8266: Compact Sysadmin lazy-details summary rows.
 * The shared admin normalization layer loaded after the sitewide v8265 compact
 * section rules and kept sysadmin <details> summaries taller than comparable
 * player/About accordion rows. Keep the details shell intact, but remove the
 * enforced tall min-height and use the same compact row padding density.
 */
body.app-admin :where(details.admin-lazy-details, details.admin-sysadmin-details) > summary,
body.admin-surface :where(details.admin-lazy-details, details.admin-sysadmin-details) > summary {
    min-height: 0 !important;
    padding: var(--ui-section-compact-padding, 0.45rem 0.65rem) !important;
    line-height: 1.25 !important;
}

body.app-admin :where(details.admin-lazy-details, details.admin-sysadmin-details),
body.admin-surface :where(details.admin-lazy-details, details.admin-sysadmin-details) {
    padding: 0 !important;
}

/* ADDED v2026-06-10.8267: Compact Sysadmin lazy-details open-body spacing.
 * v8266 compacted the Sysadmin details summary row, but open lazy sections still
 * inherited body top padding plus default first-child margins. That made open
 * Sysadmin sections keep a visibly wider band than other compact sections.
 */
body.app-admin :where(details.admin-lazy-details.admin-sysadmin-details[open]) > .admin-lazy-details-body,
body.admin-surface :where(details.admin-lazy-details.admin-sysadmin-details[open]) > .admin-lazy-details-body {
    padding-top: 0 !important;
}

body.app-admin :where(details.admin-lazy-details.admin-sysadmin-details[open]) > .admin-lazy-details-body > :first-child,
body.admin-surface :where(details.admin-lazy-details.admin-sysadmin-details[open]) > .admin-lazy-details-body > :first-child {
    margin-top: 0 !important;
}
/* ADDED v2026-06-10.8268: Add mobile-only breathing room between the main-nav SMS/chat icon and Calendar icon.
 * Scope stays on the player main navigation app-link group so Pool-heading icons and desktop nav density are unchanged. */
@media (max-width: 720px) {
    body.app-player header nav .app-link-group-nav .js-sms-compose-link + .app-icon-link,
    body.app-player nav .app-link-group-nav .js-sms-compose-link + .app-icon-link {
        margin-left: 0.34rem !important;
    }
}

/* ADDED v2026-06-10.8274: Compact nested Facilities subsections inside Sysadmin.
 * The Facilities lazy section renders its own nested details cards. Those child
 * cards were receiving both outer card padding and summary padding, creating a
 * visibly wider band than normal compact Sysadmin sections.
 */
body.app-admin :where(details.admin-sysadmin-facilities-details) .admin-lazy-details-body > :where(details.admin-health-details, details.admin-facilities-details),
body.admin-surface :where(details.admin-sysadmin-facilities-details) .admin-lazy-details-body > :where(details.admin-health-details, details.admin-facilities-details) {
    padding: 0 !important;
    margin: 0.45rem 0 !important;
}

body.app-admin :where(details.admin-sysadmin-facilities-details) .admin-lazy-details-body > :where(details.admin-health-details, details.admin-facilities-details) > summary,
body.admin-surface :where(details.admin-sysadmin-facilities-details) .admin-lazy-details-body > :where(details.admin-health-details, details.admin-facilities-details) > summary {
    display: block;
    margin: 0 !important;
    padding: var(--ui-section-compact-padding) !important;
}

/* ADDED v2026-06-10.8275: Calendar availability shortcuts dropdown. */
.player-calendar-page .calendar-shortcuts-bar {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.36rem;
    max-width: 100%;
    margin: 0.18rem 0 0.42rem;
}

.player-calendar-page .calendar-shortcuts-label {
    font-weight: 600;
    line-height: 1.2;
}

.player-calendar-page .calendar-shortcut-select {
    min-width: min(100%, 12rem);
    max-width: 100%;
}

.player-calendar-page .calendar-shortcut-apply-button {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .player-calendar-page .calendar-shortcuts-bar {
        align-items: stretch;
    }
    .player-calendar-page .calendar-shortcuts-label {
        width: 100%;
    }
    .player-calendar-page .calendar-shortcut-select {
        flex: 1 1 11rem;
    }
}

/* ADDED v2026-06-10.8280: Add Changelog Entry Page input displays uppercase. */
#sysadmin-add-changelog table.admin-changelog-entry-table-direct input[data-changelog-page-input],
table.admin-changelog-entry-table input[data-changelog-page-input] {
  text-transform: uppercase !important;
}

/* ADDED v2026-06-10.8286: Calendar team identity colours now support variable-size rosters. */
.calendar-player-color {
    --calendar-player-color: #cccccc;
}
.table-calendar .calendar-clickable-cell > .calendar-player-band {
    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: 1.1 !important;
    background-color: var(--color-white) !important;
}
.table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
.calendar-team-legend-swatch.calendar-player-color.is-available {
    background-color: var(--calendar-player-color) !important;
}
.calendar-overlap .calendar-player-band.is-available {
    filter: saturate(1.18) brightness(0.98) contrast(1.04);
    box-shadow: inset 0 0 0 1px var(--color-white);
    font-weight: 600;
}
.calendar-container .calendar-team-legend-players-cell {
    white-space: normal !important;
}
.calendar-container .calendar-team-legend-players-cell .calendar-team-legend-player {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 0.7rem !important;
    white-space: nowrap !important;
}



/* ADDED v2026-06-10.8289: Keep variable-size Calendar team legend in true table layout with vertically aligned roster columns. */
.calendar-team-legend.calendar-team-legend-table {
    display: table;
    border-collapse: collapse;
}
.calendar-team-legend-table .calendar-team-legend-line {
    display: table-row;
}
.calendar-team-legend-table .calendar-team-legend-team-cell,
.calendar-team-legend-table .calendar-team-legend-player-cell {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
.calendar-team-legend-table .calendar-team-legend-player-cell-empty {
    min-width: 8rem;
}


/* CHANGED v2026-06-10.8290: Calendar hour headers use left-aligned am/pm labels. */
.table-calendar th.calendar-hour-header {
    text-align: left !important;
    padding-left: 0.2rem !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
}
.table-calendar th.calendar-hour-header .calendar-hour-header-label {
    display: inline-block !important;
    line-height: 1.1 !important;
}


/* ADDED v2026-06-10.8291: make Calendar 2+ overlap visible after variable team/player bands. */
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell.calendar-overlap {
    position: relative !important;
    background: var(--calendar-overlap-bg, #edf0f2) !important;
    background-color: var(--calendar-overlap-bg, #edf0f2) !important;
    box-shadow:
        inset 0 0 0 2px var(--calendar-overlap-outline, #4a4a4a),
        0 0 4px rgba(74, 74, 74, 0.35) !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after {
    content: "2+" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 9 !important;
    min-width: 1.35rem !important;
    height: 1rem !important;
    padding: 0 0.25rem !important;
    border: 1px solid var(--calendar-overlap-outline, #4a4a4a) !important;
    border-radius: 999px !important;
    background: var(--color-white, #fff) !important;
    color: var(--color-text, #111) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available) {
    background: transparent !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available {
    filter: saturate(1.2) brightness(0.98) contrast(1.04);
    box-shadow: inset 0 0 0 1px var(--color-white, #fff);
}
@media (prefers-color-scheme: dark) {
    .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell.calendar-overlap {
        background: var(--calendar-overlap-bg-dark, #2f3338) !important;
        background-color: var(--calendar-overlap-bg-dark, #2f3338) !important;
        box-shadow:
            inset 0 0 0 2px var(--calendar-overlap-outline-dark, #8f969e),
            0 0 4px rgba(143, 150, 158, 0.45) !important;
    }
    .table-calendar .calendar-clickable-cell.calendar-overlap::after,
    .table-calendar td.calendar-clickable-cell.calendar-overlap::after {
        border-color: var(--calendar-overlap-outline-dark, #8f969e) !important;
        background: #1f2328 !important;
        color: #f2f4f6 !important;
    }
}


/* ADDED v2026-06-10.8292: Calendar 2+ overlap uses a real DOM badge and strong visible cell treatment. */
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell.calendar-overlap {
    position: relative !important;
    background-color: #eef1f4 !important;
    outline: 2px solid #2f3a45 !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 2px #2f3a45, 0 0 0 1px rgba(47, 58, 69, 0.25) !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after {
    content: none !important;
    display: none !important;
}
.table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 30 !important;
    min-width: 1.45rem !important;
    height: 1.1rem !important;
    padding: 0 0.25rem !important;
    border: 1px solid #2f3a45 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available) {
    background-color: transparent !important;
}
@media (prefers-color-scheme: dark) {
    .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell.calendar-overlap {
        background-color: #2f3338 !important;
        outline-color: #aeb4bb !important;
        box-shadow: inset 0 0 0 2px #aeb4bb, 0 0 0 1px rgba(174, 180, 187, 0.35) !important;
    }
    .table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
    .table-calendar td.calendar-clickable-cell > .calendar-overlap-badge {
        border-color: #aeb4bb !important;
        background: #1f2328 !important;
        color: #f2f4f6 !important;
    }
}

/* CHANGED v2026-06-10.8293: Calendar overlap is a highlighted/clickable cell state; no literal 2+ badge. */
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell.calendar-overlap {
    position: relative !important;
    cursor: pointer !important;
    background: var(--calendar-overlap-bg, #edf0f2) !important;
    background-color: var(--calendar-overlap-bg, #edf0f2) !important;
    box-shadow: inset 0 0 0 2px var(--calendar-overlap-outline, #4a4a4a) !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-badge {
    content: none !important;
    display: none !important;
}
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available) {
    background: transparent !important;
    background-color: transparent !important;
}
@media (prefers-color-scheme: dark) {
    .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell.calendar-overlap {
        background: var(--calendar-overlap-bg-dark, #2f3338) !important;
        background-color: var(--calendar-overlap-bg-dark, #2f3338) !important;
        box-shadow: inset 0 0 0 2px var(--calendar-overlap-outline-dark, #8f969e) !important;
    }
}

/* CHANGED v2026-06-10.8294: Calendar overlap highlight must remain visible on desktop after variable player bands.
   Use a high-contrast selected-slot treatment without rendering a literal 2+ badge. */
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap {
    position: relative !important;
    cursor: pointer !important;
    background: #fff3bf !important;
    background-color: #fff3bf !important;
    outline: 3px solid #2f3a45 !important;
    outline-offset: -3px !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 5px #2f3a45,
        0 0 0 1px rgba(47, 58, 69, 0.28) !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 24 !important;
    border: 3px solid #2f3a45 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
body.app-player .table-calendar td.calendar-clickable-cell > .calendar-overlap-badge,
.table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-badge {
    content: none !important;
    display: none !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available) {
    background: rgba(255, 243, 191, 0.55) !important;
    background-color: rgba(255, 243, 191, 0.55) !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available {
    filter: saturate(1.32) brightness(0.96) contrast(1.08);
}
@media (prefers-color-scheme: dark) {
    body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
    body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell.calendar-overlap,
    .table-calendar .calendar-clickable-cell.calendar-overlap {
        background: #3b3420 !important;
        background-color: #3b3420 !important;
        outline-color: #f2c94c !important;
        box-shadow:
            inset 0 0 0 2px #1f2328,
            inset 0 0 0 5px #f2c94c,
            0 0 0 1px rgba(242, 201, 76, 0.35) !important;
    }
    body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
    body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
    .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
    .table-calendar .calendar-clickable-cell.calendar-overlap::before {
        border-color: #f2c94c !important;
    }
    body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
    body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
    .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
    .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available) {
        background: rgba(59, 52, 32, 0.7) !important;
        background-color: rgba(59, 52, 32, 0.7) !important;
    }
}



/* CHANGED v2026-06-10.8295: Calendar overlap highlight targets a data attribute as well as the class so desktop and mobile render the same selected-slot state. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    background: #fff0a6 !important;
    background-color: #fff0a6 !important;
    outline: 3px solid #111827 !important;
    outline-offset: -3px !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 5px #111827,
        0 0 0 1px rgba(17, 24, 39, 0.35) !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    border: 3px solid #111827 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell > .calendar-overlap-badge,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-badge {
    content: none !important;
    display: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available) {
    background: rgba(255, 240, 166, 0.72) !important;
    background-color: rgba(255, 240, 166, 0.72) !important;
}
@media (prefers-color-scheme: dark) {
    .table-calendar td.calendar-clickable-cell.calendar-overlap,
    .table-calendar .calendar-clickable-cell.calendar-overlap,
    .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
    .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
        background: #3d3414 !important;
        background-color: #3d3414 !important;
        outline-color: #f2c94c !important;
        box-shadow:
            inset 0 0 0 2px #1f2328,
            inset 0 0 0 5px #f2c94c,
            0 0 0 1px rgba(242, 201, 76, 0.35) !important;
    }
    .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
    .table-calendar .calendar-clickable-cell.calendar-overlap::before,
    .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
    .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before {
        border-color: #f2c94c !important;
    }
    .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
    .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
    .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
    .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available) {
        background: rgba(61, 52, 20, 0.74) !important;
        background-color: rgba(61, 52, 20, 0.74) !important;
    }
}


/* CHANGED v2026-06-10.8296: Calendar overlap highlight uses a non-text overlay so desktop rendering cannot lose the visible selected-slot state behind player colour bands. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight {
    display: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-overlap-highlight,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-highlight {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    border: 3px solid #111827 !important;
    background: rgba(255, 240, 166, 0.22) !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95) !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band {
    position: relative !important;
    z-index: 20 !important;
}
@media (prefers-color-scheme: dark) {
    .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-overlap-highlight,
    .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-overlap-highlight,
    .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-highlight,
    .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-highlight {
        border-color: #f2c94c !important;
        background: rgba(242, 201, 76, 0.18) !important;
        box-shadow: inset 0 0 0 2px rgba(31,35,40,0.95) !important;
    }
}

/* CHANGED v2026-06-10.8297: Restore 2+ Scheduler target and use a thin black selected-slot border. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid #000 !important;
    outline: 1px solid #000 !important;
    outline-offset: -1px !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    background: transparent !important;
    background-color: transparent !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after {
    content: none !important;
    display: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight {
    display: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band {
    position: relative !important;
    z-index: 20 !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    z-index: 250 !important;
    width: auto !important;
    min-width: 1.45rem !important;
    height: 1.1rem !important;
    padding: 0 0.25rem !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
    touch-action: manipulation !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge:hover,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge:hover,
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge:focus-visible,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 1px !important;
}
@media (max-width: 700px) {
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
}


/* CHANGED v2026-06-10.8299: Make Calendar schedulable-cell border very thin and show the Scheduler clock glyph target. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    border: 1px solid #000 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    min-width: 1.15rem !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
}


/* CHANGED v2026-06-10.8299: Mobile Calendar header/date sizing and thinner schedulable slot treatment. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    border-color: var(--color-table-border, #bdbdbd) !important;
    outline: 1px solid #000 !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 1000 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
@media (max-width: 700px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    body.app-player .player-calendar-page .table-calendar td.calendar-date-cell,
    body.app-player .calendar-container .table-calendar td.calendar-date-cell,
    body.app-player .player-calendar-page .table-calendar td.datepad,
    body.app-player .calendar-container .table-calendar td.datepad {
        font-size: 0.78rem !important;
        line-height: 1.02 !important;
        padding-left: 0.1rem !important;
        padding-right: 0.05rem !important;
    }
    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 {
        line-height: 1.02 !important;
    }
}


/* CHANGED v2026-06-10.8300: Calendar overlap visual cleanup.
   Use a true thin inner line instead of stacked border/outline rules, keep
   the scheduler clock as a visible upper-right hit target when a match-specific
   scheduler badge exists, and make mobile hour/date labels fit. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    border-color: var(--color-table-border, #bdbdbd) !important;
    outline: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.72) !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 2147483000 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
    touch-action: manipulation !important;
}
@media (max-width: 900px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label,
    .table-calendar th.calendar-hour-header .calendar-hour-number {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    .table-calendar td.calendar-date-cell,
    .table-calendar td.datepad {
        font-size: 0.72rem !important;
        line-height: 1.0 !important;
        padding-left: 0.05rem !important;
        padding-right: 0.05rem !important;
        white-space: normal !important;
    }
    .table-calendar td.calendar-date-cell .calendar-date-stack,
    .table-calendar td.datepad .calendar-date-stack,
    .table-calendar td.calendar-date-cell .calendar-date-dow,
    .table-calendar td.calendar-date-cell .calendar-date-md,
    .table-calendar td.datepad .calendar-date-dow,
    .table-calendar td.datepad .calendar-date-md {
        display: block !important;
        font-size: 0.72rem !important;
        line-height: 1.0 !important;
        white-space: normal !important;
    }
}


/* CHANGED v2026-06-10.8301: Calendar schedulable cells use one thin border only; disable legacy thick overlay/pseudo borders. */
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    border: 1px solid #000 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 2147483000 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    border: 1px solid #000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
    touch-action: manipulation !important;
}
@media (max-width: 900px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label,
    .table-calendar th.calendar-hour-header .calendar-hour-number {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    .table-calendar td.calendar-date-cell,
    .table-calendar td.datepad {
        font-size: 0.72rem !important;
        line-height: 1 !important;
        padding-left: 0.05rem !important;
        padding-right: 0.05rem !important;
        white-space: normal !important;
    }
    .table-calendar td.calendar-date-cell .calendar-date-stack,
    .table-calendar td.datepad .calendar-date-stack,
    .table-calendar td.calendar-date-cell .calendar-date-dow,
    .table-calendar td.calendar-date-cell .calendar-date-md,
    .table-calendar td.datepad .calendar-date-dow,
    .table-calendar td.datepad .calendar-date-md {
        display: block !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
        white-space: normal !important;
    }
}

/* CHANGED v2026-06-10.8302: Calendar overlap cells use a child frame for a very thin visual border; TD borders/legacy overlays are neutralized. */
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid var(--color-table-border, #bdbdbd) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell > .calendar-overlap-frame {
    display: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-overlap-frame,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-overlap-frame {
    display: block !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: 180 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    left: auto !important;
    z-index: 500 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    border: 1px solid rgba(0,0,0,0.75) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.20) !important;
    touch-action: manipulation !important;
}
@media (max-width: 900px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label,
    .table-calendar th.calendar-hour-header .calendar-hour-number {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    .table-calendar td.calendar-date-cell,
    .table-calendar td.datepad {
        font-size: 0.68rem !important;
        line-height: 0.98 !important;
        padding-left: 0.03rem !important;
        padding-right: 0.03rem !important;
        white-space: normal !important;
    }
    .table-calendar td.calendar-date-cell .calendar-date-stack,
    .table-calendar td.datepad .calendar-date-stack,
    .table-calendar td.calendar-date-cell .calendar-date-dow,
    .table-calendar td.calendar-date-cell .calendar-date-md,
    .table-calendar td.datepad .calendar-date-dow,
    .table-calendar td.datepad .calendar-date-md {
        display: block !important;
        font-size: 0.68rem !important;
        line-height: 0.98 !important;
        white-space: normal !important;
    }
}


/* CHANGED v2026-06-10.8303: final Calendar schedulable-slot visual reset.
   Draw only a sub-pixel inner frame, keep player colour bands flush, and keep
   the Scheduler clock as a top-right hit target when a badge exists. */
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid var(--color-table-border, #bdbdbd) !important;
    outline: 0 !important;
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.88) !important;
    background: transparent !important;
    background-color: transparent !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell > .calendar-overlap-frame {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band {
    position: relative !important;
    z-index: 20 !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available {
    box-shadow: none !important;
    border: 0 !important;
    filter: saturate(1.08) brightness(0.99) contrast(1.02) !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 2147483640 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0,0,0,0.75) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    touch-action: manipulation !important;
}
@media (max-width: 900px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label,
    .table-calendar th.calendar-hour-header .calendar-hour-number {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    .table-calendar td.calendar-date-cell,
    .table-calendar td.datepad,
    .table-calendar td.calendar-date-cell .calendar-date-stack,
    .table-calendar td.datepad .calendar-date-stack,
    .table-calendar td.calendar-date-cell .calendar-date-dow,
    .table-calendar td.calendar-date-cell .calendar-date-md,
    .table-calendar td.datepad .calendar-date-dow,
    .table-calendar td.datepad .calendar-date-md {
        font-size: 0.68rem !important;
        line-height: 0.98 !important;
        white-space: normal !important;
    }
}


/* CHANGED v2026-06-10.8304: final Calendar scheduler-cell cleanup.
   Bordered cells must always have a Scheduler clock target; draw one thin border,
   keep adjacent selected cells flush, and prevent player bands from spilling or
   creating white inset gaps inside selected cells. */
.table-calendar {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.table-calendar td.calendar-clickable-cell {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid rgba(0,0,0,0.72) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell > .calendar-overlap-frame {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body.app-player .table-calendar td.calendar-clickable-cell > .calendar-player-band,
body.app-player .table-calendar .calendar-clickable-cell > .calendar-player-band,
.table-calendar td.calendar-clickable-cell > .calendar-player-band,
.table-calendar .calendar-clickable-cell > .calendar-player-band {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background-clip: border-box !important;
}
body.app-player .table-calendar td.calendar-clickable-cell > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available {
    background-color: var(--calendar-player-color) !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    filter: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 10000 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0,0,0,0.75) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
    touch-action: manipulation !important;
}
@media (max-width: 900px) {
    .table-calendar th.calendar-hour-header {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-header-label,
    .table-calendar th.calendar-hour-header .calendar-hour-number {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .table-calendar th.calendar-hour-header .calendar-hour-ampm {
        display: none !important;
    }
    .table-calendar td.calendar-date-cell,
    .table-calendar td.datepad,
    .table-calendar td.calendar-date-cell .calendar-date-stack,
    .table-calendar td.datepad .calendar-date-stack,
    .table-calendar td.calendar-date-cell .calendar-date-dow,
    .table-calendar td.calendar-date-cell .calendar-date-md,
    .table-calendar td.datepad .calendar-date-dow,
    .table-calendar td.datepad .calendar-date-md {
        font-size: 0.68rem !important;
        line-height: 0.98 !important;
        white-space: normal !important;
    }
}



/* ADDED v8305: first-login welcome SweetAlert layout */
.player-welcome-alert-html {
  text-align: left;
}
.player-welcome-alert-html ul {
  margin: 0.75rem 0 0.75rem 1.25rem;
  padding: 0;
}
.player-welcome-alert-html li {
  margin: 0.25rem 0;
}
.player-welcome-links {
  margin: 0.85rem 0;
  font-weight: 700;
}
.player-welcome-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.6rem 0;
  text-align: left;
}
.player-welcome-check input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.swal2-popup.player-welcome-alert-popup .swal2-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* CHANGED v2026-06-11.8310: Calendar schedulable-cell highlighting must not repaint unavailable player bands.
   Only actual .is-available bands use team colours; unavailable bands remain neutral so toggling the
   logged-in player cannot appear to change another player's availability. */
body.app-player .table-calendar td.calendar-clickable-cell > .calendar-player-band:not(.is-available),
body.app-player .table-calendar .calendar-clickable-cell > .calendar-player-band:not(.is-available),
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available) {
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}
body.app-player .table-calendar td.calendar-clickable-cell > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available {
    background: var(--calendar-player-color) !important;
    background-color: var(--calendar-player-color) !important;
    filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}

/* CHANGED v2026-06-11.8311: Put Calendar schedulable outline on the actual table-cell border, not as an inset frame. */
.table-calendar {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    position: relative !important;
    cursor: pointer !important;
    border: 1px solid #000 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
}
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::before,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
body.app-player .table-calendar td.calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar .calendar-clickable-cell.calendar-overlap::after,
body.app-player .table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
body.app-player .table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell.calendar-overlap::before,
.table-calendar .calendar-clickable-cell.calendar-overlap::before,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::before,
.table-calendar td.calendar-clickable-cell.calendar-overlap::after,
.table-calendar .calendar-clickable-cell.calendar-overlap::after,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]::after,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar .calendar-clickable-cell > .calendar-overlap-highlight,
.table-calendar td.calendar-clickable-cell > .calendar-overlap-frame,
.table-calendar .calendar-clickable-cell > .calendar-overlap-frame {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    top: 1px !important;
    right: 1px !important;
    z-index: 10000 !important;
}



/* CHANGED v2026-06-11.8312: Put Calendar hover highlight on the table-cell border instead of using an inset outline. */
.table-calendar td.calendar-clickable-cell:hover,
.table-calendar .calendar-clickable-cell:hover {
    border: 1px solid #000 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap:hover,
.table-calendar .calendar-clickable-cell.calendar-overlap:hover,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]:hover,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]:hover {
    border: 1px solid #000 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}


/* CHANGED v2026-06-11.8313: Restore Calendar hover to a flush inset frame.
   The hover indicator no longer changes the actual table-cell border; it sits at the
   inside edge of the cell and touches the grid border instead of floating inward. */
.table-calendar td.calendar-clickable-cell:hover,
.table-calendar .calendar-clickable-cell:hover {
    border-color: var(--color-table-border, #bdbdbd) !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: inset 0 0 0 1px #000 !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap:hover,
.table-calendar .calendar-clickable-cell.calendar-overlap:hover,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"]:hover,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"]:hover {
    border-color: #000 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: inset 0 0 0 1px #000 !important;
}

/* CHANGED v2026-06-11.8316: Calendar availability repaint is player-scoped; keep non-available bands neutral and clock-target cells consistent. */
.table-calendar td.calendar-clickable-cell,
.table-calendar .calendar-clickable-cell {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-player-band,
.table-calendar .calendar-clickable-cell > .calendar-player-band {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background-clip: border-box !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band:not(.is-available),
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available),
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band:not(.is-available) {
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell.calendar-overlap > .calendar-player-band.is-available,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available,
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] > .calendar-player-band.is-available {
    background: var(--calendar-player-color) !important;
    background-color: var(--calendar-player-color) !important;
    filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}
.table-calendar td.calendar-clickable-cell.calendar-overlap,
.table-calendar .calendar-clickable-cell.calendar-overlap,
.table-calendar td.calendar-clickable-cell[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell[data-calendar-overlap="1"] {
    cursor: pointer !important;
}
.table-calendar td.calendar-clickable-cell:not(:has(> .calendar-scheduler-badge)).calendar-overlap,
.table-calendar .calendar-clickable-cell:not(:has(> .calendar-scheduler-badge)).calendar-overlap,
.table-calendar td.calendar-clickable-cell:not(:has(> .calendar-scheduler-badge))[data-calendar-overlap="1"],
.table-calendar .calendar-clickable-cell:not(:has(> .calendar-scheduler-badge))[data-calendar-overlap="1"] {
    border-color: var(--color-table-border, #bdbdbd) !important;
    box-shadow: none !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    left: auto !important;
    z-index: 10000 !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* v8325: remove visual extra parent container from selected Sysadmin sections */
body.app-admin :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body > :where(.ui-table-container, .table-container),
body.admin-surface :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body > :where(.ui-table-container, .table-container),
body.app-admin :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body form > :where(.ui-table-container, .table-container),
body.admin-surface :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body form > :where(.ui-table-container, .table-container) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-admin :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body,
body.admin-surface :where(details.admin-sysadmin-no-table-wrap) > .admin-lazy-details-body {
  overflow-x: auto;
}


/* v8328: hard-flatten selected Sysadmin form/table wrappers so forms do not render as extra parent containers */
body.app-admin details.admin-sysadmin-no-table-wrap > .admin-lazy-details-body > form.admin-form,
body.admin-surface details.admin-sysadmin-no-table-wrap > .admin-lazy-details-body > form.admin-form {
  display: contents !important;
}
body.app-admin details.admin-sysadmin-no-table-wrap :where(.ui-table-container, .table-container, .ui-admin-table-wrap, .ui-component-table-wrap),
body.admin-surface details.admin-sysadmin-no-table-wrap :where(.ui-table-container, .table-container, .ui-admin-table-wrap, .ui-component-table-wrap) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-admin details.admin-sysadmin-no-table-wrap table,
body.admin-surface details.admin-sysadmin-no-table-wrap table {
  margin-top: 0 !important;
}

/** ADDED v2026-06-11.8329: opt-in Calendar scheduler-state diagnostics shown only when JS appends .calendar-debug-pill (?calendarDebug=1 or ?caldebug=1). */
.table-calendar td.calendar-clickable-cell > .calendar-debug-pill,
.table-calendar .calendar-clickable-cell > .calendar-debug-pill {
    position: absolute;
    left: 1px;
    bottom: 1px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 2px);
    min-height: 12px;
    padding: 0 2px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.88);
    color: #111;
    font-size: 9px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}


/** ADDED v2026-06-11.8330: opt-in floating Calendar scheduler diagnostics panel shown only when JS creates it for ?calendarDebug=1 or ?caldebug=1. */
.calendar-debug-panel {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 9999;
    max-width: min(32rem, calc(100vw - 1.5rem));
    max-height: 45vh;
    overflow: auto;
    padding: 0.625rem;
    border: 1px solid #111;
    border-radius: 0.375rem;
    background: #fff;
    color: #111;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
    font-size: 0.75rem;
    line-height: 1.25;
}
.calendar-debug-panel pre {
    margin: 0.375rem 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
}
.calendar-debug-panel button {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* CHANGED v2026-06-11.8334: Render Calendar hover frame above player bars.
   The hover indicator is an overlay at the cell edge, above availability bands
   and below the Scheduler clock hit target. */
.table-calendar td.calendar-clickable-cell,
.table-calendar .calendar-clickable-cell {
    position: relative !important;
    isolation: isolate !important;
}
.table-calendar td.calendar-clickable-cell:hover::before,
.table-calendar .calendar-clickable-cell:hover::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 9000 !important;
    box-sizing: border-box !important;
    border: 1px solid #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
.table-calendar td.calendar-clickable-cell:hover > .calendar-player-band,
.table-calendar .calendar-clickable-cell:hover > .calendar-player-band {
    position: relative !important;
    z-index: 20 !important;
}
.table-calendar td.calendar-clickable-cell:hover > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell:hover > .calendar-scheduler-badge {
    z-index: 10000 !important;
}

/* v8335: keep Calendar Scheduler clock visible on mobile and desktop when JS/PHP resolves a schedulable slot. */
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge,
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
}
.table-calendar td.calendar-clickable-cell > .calendar-scheduler-badge[hidden],
.table-calendar .calendar-clickable-cell > .calendar-scheduler-badge[hidden] {
    display: none !important;
}

/** ADDED v2026-06-18.8961
 * Pool heading keeps only the mobile chat shortcut, with spacing after Pool X.
 * Match chat shortcuts render inline beside the opposing team instead of in the
 * absolute-positioned match action rail.
 */
.matches-pool-heading-cell .app-link-group-pool {
    margin-left: .45rem !important;
    vertical-align: middle !important;
}
.matches-pool-heading-cell .app-link-group-pool .matches-pool-chat-link {
    margin-left: .15rem !important;
}
body.app-player .matches-table.match-layout-table .matches-inline-chat-link {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-left: .35rem !important;
    vertical-align: middle !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 .12rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
@media screen and (max-width: 768px) {
    .matches-pool-heading-cell .app-link-group-pool .matches-pool-chat-link.mobileonly,
    body.app-player .matches-table.match-layout-table .matches-inline-chat-link.mobileonly {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
@media screen and (min-width: 769px) {
    .matches-pool-heading-cell .app-link-group-pool .matches-pool-chat-link.mobileonly,
    body.app-player .matches-table.match-layout-table .matches-inline-chat-link.mobileonly {
        display: none !important;
    }
}


/** ADDED v2026-06-18.8963
 * Keep the match chat icon horizontally attached to Player 2's name instead of
 * wrapping onto its own line.
 */
body.app-player .matches-table.match-layout-table .matches-team-player2-with-chat {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: .35rem !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}
body.app-player .matches-table.match-layout-table .matches-team-player2-with-chat .matches-inline-chat-link {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
}

/** ADDED v2026-06-18.8965
 * Prevent individual player names from wrapping when the mobile chat shortcut is
 * appended after Player 2. The icon may wrap if needed, but the name itself
 * stays intact.
 */
body.app-player .matches-table.match-layout-table .matches-team-player2-with-chat > a,
body.app-player .matches-table.match-layout-table .matches-team-player2-with-chat .player-link,
body.app-player .matches-table.match-layout-table .matches-team-player2-with-chat .component-player-link {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

/** ADDED v2026-06-18.8966
 * Keep the full opposing team and mobile chat shortcut together on one line
 * where space allows. This is limited to match rows that append the chat icon.
 */
body.app-player .matches-table.match-layout-table .component-team-members--with-chat {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    max-width: none !important;
}
body.app-player .matches-table.match-layout-table .component-team-members--with-chat > a,
body.app-player .matches-table.match-layout-table .component-team-members--with-chat .team-pair-separator,
body.app-player .matches-table.match-layout-table .component-team-members--with-chat .matches-team-player2-with-chat,
body.app-player .matches-table.match-layout-table .component-team-members--with-chat .matches-team-player2-with-chat > a,
body.app-player .matches-table.match-layout-table .component-team-members--with-chat .matches-inline-chat-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}


/* ADDED v11012: shared visible footer rules and compact player footer spacing. */
.app-page-footer {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0;
  text-align: center;
}
.app-page-footer-rule {
  display: block !important;
  width: 100%;
  margin: 0.45rem 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.28;
}
.app-page-footer-text { margin: 0; padding: 0; }
body.app-player .app-page-footer,
body.player-surface .app-page-footer { margin-top: 0.35rem; }
body.app-player main.mainbody,
body.player-surface main.mainbody { padding-bottom: 0.35rem !important; }