/* Site-wide dark palette. Loaded after the existing responsive styles. */
:root {
  color-scheme: dark;
  --bg: #151719;
  --dark: #f5f6f7;
  --white: #202327;
  --muted: #b7bdc6;
  --line: #353a42;
  --surface: #202327;
  --surface-raised: #292d33;
  --field: #181b1f;
  --accent-text: #ff6570;
}

html, body, main, .page, #homeLatest, .soft { background: var(--bg); color: var(--dark); }
.topbar { background: #151719; border-bottom-color: var(--line); }
.hero, #page-home .hero { background: var(--bg); }
#page-home .hero { padding-bottom: 20px; }
#page-home #homeLatest { padding-top: 10px; }
#homeLatest > .latest-block:first-child .section-head h2 { margin-top: 12px; }
.brand-name, .brand-by, .nav-links a { color: #fff; }
.brand-coach, footer .brand-coach { color: var(--red) !important; }
.nav-links { background: var(--bg); }
.nav-links a:hover, .footer-grid a:hover { color: var(--accent-text) !important; }
.menu-btn { color: var(--accent-text); }

/* Listing cards, details, account panels and dialog surfaces. */
.card, .hero-panel, .form-card, .filterbar, .publish-switch, .modal-card,
.tournament-detail-card, .match-detail-card, .market-detail-card,
.club-listing, .dashboard-loggedout-card, .publish-group,
.publish-choice-card, .publish-option, .mobile-search-card,
.multi-select-menu, #page-publish .publish-simple-list {
  background: var(--surface);
  color: var(--dark);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 #ffffff08, 0 5px 18px #00000030;
}
.listing-card, .listing-grid > .card, .cards-grid > .card { border-color: var(--line); }
.listing-card:hover, .listing-grid > .card:hover, .cards-grid > .card:hover,
#homeAnnouncements .card:hover, .club-listing:hover {
  border-color: #565e6a;
  box-shadow: 0 9px 24px #00000045;
}
.modal { background: #000000b8; }
.modal-close, .mobile-search-head button { color: #fff; }
.detail-facts > div, .detail-referee-note, .contact-publication-settings,
.profile-type-summary, .registered-team-chip, .manual-source-badge {
  background: var(--field);
  color: var(--dark);
  border-color: var(--line);
}
.public-club-contact, .notification-row, .announcement-contact,
.manual-registration-footer, .listing-contact-box { border-color: var(--line); }
.public-club-logo-empty, .profile-account-avatar, .profile-account-type,
.announcement-role { background: var(--surface-raised); color: #fff; }

/* Keep original logos and posters on a neutral backing for legibility. */
img.club-logo-small, img.club-logo-detail, img.public-club-logo,
.club-profile-link img, .profile-account-logo, .tournament-poster-side {
  background: #fff;
  border-color: #535963;
}
#homeMarket .home-market-image-wrap, .market-detail-noimage {
  background: var(--field);
}
#homeMarket .home-market-image-empty, .market-detail-noimage { color: var(--muted); }

/* Dates and secondary copy remain readable on charcoal cards. */
.home-date-emphasis, .camp-date-highlight, .publish-option-copy strong,
.publish-choice-card strong, .club-profile-link { color: var(--dark); }
.hero-copy > p, #page-home .hero-copy > p, .market-date, .home-market-date,
.notification-row small, .notification-delete, .club-listing small,
.dashboard-loggedout-card p, .legal-form-note, .text-button,
.profile-account-info span:not(.profile-account-type), .inline-time-fields span,
#page-publish .publish-simple-item span { color: var(--muted); }
.detail-facts span, .camp-request-info span, .field-help, #tournamentForm label small {
  color: var(--muted); opacity: 1;
}
.eyebrow, #page-home .eyebrow, .section-head a, .publish-choice-kicker,
.publish-option-index, .publish-option.active .publish-option-copy strong,
.publish-choice-card.active .publish-choice-copy strong { color: var(--accent-text); }
.availability-line { color: #73d99b; }
.danger-text, .notification-delete:hover { color: #ff8992; }

/* Form controls, filters, native pickers and custom multiselects. */
input, select, textarea, .multi-select-trigger, .footer-language select {
  background: var(--field);
  color: var(--dark);
  border-color: #535c68;
}
input::placeholder, textarea::placeholder { color: #9fa7b2; opacity: 1; }
option, optgroup { background: var(--field); color: var(--dark); }
input[type="checkbox"], input[type="radio"], .multi-select-menu input[type="checkbox"] {
  accent-color: var(--red);
}
input::file-selector-button {
  background: var(--surface-raised); color: #fff;
  border: 1px solid #535c68; border-radius: 6px; padding: 6px 9px; margin-right: 10px;
}
input:autofill { box-shadow: inset 0 0 0 1000px var(--field); -webkit-text-fill-color: var(--dark); }
#authLegalWrap .auth-consent-toggle { background: var(--field) !important; border-color: #8792a1 !important; }
#authLegalWrap .auth-consent-toggle.is-checked { background: var(--red) !important; border-color: var(--red) !important; }
#authLegalWrap .auth-consent-toggle:focus-visible { outline-color: var(--accent-text) !important; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 3px;
}
.multi-select-menu .multi-select-option, .multi-select-menu .multi-check {
  background: var(--field); color: var(--dark); border-color: #6b7583;
}
.multi-select-menu .multi-check { color: transparent; }
.multi-select-menu .multi-select-option:hover, .multi-select-menu label:hover {
  background: var(--surface-raised);
}
.multi-select-menu .multi-select-option[aria-pressed="true"],
.multi-select-menu label:has(input:checked) { background: #42242b; color: #fff; }
.multi-select-menu .multi-select-option[aria-pressed="true"] .multi-check {
  background: var(--red); border-color: var(--red); color: #fff;
}

/* Secondary actions and selection states. */
.btn, .seg, .workspace-tab, .request-actions button, .card-tools button,
.announcement-choice-btn, .announcement-type-btn, .choice-btn { color: var(--dark); }
.btn-secondary, .btn-ghost, .workspace-tab, .request-actions button, .card-tools button,
.announcement-choice-btn, .announcement-type-btn, .check-pill,
#matchForm .choice-btn, #tournamentForm .choice-btn {
  background: var(--surface-raised); border-color: #535c68;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: #c90511; }
.btn-secondary:hover, .btn-ghost:hover, .card-tools button:hover { background: #363c45; }
.segmented { background: var(--field); }
.seg { background: transparent; }
.seg.active, .workspace-tab.active, .announcement-choice-btn.active,
.announcement-type-btn.active { background: #42242b; color: #fff; border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.check-pill:has(input:checked), #tournamentForm .check-pill.selected,
#matchForm .choice-btn.is-selected, #matchForm .choice-btn[aria-pressed="true"],
#tournamentForm .choice-btn.is-selected, #tournamentForm .choice-btn[aria-pressed="true"],
.publish-choice-card.active { background: #42242b; color: #fff; border-color: var(--red); }
.danger, .payment-btn.is-unpaid, .camp-status.pending {
  background: #42242b; color: #ffadb4; border-color: #a9515a;
}
.payment-btn.is-paid, .camp-status.accepted { background: #19392a; color: #95edb5; border-color: #4b9165; }
.camp-status.declined { background: var(--surface-raised); color: var(--muted); }

/* Override legacy publication selectors, including their important rules. */
#page-publish .publish-selector .publish-tab.publish-option,
#page-publish .publish-tab.publish-simple-item {
  background: var(--surface) !important; color: var(--dark) !important; border-color: var(--line) !important;
}
#page-publish .publish-selector .publish-tab.publish-option:hover,
#page-publish .publish-tab.publish-simple-item:hover { background: var(--surface-raised) !important; }
#page-publish .publish-selector .publish-tab.publish-option.active,
#page-publish .publish-tab.publish-simple-item.active { background: #42242b !important; }
#page-publish .publish-switch.five-tabs { background: var(--field) !important; }
#page-publish .publish-switch.five-tabs .publish-tab { background: var(--surface-raised) !important; color: #fff !important; }
#page-publish .publish-switch.five-tabs .publish-tab:hover { background: #363c45 !important; }
#page-publish .publish-switch.five-tabs .publish-tab.active { background: #42242b !important; box-shadow: inset 0 0 0 1px var(--red) !important; }

footer { background: #101214 !important; border-top: 1px solid var(--line); }
.toast { border: 1px solid #535c68; }
::selection { background: #81323e; color: #fff; }

/* Persistent confirmation after a public request is saved. */
.public-action-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid #96313d;
  border-radius: 16px;
  background: linear-gradient(105deg, #291318 0%, #101113 70%);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff05;
  text-align: left;
}
.public-action-confirmation-icon {
  flex: 0 0 22px;
  margin-top: 2px;
  color: #ff5869;
}
.public-action-confirmation-copy { min-width: 0; overflow-wrap: anywhere; }
.public-action-confirmation-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.5;
}
.public-action-confirmation-text {
  margin: 8px 0 0;
  color: #e9e9ed;
  font-size: 1rem;
  line-height: 1.55;
}
.public-action-confirmation:focus-visible { outline: 2px solid #ff5869; outline-offset: 4px; }
.public-action-email-status { margin: 16px 0 0; color: #b7bdc6; font-size: .875rem; line-height: 1.5; }
.public-action-email-status.is-warning {
  padding: 12px 14px;
  border-left: 3px solid #efb654;
  border-radius: 6px;
  background: #34291a;
  color: #ffe0a5;
}
#publicActionDone { margin-top: 20px; min-height: 44px; }
#publicActionForm[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: wait; }
@media (max-width: 420px) {
  .public-action-confirmation { padding: 16px; gap: 10px; }
}

/* Desktop sign-in button: compact dark pill, like the supplied reference. */
@media (min-width: 821px) and (pointer: fine) {
  #loginBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #343436;
    border-radius: 999px;
    background: linear-gradient(180deg, #232324, #131314);
    color: #fff;
    box-shadow: inset 0 1px 0 #ffffff0b, 0 2px 5px #00000028;
    font-size: .875rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
  }
  #loginBtn:hover { background: linear-gradient(180deg, #303033, #1b1b1e); border-color: #ad3642; }
  #loginBtn:focus-visible { outline: 2px solid #ff6570; outline-offset: 3px; }
}

/* Keep only the card padding beside logos; reserve room for actual ribbons. */
.status-card:not(:has(> .status-ribbon)) .club-logo-small { margin-right: 0; }
.tournament-head > div, .home-tournament-head > div,
.match-card-head > div, .home-match-head > div { min-width: 0; overflow-wrap: anywhere; }

/* Announcement titles on the left, logos at the same right edge as other cards. */
.announcement-card-top, .home-announcement-head, .announcement-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
}
.announcement-card-identity, .home-announcement-identity, .announcement-detail-identity { display: contents; }
.announcement-card-identity > div,
.home-announcement-identity > div,
.announcement-detail-identity > div {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.announcement-card-identity > img,
.home-announcement-identity > img,
.announcement-detail-identity > img {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}
/* Marketplace captions: location on the left, publication date on the right. */
.market-location, .home-market-location, .market-date, .home-market-date {
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
.market-card-caption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.market-card-caption > p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.market-card-caption .market-location, .market-card-caption .home-market-location { text-align: left; }
.market-card-caption .market-date, .market-card-caption .home-market-date { text-align: right; }
#homeMarket .market-card-caption { margin-bottom: 10px; }
.market-card-media { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.market-card-media .market-card-photo {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 0;
  min-height: 125px;
}

/* One saved profile; editing controls reveal the relevant form. */
.profile-account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 440px; }
.profile-account-actions .club-profile-link { padding: 12px 16px; border: 1px solid var(--line); text-align: center; justify-content: center; }
.profile-type-edit { width: 100%; padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: .875rem; text-align: right; text-decoration: underline; cursor: pointer; }
.profile-type-edit:hover { color: var(--accent-text); }
.profile-type-edit:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.profile-type-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-profile-fields { margin-top: 8px; }
.profile-logo-edit-row { display: flex; align-items: center; gap: 12px; min-height: 74px; }
.profile-logo-preview { width: 66px; height: 66px; flex: 0 0 66px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--field); color: var(--muted); font-size: .75rem; line-height: 1.2; text-align: center; }
.profile-logo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.profile-logo-file { flex: 1; min-width: 0; }
.profile-save-status { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.profile-save-status:empty { display: none; }
.profile-save-status.is-error { color: #ff8992; }
.profile-logo-file small { display: block; margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.profile-delete-action { width: 100%; padding: 5px 0 0; border: 0; background: none; color: #ff8992; font-size: .875rem; text-align: right; text-decoration: underline; cursor: pointer; }
.profile-delete-action:hover { color: #ffb0b6; }
.delete-profile-card p { line-height: 1.55; color: var(--muted); }
.delete-profile-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.delete-profile-actions .danger:disabled { opacity: .45; cursor: not-allowed; }

/* Written support available on every page. */
.support-widget { position: fixed; right: 20px; bottom: 20px; z-index: 90; }
.support-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 16px; border: 1px solid #3b4048; border-radius: 999px; background: #20242a; color: #fff; font-weight: 800; box-shadow: 0 12px 35px rgba(0,0,0,.34); cursor: pointer; }
.support-trigger > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; }
.support-panel { position: absolute; right: 0; bottom: 58px; width: min(360px,calc(100vw - 28px)); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #20242a; box-shadow: 0 18px 55px rgba(0,0,0,.48); }
.support-panel h3 { margin: 7px 28px 4px 0; font-size: 1.35rem; }
.support-panel > p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
.support-close { position: absolute; top: 9px; right: 12px; border: 0; background: none; color: #fff; font-size: 26px; cursor: pointer; }
.support-honeypot { position: absolute!important; left: -9999px!important; width: 1px!important; height: 1px!important; opacity: 0!important; }
.support-status { margin: 12px 0 0; color: #cfd3da; font-size: .875rem; line-height: 1.45; }
@media (max-width: 700px) {
  .profile-account-actions { width: 100%; max-width: none; }
  .profile-account-actions .btn { flex: 1 1 180px; }
  .profile-type-edit, .profile-delete-action { text-align: center; }
  .support-widget { right: 12px; bottom: 12px; }
}

/* Tournament date below its title, venue before city, availability at the bottom right. */
#homeTournaments .tournament-open, #homeCamps .camp-open { display: flex; flex-direction: column; }
.tournament-open .home-tournament-head h3,
.tournament-open .tournament-head h3 { margin-bottom: 6px; }
.tournament-card-date { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; }
.tournament-card-location { overflow-wrap: anywhere; line-height: 1.45; }
.tournament-card-footer { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 14px; }
.tournament-card-footer .tournament-card-location { margin: 0; }
.tournament-card-footer .availability-line { align-self: flex-end; margin: 0; text-align: right; }
.tournament-card.tournament-open, .tournament-card.camp-open { align-items: start; }
.tournament-card.tournament-open:not(:has(.tournament-poster-wrap)),
.tournament-card.camp-open:not(:has(.tournament-poster-wrap)) { grid-template-columns: minmax(0, 1fr); }
#homeCamps .tournament-card-location { margin: 8px 0 4px; }
#homeCamps .home-camp-date { margin: 8px 0 4px; }
.tournament-list-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.tournament-list-footer .availability-line { margin: 0 0 0 auto; text-align: right; }
@media (max-width: 760px) {
  .market-row-card > .market-card-media { order: -1; }
  .market-card-media .market-card-photo { flex: none; }
}
