/* ── Brand palette ───────────────────────────────────────────────────────── */

:root {
    --global-palette1: #105e8d;
    --global-palette2: #082f47;
    --global-palette3: #f9dc04;
    --global-palette4: #fdc300;
    --global-palette5: #101010;
    --global-palette6: #b4b4b4;
    --global-palette7: #e4eef4;
    --global-palette8: #f0f0f0;
    --global-palette9: #ffffff;

    /* Bootstrap overrides */
    --bs-primary:           var(--global-palette1);
    --bs-primary-rgb:       16, 94, 141;
    --bs-link-color:        var(--global-palette1);
    --bs-link-hover-color:  var(--global-palette2);
}

.btn-primary {
    --bs-btn-bg:                 var(--global-palette1);
    --bs-btn-border-color:       var(--global-palette1);
    --bs-btn-hover-bg:           var(--global-palette2);
    --bs-btn-hover-border-color: var(--global-palette2);
    --bs-btn-active-bg:          var(--global-palette2);
    --bs-btn-active-border-color:var(--global-palette2);
    --bs-btn-disabled-bg:        var(--global-palette1);
    --bs-btn-disabled-border-color:var(--global-palette1);
}

.btn-outline-primary {
    --bs-btn-color:              var(--global-palette1);
    --bs-btn-border-color:       var(--global-palette1);
    --bs-btn-hover-bg:           var(--global-palette1);
    --bs-btn-hover-border-color: var(--global-palette1);
    --bs-btn-active-bg:          var(--global-palette1);
    --bs-btn-active-border-color:var(--global-palette1);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    font-size: 0.9rem;
}

main {
    flex: 1;
}

/* ── Filter sidebar collapse (mobile) ───────────────────────────────────── */

@media (min-width: 1200px) {
    #filter-collapse {
        display: block !important;
    }
}

/* Below xl, the collapse really does close — with no body showing, the
   header is the whole visible card, so its bottom corners should round out
   to match .card instead of staying flat as if content followed. Open, it
   stays flat-topped-only like today since the body sits right below it. */
@media (max-width: 1199.98px) {
    .filters-card-header:has(.filter-toggle-btn[aria-expanded="false"]) {
        border-radius: 0.5rem;
    }
}

.filter-toggle-btn {
    color: inherit !important;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
}

.filter-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: rgba(255,255,255,.6);
}

.filter-toggle-btn[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg);
}

/* Same navy/groc branded header used for competition/group blocks elsewhere
   (see .comp-block-header) — replaces the plain white Bootstrap card-header
   this used to have. */
.filters-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--global-palette2);
    border-radius: 0.5rem 0.5rem 0 0;
    color: var(--global-palette7);
}

/* Only the funnel icon stays gold — the "Filtres" label itself reads better
   in the same off-white already used for header text on navy elsewhere
   (.comp-block-title, .comp-group-section-name). */
.filters-card-header .bi-funnel {
    color: var(--global-palette4);
}

#filter-sidebar-summary {
    color: rgba(255,255,255,.65);
}

.filters-card-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background .15s;
}

.filters-card-refresh:hover {
    background: rgba(255,255,255,.28);
}

/* ── Navbar (old classes removed — see new .navbar-main below) ───────────── */

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 0.75rem 1rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

/* ── Per-competition blocks ──────────────────────────────────────────────── */

.comp-block {
    overflow: hidden;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.comp-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--global-palette2);
    border-radius: 0.5rem 0.5rem 0 0;
}

.comp-block-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.comp-block-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--global-palette7);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Subtle inline search for the crest grid below — sits right next to the
   competition name rather than as its own bar, since it's a secondary
   action most visits never need. Only rendered when the full browsable
   grid is showing (not once a team is already picked). */
.comp-team-search {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    padding: 0.1rem 0.1rem 0.1rem 0.35rem;
    border-bottom: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.65);
    flex-shrink: 0;
}

.comp-team-search svg { flex-shrink: 0; opacity: 0.75; }

.comp-team-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.78rem;
    width: 130px;
    color: #fff;
    padding: 0.1rem 0;
}

.comp-team-search-input::placeholder { color: rgba(255,255,255,.5); }

.comp-team-filter-empty {
    padding: 0.75rem;
    font-size: 0.82rem;
    color: #8a9bb0;
    text-align: center;
}

@media (max-width: 576px) {
    .comp-block-title-wrap { flex-wrap: wrap; row-gap: 0.3rem; }
    .comp-team-search { margin-left: 0; flex-basis: 100%; }
}

.comp-block-season {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--global-palette2);
    background: var(--global-palette4);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.comp-block-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background .15s;
}

.comp-block-share:hover {
    background: rgba(255,255,255,.28);
}

.comp-block-share.is-copied {
    background: rgba(40,167,69,.25);
    color: #1e7e34;
}

.comp-tabs {
    display: flex;
    gap: 0.1rem;
    flex-shrink: 0;
}

.comp-tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: rgba(8,47,71,0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}

.comp-tab-btn:hover {
    background: rgba(8,47,71,0.08);
    color: var(--global-palette2);
}

.comp-tab-btn--active {
    background: var(--global-palette2);
    color: var(--global-palette4);
}

.comp-tab-btn--active:hover {
    background: var(--global-palette2);
    color: var(--global-palette4);
}

.comp-tab-pane {
    /* panes shown/hidden via d-none; no layout needed */
}

.btn-link-plain {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--global-palette2);
    text-decoration: none;
}

.btn-link-plain:hover {
    color: var(--global-palette2);
    text-decoration: underline;
}

/* ── Per-group sections within a competition block ───────────────────────── */

.comp-group-section--not-first {
    border-top: 2px solid #c9dff0;
}

/* Competition-level stats tabs (Gols, etc.) sit between the team filter row
   and the per-group Calendari/Classificació sections. */
.comp-stats-section {
    border-top: 2px solid #c9dff0;
}

/* "Rànquings de la competició" label — .comp-group-section-name is shared
   with the per-group toggle (light text on a navy .comp-group-toggle
   background there), but this header has no navy wrapper, so the same
   palette7 color against the light #f4f8fb .comp-group-section-header
   background was nearly unreadable. Scoped override, doesn't touch the
   per-group name styling. */
.comp-stats-section .comp-group-section-name {
    color: #5b6b76;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

/* Estadístiques/Plantilla start unmarked (no default-active tab — see
   openTipo in app.js) and toggle open/closed independently; give the
   unmarked state a visible pill instead of blending into the header, using
   the same palette7/palette1 pairing .classif-filter-club already uses for
   "Veure el Club". The active tab keeps its existing navy/gold look. */
.comp-stats-section .comp-tab-btn:not(.comp-tab-btn--active) {
    background: var(--global-palette7);
    color: var(--global-palette1);
    border-radius: 999px;
}

.comp-stats-section .comp-tab-btn:not(.comp-tab-btn--active):hover {
    background: var(--global-palette1);
    color: #fff;
}

/* Close CTA on the Estadístiques/Plantilla panel itself — top-right corner,
   same treatment as a modal's own close button — rather than on the chip
   that opened it. Clicking it unmarks the chip (see the
   .comp-stats-pane-close handler in app.js). */
.comp-stats-pane {
    position: relative;
    padding: 0.75rem 2.25rem 0.75rem 0.75rem;
}

.comp-stats-pane-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--global-palette7);
    color: var(--global-palette1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.comp-stats-pane-close:hover {
    background: var(--global-palette1);
    color: #fff;
}

@keyframes group-highlight {
    0%   { background: rgba(253,195,0,0.22); }
    100% { background: transparent; }
}

.comp-group-section--highlight {
    animation: group-highlight 1.8s ease-out forwards;
}

.match-item--highlight {
    animation: group-highlight 2.4s ease-out forwards;
}

.comp-group-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    background: #f4f8fb;
    border-bottom: 1px solid #e2eef6;
}

/* Tabs + icon actions share the same row as the group/team name (right-
   aligned) rather than a dedicated row below it — margin-left:auto keeps it
   pinned to the right edge both when it fits alongside the name and when it
   wraps to its own line on narrow screens. */
.comp-group-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    margin-left: auto;
}

.comp-group-icons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.comp-group-section-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--global-palette2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.comp-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    /*background: var(--global-palette1);*/
    color: var(--global-palette1);
}

.comp-group-toggle:hover .comp-group-section-name,
.comp-group-toggle:hover .comp-group-team-name {
    color: var(--global-palette1);
}

/* Once a team filter chip pins a group down to one team, its name stacks
   above the team name (two lines) instead of squeezing both onto one row —
   with the calendar-sync icon and favorite star (see below) after them. */
.comp-group-name-stack {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
    min-width: 0;
}

.comp-group-team-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--global-palette4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Calendar-sync icon next to a group's name ───────────────────────────
   Only rendered once a team filter chip pins the group down to one team —
   a separate icon-only action, same treatment as .comp-group-fav-btn. */
.comp-group-cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #ccdde9;
    border-radius: 50%;
    background: transparent;
    color: #8a9bb0;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color .15s, border-color .15s, background .15s;
    flex-shrink: 0;
}

.comp-group-cal-btn:hover {
    color: var(--global-palette1);
    border-color: var(--global-palette1);
    background: rgba(16,94,141,.08);
}

.comp-group-chevron {
    font-size: 0.65rem;
    color: var(--global-palette2);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.comp-group-section--collapsed .comp-group-chevron {
    transform: rotate(-90deg);
}

.comp-group-section--collapsed .comp-tab-pane {
    display: none !important;
}

.comp-team-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    background: #f8fbfd;
    border-bottom: 1px solid #e2eef6;
}

.comp-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #e9ecef;
}

.comp-section-label--upcoming {
    background: #f0faf3;
    color: #157347;
}

.comp-section-label--past {
    background: #f8f9fa;
    color: #6c757d;
}

/* Hide the per-row competition name when inside a comp-block (already in header) */
.comp-block .match-meta-comp {
    display: none;
}

.comp-upcoming-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: #f8fbfd;
    border: none;
    border-bottom: 1px solid #e9ecef;
    color: #157347;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.comp-upcoming-more-btn:hover {
    background: #f0faf3;
}

/* ── Match list — same .fav-mini-header/.fav-mini-line component the home
   favourites cards use (see the "Mini match rows" section further down);
   .match-item/.match-item--clickable stay as the functional class names
   (click-to-open-modal and the notification deep-link scroll+flash both key
   off them elsewhere in app.js), extended below to also pick up the shared
   grid/tint rules whenever the shared inner markup is present. ────────────── */

