/* Theme-shared styles; Tabler overrides */
@import url('inter/inter.css');

:root {
    --fa-card-color: white;
    --fa-card-radius: 0.75rem;
    --fa-card-border-light: rgba(255, 255, 255, 0.72);
    --fa-card-divider-light: rgba(15, 23, 42, 0.06);
    --fa-card-shadow-light:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 28px rgba(15, 23, 42, 0.07);
    --tblr-alert-margin-bottom: 0.75rem;
}

h5 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}

.card-header,
.card-footer {
    background: transparent;
}

body {
    font-size: 0.825rem;
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    body {
        font-size: 0.8rem;
    }
}

/* Page container width */
.container-xl {
    max-width: 1050px;
}

/* Tabler page structure overrides */
.page-body {
    transform: translateY(-1.75rem);
}
/* On mobile (no top navbar), restore natural position so first card isn't clipped */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .page-body {
        transform: translateY(-1rem);
    }
}

#content-main {
    padding-right: 0.25rem !important;
}

/* Theme color */
.ti,
.card-title a,
.card-title a:hover {
    color: var(--tblr-primary);
}

#navbar-menu .icon {
    --tblr-icon-size: 1.15rem;
}

.mb-3 {
    margin-bottom: 0.75rem !important;
}
.g-3 {
    --tblr-gutter-x: 0.75rem;
    --tblr-gutter-y: 0.75rem;
}
.gx-3 {
    --tblr-gutter-x: 0.75rem;
}

hr {
    opacity: 0.07;
}

.statistics-subnav-section + .statistics-subnav-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color-translucent);
}
.statistics-subnav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.statistics-subnav-label {
    color: var(--tblr-secondary-color);
    font-weight: 600;
    white-space: nowrap;
}
.statistics-subnav-links {
    --tblr-nav-underline-gap: 1.25rem;
}
.statistics-subnav-links .nav-link {
    padding: 0.25rem 0.05rem;
    color: var(--tblr-body-color);
    font-size: 0.8125rem;
    font-weight: 500;
    border-bottom-width: 0.125rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.statistics-subnav-links.nav-underline .nav-link:hover,
.statistics-subnav-links.nav-underline .nav-link:focus {
    color: var(--tblr-primary);
}
.statistics-subnav-links.nav-underline .nav-link.active {
    color: var(--tblr-primary);
    background: transparent;
    font-weight: 600;
}

.font-numeric {
    font-variant-numeric: tabular-nums;
}

.row {
    margin-top: 0 !important;
}

.page-body .icon-inline,
.page-body .flag-xxs {
    transform: translateY(-2.25px);
    display: inline-block;
    margin-right: 1px;
}
.dropdown-item .flag-xxs {
    transform: translateY(-1px);
}
.player-card .flag-xxs {
    transform: translateY(-0.75px);
}

.page-body .ti.ti-star-filled.icon-inline,
.page-body .ti.ti-star.icon-inline {
    transform: translateY(-3px);
}
.nav-tabs .ti.ti-star.icon-inline {
    transform: translateY(-0.5px);
}

/* Match report chance/counter icons share one stable, centered action slot. */
.match-action-icon {
    --match-action-icon-step: .12em;
    --match-action-icon-outer-step: .18em;
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: 1px;
    vertical-align: -.14em;
    line-height: 1;
}
.match-action-icon-counter {
    --match-action-icon-step: .16em;
    --match-action-icon-outer-step: .24em;
}
.match-action-icon .icon-inline {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    margin: 0 !important;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -50%) !important;
}
.match-action-icon-level-2 .icon-inline:first-child {
    transform: translate(calc(-50% - var(--match-action-icon-step)), -50%) !important;
}
.match-action-icon-level-2 .icon-inline:last-child {
    transform: translate(calc(-50% + var(--match-action-icon-step)), -50%) !important;
}
.match-action-icon-level-3 .icon-inline:first-child {
    transform: translate(calc(-50% - var(--match-action-icon-outer-step)), -50%) !important;
}
.match-action-icon-level-3 .icon-inline:last-child {
    transform: translate(calc(-50% + var(--match-action-icon-outer-step)), -50%) !important;
}

/* All form objects small by default */
.form-control,
.form-select {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.825rem !important;
    min-height: calc(1em + 0.5rem + 2px) !important;
}
.form-select {
    padding-right: 1.25rem !important;
    background-position: right 0.25rem center !important;
}
.form-label {
    margin-bottom: 0.25rem !important;
}

.w-auto-max {
    min-width: max-content !important;
    width: 100% !important;
}

th,
.datagrid-title {
    font-size: 0.7rem !important;
}

.btn {
    --tblr-btn-padding-y: 0.2rem;
    --tblr-btn-padding-x: 0.5rem;
    --tblr-btn-font-size: 0.8125rem;
    --tblr-btn-border-radius: var(--tblr-border-radius-sm);
    flex-shrink: 0 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.btn-credits {
    padding: 0.2rem 0.5rem !important;
}
.btn-credits .ti-coins {
    padding-left: 0.15rem;
    transform: translateY(0rem) !important;
}
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .btn {
        --tblr-btn-padding-y: 0.2rem;
        --tblr-btn-padding-x: 0.4rem;
        --tblr-btn-font-size: 0.775rem;
    }
    .btn-credits {
        padding: 0.2rem 0.4rem !important;
    }
}

