/*
 * TCSC Tabelloni — modern frontend.
 * Self-contained: no inline styles, no theme bleed expected.
 * Font: Geist (loaded by the plugin via wp_enqueue_style).
 */

.tcsc-bracket {
    --tcsc-accent: #b01d1f;
    --tcsc-text: #1a1a1a;
    --tcsc-text-muted: #9ca3af;
    --tcsc-text-loser: #6b7280;
    --tcsc-border: #e5e7eb;
    --tcsc-bg: #ffffff;
    --tcsc-bg-winner: #f7f9f5;
    --tcsc-bg-tab: #f3f4f6;

    max-width: 760px;
    margin: 0 auto;
    color: var(--tcsc-text);
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'tnum' 1, 'lnum' 1, 'cv11' 1;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.tcsc-bracket *,
.tcsc-bracket *::before,
.tcsc-bracket *::after { box-sizing: border-box; }

/* -------- Official PDF button -------- */
.tcsc-pdf-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
    margin: 0 0 18px;
    background: #f3f4f6;
    color: var(--tcsc-text);
    border: 1px solid var(--tcsc-border);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.tcsc-pdf-button:hover,
.tcsc-pdf-button:focus-visible {
    /* Lighter red than --tcsc-accent so the button feels approachable rather
     * than alarming and doesn't compete with the "active round" red below. */
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    text-decoration: none;
}
.tcsc-pdf-button:active { transform: translateY(1px); }
.tcsc-pdf-button__icon { font-size: 16px; }

/* -------- Tournament tabs (multi-tournament edition shortcode) -------- */
.tcsc-tabs {
    --tcsc-accent: #b01d1f;
    --tcsc-text: #1a1a1a;
    --tcsc-text-muted: #9ca3af;
    --tcsc-text-loser: #6b7280;
    --tcsc-border: #e5e7eb;
    --tcsc-bg-tab: #f3f4f6;

    max-width: 760px;
    margin: 0 auto 18px;
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--tcsc-text);
    letter-spacing: -0.01em;
}
.tcsc-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 6px;
    background: #fafafa;
    border: 1px solid var(--tcsc-border);
    border-radius: 999px;
}
.tcsc-tabs__tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 18px;
    color: var(--tcsc-text-loser);
    background: transparent;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.tcsc-tabs__tab:hover {
    /* Soft pink tint on hover for inactive tabs (consistent with the OOP PDF
     * button: lighter than the brand red so the label stays readable). */
    background: #fee2e2;
    color: #b01d1f;
    text-decoration: none;
}
.tcsc-tabs__tab.is-active {
    background: #fee2e2;
    color: #b01d1f;
    box-shadow: 0 1px 2px rgba(176, 29, 31, 0.08);
}
.tcsc-tabs__tab.is-active:hover {
    background: #fecaca;
    color: #b01d1f;
}
.tcsc-tabs__panels { /* container */ }
.tcsc-tabs__panel[hidden] { display: none; }

@media (max-width: 540px) {
    .tcsc-tabs__nav { border-radius: 12px; padding: 4px; }
    .tcsc-tabs__tab { font-size: 13px; padding: 8px 12px; flex: 1 1 calc(50% - 6px); }
}