.matches-list {
    overflow: hidden;
}

.match-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
    transition: background 0.08s;
    border-top: 1px solid #c9dff0;
}

/* Each side's league position, flanking the score/vs squares at the top of
   the matchup block itself (.fav-mini-line) rather than the whole card —
   local just left of centre, visitor just right of centre, both poking
   above the row. Absolutely positioned so they sit outside the grid flow
   regardless of where they fall in the DOM (see .fav-mini-line below). */
.match-pos-badge {
    position: absolute;
    top: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 16px;
    padding: 0 3px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    background: var(--global-palette1);
    color: #fff;
    z-index: 1;
}

.match-pos-badge--local {
    right: 50%;
    margin-right: 3px;
}

.match-pos-badge--visitor {
    left: 50%;
    margin-left: 3px;
}

.match-pos-badge--gold   { background: var(--global-palette4); color: var(--global-palette2); }
.match-pos-badge--silver { background: #c7ccd1; color: #2b2f33; }
.match-pos-badge--bronze { background: #cd7f32; color: #fff; }

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

/* Only a still-upcoming match opens the detail modal — a played one already
   has the acta button as its own "more detail" affordance. */
.match-item--clickable {
    cursor: pointer;
}

.match-item--clickable:hover {
    background: #f8fafc;
}

.match-item.is-favorite {
    border-left-color: var(--global-palette4);
}

/* A pinned match (single fixture, no followed team) gets its own blue accent
   instead of the favorite star's yellow one — comes after .is-favorite so it
   wins on the rare row that's both (a team you follow playing a match you
   also specifically pinned). */
.match-item.is-pinned {
    border-left-color: var(--global-palette1);
}

.match-item .match-detail-chevron {
    grid-area: chevron;
    align-self: center;
}

.match-detail-chevron {
    flex-shrink: 0;
    color: #c3cdd6;
    font-size: 0.85rem;
}

/* ── Back link (breadcrumb, top of content) ─────────────────────────────── */

.content-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.75rem;
    user-select: none;
}

.content-back-link:hover {
    color: var(--global-palette1);
}

.content-back-link .bi-chevron-left {
    font-size: 0.8rem;
}

.match-comp-header-row {
    background: #e8f0f8;
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid #c0d5e5;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global-palette1);
}

.match-subgroup-header-row {
    background: #f8f9fa;
    padding: 0.2rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.68rem;
    font-weight: 600;
    color: #495057;
    font-style: italic;
}

.match-upcoming .fav-mini-team-name {
    font-weight: 600;
}

/* Action buttons (WhatsApp/calendar/acta) share .fav-mini-acta's circular
   soft-blue treatment next to date/hora — see the "Mini match rows" section
   — but need their own gap since more than one can show at once here
   (up to 3: WhatsApp + calendar + acta), unlike the home cards' single acta
   slot. */
.fav-mini-acta {
    display: flex;
    gap: 0.25rem;
}

.result-badge {
    font-size: 1.1rem;
    font-weight: 700;
    color: #dc3545;
    white-space: nowrap;
}

.result-pending {
    font-size: 0.75rem;
    color: #adb5bd;
}

#modal-acta .modal-body {
    flex: 1;
    min-height: 0;
}

button.result-badge--acta {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

button.result-badge--acta:hover {
    color: #b02a37;
}

.competition-label {
    font-size: 0.72rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: inline-block;
}

/* ── Team cell (logo + position + name) ──────────────────────────────────── */

.team-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: default;
    max-width: 450px;
    min-width: 0;
}

@media (min-width: 1200px) {
    .team-cell { max-width: 320px; }
}

.team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.team-name {
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.15;
}

.pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #6c757d;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 2px;
}

/* Classification table only: the position moves off its own column and onto
   the crest's corner as a small ordinal tag — .team-logo-wrap reserves the
   crest's footprint even when a team has no logo, so the badge always has a
   consistent anchor point regardless. */
.team-logo-wrap {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pos-badge-corner {
    position: absolute;
    top: -3px;
    left: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    padding: 0 2px;
    border-radius: 3px;
    background: var(--global-palette1);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.pos-badge-corner--gold   { background: var(--global-palette4); color: var(--global-palette2); }
.pos-badge-corner--silver { background: #c7ccd1; color: #2b2f33; }
.pos-badge-corner--bronze { background: #cd7f32; color: #fff; }

/* Club page header: same ordinal/colour language, but sitting inline next to
   the team name instead of overlapping a crest corner. */
.pos-badge-corner--inline {
    position: static;
    top: auto;
    left: auto;
    box-shadow: none;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ── Competition picker ───────────────────────────────────────────────────── */

.comp-picker {
    position: relative;
}

.picker-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #212529;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
}

.picker-toggle:hover {
    border-color: #7aafc9;
}

.picker-toggle.active {
    border-color: #7aafc9;
    box-shadow: 0 0 0 0.2rem rgba(16, 94, 141, 0.25);
}

.picker-toggle .bi-chevron-down {
    flex-shrink: 0;
    transition: transform 0.15s;
    font-size: 0.75rem;
    color: #6c757d;
}

.picker-toggle.active .bi-chevron-down {
    transform: rotate(180deg);
}

.picker-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 340px;
    overflow-y: auto;
}

.comp-group-header {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    padding: 0.5rem 0.75rem 0.2rem;
    background: #f8f9fa;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
}

.comp-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.75rem;
    cursor: pointer;
    font-size: 0.83rem;
    transition: background 0.08s;
}

.comp-item:hover {
    background: #e8f0f8;
}

.comp-item input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #105e8d;
}

.comp-item-name {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-comp-browser {
    margin-top: 1.5rem;
}

.empty-comp-group {
    margin-bottom: 1.25rem;
}

.empty-comp-group-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global-palette6);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.empty-comp-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.empty-comp-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: var(--global-palette5);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.empty-comp-item i {
    font-size: 0.72rem;
    color: var(--global-palette1);
}

.empty-comp-item:hover {
    background: var(--global-palette7);
    border-color: var(--global-palette1);
    color: var(--global-palette1);
}

.comp-fav-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #ced4da;
    line-height: 1;
    border-radius: 0.25rem;
    transition: color 0.1s;
}

.comp-fav-btn:hover,
.comp-fav-btn.active {
    color: var(--global-palette4);
}

/* ── Club grid ────────────────────────────────────────────────────────────── */

.club-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 0.4rem;
    max-height: 490px;
    overflow-y: auto;
    padding-right: 2px;
}

.club-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.25rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
    text-align: center;
    min-height: 70px;
}

.club-tile:hover {
    border-color: #105e8d;
    background: #e8f0f8;
}

.club-tile.selected {
    border-color: #105e8d;
    background: #ddeaf5;
    box-shadow: 0 0 0 2px rgba(16, 94, 141, 0.2);
}

.club-tile-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.club-tile-icon {
    font-size: 1.4rem;
    color: #adb5bd;
}

.club-tile-name {
    font-size: 0.62rem;
    line-height: 1.25;
    color: #495057;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.club-tile.selected .club-tile-name {
    color: #0a4d73;
    font-weight: 600;
}

.club-tile-fav {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.65rem;
    color: #ced4da;
    cursor: pointer;
    line-height: 1;
    transition: color 0.1s;
    z-index: 1;
}

.club-tile-fav:hover,
.club-tile-fav.active {
    color: var(--global-palette4);
}

/* ── Chips ────────────────────────────────────────────────────────────────── */

.chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #105e8d;
    color: #fff;
    border-radius: 1rem;
    padding: 0.15rem 0.25rem 0.15rem 0.5rem;
    font-size: 0.72rem;
    max-width: 180px;
    line-height: 1.3;
}

.picker-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.picker-chip button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0 0.1rem;
    line-height: 1;
    font-size: 1rem;
    flex-shrink: 0;
}

.picker-chip button:hover {
    color: #fff;
}

.picker-chip--club {
    gap: 0.35rem;
    padding-left: 0.35rem;
}

.fav-shortcut-chip {
    border: none;
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    cursor: pointer;
    background: var(--global-palette2);
    max-width: none;
    width: 100%;
    border-radius: 0.45rem;
    align-items: flex-start;
    gap: 0.35rem;
}

.fav-shortcut-chip:hover {
    background: var(--global-palette1);
}

.fav-chip-star {
    font-size: 0.6rem;
    color: var(--global-palette4);
    flex-shrink: 0;
    margin-top: 0.18rem;
}

.fav-chip-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    text-align: left;
    font-size: 0.67rem;
    font-weight: 400;
    opacity: 0.65;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.fav-chip-season {
    font-weight: 700;
    opacity: 0.85;
    margin-right: 0.3rem;
}

.fav-chip-group {
    display: block;
    white-space: normal;
}

.fav-chip-team {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 1;
    line-height: 1.3;
    white-space: normal;
}

.chip-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Season chips ────────────────────────────────────────────────────────── */

.season-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.season-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid #ced4da;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6c757d;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.season-chip:hover {
    background: var(--global-palette7);
    border-color: var(--global-palette1);
    color: var(--global-palette1);
}

.season-chip.active {
    background: var(--global-palette1);
    border-color: var(--global-palette1);
    color: #fff;
}

/* ── Misc ────────────────────────────────────────────────────────────────── */

.btn-xs {
    font-size: 0.75rem;
}

#matches-loading {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

/* ── Classificació ────────────────────────────────────────────────────────── */

/* Visual hint that a wide table can be scrolled horizontally (e.g. classification
   tables on mobile) — shadow fades in/out at either edge only when there's more
   content to scroll toward, so it doesn't show on tables that already fit. */
.table-responsive {
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
        linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0)),
        linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
}

tr.classif-highlight {
    background-color: var(--global-palette7) !important;
    font-weight: 600;
}

tr.classif-highlight:hover {
    background-color: #d4e5f0 !important;
}

/* Same yellow-left-border mark a favourited team gets on its match rows
   (.match-item.is-favorite) — applied to the row's first cell rather than
   the <tr> itself: a <tr>'s own box-shadow/border paints underneath its
   cells' backgrounds in the table rendering model, so it stays invisible
   regardless of the value set. Independent of .classif-highlight (club-picker
   selection), which can apply to the same row at the same time. */
tr.classif-favorite td:first-child {
    box-shadow: inset 3px 0 0 0 var(--global-palette4);
}

/* ── Action buttons (WA + GCal) ──────────────────────────────────────────── */

.action-btns {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
}