/* Tables are small by default */
.table > :not(caption) > * > * {
    padding: 0.5rem 0.3rem !important; 
    vertical-align: middle;
}
.table:not(.table-no-title) > :not(caption) > * > *:first-child {
    padding-left: 0.75rem !important;
}
.table:not(.table-no-title)  > :not(caption) > * > *:last-child {
    padding-right: 0.75rem !important;
}
/* Mobile: reduce table padding to save horizontal space */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .table:not(.table-no-title) > :not(caption) > * > *:first-child {
        padding-left: 0.75rem !important;
    }
    .table:not(.table-no-title) > :not(caption) > * > *:last-child {
        padding-right: 0.75rem !important;
    }
    .card .list-group-flush .list-group-item {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

.card .table tbody tr:last-child > * {
    border-bottom: 0 !important;
}
.card .table.table-bottom-divider tbody tr:last-child > * {
    border-bottom: 1px solid rgba(128, 128, 128, 0.12) !important;
}

/* team-match-actual: on mobile, show each match on two lines for readability.
   Line 1: date + competition info. Line 2: match (teams) + action/result/setup.
   Desktop keeps the standard single-row, four-column table. */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .table.match-list-table,
    .table.match-list-table > tbody {
        display: block;
    }
    .table.match-list-table > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date info"
            "link action";
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.15rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid rgba(128, 128, 128, 0.16);
    }
    .table.match-list-table > tbody > tr:last-child {
        border-bottom: 0;
    }
    .table.match-list-table > tbody > tr > td,
    .table.match-list-table > tbody > tr > td:first-child,
    .table.match-list-table > tbody > tr > td:last-child {
        padding: 0 !important;
        border: 0 !important;
    }
    .table.match-list-table > tbody > tr > td:nth-child(1),
    .table.match-list-table > tbody > tr > td:nth-child(3) {
        min-width: 0;
    }
    .table.match-list-table > tbody > tr > td:nth-child(1) {
        grid-area: date;
    }
    .table.match-list-table > tbody > tr > td:nth-child(2) {
        grid-area: info;
        justify-self: end;
    }
    .table.match-list-table > tbody > tr > td:nth-child(3) {
        grid-area: link;
    }
    .table.match-list-table > tbody > tr > td:nth-child(4) {
        grid-area: action;
        justify-self: end;
    }
}

.card {
    border: 0;
    border-radius: var(--fa-card-radius) !important;
    box-shadow: var(--fa-card-shadow-light);
    overflow: hidden;
}
[data-bs-theme="dark"] .card {
    border: 1px solid var(--fa-card-border-light);
}

/* Card header */
.card .card-header {
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Subtle different background for body containing nav-tabs (e.g. team-player groups menu)
   so the tabs visually separate from the card header. */
.card .card-header + .card-body > .nav-tabs:first-child,
.card .card-header + .card-body.pb-0 > .nav-tabs:only-child,
.card > .card-body.pb-0 > .nav-tabs.card-header-tabs:only-child {
    background-color: var(--tblr-bg-surface-secondary);
    margin: -0.75rem -0.75rem 0 -0.75rem;
    padding: 0.25rem 0.75rem 0 0.75rem;
}
.card h3.card-title {
    font-size: 0.9rem;
}

.player-position-heading > th {
    background-color: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

.player-position-group:not(:first-child) .player-position-heading > th {
    border-top: var(--tblr-border-width) solid var(--tblr-border-color-translucent);
}

.player-column-heading > th {
    color: var(--tblr-secondary-color);
    font-weight: 500;
}

.card-header .card-title {
    margin-bottom: 0;
    font-weight: 700;
    flex-grow: 1; /* Pushes the actions to the right */
}

.card .card-header .card-actions {
    margin-right: 0.1rem;
    margin-left: auto;
    padding: 0 0 0.25rem 0;
    width: auto;
    display: flex;
    gap: 0.25rem;
}
.card .card-header .card-actions a:not(.btn):hover {
    text-decoration: underline;
}

.card .card-header .card-actions .ti {
    transform: translateY(0px);
}

.card .card-header .card-actions .back-icon-link .ti {
    transform: translateY(-0.2rem);
}

/* Mobile: card-header wraps title + actions vertically */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .card .card-header .card-actions {
        margin-left: 0;
        flex-basis: auto;
        padding-bottom: 0.25rem;
    }
}
.card .card-body {
    padding: 0.75rem;
}
.card .card-footer {
    padding: 0.5rem 0.75rem;
}

/* Mobile: reduce card padding to save horizontal space */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .card .card-body:not(.pb-0) {
        padding: 0.5rem 0.75rem;
    }
    .card .card-header {
        padding: 0.5rem 0.75rem;
    }
    .card .card-footer {
        padding: 0.5rem 0.75rem;
    }
}
/* On mobile, remove bottom margin from the last card in each column
   so the row gutter-y between stacked columns doesn't double up */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    #content-main > :first-child {
        margin-top: -0.5rem !important;
    }

    #content-right > :first-child {
        margin-top: -0.5rem !important;
    }

    #content-right > :last-child {
        margin-bottom: 0 !important;
    }
}

/* Help page: scroll-margin so anchored sections clear the sticky navbar */
#content-main > .card[id] {
    scroll-margin-top: 4.5rem;
}

/* FAQ page: scroll-margin for anchored questions inside the card body */
#content-main h3[id] {
    scroll-margin-top: 4.5rem;
}

/* Sticky right column: opt-in via .sticky-right class */
/* DISABLED: right side is wider, card shaddow is broken
@media (min-width: 992px) {
    #content-right.sticky-right {
        position: sticky;
        top: 6rem;
        align-self: flex-start;
        overflow-y: auto;
        max-height: calc(100vh - 7rem);
        padding-right: 0px !important;
    }
    #content-right.sticky-right.content-right-no-navbar {
        top: 1rem;
        max-height: calc(100vh - 2rem);
    }
}
*/

/* In nav-tabs, icons sit slightly high; nudge them back to baseline */
.nav-tabs .icon-inline {
    transform: none;
}

/* Outline buttons: invert icon color on hover/focus to match text color */
.btn-outline-primary:hover .ti,
.btn-outline-primary:focus .ti,
.btn-outline-primary:active .ti,
.btn-outline-secondary:hover .ti,
.btn-outline-secondary:focus .ti,
.btn-outline-secondary:active .ti,
.btn-outline-danger:hover .ti,
.btn-outline-danger:focus .ti,
.btn-outline-danger:active .ti,
.btn-outline-warning:hover .ti,
.btn-outline-warning:focus .ti,
.btn-outline-warning:active .ti {
    color: inherit !important;
}