/* -------- "← Ordini di gioco" breadcrumb -------- */
.tcsc-back-link {
    display: inline-block;
    margin: 0 0 12px;
    color: var(--tcsc-text-muted, #9ca3af);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color .15s ease;
}
.tcsc-back-link:hover {
    color: var(--tcsc-accent, #b01d1f);
    text-decoration: none;
}

/* -------- Round tabs -------- */
.tcsc-rounds {
    margin: 0 0 18px;
    border-bottom: 1px solid var(--tcsc-border);
}
.tcsc-rounds ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tcsc-rounds li { margin: 0; padding: 0; }
.tcsc-rounds a {
    display: block;
    padding: 10px 18px;
    color: var(--tcsc-text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tcsc-rounds a:hover,
.tcsc-rounds a:focus-visible {
    color: var(--tcsc-text);
    background: var(--tcsc-bg-tab);
}
.tcsc-rounds .is-active a {
    color: var(--tcsc-accent);
    border-bottom-color: var(--tcsc-accent);
}
.tcsc-rounds .is-active a:hover { background: transparent; }

/* -------- Matches list -------- */
.tcsc-matches {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tcsc-match {
    border-bottom: 1px solid var(--tcsc-border);
    padding: 6px 0;
}
.tcsc-match:first-child { border-top: 1px solid var(--tcsc-border); }

/* -------- Player rows -------- */
.tcsc-player {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 36px 36px 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--tcsc-text-loser);
    border-radius: 6px;
}
.tcsc-player.is-winner {
    color: var(--tcsc-text);
    background: var(--tcsc-bg-winner);
}

.tcsc-flag {
    font-size: 20px;
    line-height: 1;
    text-align: center;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.tcsc-flag--inline {
    display: inline-block;
    font-size: 1em;
    margin-right: 1px;
    text-align: left;
    width: auto;
}

/* Doubles: hide the dedicated flag column; flags are inline within the name. */
.tcsc-bracket[data-doubles="1"] .tcsc-player {
    grid-template-columns: minmax(0, 1fr) 36px 36px 36px;
}
.tcsc-bracket[data-doubles="1"] .tcsc-player > .tcsc-flag:not(.tcsc-flag--inline) {
    display: none;
}
.tcsc-flag-fallback {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--tcsc-text-muted);
    border: 1px solid var(--tcsc-border);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: inherit;
}

.tcsc-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}
.tcsc-player.is-winner .tcsc-name { font-weight: 600; }

.tcsc-seed {
    color: var(--tcsc-text-muted);
    font-weight: 500;
    font-size: 0.85em;
    margin-left: 2px;
}
.tcsc-empty { color: var(--tcsc-text-muted); }

.tcsc-tag {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: 1px;
    background: #f3f4f6;
    color: var(--tcsc-text-loser);
    border: 1px solid var(--tcsc-border);
}
.tcsc-tag--ret {
    color: #b45309;
    background: #fef3c7;
    border-color: #fcd34d;
}

.tcsc-score--wo {
    color: var(--tcsc-accent);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant: small-caps;
}

.tcsc-score {
    text-align: center;
    color: var(--tcsc-text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 15px;
    position: relative;
}
.tcsc-player.is-winner .tcsc-score {
    color: var(--tcsc-text);
    font-weight: 600;
}
.tcsc-score sup {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--tcsc-text-muted);
    margin-left: 1px;
    top: -0.5em;
}

/* -------- Mobile -------- */
@media (max-width: 540px) {
    .tcsc-bracket { font-size: 14px; }
    .tcsc-rounds a { padding: 9px 12px; font-size: 12px; }
    .tcsc-player {
        grid-template-columns: 24px minmax(0, 1fr) 30px 30px 30px;
        gap: 6px;
        padding: 7px 8px;
    }
    .tcsc-bracket[data-doubles="1"] .tcsc-player {
        grid-template-columns: minmax(0, 1fr) 30px 30px 30px;
    }
    .tcsc-flag { font-size: 17px; }
    .tcsc-score { font-size: 14px; }
}

/* -------- Print -------- */
@media print {
    .tcsc-bracket { font-size: 12px; }
    .tcsc-player { padding: 4px 6px; }
    .tcsc-rounds, .tcsc-rounds * { display: none; }
}

/* =====================================================
 * Order of Play (OOP) — frontend
 * =================================================== */

.tcsc-oop {
    --tcsc-accent: #b01d1f;
    --tcsc-text: #1a1a1a;
    --tcsc-text-muted: #9ca3af;
    --tcsc-text-loser: #6b7280;
    --tcsc-border: #e5e7eb;
    --tcsc-bg-tab: #f3f4f6;
    --tcsc-bg-done: #f3f4f6;
    --tcsc-live: #65a30d;
    --tcsc-live-bg: #ecfccb;

    max-width: 1100px;
    margin: 0 auto;
    color: var(--tcsc-text);
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.tcsc-oop *,
.tcsc-oop *::before,
.tcsc-oop *::after { box-sizing: border-box; }

/* Defensive resets against theme bleed (link underline, dashed borders). */
.tcsc-oop a,
.tcsc-oop a:hover,
.tcsc-oop a:focus,
.tcsc-oop a:visited {
    text-decoration: none;
    border: none;
    box-shadow: none;
}
.tcsc-oop .tcsc-oop__match,
.tcsc-oop .tcsc-pdf-button {
    /* Theme often draws dashed underlines on inline links — kill it. */
    background-image: none !important;
    text-decoration: none !important;
}

.tcsc-oop--empty { padding: 24px; text-align: center; color: var(--tcsc-text-muted); }

/* Header / date picker */
.tcsc-oop__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.tcsc-oop__date-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.tcsc-oop__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--tcsc-bg-tab);
    color: var(--tcsc-text);
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.tcsc-oop__nav:hover { background: var(--tcsc-accent); color: #fff; }
.tcsc-oop__nav--disabled { opacity: 0.35; pointer-events: none; }
.tcsc-oop__date-select {
    flex: 1;
    text-align: center;
    text-align-last: center;
    border: 1px solid var(--tcsc-border);
    border-radius: 8px;
    padding: 10px 32px 10px 14px;
    background: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--tcsc-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%236b7280' d='M3 4.5l3 3 3-3z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    text-transform: capitalize;
    letter-spacing: -0.01em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tcsc-oop__date-select:hover { border-color: var(--tcsc-accent); }
.tcsc-oop__date-select:focus { outline: none; border-color: var(--tcsc-accent); box-shadow: 0 0 0 3px rgba(176, 29, 31, .12); }
.tcsc-oop__generated {
    font-size: 12px;
    color: var(--tcsc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Live indicator pulse dot — kept for the per-card LIVE badge after the
 * "Adesso in campo" header banner was removed (the badge is enough). */
.tcsc-oop__live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #65a30d;
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 0 rgba(101, 163, 13, 0.7);
    animation: tcsc-oop-pulse 1.6s infinite;
}
@keyframes tcsc-oop-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(101, 163, 13, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(101, 163, 13, 0); }
    100% { box-shadow: 0 0 0 0 rgba(101, 163, 13, 0); }
}

/* Filters */
.tcsc-oop__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}
.tcsc-oop__filter {
    border: 1px solid var(--tcsc-border);
    background: #fff;
    color: var(--tcsc-text-loser);
    padding: 6px 14px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tcsc-oop__filter:hover { background: var(--tcsc-bg-tab); }
.tcsc-oop__filter.is-active {
    background: var(--tcsc-accent);
    color: #fff;
    border-color: var(--tcsc-accent);
}

/* Grid: column-major flow so every "row" is a slot index. Each court contributes
 * its header + N slot cells via display:contents, which lets grid-auto-rows
 * align cards across courts at equal heights (the tallest card on a row sets
 * the row height for all the others). The PHP renderer passes
 * grid-template-rows inline ("auto" for the header row, then N x 1fr for
 * slot rows) so this is robust regardless of slot count. */
.tcsc-oop__grid {
    display: grid;
    gap: 12px;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tcsc-oop__grid[data-courts="1"] { grid-template-columns: 1fr; }
.tcsc-oop__grid[data-courts="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcsc-oop__grid[data-courts="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcsc-oop__grid[data-courts="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcsc-oop__grid[data-courts="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tcsc-oop__grid[data-courts="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.tcsc-oop__court {
    display: contents;
    min-width: 0;
}
.tcsc-oop__court-name {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 0;
    background: var(--tcsc-bg-tab);
    border-radius: 6px;
    color: var(--tcsc-text-loser);
}
.tcsc-oop__empty { min-height: 60px; height: 100%; }

/* Match cards: 4-corner layout with centered players in the middle.
 * height:100% lets grid stretch every card on a row to the same height as the
 * tallest one (so doubles names + "or X" alternative don't make neighbors look
 * misaligned). */
.tcsc-oop .tcsc-oop__match {
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    min-height: 130px;
    height: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.03) !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    position: relative;
}
.tcsc-oop__match.is-clickable { cursor: pointer; }
a.tcsc-oop .tcsc-oop__match:hover,
.tcsc-oop a.tcsc-oop__match:hover {
    border-color: var(--tcsc-accent) !important;
    box-shadow: 0 2px 10px rgba(176, 29, 31, 0.12), 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}
a.tcsc-oop__match:active { transform: translateY(1px); }

/* Top corners: time tag (left) + round code badge (right) */
.tcsc-oop__match-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tcsc-text-muted);
}
.tcsc-oop__time {
    font-variant-numeric: tabular-nums;
}
.tcsc-oop__time--scheduled {
    color: var(--tcsc-text);
    font-weight: 700;
}
.tcsc-oop__code {
    background: var(--tcsc-bg-tab);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--tcsc-text-loser);
    font-size: 10.5px;
}

/* Center stack: players + thin separator */
.tcsc-oop__players {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 4px;
    gap: 4px;
}
.tcsc-oop__player {
    font-size: 14px;
    line-height: 1.35;
    width: 100%;
    color: var(--tcsc-text-loser);
    overflow-wrap: anywhere;
}
.tcsc-oop__player.is-winner {
    color: var(--tcsc-text);
    font-weight: 700;
}
.tcsc-oop__player .tcsc-oop__name {
    display: block;
}
.tcsc-oop__player .tcsc-oop__alt {
    display: block;
    color: var(--tcsc-text-muted);
    font-size: 11.5px;
    font-style: italic;
    font-weight: 400;
}
.tcsc-oop__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 4px 0;
    color: var(--tcsc-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tcsc-oop__separator::before,
.tcsc-oop__separator::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: var(--tcsc-border);
}

/* Final score line for completed matches (after the players block).
 * Small bold tabular numbers with the tiebreak as superscript. */
.tcsc-oop__score-line {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--tcsc-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tcsc-oop__score {
    font-weight: 700;
    letter-spacing: 0.02em;
}
.tcsc-oop__score sup {
    font-size: 0.7em;
    margin-left: 1px;
    vertical-align: super;
    font-weight: 600;
}
.tcsc-oop__score-flag {
    font-weight: 500;
    color: var(--tcsc-text-muted);
    margin-left: 4px;
    font-size: 0.9em;
}

.tcsc-oop__flag {
    display: inline-block;
    margin-right: 4px;
    font-size: 1em;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    vertical-align: -1px;
}
.tcsc-oop__flag--text {
    font-size: 9px;
    font-weight: 700;
    color: var(--tcsc-text-muted);
    border: 1px solid var(--tcsc-border);
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
    font-family: inherit;
    vertical-align: 1px;
}
.tcsc-oop__seed {
    color: var(--tcsc-text-muted);
    font-weight: 500;
    font-size: 0.82em;
    margin-left: 3px;
}

/* Bottom corners: state badge (left) + click-through CTA (right) */
.tcsc-oop__match-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}
.tcsc-oop__state { display: inline-flex; align-items: center; }
.tcsc-oop__cta {
    color: var(--tcsc-text-muted);
    font-size: 14px;
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
}
a.tcsc-oop__match:hover .tcsc-oop__cta {
    color: var(--tcsc-accent);
    transform: translate(2px, -2px);
}

.tcsc-oop__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 99px;
}
.tcsc-oop__badge--live {
    background: var(--tcsc-live-bg);
    color: #365314;
}
.tcsc-oop__badge--live .tcsc-oop__live-dot {
    width: 6px; height: 6px; margin: 0;
    background: var(--tcsc-live);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(101, 163, 13, 0.7);
    animation: tcsc-oop-pulse 1.6s infinite;
}
.tcsc-oop__badge--done {
    background: var(--tcsc-bg-tab);
    color: var(--tcsc-text-loser);
}

/* Card states */
.tcsc-oop__match.is-state-live {
    border-color: var(--tcsc-live);
    box-shadow: 0 0 0 1px var(--tcsc-live) inset, 0 1px 2px rgba(0,0,0,0.04);
}
.tcsc-oop__match.is-state-completed {
    background: var(--tcsc-bg-done);
    border-color: var(--tcsc-border);
}
.tcsc-oop__match.is-state-completed .tcsc-oop__player {
    color: var(--tcsc-text-loser);
}
.tcsc-oop__match.is-state-completed .tcsc-oop__time,
.tcsc-oop__match.is-state-completed .tcsc-oop__code {
    opacity: 0.7;
}

/* Filter hidden state */
.tcsc-oop__match.is-filtered-out {
    opacity: 0.15;
    pointer-events: none;
}

/* Mobile: stack courts vertically; full-width cards. Restore the per-court
 * flex column (cancel display:contents) so each court collapses to one stack. */
@media (max-width: 720px) {
    .tcsc-oop__grid,
    .tcsc-oop__grid[data-courts] {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: none !important;
    }
    .tcsc-oop__court {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .tcsc-oop__empty { display: none; }
    .tcsc-oop__current-date { font-size: 16px; }
}