.btn-wa-conv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #25D366;
    border-radius: 0.3rem;
    background: #25D366;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    padding: 0;
}

.btn-wa-conv:hover {
    background: #fff;
    color: #25D366;
}

.btn-gcal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #4285F4;
    border-radius: 0.3rem;
    background: transparent;
    color: #4285F4;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}

.btn-gcal:hover {
    background: #4285F4;
    color: #fff;
}

.btn-acta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #6c757d;
    border-radius: 0.3rem;
    background: transparent;
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    padding: 0;
}

.btn-acta:hover {
    background: #6c757d;
    color: #fff;
}


/* ── Convocatòria modal ───────────────────────────────────────────────────── */

.wa-message-preview {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', ui-monospace, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    resize: none;
    white-space: pre-wrap;
    background: #f8f9fa;
}

.wa-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.wa-image-loading {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.wa-image-preview {
    max-width: 100%;
    max-height: 480px;
    display: block;
}

/* ── Classificació filtre per equip ──────────────────────────────────────── */


.classif-filter-team-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.classif-filter-team {
    position: relative;
    width: 44px;
    height: 44px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    background: #fff;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.classif-filter-team-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 2px;
    border-radius: 50%;
    background: #39596c; /* global-palette2 blended 80% over white — solid, not transparent */
    color: var(--global-palette4);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.classif-filter-team img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.classif-filter-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #6c757d;
    pointer-events: none;
}

.classif-filter-team:not(.no-logo) .classif-filter-initials {
    display: none;
}

.classif-filter-team:hover {
    border-color: #105e8d;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    z-index: 1;
}

.classif-filter-team--sel {
    border-color: #105e8d;
    box-shadow: 0 0 0 3px rgba(16,94,141,.25);
}

.classif-filter-team--sel:hover {
    border-color: #0a4d73;
}

.classif-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}

.classif-filter-clear:hover {
    background: #e9ecef;
    color: #212529;
}

/* "Tot el grup" toggled on — same active treatment as the Calendari/
   Classificació tabs it sits next to. */
.classif-filter-clear.active {
    background: var(--global-palette2);
    border-color: var(--global-palette2);
    color: var(--global-palette4);
}

.classif-filter-clear.active:hover {
    background: var(--global-palette2);
    color: var(--global-palette4);
}

.classif-filter-club {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--global-palette1);
    background: var(--global-palette7);
    border: 1px solid var(--global-palette7);
    border-radius: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.classif-filter-club:hover {
    background: var(--global-palette1);
    color: #fff;
}

/* ── Collapsed team-filter row (once a team is picked) ───────────────────── */

.comp-team-filter-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.comp-team-filter-selected-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2eef6;
    flex-shrink: 0;
}

.comp-team-filter-selected-name {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--global-palette2);
    /* No flex-grow: on a wide desktop container this would stretch to fill
       the whole row, stranding "Canviar equip" alone at the far right with
       a big empty gap in between instead of sitting right after the name. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Veure el Club" is the primary action here (real navigation to another
   page); "Canviar equip" only resets the current selection, so it's pushed
   to the far right instead of sitting shoulder-to-shoulder with equal
   weight — same idea as the accepted design proposal for this row. */
.comp-team-filter--collapsed .classif-filter-clear {
    margin-left: auto;
}

/* ── Classificació agrupada per categoria ────────────────────────────────── */

.classif-group-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #105e8d;
    padding: 1rem 0 0.5rem;
    margin-top: 0.25rem;
    border-top: 2px solid #dee2e6;
}

.classif-group-header--first {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* ── Classificació taula estadístiques ───────────────────────────────────── */

.classif-table .classif-pts {
    border-left: 2px solid #dee2e6;
}

.classif-table .classif-stat {
    font-size: 0.78rem;
    color: #6c757d;
}

.classif-table thead .classif-stat {
    font-size: 0.7rem;
    color: #6c757d;
}

.stats-combo-sub {
    font-size: 0.68rem;
    color: #adb5bd;
    line-height: 1.1;
}

.stats-sort-th {
    cursor: pointer;
    user-select: none;
}

.stats-sort-th:hover {
    color: var(--global-palette1);
}

.stats-sort-th--active {
    font-weight: 700;
    color: var(--global-palette2);
}

/* ── Classificació sub-grups (grups dins d'una lliga) ────────────────────── */

.classif-subgroup + .classif-subgroup {
    border-top: 2px solid #dee2e6;
}

.classif-subgroup-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: #495057;
    padding: 0.3rem 0.75rem;
    letter-spacing: 0.03em;
}

/* ── Popovers (per-match: recent history, head-to-head, classificació) ──────── */

.popover-prev-match {
    --bs-popover-max-width: min(600px, 90vw);
    --bs-popover-border-color: var(--global-palette2);
}

/* .fav-mini-team-name already wraps instead of ellipsis-truncating
   everywhere (see its own rule); this popover just also top-aligns the
   crest against a wrapped two-line name instead of centring it. */
.popover-prev-match .fav-mini-team {
    align-items: flex-start;
}

.popover-prev-match .popover-header {
    background: var(--global-palette2);
    color: var(--global-palette4);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: none;
}

.popover-prev-match .popover-body {
    padding: 0.75rem 0.9rem;
}

.popover-h2h-alert {
    background: #fff8e1;
    border: 1px solid var(--global-palette4);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    color: #6b5900;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.popover-h2h-alert div + div {
    margin-top: 0.2rem;
}

.popover-team-history + .popover-team-history {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #dee2e6;
}

.popover-prev-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.popover-prev-team-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a9bb0;
}

.popover-prev-empty {
    font-size: 0.78rem;
    color: #aab6c4;
    padding: 0.2rem 0;
}

/* Filtra aquest equip / Club sit side by side as the same pill style —
   Club used to be its own icon-only circle up in .popover-prev-team-header,
   moved down here next to the filter action instead. */
.popover-team-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.popover-filter-team-btn,
.popover-prev-team-club {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--global-palette1);
    background: var(--global-palette7);
    border: 1px solid #cfe0ec;
    border-radius: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}

.popover-filter-team-btn:hover,
.popover-prev-team-club:hover {
    background: var(--global-palette1);
    color: #fff;
}

.popover-classif-compare {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #dee2e6;
}

.popover-classif-table {
    width: 100%;
    font-size: 0.72rem;
    border-collapse: collapse;
}

.popover-classif-table th {
    color: #8a9bb0;
    font-weight: 600;
    text-align: center;
    padding-bottom: 0.15rem;
}

.popover-classif-table td {
    padding: 0.15rem 0.2rem;
}


/* ── Navbar (redesign) ───────────────────────────────────────────────────── */

.navbar-main {
    background-color: var(--global-palette2);
    border-bottom: 3px solid var(--global-palette4);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-main .navbar-brand-icon {
    font-size: 1.6rem;
    color: var(--global-palette4);
    line-height: 1;
}

.navbar-main .navbar-brand-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--global-palette4);
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.navbar-main .navbar-brand-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}

.navbar-main .nav-link {
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.navbar-main .nav-link.active {
    color: var(--global-palette4);
}

#main-navbar-nav.navbar-collapse {
    padding: 0.5rem 0 0.25rem;
}

#main-navbar-nav .nav-link {
    font-size: 1.05rem;
    padding: 0.75rem 0.85rem;
}

.navbar-menu-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem 0.35rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
}

.navbar-user-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,.55);
}

.navbar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Install CTA as a small pill chip instead of a full-width list item — it's
   the same secondary entry point as before (see pwa-install.js), just
   demoted visually since the header icon button is the primary way in. */
#pwa-install-item {
    display: inline-flex;
}

.navbar-install-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.navbar-install-chip:hover {
    background: rgba(255,255,255,.25);
}

/* ── Auth Modal (redesign) ───────────────────────────────────────────────── */

.auth-modal-dialog {
    max-width: 420px;
}

.auth-modal-header {
    background: var(--global-palette2);
    padding: 1.5rem 1.5rem 1.25rem;
    position: relative;
}

.auth-modal-icon {
    font-size: 1.5rem;
    color: var(--global-palette4);
}

.auth-modal-brand {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--global-palette4);
    letter-spacing: 0.04em;
}

.auth-modal-tagline {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.03em;
}

.auth-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.auth-tabs .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--global-palette1);
    border-radius: 0.5rem;
}

.auth-tabs .nav-link.active {
    background-color: var(--global-palette1);
    color: #fff;
}

/* "Ajuda'ns a millorar" type-selector pills — icon above label, four across
   the modal's narrow (420px, shared with .auth-modal-dialog) width, so the
   label needs to stay small and wrap instead of overflowing/truncating. */
#form-feedback .btn-group label.btn {
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
    padding: 0.5rem 0.25rem;
}

#feedback-context-line {
    overflow-wrap: anywhere;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.6;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: #adb5bd;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #e9ecef;
}

/* ── Auth form fields (login/register/reset) — same floating-label +
   live-validation look as iClub's login form (see .iclub-login-field in
   iclub.css), ported here with the public app's own accent variable so the
   two independent CSS files don't need to share a stylesheet. ───────────── */
.auth-field .form-control {
    border-radius: .375rem;
    height: 3.25rem;
}
.auth-field .form-control:focus {
    border-color: var(--global-palette1);
    box-shadow: 0 0 0 1px var(--global-palette1);
}
.auth-field.form-floating > label {
    color: #6c757d;
    transition: color .15s;
}
.auth-field .form-control:focus ~ label {
    color: var(--global-palette1);
}
.auth-field.is-invalid .form-control {
    border-color: #d00e17;
}
.auth-field.is-invalid .form-control:focus {
    border-color: #d00e17;
    box-shadow: 0 0 0 1px #d00e17;
}
.auth-field.is-invalid > label,
.auth-field.is-invalid .form-control:focus ~ label {
    color: #d00e17;
}
.auth-field-error {
    display: none;
    align-items: flex-start;
    gap: .4rem;
    color: #d00e17;
    font-size: .78rem;
    margin-top: .4rem;
}
.auth-field.is-invalid + .auth-field-error { display: flex; }
.auth-field-error i { flex-shrink: 0; margin-top: .1rem; }

.auth-field-password .form-control { padding-right: 2.75rem; }
.auth-field-password { position: relative; }
.auth-toggle-password {
    position: absolute; top: 0; right: 0; height: 100%; width: 2.75rem; z-index: 5;
    border: none; background: transparent; color: #6c757d;
    display: flex; align-items: center; justify-content: center;
}
.auth-toggle-password:hover { color: var(--global-palette1); }