/* Compact text wordmark in the main navbar */
.fa-wordmark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0 1.5rem 0 0.5rem;
    color: var(--tblr-body-color);
    font-family: InterDisplay, Inter, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.fa-wordmark:hover,
.fa-wordmark:focus {
    color: var(--tblr-body-color);
    text-decoration: none;
}

.fa-wordmark-arena {
    color: var(--tblr-primary);
}

/* Tabler card minimal styling for content areas */
#content-main .card,
#content-right .card {
    border-radius: var(--tblr-border-radius);
}

/* Datagrid inside cards: ensure proper spacing */
.datagrid {
    --tblr-datagrid-item-width: 12rem;
    --tblr-datagrid-padding: 1rem 0.5rem;
}

/* Force exactly 2 columns in datagrid */
.datagrid-2col {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Force exactly 3 columns in datagrid (2 columns on mobile) */
.datagrid-3col {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .datagrid-3col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Team staff column widths */
.staff-col-check { width: 25px; }
.staff-col-price { width: 25px; }
.staff-col-name { width: 25px; }
.staff-col-icon {
    width: 1.5rem;
    min-width: 1.5rem;
    text-align: center;
}
.staff-col-icon .form-check-input {
    transform: translate(0, 2px) !important;
}

/* Manager info: same height as the manager photo (200x default, 133.33 mobile),
   so the right-hand panel always renders as a rectangle aligned with the photo,
   with a vertical scrollbar when the press text overflows. The inner discussion
   message card is stretched to fill the wrapper. */
.manager-info-text {
    height: 200px;
    overflow-y: auto;
}
.manager-info-text > .card {
    min-height: 100%;
    margin-bottom: 0;
}

.home-press-mobile {
    margin-top: 1.25rem;
}

/* On small screens shrink the manager photo so the info text still fits to the right */
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .manager-photo img {
        width: 100px !important;
        height: 133.33px !important;
    }
    .manager-photo .manager-photo-placeholder {
        width: 100px;
        height: 133.33px;
        font-size: 80px; /* min(100, 133.33) * ~0.6 */
    }
    .manager-info-text {
        height: 133.33px;
    }
}

/* Team players */
.shirt-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.25rem;
    vertical-align: middle;
}

.shirt-number .ti {
    font-size: 1.75rem;
    line-height: 1;
    transform: translateY(-0.05rem);
}

.shirt-number-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
    color: var(--tblr-body-color);
    pointer-events: none;
}

.player-detail-shirt-number {
    transform: translateY(-0.1rem);
}

/* Fix bottom rounded corners on cards that end with card-header (e.g. title+tabs cards) */
.card .card-header:last-child {
    border-bottom-left-radius: var(--tblr-card-inner-border-radius, calc(var(--tblr-border-radius) - 1px));
    border-bottom-right-radius: var(--tblr-card-inner-border-radius, calc(var(--tblr-border-radius) - 1px));
}

.player-card {
    padding: 0;
}

.player-card-header {
    line-height: 1.6;
}

.player-group-empty {
    display: none;
}

.player-skill-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .player-skill-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.player-skill-grid .datagrid-item {
    padding: 0;
    border: 0;
}

.player-skill-grid .datagrid-title {
    margin-bottom: 0;
}

.player-skill-grid .datagrid-content {
    font-size: 0.8125rem;
}

.player-skill-grid .cover {
    opacity: 0.45;
}

.display_none {
    display: none;
}

/* Card tables */
.card {
    overflow: hidden !important;
}

/* Match detail */
.match-detail-header-match-type a,
.match-detail-header-match-type a:hover {
    color: var(--tblr-body-color);
}

.match-header-clean {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  direction: ltr;
}

.match-header-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  text-align: center;
}

.match-header-logo-wrap {
  width: 105px;
  height: 105px;
  display: grid;
  place-items: center;
}

.match-header-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.match-header-team-name {
  color: var(--tblr-body-color);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem);
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.match-header-team-name:hover {
  color: rgb(var(--tblr-primary-rgb));
  text-decoration: underline;
  text-underline-offset: .16em;
}

.match-header-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding-inline: .35rem;
}

.match-header-score {
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 2.2rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Match status */
/* Base */
.match-header-status {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: .12rem 0;
  border-radius: 0;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
  border: 0;
  background: transparent;
  text-transform: uppercase;
}

/* Time displayed under the date in the match header (smaller font) */
.match-header-status-time {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  opacity: .85;
}

/* finished, scheduled */
.match-status-finished,
.match-status-scheduled {
  color: var(--tblr-secondary);
}

/* live / replay */
.match-status-live,
.match-status-replay {
  color: rgb(var(--tblr-red-rgb));
}

/* live: keep the pulsing dot inline (before the minute text) */
.match-status-live {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.match-status-live::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 999px;
  background: currentColor;
  margin-right: .38rem;
}

.match-status-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
}

.match-status-replay::before {
  content: none;
}

.replay-status-icon {
  font-size: .95em;
  line-height: 1;
  animation: replay-pulse 1.5s ease-out infinite;
}

/* half-time */
.match-status-halftime {
  color: rgb(var(--tblr-orange-rgb));
}

/* replay buttons */
.replay-nav-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.replay-nav-v2 .replay-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border-radius: 1rem;
  text-decoration: none;
}

.replay-nav-v2 .replay-icon-card i {
  font-size: 1.35rem;
  line-height: 1;
}

.replay-nav-v2 .replay-icon-card span {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
}

.replay-nav-v2 .replay-icon-card:hover {
  color: rgb(var(--tblr-primary-rgb));
  background: rgba(var(--tblr-primary-rgb), 0.01);
  border-color: rgba(var(--tblr-primary-rgb), 0.22);
  
}

.team-logo-placeholder.match-header-logo {
  width: 105px;
  height: 105px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team-logo-placeholder.match-header-logo .ti {
  font-size: 80px;
  line-height: 1;
}

.flag.match-header-logo {
  width: auto !important;
  max-width: none !important;
  height: 75px !important;
  max-height: none !important;
  aspect-ratio: 4 / 3;
  display: inline-block;
}

@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .match-header-clean {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .5rem;
  }

  .match-header-team {
    gap: .35rem;
  }

  .match-header-logo-wrap {
    width: 90px;
    height: 90px;
  }

  .match-header-logo {
    max-width: 85px;
    max-height: 85px;
  }

  .match-header-team-name {
    font-size: .8rem;
    line-height: 1.2;
  }

  .match-header-score-wrap {
    gap: .25rem;
  }

  .match-header-status {
    min-height: 1.5rem;
    padding: .2rem .5rem;
    font-size: .65rem;
  }

  .match-status-live::before {
    width: .35rem;
    height: .35rem;
    margin-right: .32rem;
  }
}

/* Lineup formation grid */
.lineup-formation-grid {
    width: 100%;
    overflow-x: auto; /* Enable swiping */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhones */
}
.lineup-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.5rem;
    /* FIX: Force the row to be at least 600px wide so the 5 columns 
       are roughly 120px each—enough for a name. */
    /* min-width: 600px; */
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .lineup-formation-grid.pre-match .lineup-row {
        min-width: 600px;
    }
}
.lineup-formation-grid .lineup-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.lineup-cell {
    min-height: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    padding: 1px 1px;
}

.lineup-player-select, .lineup-sub-select, .lineup-cond-select {
    min-width: 0;
    font-size: 0.75rem !important;
}

.lineup-minute-select {
    min-width: 3.275rem;
}