.auth-submit { height: 3.25rem; }

/* ── Styled confirm dialog (see FecapaCommon.confirmDialog) ────────────────
   Replaces native confirm() for destructive actions — centered icon badge +
   title + message + side-by-side buttons, SweetAlert-like. */
.fecapa-confirm-dialog { max-width: 380px; }
.fecapa-confirm-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    background: rgba(16, 94, 141, .1);
    color: var(--global-palette1);
}
.fecapa-confirm-icon--danger {
    background: rgba(220, 53, 69, .1);
    color: #dc3545;
}
.fecapa-confirm-title { font-weight: 700; }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.55rem 1rem;
    background: #fff;
    border: 1.5px solid #dadce0;
    border-radius: 0.375rem;
    color: #3c4043;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    color: #3c4043;
}

/* ── Home: Hero + Search ─────────────────────────────────────────────────── */

.home-main {
    flex: 1;
}

.home-hero {
    position: relative;
    background: linear-gradient(135deg, var(--global-palette2) 0%, var(--global-palette1) 100%);
    padding: 3rem 0 2.5rem;
}

/* Clips the oversized parallax background to the hero's own bounds without
   using overflow:hidden on .home-hero itself, which would also clip the
   search-results dropdown (it needs to be able to extend below the hero). */
.home-hero-bg-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Subtle repeating hockey-stick + puck motif instead of a stock photo — keeps the
   brand's navy/gold palette and reads as intentional rather than decorative filler.
   Real element (not ::before) so JS can transform it for the scroll parallax;
   oversized top/bottom so the translateY never reveals a blank edge. */
.home-hero-bg {
    position: absolute;
    inset: -25% 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23fdc300' stroke-width='1.5' stroke-linecap='round' opacity='0.12'%3E%3Cpath d='M10 5 L10 26 Q10 30 14 30 L20 28'/%3E%3Ccircle cx='7' cy='31' r='2' fill='%23fdc300' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 15px 15px;
    pointer-events: none;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-bg {
        transform: none !important;
    }
}

.home-hero > .container {
    position: relative;
    z-index: 1;
}

.home-hero-text {
    text-align: center;
    margin-bottom: 1.75rem;
}

.home-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--global-palette4);
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}

.home-hero-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

.home-search-wrap {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}

.home-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.home-search-icon {
    position: absolute;
    left: 1rem;
    color: var(--global-palette6);
    font-size: 1.1rem;
    pointer-events: none;
}

.home-search-input {
    width: 100%;
    border: none;
    border-radius: 0.75rem;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    font-size: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    outline: none;
    background: #fff;
}

.home-search-input:focus {
    box-shadow: 0 4px 24px rgba(0,0,0,0.22), 0 0 0 3px rgba(16,94,141,0.25);
}

/* Search results dropdown */

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 1050;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.search-result-group-label {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--global-palette6);
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.search-result-group-label:first-child {
    border-top: none;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.1s;
}

.search-result-item:hover {
    background: var(--global-palette7);
}

.search-result-subitems {
    background: #fafbfc;
    border-bottom: 1px solid #eee;
}

.search-result-subitem {
    padding: 0.4rem 0.6rem 0.4rem 2.5rem;
    gap: 0.5rem;
}

.search-result-subitem .search-result-name {
    font-size: 0.82rem;
    color: var(--global-palette6);
}

.search-result-subitem:hover .search-result-name {
    color: var(--global-palette1);
}

.search-result-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.search-result-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.badge-comp {
    background: var(--global-palette7);
    color: var(--global-palette1);
    border: 1px solid var(--global-palette1);
}

.badge-club {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.search-result-name {
    font-size: 0.88rem;
    color: var(--global-palette5);
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.search-result-fav {
    background: none;
    border: none;
    padding: 0.2rem 0.3rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #ced4da;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 0.25rem;
    transition: color 0.1s;
}

.search-result-fav:hover,
.search-result-fav.active {
    color: var(--global-palette4);
}

.search-result-empty {
    padding: 1rem;
    text-align: center;
    color: var(--global-palette6);
    font-size: 0.88rem;
}

/* ── Home: Sections ──────────────────────────────────────────────────────── */

.home-section {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    overflow: hidden;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.home-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--global-palette5);
}

.home-section-link {
    font-size: 0.8rem;
    color: var(--global-palette1);
    text-decoration: none;
    cursor: pointer;
}

.home-section-link:hover {
    text-decoration: underline;
}

.home-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

/* Favorites chips */

.fav-chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
}

.fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    transition: filter 0.15s, transform 0.1s;
    overflow: hidden;
}

.fav-chip:hover {
    filter: brightness(0.93);
    transform: translateY(-1px);
}

.fav-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.fav-chip-link:hover {
    text-decoration: none;
    color: inherit;
}

.fav-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
    background: none;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.12);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    align-self: stretch;
    transition: opacity 0.1s, background 0.1s;
}

.fav-chip-remove:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}

.fav-chip--comp {
    background: var(--global-palette7);
    color: var(--global-palette2);
    border: 1px solid #c8dde9;
}

.fav-chip--club {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.fav-chip-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* ── Favorite pair cards (home page) ────────────────────────────────────── */

.fav-pairs-list {
    padding: 1rem 1.25rem;
}

.fav-pair-card {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    margin-bottom: 1.25rem;
}

.fav-pair-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--global-palette2);
    padding: 0.6rem 1rem;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.fav-pair-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* "This whole row opens the competition/team page" hint — same affordance
   .match-detail-chevron gives on a match row, just recoloured for the dark
   header instead of a light card. */
.fav-pair-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,.45);
    font-size: 0.8rem;
}

.fav-pair-comp {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global-palette4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-pair-season {
    opacity: 0.7;
    margin-right: 0.35em;
}

.fav-pair-group {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-pair-team {
    display: block;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On the club page every card is already the same club — the competition is
   what actually tells entries apart, while the team (often just a trailing
   letter) is secondary. Flips the home favourites list's emphasis, where the
   team is the headline across different competitions. */
.fav-pair-card--club .fav-pair-comp {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--global-palette4);
}

.fav-pair-card--club .fav-pair-team {
    font-size: 0.72rem;
    font-weight: 600;
    /*color: rgba(255, 255, 255, .65);*/
}

/* A dedicated row for the icon actions, between the header and the body —
   text (header) and icons (here) used to share one row and compete for
   space, which got cramped on mobile with up to 4-5 buttons. Same dark
   background as the header, just visually separated by the divider below,
   so it still reads as part of the same header block rather than a random
   extra strip. */
.fav-pair-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--global-palette2);
    padding: 0 1rem 0.6rem;
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: -1px;
    padding-top: 0.5rem;
}

/* Decorative club badge in the header — identifies the card at a glance,
   not itself a link (the "veure club" action lives in .fav-pair-actions). */
.fav-pair-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 0.85rem;
}

.fav-pair-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    border-radius: 50%;
}

.fav-pair-club,
.fav-pair-fav,
.fav-pair-calendar,
.fav-pair-share,
.fav-pair-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background .15s, color .15s;
}

.fav-pair-club:hover,
.fav-pair-fav:hover,
.fav-pair-calendar:hover,
.fav-pair-share:hover {
    background: rgba(255,255,255,.28);
    color: #fff;
}

/* Destructive action gets its own red-tinted hover instead of the neutral
   one shared by the rest, and sits apart from them — pushed to the far
   right of the actions row while club/calendar/share stay grouped left. */
.fav-pair-remove {
    margin-left: auto;
}

.fav-pair-remove:hover {
    background: rgba(220,53,69,.45);
}

.fav-pair-share.is-copied,
.fav-pair-calendar.is-copied {
    background: rgba(40,167,69,.55);
}

.fav-pair-fav.active {
    background: var(--global-palette4);
    color: var(--global-palette2);
}

.fav-pair-body {
    display: flex;
}

.fav-pair-matches {
    width: 50%;
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-right: 1px solid #e4eef7;
    min-width: 0;
}

.fav-pair-classif {
    flex: 1;
    padding: 0.25rem 0.5rem;
    overflow-x: auto;
    min-width: 0;
}

@media (max-width: 1024px) {
    .fav-pair-body       { display: block; }
    .fav-pair-matches    { width: 100%; border-right: none; border-bottom: 1px solid #e4eef7; }
    .fav-pair-classif    { width: 100%; overflow-x: auto; }
    .fav-pairs-list      { padding: 0.75rem 0; }
}

/* The competitions-summary card on the club page has no body — it's just
   the header + action row, so it doesn't need the body's bottom rounding
   to be masked by any content underneath it. */
.fav-pair-card--summary {
    margin-bottom: 0.75rem;
}

/* Same column-then-row fill as .club-week-rest-list — down each column
   before wrapping to the next, instead of grid's row-then-column order. */
.club-comp-grid {
    columns: 320px;
    column-gap: 1rem;
}

.club-comp-grid .fav-pair-card--summary {
    break-inside: avoid;
}

@media (max-width: 576px) {
    .club-comp-grid {
        columns: 1;
    }
}

/* Grouped card — a club with more than one of its own teams in the same
   competition (e.g. Infantil A/B) gets one card instead of two near-
   identical ones. Competition name shows once, up top; each team keeps its
   own header+actions block below (the CTA row and the "Veure a
   Competicions" link are a competition+group+team pair, not competition-
   level, so they can't be hoisted up to the shared title). */
.fav-pair-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--global-palette2);
    color: var(--global-palette9);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
}

/* Single-team cards skip the white team-info row entirely (see
   fav-pair-team-block), so the "Veure a Competicions" link — which still
   exists, there's just nothing else to carry it — moves to the title itself. */
.fav-pair-group-title--link {
    text-decoration: none;
    cursor: pointer;
}

/* Team-info row: white (palette9) with blue (palette1) text, under the
   (dark navy) competition title — same header/body pairing already used for
   .comp-block-header/.comp-group-toggle on Competicions, so a card reads as
   one competition heading over its team row(s) instead of one flat block. */
.fav-pair-card--club .fav-pair-team-block .fav-pair-header {
    background: var(--global-palette9);
}

.fav-pair-card--club .fav-pair-team-block .fav-pair-team {
    color: var(--global-palette1);
}

.fav-pair-card--club .fav-pair-team-block .fav-pair-group {
    color: #6c8194;
}

.fav-pair-card--club .fav-pair-team-block .fav-pair-chevron {
    color: var(--global-palette1);
    opacity: .55;
}