.lineup-player-select { width: 100%; }
.lineup-player-select option { white-space: nowrap; }
.club-logo-preview {
    min-height: clamp(10rem, 35vw, 17rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.club-logo-preview-image {
    width: clamp(8rem, 30vw, 14rem);
    max-height: 15rem;
    object-fit: contain;
}
.team-home-primary-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.team-home-primary-card > .card-header,
.team-home-primary-card > .card-body {
    position: relative;
    z-index: 1;
    background: transparent;
}
.team-home-club-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: clamp(8rem, 30vw, 15rem);
    max-width: 70%;
    max-height: 80%;
    object-fit: contain;
    opacity: 0.12;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

/* Registration CAPTCHA input */
.captcha-input { text-transform: uppercase; letter-spacing: 1px; }

/* Bet - expired match on ticket */
.bet-expired { opacity: 0.6; }

/* Tabler dark/light mode toggle (use Tabler built-in hide-theme classes) */
[data-bs-theme="light"] .hide-theme-light { display: none !important; }
[data-bs-theme="dark"] .hide-theme-dark { display: none !important; }

/* Navbar dropdown menu items with icons from game */
.dropdown-item img { vertical-align: middle; }

/* Override for old "menu" class links inside navbar */
a.menu { color: inherit; }
a.menu:hover { text-decoration: underline !important; }

/* Hover dropdowns - open on hover on desktop (md+) instead of click */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    /* Force simple downward positioning so Popper inline styles cannot
       push the menu above the viewport */
    .navbar .nav-item.dropdown {
        position: relative;
    }

    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        bottom: auto;
        transform: none !important;
        margin-top: 0;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Avatar dropdown: keep aligned to right edge and prevent overflow */
    .navbar .nav-item.dropdown:hover > .dropdown-menu-end {
        left: auto;
        right: 0;
        max-width: calc(100vw - 1rem);
    }

    .navbar .nav-item.dropdown > .dropdown-toggle::after {
        transition: transform 0.15s ease;
    }

    .navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Mobile navbar: dropdowns inside collapsed menu */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .navbar-collapse .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: 1rem;
    }

    .navbar-collapse .dropdown-menu .dropdown-item {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .card-table td {
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
}

/* Notification badge positioning (pill over icon) */
.badge-notification {
    position: absolute;
    top: 10px !important;
    right: 10px !important;
    transform: none;
    font-size: 0.625rem;
    min-width: 1rem;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.25rem;
    z-index: 1;
}

.badge-main-menu {
    width: 5px !important;
    height: 5px !important;
}

.nav-link { position: relative; }

/* Admin: registration request row highlights */
.admin-reg-warning {
    background-color: rgba(var(--tblr-warning-rgb), 0.15);
}
.admin-reg-blocked {
    background-color: rgba(var(--tblr-danger-rgb), 0.15);
}

/* Discussion poll progress bar */
.discussion-poll-progress {
    min-width: 100px;
}

.msg-card {
    margin-bottom: 0.75rem !important;
    /* Primary accent on the left edge. Uses a real border (not card-status-start)
       so it follows the card's rounded corners and ends cleanly at the top/bottom,
       matching the KursInfo notice look. !important overrides the dark-theme card border. */
    border-left: 2px solid var(--tblr-primary) !important;
}

/* Discussion message post card - avatar image inside Tabler avatar */
.msg-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Football Arena link in the posts */
.fa-inline-link {
  color: rgb(var(--tblr-link-color-rgb));
  text-decoration: underline;
  text-decoration-color: rgba(var(--tblr-link-color-rgb), 0.35);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.fa-inline-link:hover {
  color: rgb(var(--tblr-link-color-rgb));
  text-decoration-color: rgba(var(--tblr-link-color-rgb), 0.75);
}

/* Message content: responsive images */
.msg-img {
    max-width: 100%;
    height: auto;
}

/* Message content: responsive embed (YouTube, Twitter) */
.msg-embed {
    position: relative;
    max-width: 100%;
    margin: 0.5rem 0;
}
.msg-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}
.msg-embed blockquote {
    max-width: 100%;
}

/* Message content: pre tag spacing */
.msg-pre {
    display: block;
    /* Control the gap BEFORE and AFTER the block here */
    margin-top: 0.5rem !important; 
    margin-bottom: 0.5rem !important; 
    
    /* Internal spacing */
    padding: 0.5rem 0.75rem !important; 
    
    /* This tightens the vertical "feel" inside the box */
    line-height: 1.4; 
    
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
    border: 1px solid var(--tblr-border-color-translucent);
    border-radius: var(--tblr-border-radius);
    
    /* Standard code behavior */
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.875em;
    font-family: var(--tblr-font-monospace, monospace);
}

.msg-pre + p {
    margin-top: 0;
}

/* Emoticon inline images (OpenMoji SVGs) */
.emoticon {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -0.05em;
}
.emoticon-list a:hover {
    text-decoration: none;
}

/* Badge with inline icon: fix icon vertical alignment */
.badge .ti {
    vertical-align: -0.1em;
    line-height: 1;
}

/* Fixed-width count input for navigation controls (e.g. page count) */
.count-input {
    width: 2.75rem !important;
    min-width: 2.75rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Alert icon gap - tighter than Tabler default */
.alert {
    gap: 0.25rem;
    --tblr-alert-padding-x: 0.5rem;
    --tblr-alert-margin-bottom: 0.75rem;
}
.alert strong {
  display: inline;
  margin: 0;
  padding: 0;
  float: none;
  text-align: inherit;
}

/* Match power stat bars (table layout for aligned labels) */
.power-bar-table {
    width: 100%;
    border-collapse: collapse;
}
.power-bar-table td {
    padding-bottom: 0.175rem !important;
    vertical-align: middle;
    border: 0 !important;
}
.power-bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 0.5rem !important;
}
.power-bar-track-cell {
    width: 100%;
}
.power-bar-track {
    height: 0.75rem;
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 0.25rem;
    overflow: hidden;
}
.power-bar-fill {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}
.power-bar-fill.power-def { background-color: #2fb344; }
.power-bar-fill.power-mid { background-color: #206bc4; }
.power-bar-fill.power-att { background-color: #d63939; }
.power-bar-value {
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-left: 0.5rem !important;
    white-space: nowrap;
}

/* Match result status dots - larger, slightly rounded squares */
.table .status-dot {
    --tblr-status-size: 0.55rem;
    border-radius: 3px;
}

.list-group-item {
    padding: 0.5rem 0.75rem !important;
}
/* Right sidebar: active list-group item uses primary color instead of blue */
.list-group-item.active {
    border-left: 2px solid var(--tblr-primary) !important;
    background-color: var(--tblr-bg-surface) !important;
    text-decoration: none !important;
}
.list-group-flush > .list-group-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.12);
}

/* Match possession bar (ball control / head control) */
.possession-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.possession-bar-value {
    min-width: 40px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.possession-bar-value:last-child {
    text-align: left;
}
.possession-bar-track {
    display: flex;
    flex: 1;
    height: 0.75rem;
    border-radius: 0.25rem;
    overflow: hidden;
}
.possession-bar-home {
    background: var(--tblr-blue);
}
.possession-bar-away {
    background: var(--tblr-red);
}

/* ---- Inline style replacements ---- */
.ico-big {
    font-size: 1.25em;
}
.flag-valign {
    vertical-align: middle;
}
/* Default team logo placeholder: icon scales to match requested image size */
.team-logo-placeholder {
    color: var(--tblr-primary);
    opacity: 0.35;
}
.team-logo-placeholder .ti {
    font-size: inherit;
}
/* Default manager photo placeholder (used when no manager image exists).
   All sizing lives here (instead of inline styles) so the mobile breakpoint
   below can shrink it together with the real photo image. */
.manager-photo-placeholder {
    color: var(--tblr-primary);
    opacity: 0.35;
    width: 150px;
    height: 200px;
    font-size: 120px; /* min(150,200) * ~0.6 */
}
.manager-photo-placeholder .ti {
    font-size: inherit;
    line-height: 1;
}
/* Large logo (team-home 200x200) */
.team-logo-placeholder[data-logo-w="200"] {
    width: 200px;
    height: 200px;
    font-size: 8rem;
}
/* Responsive match-detail logo */
.team-logo-placeholder.match-detail-team-logo {
    font-size: 5rem;
}
/* Country flags in match detail */
.flag.match-detail-team-logo {
    height: 135px;
    width: auto;
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .team-logo-placeholder.match-detail-team-logo {
        max-height: 80px !important;
        height: 80px !important;
        width: auto !important;
        font-size: 3.5rem;
    }
    .flag.match-detail-team-logo {
        height: 60px !important;
    }
}
.modal-icon-lg {
    font-size: 3rem;
}
.chart-container-sm {
    height: 220px;
}
.chart-container-md {
    height: 300px;
}
.td-shrink {
    width: 1%;
}
.table-w-auto {
    width: auto;
}
.flex-min-0 {
    min-width: 0;
}
.play-off-draw-table {
    width: 100px;
}

/* Bracket tournament layout */
.bracket-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bracket-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 700px;
    width: max-content;
    margin: 0 auto;
    padding: 0 0.5rem;
}
.bracket-side {
    display: flex;
    align-items: center;
}
.bracket-left {
    flex-direction: row;
}
.bracket-right {
    flex-direction: row-reverse;
}
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0.5rem;
}
.bracket-r4 {
    min-height: 450px;
}
.bracket-r3 {
    min-height: 350px;
}
.bracket-r2 {
    min-height: 200px;
}
.bracket-match {
    flex-shrink: 0;
}

.bracket-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.bracket-trophy {
    text-align: center;
}
.bracket-third-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
}

/* Pagination: centered and responsive */
.pagination {
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .pagination .page-link {
        padding: 0.2rem 0.45rem;
        font-size: 0.75rem;
    }
}

/* Tagify overrides: match form-control sizing and use primary color */
.tagify {
    --tags-border-color: var(--tblr-border-color);
    --tags-hover-border-color: var(--tblr-border-color);
    --tags-focus-border-color: var(--tblr-primary);
    --tag-bg: rgba(var(--tblr-primary-rgb), 0.1);
    --tag-hover: rgba(var(--tblr-primary-rgb), 0.2);
    --tag-text-color: var(--tblr-primary);
    --tag-pad: 0.1em 0.4em;
    --tag-border-radius: var(--tblr-border-radius-sm);
    --tag-remove-btn-color: var(--tblr-primary);
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0 0.25rem !important;
    font-size: 0.875rem !important;
    border-radius: var(--tblr-border-radius) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.tagify .tagify__tag > div::before {
    box-shadow: 0 0 0 1.1em rgba(var(--tblr-primary-rgb), 0.1) inset !important;
}
.tagify .tagify__tag:hover:not([readonly]) div::before {
    box-shadow: 0 0 0 1.1em rgba(var(--tblr-primary-rgb), 0.2) inset !important;
}
.tagify .tagify__tag__removeBtn:hover + div::before {
    box-shadow: 0 0 0 1.1em rgba(var(--tblr-danger-rgb), 0.3) inset !important;
}
.tagify .tagify__input {
    margin: 0 !important;
    padding: 0 0.25em !important;
    line-height: 1.5 !important;
}
.tagify .tagify__tag {
    margin: 2px 1px !important;
}
.tagify .tagify__tag > div {
    padding: 0.05em 0.4em !important;
    line-height: 1.5 !important;
}

[data-bs-theme="dark"] .tagify {
    --tag-text-color: var(--tblr-light);
    --tag-bg: rgba(var(--tblr-primary-rgb), 0.3);
    --tag-hover: rgba(var(--tblr-primary-rgb), 0.45);
    --tag-remove-btn-color: var(--tblr-light);
}
[data-bs-theme="dark"] .tagify .tagify__tag > div::before {
    box-shadow: 0 0 0 1.1em rgba(var(--tblr-primary-rgb), 0.3) inset !important;
}
[data-bs-theme="dark"] .tagify .tagify__tag:hover:not([readonly]) div::before {
    box-shadow: 0 0 0 1.1em rgba(var(--tblr-primary-rgb), 0.45) inset !important;
}

/* ============================================================
   Mobile bottom navigation
   ============================================================ */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    /* Hide entire top navbar on mobile - bottom nav replaces it */
    header.navbar {
        display: none !important;
    }

    #content-main,
    #content-right {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .mobile-bottom-nav {
        display: flex !important;
    }

    .mobile-menu-overlay,
    .mobile-menu-panel {
        display: block !important;
    }

    /* Add bottom padding so page content is not hidden behind fixed nav */
    .page-body {
        padding-bottom: 1.25rem;
    }
}