/* Actions row: light blue-grey (palette7) — same tone as the "Descansen"
   chips elsewhere on this page — distinct from both the navy title above
   and the white team row it sits under/beside. The shared .fav-pair-fav/
   -calendar/-share buttons default to white icons on a translucent-white
   circle (built for the dark navy header used on Home's favourite cards),
   which disappears against this light background — recoloured to palette1
   on a tinted circle here, same pairing as the rest-chip trophy icon on
   its palette7 background. */
.fav-pair-card--club .fav-pair-team-block .fav-pair-actions {
    background: var(--global-palette7);
    border-top-color: rgba(8, 47, 71, .08);
}

.fav-pair-card--club .fav-pair-team-block .fav-pair-club,
.fav-pair-card--club .fav-pair-team-block .fav-pair-fav,
.fav-pair-card--club .fav-pair-team-block .fav-pair-calendar,
.fav-pair-card--club .fav-pair-team-block .fav-pair-share {
    background: rgba(16, 94, 141, .08);
    color: var(--global-palette1);
}

.fav-pair-card--club .fav-pair-team-block .fav-pair-club:hover,
.fav-pair-card--club .fav-pair-team-block .fav-pair-fav:hover,
.fav-pair-card--club .fav-pair-team-block .fav-pair-calendar:hover,
.fav-pair-card--club .fav-pair-team-block .fav-pair-share:hover {
    background: rgba(16, 94, 141, .16);
    color: var(--global-palette1);
}

/* Success (copied/synced) state keeps a white icon — better contrast on the
   solid green than palette1 would give. */
.fav-pair-card--club .fav-pair-team-block .fav-pair-share.is-copied,
.fav-pair-card--club .fav-pair-team-block .fav-pair-calendar.is-copied {
    color: #fff;
}

/* Restated at matching specificity to the buttons rule above — otherwise
   that rule's color would win over the base .fav-pair-fav.active gold
   state here and the favourited star would lose its navy icon. */
.fav-pair-card--club .fav-pair-team-block .fav-pair-fav.active {
    background: var(--global-palette4);
    color: var(--global-palette2);
}

.fav-pair-team-block + .fav-pair-team-block {
    border-top: 1px solid #e4eef7;
}

/* ── Club page: week-first match layout ─────────────────────────────────── */
/* Sits below the competitions summary above — one section per week
   (previous/this/next/+2), each listing one row per competition (a match,
   or "Descansa" when there's none that week), in the same competition order
   as the summary cards. No per-row action buttons here — those live once,
   in the summary card above, per pairKey. */

.club-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--global-palette2);
    margin: 1.5rem 0 0.75rem;
}

.club-week-section + .club-week-section {
    margin-top: 1.5rem;
}

.club-week-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c7a89;
    margin-bottom: 0.5rem;
}

.club-week-rows {
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.club-week-row {
    padding: 0.5rem 0.875rem;
}

.club-week-row + .club-week-row {
    border-top: 1px solid #e4eef7;
}

.club-week-row-comp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em;
    font-size: 0.72rem;
    margin-bottom: 0.3rem;
}

/* Chip treatment, same family as .club-hero-venue in the header — plain
   yellow text on the white card here read poorly (low contrast), a filled
   pill makes the competition stand out instead. */
.club-week-row-comp-name {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    color: var(--global-palette2);
    background: var(--global-palette7);
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
}

.club-week-row-comp-name i {
    color: var(--global-palette1);
}

.club-week-row-group {
    font-weight: 600;
    color: #8a97a6;
}

.club-week-row-team {
    font-weight: 600;
    color: #47535f;
}

/* Resting competitions for the week, collapsed into one compact card instead
   of a full-height .fav-mini-empty row each — a club with a dozen-plus teams
   otherwise loses most of "Properes jornades" to "Descansa" placeholders. */
.club-week-rest {
    padding: 0.65rem 0.875rem;
}

.club-week-rest-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a97a6;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.club-week-rest-header:hover,
.club-week-rest-header:focus-visible {
    color: var(--global-palette1);
}

.club-week-rest-chevron {
    transition: transform 0.15s ease;
}

.club-week-rest-header[aria-expanded="true"] .club-week-rest-chevron {
    transform: rotate(180deg);
}

.club-week-rest-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #eef2f6;
    color: #6c7a89;
    font-size: 0.68rem;
    font-weight: 700;
}

/* CSS multi-column (not grid) so items fill top-to-bottom within a column
   before wrapping to the next one — reading order down, then across —
   instead of grid's row-then-column fill. */
.club-week-rest-list {
    columns: 220px;
    column-gap: 1rem;
}

@media (max-width: 576px) {
    .club-week-rest-list {
        columns: 1;
    }
}

.club-week-rest-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    font-size: 0.72rem;
    break-inside: avoid;
    margin-bottom: 0.4rem;
}

/* Competition + team as one pill instead of a chip followed by loose
   floating text — one soft background, told apart by weight/colour instead
   of a hard two-tone split. Wraps instead of truncating (no ellipsis, no
   nowrap) so a long team name is never cut off. */
.club-week-rest-chip {
    display: inline-block;
    max-width: 100%;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    background: var(--global-palette7);
    font-weight: 700;
    white-space: normal;
    overflow-wrap: break-word;
}

.club-week-rest-chip i {
    color: var(--global-palette1);
    margin-right: 0.3rem;
}

.club-week-rest-chip-comp {
    color: var(--global-palette2);
}

.club-week-rest-chip-team {
    color: #5b6b76;
    font-weight: 600;
}

/* ── Club page header ────────────────────────────────────────────────────── */

.club-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--global-palette2);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    margin-bottom: 1.25rem;
}

.club-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
    overflow: hidden;
}

.club-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.club-hero-logo .bi-shield {
    font-size: 1.75rem;
    color: var(--global-palette4);
}

.club-hero-info {
    flex: 1;
    min-width: 0;
}

.club-hero-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.15rem;
}

/* Same chip treatment as .match-detail-summary's date/pista pills — each
   venue reads as its own small tag instead of a stacked list of plain text
   lines, and wraps onto as many rows as needed for clubs with several. */
.club-hero-venues {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.club-hero-venue {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.12);
    padding: 0.25rem 0.55rem;
    border-radius: 0.5rem;
}

.club-hero-venue i {
    color: var(--global-palette4);
}

.club-hero-venues a {
    color: var(--global-palette4);
    text-decoration: none;
}

.club-hero-venues a:hover {
    text-decoration: underline;
}

/* .fav-mini-pista-link defaults to the dark-blue brand colour, which reads
   fine on the light match-row backgrounds it's normally used on but would be
   near-invisible against this hero's own dark navy — same reasoning as the
   Maps link above already switching to yellow here. */
.club-hero-venues .fav-mini-pista-link {
    color: var(--global-palette4);
}

/* Jump links to the Resultats/Properes jornades sections below — sit on the
   page's light background (outside .club-hero, not inside it) so they don't
   get mistaken for the navy venue chips in the header above. Same solid
   navy/yellow pill already used for an "active" filter chip elsewhere
   (.classif-filter-clear.active) for a consistent branded button look. */
.club-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
}

.club-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--global-palette4);
    background: var(--global-palette2);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s;
}

.club-hero-cta:hover {
    background: var(--global-palette1);
    color: var(--global-palette4);
}

@media (max-width: 576px) {
    .club-hero {
        gap: 0.75rem;
        padding: 0.9rem 1rem;
    }
    .club-hero-logo {
        width: 52px;
        height: 52px;
    }
    .club-hero-name {
        font-size: 1.1rem;
    }
}

/* Mobile landscape: Bootstrap's .container caps at 540/720px even though the
   viewport has more room, leaving the favorites cards artificially narrow. */
@media (orientation: landscape) and (max-height: 500px) {
    .home-main > .container.py-4 {
        max-width: none;
    }
}

/* Mini match rows */

.fav-mini-match {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f5fa;
    font-size: 0.8rem;
}

/* Horizontal padding lives on the row itself (not its .fav-pair-matches/
   .matches-list parent) so the hover/tint backgrounds below reach the card's
   edges instead of stopping short with a visible gap. .match-item (the
   Competicions match list) shares this component too — see the "Match list"
   section further up — hence the extra selector. Keyed off .fav-mini-line
   (every real match row has one) rather than .fav-mini-header specifically,
   since a played-match history row (match detail modal) has no header at
   all — no jornada, no CTA — just the match line itself. */
.fav-mini-match:has(.fav-mini-line),
.match-item:has(.fav-mini-line) {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.fav-mini-match:last-child { border-bottom: none; }
.fav-mini-match--past  { color: #6c757d; }
.fav-mini-match--upcoming { font-weight: 500; }

/* Only the "real" rows (favorite cards, club page week cards) open the match
   detail modal — the same markup is reused for the read-only history rows
   inside that modal's own body, which must stay inert (no nested modal-open). */
.fav-mini-match--clickable {
    cursor: pointer;
    transition: background 0.08s;
}

/* Whole card highlights on hover — .fav-mini-match already has its own
   horizontal padding (see :has(.fav-mini-header) above), and background-color
   fills the padding box by default, so this reaches the card's edges with no
   extra margin trick needed. Same tint .fav-mini-header already carries
   permanently, so hovering just makes the match line match the band above
   it instead of introducing a second colour. */
.fav-mini-match--clickable:hover {
    background: #f8fafc;
}

.fav-mini-date {
    font-size: 0.68rem;
    color: #8a9bb0;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    min-width: 3.4rem;
    line-height: 1.3;
}

/* Wraps jornada/pista and data/hora+acta as one block, with the match itself
   in the sibling .fav-mini-line — used by buildPairCard()'s real rows (the
   read-only history rows inside the match detail modal keep the older flat
   .fav-mini-date/.fav-mini-teams markup above, unaffected by this). Carries
   the permanent tint for the whole jornada+pista+data/hora area — the same
   colour the match line only shows on hover — so it always reads as
   "context info" distinct from the (interactive) match line below, bleeding
   past .fav-mini-match's own horizontal padding to reach the card's edges
   the same way the match line's hover state does. */
.fav-mini-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: -0.3rem -0.875rem 0;
    padding: 0.3rem 0.875rem 0.35rem;
    background: #f8fafc;
    border-bottom: 1px dashed #dee2e6;
}

.fav-mini-round {
    white-space: nowrap;
    min-width: 0;
}

/* Jornada + CTA (acta/afegir al calendari) on one row. */
.fav-mini-round-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    white-space: normal;
    font-size: 0.7rem;
    color: #6c8194;
}