/* Bottom nav bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 3.1rem;
    background-color: var(--tblr-bg-surface);
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
    padding: 0 0.5rem;
}
.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    background: none;
    color: var(--tblr-secondary);
    font-size: 1.35rem;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.mobile-bottom-nav-item:hover,
.mobile-bottom-nav-item:focus {
    color: var(--tblr-primary);
    text-decoration: none;
    outline: none;
}
.mobile-bottom-nav-item.active {
    color: var(--tblr-primary);
}
.fa-mobile-mark {
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.0625rem;
    padding: 0 0.2rem 0 0.2rem;
    border: 0.5px solid var(--tblr-primary);
    background-color: var(--tblr-primary-lt);
    border-radius: 0.375rem;
    font-family: InterDisplay, Inter, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -1px;
    line-height: 1;
}
.fa-mobile-mark-f {
    color: #12161c;
}
.fa-mobile-mark-a {
    color: var(--tblr-primary);
}

[data-bs-theme="dark"] .fa-mobile-mark {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: #161b22;
}
[data-bs-theme="dark"] .fa-mobile-mark-f {
    color: #f4f6f8;
}
.mobile-bottom-nav-item .avatar {
    transition: box-shadow 0.15s ease;
}
.mobile-bottom-nav-item.active .avatar {
    box-shadow: 0 0 0 2px var(--tblr-primary);
}

/* Overlay behind open panel */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1028;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Slide-up panel */
.mobile-menu-panel {
    position: fixed;
    bottom: 3.1rem;
    left: 0;
    right: 0;
    z-index: 1029;
    background-color: var(--tblr-bg-surface);
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
    box-shadow: var(--tblr-box-shadow);
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-menu-panel.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.mobile-menu-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
    position: sticky;
    top: 0;
    background-color: var(--tblr-bg-surface);
    z-index: 1;
}
.mobile-menu-panel-body {
    padding: 0.25rem 0;
}
.mobile-menu-panel-body .dropdown-item {
    padding: 0.4rem 1rem;
}
.mobile-menu-panel-body .dropdown-divider {
    margin: 0.25rem 0;
}
.mobile-menu-panel-body .dropdown-menu {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
    float: none;
}
/* Nested dropdown-header inside mobile panels */
.mobile-menu-panel-body .dropdown-header {
    padding: 0.5rem 1rem;
}
/* Notification dot on bottom nav avatar button */
.mobile-bottom-nav-badge {
    position: absolute;
    top: 0.35rem;
    right: calc(50% - 1rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--tblr-red);
    border: 2px solid var(--tblr-bg-surface);
}

/* Numeric count badge on bottom nav (e.g. news bell) */
.mobile-bottom-nav-count {
    position: absolute;
    top: 0.15rem;
    right: calc(50% - 1.1rem);
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    font-size: 0.65rem;
    line-height: 1.05rem;
    font-weight: 600;
    border-radius: 1rem;
    border: 2px solid var(--tblr-bg-surface);
    box-sizing: content-box;
    text-align: center;
}

/* ---- Supporters country flag (id=76) ---- */
/* Use the same shape (aspect-ratio 1.33) and rounded borders as the other Tabler flags */
.flag-country-supporters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff8dc 0%, #ffe7a0 100%);
    box-shadow: var(--tblr-shadow-border);
    border-radius: var(--tblr-border-radius);
    line-height: 1;
    overflow: hidden;
}
[data-bs-theme="dark"] .flag-country-supporters {
    background: linear-gradient(135deg, #3a2e10 0%, #5a4515 100%);
}
/* Ensure flex-centering of the star is preserved everywhere
   (the generic .page-body .flag-xxs rule overrides display to inline-block,
   which would push the star to the left and break vertical alignment). */
.page-body .flag-country-supporters,
.dropdown-item .flag-country-supporters {
    display: inline-flex;
}
.flag-country-supporters .flag-supporters-star,
.flag-supporters-star {
    color: #e6b422;
    font-size: 0.7em;
    line-height: 1;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .flag-supporters-star { color: #f5bd1f; }
/* Match-detail variant: keep the same rectangular shape as other country flags
   (height comes from .flag.match-detail-team-logo, width follows aspect-ratio). */
.flag-country-supporters.match-detail-team-logo .flag-supporters-star {
    font-size: 4.5rem;
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .flag-country-supporters.match-detail-team-logo .flag-supporters-star {
        font-size: 2.5rem;
    }
}

/* ---- Player injury week chip vertical alignment ---- */
.player-injury-week {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    line-height: 1;
}
.player-injury-week .icon-inline,
.player-injury-week .ti {
    transform: none;
    display: inline-block;
    vertical-align: middle;
}

/* ---- Player full display (name / team / rating block) ---- */
.player-full-name { font-weight: 600; }
.player-full-team { font-size: 0.85em; color: var(--tblr-secondary); }

.rating-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.rating-badge .ti {
    transform: translateY(-0.05rem) !important;
}

.dropdown-item .ti-coins {
    display: inline-block;
    transform: translateY(-0.15rem) !important;
}

/* ============================================================================
   RTL (right-to-left) language support
   Activated by setting dir="rtl" on the <html> element (see head.html.php).
   We rely on Bootstrap's logical CSS properties for most things; only the few
   layout helpers that hard-code "left/right" semantics need to be mirrored.
   ============================================================================ */
[dir="rtl"] .sticky-right {
    /* the right-side column should appear on the left in RTL layouts */
    text-align: inherit;
}
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
/* Dropdown menus that are pinned to one side need to flip too */
[dir="rtl"] .dropdown-menu-end { left: 0; right: auto; }
[dir="rtl"] .dropdown-menu-start { right: 0; left: auto; }
/* Card actions that float right in LTR should float left in RTL */
[dir="rtl"] .card-actions { margin-right: auto; margin-left: 0; }
/* Keep Tabler flag icons pointing the same way (flags are not mirrored) */
[dir="rtl"] .flag { transform: none; }


/* 1. THE MAIN PITCH CONTAINER */
.lineup-formation-grid {
    /* Define variables for easy scaling */
    --pitch-line: var(--tblr-border-color-translucent);
    --halfway-r: 70px;      /* Half-circle radius */
    --penalty-h: 100px;     /* Penalty area height */
    --arc-rx: 50px;         /* Oval horizontal radius */
    --arc-ry: 25px;         /* Oval vertical radius */
    
    background-color: var(--fa-card-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px 2px 15px 2px;

    background-image: 
        /* 1. TOP SEMICIRCLE (Responsive size) */
        radial-gradient(circle at 50% 0%, transparent var(--halfway-r), var(--pitch-line) calc(var(--halfway-r) + 1px), var(--pitch-line) calc(var(--halfway-r) + 2px), transparent calc(var(--halfway-r) + 3px)),

        /* 2. THE MASK (Hides bottom of oval) */
        linear-gradient(to top, var(--fa-card-color) var(--penalty-h), transparent calc(var(--penalty-h) + 0.5px)),

        /* 3. THE "D" OVAL (Using ellipse) */
        radial-gradient(ellipse var(--arc-rx) var(--arc-ry) at 50% calc(100% - var(--penalty-h)), transparent 100%, var(--pitch-line) 100%, var(--pitch-line) 105%, transparent 110%);

    background-repeat: no-repeat;
}

/* 2. MOBILE RESPONSIVENESS */
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .lineup-formation-grid {
        --halfway-r: 45px;   /* Smaller arc on mobile */
        --penalty-h: 80px;    /* Slightly shorter box to save vertical space */
        --arc-rx: 35px;       /* Narrower oval */
        --arc-ry: 18px;       /* Flatter oval */
    }
}

/* 3. THE PENALTY AREA (18-yard box) */
.lineup-formation-grid::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: var(--penalty-h); /* Uses the variable! */
    border: 2px solid var(--pitch-line);
    border-bottom: none;
    z-index: -1;
}

/* 4. THE GOAL BOX (6-yard box) */
.lineup-formation-grid::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40%;
    right: 40%;
    height: calc(var(--penalty-h) * 0.35); /* Scaled based on penalty box */
    border: 2px solid var(--pitch-line);
    border-bottom: none;
    z-index: -1;
}

/* Container for the player - no background, no shadow */
.player-box-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transition: opacity 0.2s;
}

.player-box-minimal:hover {
    opacity: 0.8;
}

/* The Link - removes underlines and handles the stack */
.player-box-minimal .player-name-link {
    text-decoration: none !important;
    color: var(--tblr-body-color);
    display: block;
    width: 100%;
    margin-bottom: 2px;
}

/* First Name - Small and subtle */
.player-box-minimal .player-name-link .fname {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tblr-secondary);
    line-height: 1.1;
}

/* Last Name - Bold and primary */
.player-box-minimal .player-name-link .lname {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    /* This ensures very long names still wrap if necessary */
    word-break: break-word; 
}

/* Rating - Simple and tight */
.player-box-minimal .player-rating-minimal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 800;
}

.player-box-minimal .rating-num {
    font-size: 0.65rem;
}

.player-box-minimal .player-rating-minimal .rating-badge {
    padding: 1.5px 3px 0.5px 3px;
    border-radius: 5px;
}

/* Mobile adjustment for 5-column rows */
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .player-box-minimal .player-name-link .fname { font-size: 0.65rem; }
    .player-box-minimal .player-name-link .lname { font-size: 0.65rem; }
    .player-box-minimal .player-rating-minimal { font-size: 0.65rem; }
}

.player-box-minimal.pos1 {    
    transform: translateY(7px);
}