/* On narrow screens a long "Competició · Grup" label (.fav-mini-round) plus
   two action buttons (acta/gcal + "Seguir partit") competing for the same
   row can run out of width. Primary fix: stack the actions column (one CTA
   above the other, right-aligned) instead of side by side, freeing up most
   of the row for the label. Wrapping the label onto a second line is kept as
   a fallback for whatever's still too long even with a stacked, narrower
   actions column. */
@media (max-width: 576px) {
    .fav-mini-round {
        white-space: normal;
        overflow-wrap: break-word;
        flex: 1 1 auto;
    }
    .fav-mini-round-line {
        align-items: flex-start;
    }
    .fav-mini-round-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }
}

/* Still used by the plain-text .fav-mini-date/.fav-mini-time popover history
   rows (see popoverMiniRowHtml() in home.js/club.js) — that older flat
   markup doesn't go through .fav-mini-round-line/.fav-mini-hour at all. */
.fav-mini-time {
    color: var(--global-palette1);
}

/* Wraps .fav-mini-cta + .btn-match-pin together so .fav-mini-round-line's
   space-between still puts the jornada label on one end and both action
   buttons on the other, instead of spreading three flex children apart. */
.fav-mini-round-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.fav-mini-cta {
    flex-shrink: 0;
}
.fav-mini-cta .btn-acta,
.fav-mini-cta .btn-gcal {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    height: 22px;
    padding: 0 0.55rem;
    border: none;
    border-radius: 999px;
    background: rgba(16, 94, 141, .08);
    color: var(--global-palette1);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.fav-mini-cta .btn-acta:hover,
.fav-mini-cta .btn-gcal:hover {
    background: var(--global-palette1);
    color: #fff;
}

.fav-mini-line {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Wraps whatever sits in .fav-mini-vs's slot (score pills, a bare kickoff
   hour, or the pending dash) with the date repeated underneath in a small
   caption — the header only carries the jornada now, so every row still
   reads standalone (date + pista) without looking back up at it. */
.fav-mini-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    flex-shrink: 0;
}

.fav-mini-hour-time {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--global-palette2);
}

.fav-mini-hour-date {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a9bb0;
    margin-top: 0.05rem;
}

/* Pista sits in its own footer row below the match line (see
   .fav-mini-footer) instead of sharing the header's top row with the
   jornada — kept as its own accent chip, brand colours (dark blue), same
   idea as a winning score pill, since it's one of the two facts someone
   glancing at this row actually came for. */
.fav-mini-venue {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    color: var(--global-palette1);
    border-radius: 0.35rem;
    padding: 0.1rem 0.45rem;
    flex-shrink: 0;
    text-decoration: none;
}

.fav-mini-venue:hover {
    text-decoration: none;
}

/* Secondary text link next to the pista chip — links to /pistes/{slug} (that
   venue's own agenda across every club playing there), separate from the
   chip's own Maps link. Same weight as a plain "Google Maps" text link
   (see match-detail.js's venueRowHtml) rather than a small icon, so it
   actually gets noticed. */
.fav-mini-pista-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.3rem;
    color: var(--global-palette1);
    font-weight: 700;
    text-decoration: none;
}

.fav-mini-pista-link:hover {
    text-decoration: underline;
}

.fav-mini-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 0.875rem 0;
    font-size: 0.7rem;
    text-align: center;
}

/* On narrow screens a long venue name plus "Agenda de partits" no longer fit
   on one line together — flex-wrap then breaks mid-phrase wherever the words
   happen to run out of room instead of at a sensible point. Stacking the two
   pieces (name, then the link) reads far better than a ragged wrap. */
@media (max-width: 576px) {
    .fav-mini-footer {
        flex-direction: column;
        gap: 0.15rem;
    }
    .fav-mini-pista-link {
        margin-left: 0;
    }
    /* A lone " · " between the two stacked lines reads as a stray typo —
       it only made sense inline. */
    .fav-mini-footer .fav-mini-venue-sep {
        display: none;
    }
}

.fav-mini-match .match-detail-chevron {
    align-self: center;
}

.fav-mini-teams {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
}

.fav-mini-team {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

/* Wraps instead of truncating — a name never gets cut off with an ellipsis
   in any match block; it just wraps onto a second line when it doesn't fit.
   Lives on the name itself, not on .fav-mini-team as a whole, so the crest
   (fixed-size, flex-shrink:0) never has to share space it doesn't need. */
.fav-mini-team-name {
    flex: 1;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    text-align: center;
}

/* Local hugs the right edge of its half, visitor the left edge of its half —
   both crests crowd toward the centre (next to the vs/score) instead of
   sitting at the row's outer edges, with each side's name staying the
   outermost element (row-reverse just flips visitor's visual order, not its
   DOM/reading order). The `order` swap below is what actually puts the
   crest next to the score instead of the name — it works the same way
   under row-reverse since `order` sorts independently of direction. */
.fav-mini-teams .fav-mini-team:first-child {
    justify-content: flex-end;
}

.fav-mini-teams .fav-mini-team:last-child {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.fav-mini-team .fav-mini-team-name {
    order: 1;
}

.fav-mini-team .fav-mini-logo,
.fav-mini-team .fav-mini-logo-placeholder {
    order: 2;
}

.fav-mini-team--mine { font-weight: 600; color: var(--global-palette2); }
.fav-mini-match--past .fav-mini-team--mine { color: #495057; }

.fav-mini-vs {
    font-size: 0.7rem;
    color: #aab6c4;
    flex-shrink: 0;
}

/* Result as two pills instead of a "N - N" string — sits where .fav-mini-vs
   would, between the two team names. */
.fav-mini-score {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.fav-mini-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.3rem;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 700;
    background: #eef4f9;
    color: #6c8194;
}

/* The higher score gets the site's own colours; a draw leaves both sides in
   the muted style above since neither one "won". */
.fav-mini-score-pill--win {
    background: var(--global-palette2);
    color: var(--global-palette4);
}

.fav-mini-hour-date--live {
    color: #d32f2f;
    font-weight: 700;
}

.fav-mini-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.fav-mini-logo-placeholder {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Desktop only — bigger crests, bigger name, and names hugging the vs/score
   instead of centred in their column (mobile keeps the smaller crest and
   centred name as-is, see the max-width:576px block further down). */
@media (min-width: 577px) {
    .fav-mini-logo,
    .fav-mini-logo-placeholder {
        width: 35px;
        height: 35px;
    }
    .fav-mini-team-name {
        font-size: 1rem;
    }
    .fav-mini-teams .fav-mini-team:first-child .fav-mini-team-name {
        text-align: right;
    }
    .fav-mini-teams .fav-mini-team:last-child .fav-mini-team-name {
        text-align: left;
    }
}

/* ...except inside the home favourites cards and the match detail modal:
   .fav-pair-matches is capped at half the card's width (see its own rule)
   to leave room for the classification table beside it, and
   #match-detail-matchblock sits in Bootstrap's default (~500px) modal
   dialog — so even on a wide desktop viewport the match itself only ever
   gets a narrow column, same real width as mobile, just not a mobile
   *viewport*, so the width-based media query above can't tell them apart.
   Bigger crests + names pinned to the score left huge gaps at the outer
   edges in that narrow column; keep the mobile/centred look here regardless
   of viewport width. */
.fav-pair-matches .fav-mini-logo,
.fav-pair-matches .fav-mini-logo-placeholder,
#match-detail-matchblock .fav-mini-logo,
#match-detail-matchblock .fav-mini-logo-placeholder {
    /*width: 24px;
    height: 24px;*/
    width: 35px;
    height: 35px;
}
.fav-pair-matches .fav-mini-team-name,
#match-detail-matchblock .fav-mini-team-name {
    font-size: inherit;
}
.fav-pair-matches .fav-mini-teams .fav-mini-team:first-child .fav-mini-team-name,
.fav-pair-matches .fav-mini-teams .fav-mini-team:last-child .fav-mini-team-name,
#match-detail-matchblock .fav-mini-teams .fav-mini-team:first-child .fav-mini-team-name,
#match-detail-matchblock .fav-mini-teams .fav-mini-team:last-child .fav-mini-team-name {
    text-align: center;
}

.fav-mini-result {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--global-palette2);
    flex-shrink: 0;
}

.fav-mini-match--past .fav-mini-result { color: #495057; }

/* WhatsApp/calendar keep their own recognizable brand colours (green/blue)
   but go circular + 26px here too, so the whole .fav-mini-acta cluster reads
   as one family of same-shaped action buttons instead of mixing squared and
   circular icons side by side. */
.fav-mini-acta .btn-wa-conv,
.fav-mini-acta .btn-gcal {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

/* Same treatment as Competicions' group CTAs (.comp-group-cal-btn/
   -fav-btn): their hover-only tint (rgba(16,94,141,.08)) becomes this
   button's resting background instead — it now lives next to date/hora
   rather than crowding the match line. Auto-width pill (not a fixed circle)
   since it carries a label ("Acta del partit"), not just the icon. Scoped
   to the .fav-mini-acta wrapper itself (not an ancestor .fav-mini-match/
   .match-item class) so it applies the same way regardless of which page's
   match row it's rendered in. */
.fav-mini-acta .btn-acta {
    width: auto;
    height: 28px;
    padding: 0 0.7rem;
    gap: 0.35rem;
    border: none;
    border-radius: 999px;
    background: rgba(16, 94, 141, .08);
    color: var(--global-palette1);
    font-size: 0.72rem;
    font-weight: 600;
}

.fav-mini-acta .btn-acta:hover {
    background: var(--global-palette1);
    color: #fff;
}

/* Three stacked rows: the jornada+data block (.fav-mini-header, tinted, see
   its own rule above), then the match itself with the chevron at its end —
   so the chevron reads as "this match opens", aligned with the teams — then
   the pista footer. Shared by .match-item (Competicions) and .fav-mini-match
   (home favourites cards, club page) alike — keyed off .fav-mini-header
   specifically, since a played-match history row (match detail modal) has
   only .fav-mini-line and no header/footer at all, and falls back to the
   plain single-row flex layout above instead of this grid. */
.fav-mini-match:has(.fav-mini-header),
.match-item:has(.fav-mini-header) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "header  header"
        "line    chevron"
        "footer  footer";
    align-items: start;
    row-gap: 0.2rem;
    column-gap: 0.2rem;
}
.fav-mini-header {
    grid-area: header;
}
/* Only ever rendered for played matches with an acta link, so it never
   competes with the chevron (upcoming-only). */
.fav-mini-acta {
    align-self: center;
}
.fav-mini-match .match-detail-chevron {
    grid-area: chevron;
    align-self: center;
}
.fav-mini-line {
    grid-area: line;
    width: 100%;
}
.fav-mini-footer {
    grid-area: footer;
}

.fav-mini-empty {
    padding: 0.75rem 0.875rem;
    color: #aab6c4;
    font-size: 0.82rem;
    text-align: center;
}

/* Mini classification table */

.fav-classif-table {
    width: 100%;
    font-size: 0.74rem;
    border-collapse: collapse;
}

.fav-classif-table th {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a9bb0;
    padding: 0.2rem 0.2rem 0.3rem;
    text-align: center;
    border-bottom: 1px solid #e2eef6;
}

.fav-classif-table th:nth-child(2) { text-align: left; }

.fav-classif-table td {
    padding: 0.2rem 0.2rem;
    text-align: center;
    border-bottom: 1px solid #f0f5fa;
    vertical-align: middle;
}

.fav-classif-table td:nth-child(2) {
    text-align: left;
}

.fav-classif-table tr:last-child td { border-bottom: none; }

.fav-classif-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 210px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fav-classif-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.fav-classif-highlight {
    background: #e8f2fc;
}

.fav-classif-highlight td { font-weight: 600; color: var(--global-palette2); }

/* ── Favorite star in group section header ───────────────────────────────── */

.comp-group-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #ccdde9;
    border-radius: 50%;
    background: transparent;
    color: #8a9bb0;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color .15s, border-color .15s, background .15s;
    flex-shrink: 0;
}