/* ======================================================================
 * Pre-match lineup editor (player-box-minimal + lineup-player-edit)
 * Klikatelne jmeno hrace s ikonou pro zmenu, otevirajici modalni vyber.
 * ====================================================================== */
.player-box-minimal.lineup-player-edit .player-name-link {
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1.1;
}

/* Pouzivame :focus-visible aby outline nezustaval po klikani mysi/tapnuti.
   Klasicky :focus by drzel border po kazdem tapu na mobilu, coz vede
   k matoucimu chovani (uzivatel vidi border okolo predtim klikleho hrace). */
.player-box-minimal.lineup-player-edit .player-name-link:focus {
    outline: none;
}
.player-box-minimal.lineup-player-edit .player-name-link:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.player-box-minimal.lineup-player-edit .player-empty-icon {
    font-size: 1.25rem;
    color: var(--tblr-secondary);
}

.player-box-minimal.lineup-player-edit .player-edit-indicator {
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.7;
    pointer-events: none;
}

.player-box-minimal.lineup-player-edit:hover .player-edit-indicator {
    opacity: 1;
    color: var(--tblr-primary);
}

@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    .player-box-minimal.lineup-player-edit .player-empty-icon {
        font-size: 1rem;
    }
    .player-box-minimal.lineup-player-edit .player-edit-indicator {
        font-size: 0.65rem;
    }
}

/* POS 1: Goalkeeper (Neutral / Steady) */
.pos1 .player-edit-indicator .ti {
    color: #6c7a81 !important; /* Slate Gray */
    filter: drop-shadow(0 0 2px rgba(108, 122, 129, 0.5));
}

/* POS 2: Defender (Safety / Foundation) */
.pos2 .player-edit-indicator .ti {
    color: #2fb344 !important; /* Tabler Green */
    filter: drop-shadow(0 0 2px rgba(47, 179, 68, 0.5));
}

/* POS 3: Winger / Wide Mid (Creativity / Energy) */
.pos3 .player-edit-indicator .ti {
    color: #beac09 !important; /* Tabler Yellow */
    filter: drop-shadow(0 0 2px rgba(246, 165, 27, 0.5));
}

/* POS 4: Midfielder (Engine Room / Control) */
.pos4 .player-edit-indicator .ti {
    color: #206bc4 !important; /* Tabler Blue */
    filter: drop-shadow(0 0 2px rgba(32, 107, 196, 0.5));
}

/* POS 5: Striker (Danger / Goal) */
.pos5 .player-edit-indicator .ti {
    color: #d63939 !important; /* Tabler Red */
    filter: drop-shadow(0 0 2px rgba(214, 57, 57, 0.5));
}

/* Modalni okno s vyberem hrace - hlavicka skupiny pozice */
#lineupPlayerModal .modal-header {
    padding-left: 0.75rem;
    min-height: 2.5rem !important;
}

#lineupPlayerModal .modal-header .btn-close {
    height: 2.5rem !important;
}

/* hlavicka skupiny (jmeno pozice + ikony statu) - mirne odlisene pozadi */
#lineupPlayerModal .lineup-modal-group th {
    background-color: var(--tblr-bg-surface-secondary);
    padding: 0.35rem 0.4rem !important;
    border-top: 1px solid var(--tblr-border-color);
    font-size: 0.85rem;
}

/* prvni / posledni sloupec maji vetsi vnejsi padding */
#lineupPlayerModal .lineup-modal-group th:first-child,
#lineupPlayerModal .lineup-modal-row > td:first-child {
    padding-left: 0.75rem !important;
}
#lineupPlayerModal .lineup-modal-group th:last-child,
#lineupPlayerModal .lineup-modal-row > td:last-child {
    padding-right: 0.45rem !important;
}

/* radky hracu - kompaktnejsi padding */
#lineupPlayerModal .lineup-modal-row td {
    padding: 0.5rem 0.3rem 0.4rem 0.3rem !important;
    font-size: 0.85rem;
    vertical-align: middle;
}
@media (max-width: 575.98px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    #lineupPlayerModal .lineup-modal-row td {
        font-size: 0.75rem !important;
    }
}

/* cely radek je klikatelny - cursor je v CSS, ne inline na kazdem <tr> */
#lineupPlayerModal .lineup-modal-row {
    cursor: pointer;
}

/* prazdny radek "no player" - stejny padding pro colspan */
#lineupPlayerModal .lineup-modal-empty td {
    padding: 0.4rem 0.75rem !important;
}

/* injury badge - kompaktnejsi */
#lineupPlayerModal .lineup-modal-row .badge {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}

/* Dark theme - hlavicka skupiny vyraznejsi nez radky */
[data-bs-theme="dark"] #lineupPlayerModal .lineup-modal-group th {
    background-color: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.10);
}

/* Zoom settings */
/* Ensure the body expands to fill the screen even when scaled in Firefox */
@-moz-document url-prefix() {
    body {
        width: 100% !important;
        /* If zoomed out, we need the container to remain full width */
        min-height: 100vh !important;
    }
    
    /* If scaling the whole body, the wrapper might need adjustment */
    .page {
        width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Optional: Prevent the navbar from shrinking horizontally if it is sticky */
body {
    transition: zoom 0.1s ease-in-out !important; /* Makes the transition smooth */
}

/* Default discussion/avatar icon (used when user has no uploaded avatar) */
.avatar .ti-user {
    font-size: 1.5rem;
    color: var(--tblr-primary);
}

/* Uploaded avatar image: keep the same rounded border as the default avatar */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--tblr-border-color);
    border-radius: inherit;
    background-color: var(--tblr-bg-surface-secondary);
}

/* Color scheme picker (settings-supporter) - circular swatches with theme-aware
   selected ring that stays visible on both light and dark backgrounds. */
.color-scheme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--tblr-border-color);
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
.color-scheme-btn:hover {
    transform: scale(1.1);
}
.color-scheme-btn.is-active {
    border-color: var(--tblr-body-color);
    box-shadow: 0 0 0 2px var(--tblr-body-bg), 0 0 0 4px var(--tblr-body-color);
}