.comp-group-fav-btn:hover,
.comp-group-fav-btn.active {
    color: #fdc300;
    border-color: #fdc300;
    background: rgba(253,195,0,.08);
}

/* ── Favorite star in classification row ─────────────────────────────────── */

.btn-classif-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid #dee2e6;
    border-radius: 50%;
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
    font-size: 0.68rem;
    padding: 0;
    transition: color .15s, border-color .15s, background .15s;
}

.btn-classif-fav:hover,
.btn-classif-fav.active {
    color: #fdc300;
    border-color: #fdc300;
    background: rgba(253,195,0,.1);
}

/* ── Subscriptions modal panel ───────────────────────────────────────────── */

.subs-modal-dialog {
    max-width: 480px;
}

.subs-modal-header {
    background: linear-gradient(135deg, #082f47 0%, #105e8d 100%);
    color: #fff;
    border-bottom: 3px solid #fdc300;
    padding: 1rem 1.25rem;
    border-radius: 0.375rem 0.375rem 0 0;
}

.subs-modal-header .modal-title {
    color: #fff;
}

.subs-modal-header .text-muted {
    color: rgba(255,255,255,0.6) !important;
}

.subs-modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.subs-modal-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(253,195,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fdc300;
    font-size: 1rem;
    flex-shrink: 0;
}

.subs-legend-block {
    padding: 0.6rem 1rem 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.subs-legend-intro {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    color: #6c757d;
}

.subs-legend {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    font-size: 0.72rem;
    color: #6c757d;
}

.subs-comp-header {
    display: flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0c3a5c;
    background: #f0f6fb;
    border-bottom: 1px solid #c9dff0;
    border-top: 1px solid #c9dff0;
}

.subs-comp-section:first-child .subs-comp-header {
    border-top: none;
}

.subs-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.08s;
}

.subs-item:last-child {
    border-bottom: none;
}

.subs-item:hover {
    background: #fafbfc;
}

.subs-item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
}

.subs-item-group {
    display: block;
    font-size: 0.72rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subs-item-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.subs-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #6c757d;
    font-size: 0.8rem;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.subs-toggle-label .form-check-input {
    cursor: pointer;
}

.btn-sub-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: none;
    color: #adb5bd;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}

.btn-sub-delete:hover {
    color: #dc3545;
    background: #fff0f0;
}

/* ── Home page subscriptions list (widget, not modal) ────────────────────── */

.subs-list {
    display: flex;
    flex-direction: column;
}

.subs-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}

.subs-list-item:last-child {
    border-bottom: none;
}

.subs-list-item:hover {
    background: var(--global-palette7);
    text-decoration: none;
    color: inherit;
}

.subs-list-bell {
    color: var(--global-palette1);
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}

.subs-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.subs-list-team {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--global-palette5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subs-list-comp {
    font-size: 0.75rem;
    color: var(--global-palette6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subs-list-arrow {
    color: var(--global-palette6);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ── Home: Login CTA ─────────────────────────────────────────────────────── */

.home-cta-login {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    overflow: hidden;
}

.home-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.75rem;
}

.home-cta-text-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    min-width: 0;
}

.home-cta-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--global-palette2);
    color: var(--global-palette4);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.home-cta-title {
    font-weight: 700;
    color: var(--global-palette2);
    font-size: 1rem;
    margin: 0 0 0.15rem;
}

.home-cta-text {
    color: var(--global-palette6);
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 575.98px) {
    .home-cta-inner {
        flex-direction: column;
        padding: 1.5rem 1.25rem;
    }
    .home-cta-text-wrap {
        flex-direction: column;
        text-align: center;
    }
    .home-cta-login .comp-tab-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ── Home: How it works ──────────────────────────────────────────────────── */

.home-howto-icon {
    font-size: 1.75rem;
    color: var(--global-palette1);
    margin-bottom: 0.5rem;
    display: block;
}

.home-howto-title {
    font-weight: 700;
    color: var(--global-palette2);
    margin-bottom: 0.25rem;
}

.home-howto-text {
    font-size: 0.85rem;
    color: var(--global-palette6);
    margin: 0 auto;
    max-width: 260px;
}

/* ── Home: Quick access (competicions + equips temporada actual) ────────── */

#section-quickaccess .home-section-header {
    background: var(--global-palette2);
    border-bottom: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

#section-quickaccess .home-section-title {
    color: #fff;
}

.qa-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.qa-header-sub {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
}

.qa-title-logo {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
}

.qa-season-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    background: var(--global-palette4);
    color: var(--global-palette2);
    white-space: nowrap;
    margin-left: 0.5rem;
}

.qa-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.qa-col {
    padding: 1rem 1.25rem 1.25rem;
    /* Without this, the nested auto-fill teams grid (.qa-teams-grid) sizes
       itself against an indefinite width during layout and can end up wider
       than this column's actual share of #qa-body — since #section-quickaccess
       clips overflow, that extra width silently cuts off the last club tile
       instead of scrolling. min-width:0 lets this grid item shrink to its
       track's real size so the nested grid recomputes against it correctly. */
    min-width: 0;
}

.qa-col + .qa-col {
    border-left: 1px solid #f0f0f0;
}

.qa-col-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global-palette6);
}

.qa-col-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Subtle inline search next to "Equips" — same treatment as .comp-team-search
   on the Competicions page (see there): a secondary action, not a full bar. */
.qa-team-search {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.1rem 0.1rem 0.35rem;
    border-bottom: 1px solid #dee2e6;
    color: #8a9bb0;
    flex-shrink: 0;
}

.qa-team-search svg { flex-shrink: 0; opacity: 0.75; }

.qa-team-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.78rem;
    width: 130px;
    color: var(--global-palette2);
    padding: 0.1rem 0;
}

.qa-team-search input::placeholder { color: #aab6c4; }

.qa-team-search-empty {
    padding: 0.75rem;
    font-size: 0.82rem;
    color: #8a9bb0;
    text-align: center;
}

.qa-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}

.qa-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--global-palette5);
    transition: background 0.1s, color 0.1s;
}

.qa-item:hover {
    background: var(--global-palette7);
    color: var(--global-palette1);
}

.qa-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.qa-item-badge--comp {
    background: var(--global-palette7);
    color: var(--global-palette1);
}

.qa-item-badge--club {
    background: #e8f5e9;
    color: #2e7d32;
}

.qa-item-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.qa-item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-item-arrow {
    font-size: 0.7rem;
    color: var(--global-palette6);
    opacity: 0;
    transition: opacity 0.1s;
}

.qa-item:hover .qa-item-arrow {
    opacity: 1;
}

.qa-comp-group + .qa-comp-group {
    margin-top: 0.6rem;
}

.qa-comp-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0.3rem 0.5rem 0.15rem;
    cursor: pointer;
}

.qa-comp-group-header .qa-comp-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--global-palette6);
}

.qa-comp-group-count {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--global-palette1);
    background: var(--global-palette7);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.qa-comp-group-chev {
    margin-left: auto;
    color: var(--global-palette6);
    font-size: 0.7rem;
    transition: transform 0.15s;
}

.qa-comp-group--collapsed .qa-comp-group-chev { transform: rotate(-90deg); }
.qa-comp-group--collapsed .qa-comp-group-body { display: none; }

.qa-comp-item {
    display: flex;
    flex-direction: column;
}

.qa-item-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.qa-item-row .qa-item {
    flex: 1;
    min-width: 0;
}

.qa-stats-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--global-palette6);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.qa-stats-toggle:hover,
.qa-stats-toggle.active {
    background: var(--global-palette7);
    color: var(--global-palette1);
}

.qa-stats-pane {
    padding: 0.1rem 0.25rem 0.6rem 0.5rem;
}

.qa-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--global-palette4);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.qa-header-link:hover {
    color: var(--global-palette4);
    text-decoration: none;
    opacity: 0.8;
}

.qa-empty {
    font-size: 0.85rem;
    color: var(--global-palette6);
    padding: 0.5rem;
}

.qa-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.6rem;
    align-content: start;
    margin-bottom: 0.75rem;
    padding: 0.15rem 0.15rem 0.15rem 0;
}

.qa-team-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--global-palette5);
    text-align: center;
    transition: background 0.1s, color 0.1s;
}

.qa-team-tile:hover {
    background: var(--global-palette7);
    color: var(--global-palette1);
}

.qa-team-tile-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.qa-team-tile-name {
    font-size: 0.7rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .qa-body {
        grid-template-columns: 1fr;
    }
    .qa-col + .qa-col {
        border-left: none;
        border-top: 1px solid #f0f0f0;
    }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
    margin-top: auto;
    background: var(--global-palette2);
    border-top: 3px solid var(--global-palette4);
    padding: 2.25rem 0 1.25rem;
    color: rgba(255,255,255,0.65);
}

.site-footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 320px;
}

.site-footer-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--global-palette4);
    letter-spacing: 0.04em;
}

.site-footer-brand-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}

.site-footer-links {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer-col-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--global-palette4);
}

.site-footer-col a {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer-col a:hover {
    color: var(--global-palette4);
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
}

.site-footer-bottom a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}

.site-footer-bottom a:hover {
    color: var(--global-palette4);
}

@media (max-width: 576px) {
    .site-footer-top {
        flex-direction: column;
        gap: 1.5rem;
    }
    .site-footer-links {
        gap: 2rem;
    }
}

/* ── Cookie Banner ───────────────────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--global-palette2);
    border-top: 3px solid var(--global-palette4);
    padding: 0.85rem 1rem;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.cookie-banner--hidden {
    animation: slideDown 0.25s ease forwards;
}

@keyframes slideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

.cookie-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    min-width: 200px;
}

.cookie-banner-link {
    color: var(--global-palette4);
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-banner-actions {
        justify-content: flex-end;
    }
}

/* Push notification opt-in prompt — top-fixed (cookie-banner already owns the
   bottom edge) so both can never overlap if a logged-in user hasn't answered
   the cookie banner yet either. */
.push-prompt-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--global-palette2);
    border-bottom: 3px solid var(--global-palette4);
    padding: 0.85rem 1rem;
    animation: slideDownIn 0.3s ease;
}

@keyframes slideDownIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);      opacity: 1; }
}

.push-prompt-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.push-prompt-banner-text {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    min-width: 200px;
}

.push-prompt-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .push-prompt-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .push-prompt-banner-actions {
        justify-content: flex-end;
    }
}

/* Shown when arriving at Competicions via a push notification's click-through
   link — surfaces the exact result/schedule change that triggered it. */
.notif-click-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--global-palette2);
    border-bottom: 3px solid var(--global-palette4);
    padding: 1.15rem 1.25rem;
    animation: slideDownIn 0.3s ease;
}

.notif-click-banner-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.notif-click-banner-icon {
    color: var(--global-palette4);
    font-size: 1.6rem;
    flex-shrink: 0;
}

.notif-click-banner-text {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

.notif-click-banner-title {
    font-weight: 700;
    color: var(--global-palette4);
    font-size: 1.05rem;
}

.notif-click-banner-body {
    /* Schedule/result digests with several matches join each one with \n
       (see buildPushText() in cron/send-notifications.php) — preserve those
       line breaks instead of collapsing them into one run of whitespace. */
    white-space: pre-line;
    max-height: 40vh;
    overflow-y: auto;
}

.notif-click-banner-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.7rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.notif-click-banner-close:hover {
    color: #fff;
}

/* ── Branded modal header (generic, reusable) ────────────────────────────── */

/* ── PWA install CTA ─────────────────────────────────────────────────────── */

.btn-install-header,
.pwa-install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--global-palette4);
    color: var(--global-palette2);
}

.btn-install-header {
    width: 34px;
    height: 34px;
    border: none;
    padding: 0;
    font-size: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-install-header:hover,
.btn-install-header:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(253, 195, 0, .35);
}

.pwa-install-icon {
    width: 24px;
    height: 24px;
    font-size: .75rem;
}

/* Hamburger menu items (header.php #main-navbar-nav): smaller, yellow text,
   each paired with a .pwa-install-icon badge for a consistent look across
   every entry, not just the PWA install one it was originally built for. */
#main-navbar-nav .nav-link.hamburger-menu-link,
.nav-link.hamburger-menu-link {
    font-size: 0.85rem;
    color: var(--global-palette4);
}

.nav-link.hamburger-menu-link:hover,
.nav-link.hamburger-menu-link:focus {
    color: var(--global-palette4);
    opacity: 0.85;
}

/* Always-on "button" look (the hover pill background, permanently visible) —
   used for the top-bar Competicions link so it reads as a pressable button
   rather than a bare text link floating next to the brand. */
.navbar-main .nav-link.nav-link-pill {
    background: rgba(255,255,255,0.1);
}

.navbar-main .nav-link.nav-link-pill:hover,
.navbar-main .nav-link.nav-link-pill.active {
    background: rgba(255,255,255,0.18);
}

.modal-header-branded {
    background: var(--global-palette2);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title-branded-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.modal-title-branded {
    color: var(--global-palette7);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Competition name, one line below the modal title — same trophy-icon
   pairing as .comp-block-title-wrap (gold icon, off-white text). */
.modal-title-comp {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--global-palette7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-title-comp i {
    color: var(--global-palette4);
    flex-shrink: 0;
}

/* ── Match detail modal ──────────────────────────────────────────────────── */

.match-detail-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #495057;
    margin-bottom: 0.75rem;
}

/* Pista name gets its own pill instead of sitting as plain text — kept the
   same strong-blue chip it had back when this row lived in the branded
   header, even though the row itself now sits in the white body. The
   Maps/Agenda actions used to live inside this same chip as inline text
   links; they're their own pills below it now (.match-detail-venue-badge),
   so this one just carries the name. */
.match-detail-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--global-palette2);
    color: var(--global-palette7);
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

.match-detail-summary > span i {
    color: var(--global-palette4);
}

/* Google Maps / Agenda de partits — two independent tap targets instead of
   text links crammed into the pista chip above, same light-pill language as
   the acta/gcal CTAs elsewhere (.fav-mini-cta .btn-acta/.btn-gcal). */
.match-detail-venue-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.match-detail-venue-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(16, 94, 141, .08);
    color: var(--global-palette1);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.match-detail-venue-badge:hover {
    background: var(--global-palette1);
    color: #fff;
}

/* One row: "Convoca el partit" (.match-detail-actions-primary) at full size
   on the left, "Afegeix al calendari"/acta/"Seguir partit"
   (.match-detail-actions-secondary) as a smaller paired-badge group pushed
   to the right — same small pill treatment as the pista block's Google
   Maps/"Agenda de partits" badges (.match-detail-venue-badge) right below,
   since they're secondary to Convoca here. */
.match-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.match-detail-actions-primary,
.match-detail-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Pushes the secondary group to the row's right edge — works whether
   .match-detail-actions-primary has its one button or (edge case: no
   Convoca, e.g. window.FecapaConvocatoria missing) is absent entirely. */
.match-detail-actions-secondary {
    margin-left: auto;
}

/* Convoca el partit keeps the larger labeled-pill treatment. */
.match-detail-actions .btn-wa-conv {
    width: auto;
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 999px;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Afegeix al calendari / acta / Seguir partit — smaller, same size as
   .match-detail-venue-badge, so they read as secondary to Convoca. */
.match-detail-actions-secondary .btn-gcal,
.match-detail-actions-secondary .btn-acta,
.match-detail-actions-secondary .btn-match-pin {
    width: auto;
    height: auto;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Soft-blue fill (rather than .btn-gcal's default Google-blue outline) to
   match the same CTA everywhere else in the app (see .fav-mini-cta). */
.match-detail-actions .btn-gcal {
    border: none;
    background: rgba(16, 94, 141, .08);
    color: var(--global-palette1);
}

.match-detail-actions .btn-gcal:hover {
    background: var(--global-palette1);
    color: #fff;
    text-decoration: none;
}

/* Separates the actions/pista block above from the match itself and the
   head-to-head/history content below. */
.match-detail-divider {
    border-bottom: 1px dashed rgb(222, 226, 230);
    margin-bottom: 0.75rem;
}

/* ── Calendar match-row favorite star ───────────────────────────────────── */

.btn-match-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    color: #adb5bd;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}

.btn-match-fav:hover {
    color: var(--global-palette4);
    background: rgba(253,195,0,0.1);
}

.btn-match-fav.active {
    color: var(--global-palette4);
}

/* ── Calendar match-row "Seguir partit" pin button (pin a single match, no
   favorite team required — see pinButtonHtml() in app.js). Same pill shape
   as .fav-mini-cta's Acta/gcal buttons, since it sits right next to them. ── */

.btn-match-pin {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    height: 22px;
    padding: 0 0.55rem;
    border: none;
    border-radius: 999px;
    background: rgba(16,94,141,.08);
    cursor: pointer;
    color: var(--global-palette1);
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.btn-match-pin:hover {
    background: var(--global-palette1);
    color: #fff;
}

.btn-match-pin.active {
    background: var(--global-palette1);
    color: #fff;
}

/* Larger tap targets for favorite stars and action icons on mobile (was too small to tap accurately) */
@media (max-width: 576px) {
    .comp-group-fav-btn,
    .comp-group-cal-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .btn-classif-fav {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .btn-match-fav {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
    .btn-match-pin {
        height: 26px;
        font-size: 0.7rem;
    }
    .btn-wa-conv,
    .btn-gcal,
    .btn-acta {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
    }
    /* Icon-only on mobile — "Afegeix al calendari" + "Seguir partit" side by
       side still doesn't leave much room on narrow screens even split onto
       their own row; title/aria-label on each button still covers a11y. */
    .match-detail-actions .btn-wa-conv,
    .match-detail-actions .btn-gcal,
    .match-detail-actions .btn-acta,
    .match-detail-actions .btn-match-pin {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        font-size: 1.05rem;
    }
    .match-detail-actions .btn-wa-conv span,
    .match-detail-actions .btn-gcal span,
    .match-detail-actions .btn-acta span,
    .match-detail-actions .btn-match-pin span {
        display: none;
    }
    .fav-pair-actions {
        gap: 0.4rem;
    }
    .fav-pair-logo,
    .fav-pair-club,
    .fav-pair-fav,
    .fav-pair-calendar,
    .fav-pair-share,
    .fav-pair-remove {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
    }
    .comp-block-share {
        width: 36px;
        height: 36px;
        font-size: 1.05rem;
    }
    #section-favorites .home-section-header .comp-tab-btn {
        padding: 0.55rem 0.9rem;
    }
    /* Competition/group/team name: wrap instead of ellipsis-truncating, so a
       long name is never hidden — the card just grows a bit taller. */
    .fav-pair-comp,
    .fav-pair-group,
    .fav-pair-team {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* ── Favorite team name highlight ───────────────────────────────────────── */

.team-name--fav {
    font-weight: 700;
    color: var(--global-palette2);
}

/* ── Subscription toggles inside favorite pair cards ───────────────────── */

.fav-pair-subs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    border-top: 1px solid #e4eef7;
    background: #f8fafc;
    border-radius: 0 0 0.5rem 0.5rem;
}

.fav-pair-subs-label {
    color: #6c757d;
    font-size: 0.78rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-open-subs-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    color: #adb5bd;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
}

.btn-open-subs-settings:hover {
    color: var(--global-palette1);
    background: #eef4f9;
}