/* --------------------------------------------------------------------------
   sfc.css - Szabo Football Contest site layout on Bootstrap 5.3.
   Colors come from the theme file (css/themes/<theme>.css) via --sfc-* variables.
   -------------------------------------------------------------------------- */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; overflow-y: scroll; }

body {
  font-family: var(--sfc-font);
  background: var(--sfc-body-bg);
  color: var(--sfc-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content { flex: 1 0 auto; padding: 1.5rem 0 2rem; }

a { color: var(--sfc-link); font-weight: 600; text-decoration: none; }
a:hover { color: var(--sfc-link-hover); }

h1, h2, h3, h4, h5, h6 { font-family: var(--sfc-heading-font); color: var(--sfc-heading); }

::selection { background: var(--sfc-accent); color: #fff; }

/* ---------- Navbar ---------- */
.navbar-sfc {
  background: var(--sfc-header-bg);
  border-bottom: var(--sfc-header-border);
  box-shadow: var(--sfc-header-shadow);
  padding: var(--sfc-header-pad) 0;
}
.navbar-sfc .navbar-brand { padding: 0; }
.navbar-sfc .navbar-brand img { height: var(--sfc-logo-h); width: auto; }
.navbar-sfc .navbar-nav {
  background: var(--sfc-nav-bg);
  border-radius: var(--sfc-nav-radius);
  gap: var(--sfc-nav-gap);
}
.navbar-sfc .nav-link {
  color: var(--sfc-nav-color);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 0.95rem;
  border-radius: var(--sfc-nav-link-radius);
}
.navbar-sfc .nav-link:hover,
.navbar-sfc .nav-link:focus,
.navbar-sfc .nav-link.show {
  color: #fff;
  background: var(--sfc-nav-hover-bg);
}
.navbar-sfc .nav-link.active { color: #fff; background: var(--sfc-nav-active-bg); }
.navbar-sfc .dropdown-menu {
  background: var(--sfc-dropdown-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
}
.navbar-sfc .dropdown-item { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.navbar-sfc .dropdown-item:hover,
.navbar-sfc .dropdown-item:focus,
.navbar-sfc .dropdown-item.active { background: var(--sfc-dropdown-hover-bg); color: #fff; }
.navbar-sfc .dropdown-divider { border-color: rgba(255, 255, 255, 0.18); }
.navbar-sfc .navbar-toggler { border-color: var(--sfc-toggler-border); }
/* News + Login/Admin group (inc_header.php): small gap after the main links on desktop;
   in the collapsed phone menu it continues the main list directly */
@media (min-width: 992px) {
  .navbar-sfc .sfc-nav-always { margin-left: var(--sfc-nav-gap, 0.25rem); }
}
@media (max-width: 991.98px) {
  .navbar-sfc .navbar-collapse .sfc-nav-always { margin-top: 0; }
}
.navbar-sfc .navbar-toggler-icon { background-image: var(--sfc-toggler-icon); }

/* ---------- Banner ---------- */
/* The banner stops growing at --sfc-banner-max (1920px, i.e. 240px tall) and is centred.
   Wider than that, the sides show the flat dark --sfc-banner-side-bg and the banner's
   own outer --sfc-banner-fade-w (200px) fade into it, so there is no hard edge.
   Add .sfc-banner--plain to drop the fade (flat colour next to a hard image edge). */
.sfc-banner { background: var(--sfc-banner-side-bg, var(--sfc-banner-bg)); line-height: 0; }
.sfc-banner-inner {
  max-width: var(--sfc-banner-max);
  margin: 0 auto;
  padding: var(--sfc-banner-pad);
}
.sfc-banner picture { display: block; }
@media (min-width: 1921px) {
  .sfc-banner { --sfc-banner-fade-w: 200px; }
  .sfc-banner img {
    --sfc-banner-fade: linear-gradient(to right,
      transparent 0, #000 var(--sfc-banner-fade-w),
      #000 calc(100% - var(--sfc-banner-fade-w)), transparent 100%);
    -webkit-mask-image: var(--sfc-banner-fade);   /* older Chromium / Safari */
    mask-image: var(--sfc-banner-fade);
  }
  .sfc-banner--plain img { -webkit-mask-image: none; mask-image: none; }
}
.sfc-banner img {
  display: block;
  width: 100%;
  /* Full width at the image's own aspect ratio (desktop 2560x320 = 8:1, phone
     banner_m 1170x270 below 768px): no height cap and no cropping, so the
     text keeps the same proportion at every width */
  height: auto;
}

/* ---------- Section titles and text blocks ---------- */
.title-1 h2,
.title-1 h3 {
  font-weight: var(--sfc-title-weight);
  color: var(--sfc-title-color);
  background: var(--sfc-title-bg);
  border-bottom: var(--sfc-title-border);
  padding: var(--sfc-title-pad);
  border-radius: var(--sfc-title-radius);
  margin: 0 0 0.75rem;
}
.title-1 h2 { font-size: var(--sfc-h2-size); }
.title-1 h3 { font-size: var(--sfc-h3-size); }
.text-1 { padding-left: var(--sfc-text-indent); line-height: 1.5; }
.text-1 h5 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.35rem; }

.sfc-sidebar .text-1 a { display: inline-block; padding: 0.1rem 0; }
.sfc-notice { color: var(--bs-danger); font-weight: 700; }

/* Vertical spacers kept from the original layout */
.space5 { height: 5px; } .space10 { height: 10px; } .space15 { height: 15px; }
.space20 { height: 20px; } .space30 { height: 30px; } .space40 { height: 40px; }
.space50 { height: 50px; } .space60 { height: var(--sfc-sidebar-offset); }

/* ---------- Tables ---------- */
/* Table-header colours, shared by all themes. body[data-thead] comes from inc_theme.php
   (admin: Site Display Settings, stored per theme in sfc_options). Keep in sync with
   sfc_thead_options(). The theme files set the fallback --sfc-thead-* defaults. */
body[data-thead="slate"] { --sfc-thead-bg: #475569; --sfc-thead-fg: #fff;    --sfc-th-border: #334155; }
body[data-thead="red"]   { --sfc-thead-bg: #9d261e; --sfc-thead-fg: #fff;    --sfc-th-border: #6e312a; }
body[data-thead="light"] { --sfc-thead-bg: #dbe4f0; --sfc-thead-fg: #0b1f3a; --sfc-th-border: #b7c6d9; }
body[data-thead="gold"]  { --sfc-thead-bg: #c5a059; --sfc-thead-fg: #0b1f3a; --sfc-th-border: #a8863f; }
.table { --bs-table-striped-bg: var(--sfc-row-stripe); --bs-table-hover-bg: var(--sfc-row-hover); }
.table > thead th,
.table > thead td {
  background: var(--sfc-thead-bg);
  color: var(--sfc-thead-fg);
  border-color: var(--sfc-th-border);
  font-weight: var(--sfc-th-weight);
  vertical-align: middle;
  white-space: nowrap;
}
.table td { vertical-align: top; }
.table-responsive { margin-bottom: 1rem; }
.table-responsive > .table { margin-bottom: 0; }

/* Sortable headers (tablesorter 2.32): SVG arrows tinted with currentColor so they
   stay visible on light or dark thead backgrounds (mask + background-color). */
.tablesorter-header {
  background-image: none;
  cursor: pointer;
  padding-right: 1.35rem !important;
  position: relative;
}
.tablesorter-header:not(.sorter-false)::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  width: 0.7rem;
  height: 0.9rem;
  transform: translateY(-50%);
  background-color: currentColor;
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 0 L11 6 H1 Z M6 16 L1 10 H11 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 0 L11 6 H1 Z M6 16 L1 10 H11 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tablesorter-headerAsc:not(.sorter-false)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 2 L11 9 H1 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 2 L11 9 H1 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 1;
}
.tablesorter-headerDesc:not(.sorter-false)::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 14 L1 7 H11 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23000' d='M6 14 L1 7 H11 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 1;
}
.tablesorter-headerAsc { border-bottom: 2px solid var(--sfc-thead-fg) !important; }
.tablesorter-headerDesc { border-bottom: 2px solid var(--sfc-thead-fg) !important; }
.tablesorter-header.sorter-false { cursor: default; padding-right: 0.5rem !important; }
.tablesorter-header.sorter-false::after { display: none; }

/* Standings */
#tblTeams, #tblAddEntry, #tblEntries { font-size: 0.92rem; }
/* Row-click toggling (js/functions.js): whole body row is clickable.
   Colors come from theme variables, so this works in every theme. */
.sfc-row-toggle > tbody > tr { cursor: pointer; }
.sfc-row-toggle > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--sfc-row-hover); }
.sfc-row-toggle > tbody > tr:has(input:disabled) { cursor: default; }
/* Points value as a button that opens the breakdown popover (teams.php, Standings) */
.sfc-pts-btn,
.sfc-pts-in {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: var(--sfc-link);
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sfc-pts-btn:hover, .sfc-pts-btn:focus-visible,
.sfc-pts-in:hover, .sfc-pts-in:focus-visible { color: var(--sfc-link-hover); }
/* Standings (.sfc-pts-in): points inside the pick list keep the surrounding text's weight/colour
   (bold/grey for eliminated teams) and width; the padding/negative margin only
   enlarges the tap area */
.sfc-pts-in { font-weight: inherit; color: inherit; padding: 0.2em 0.15em; margin: -0.2em -0.15em; }
/* Larger, forgiving hover/tap target for both variants: an invisible box a few px around the
   number (absolutely positioned, so the layout is unchanged) */
.sfc-pts-btn, .sfc-pts-in { position: relative; }
.sfc-pts-btn::after, .sfc-pts-in::after { content: ""; position: absolute; inset: -6px -5px; }
/* Standings picks wrap onto several lines: keep the vertical extension small so a number's
   area never overlaps the pick on the line above or below */
.sfc-pts-in::after { inset: -2px -5px; }
/* Phones: each "TEAM (n)" is unbreakable, so trim the Picks cell's side padding to keep the
   Standings table no wider than with the old breakable text */
@media (max-width: 575.98px) { .table td.sfc-picks { padding-inline: 0.3rem; } }
.sfc-pts-btn:focus-visible,
.sfc-pts-in:focus-visible { outline: 2px solid var(--sfc-accent); outline-offset: 2px; border-radius: 2px; }
.sfc-pb-popover { --bs-popover-max-width: 290px; --bs-popover-header-bg: var(--sfc-thead-bg); --bs-popover-header-color: var(--sfc-thead-fg); font-size: 0.85rem; }
.sfc-pb-popover .popover-header { font-size: 0.9rem; font-weight: 600; }
.sfc-pb-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; }
.sfc-pb-calc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfc-pb-zero { color: var(--bs-secondary-color); opacity: 0.7; }
.sfc-pb-total { border-top: 1px solid var(--bs-border-color); margin-top: 0.25rem; padding-top: 0.3rem; font-weight: 700; }
#tblTeams .points-col { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* Scoreboard (index sidebar, desktop only) */
#scores { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
/* Same header colors as standings (--sfc-thead-*); keeps scores in sync with the table-header option */
#scores thead th {
  background: var(--sfc-thead-bg);
  color: var(--sfc-thead-fg);
  font-weight: 600;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--sfc-th-border);
}
#scores tbody td { padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--sfc-border); vertical-align: middle; }
#scores tbody tr:hover { background: var(--sfc-row-hover); }
.team { display: flex; align-items: center; }
.team .name { font-size: 0.85rem; font-weight: 650; color: var(--sfc-heading); }
.team .meta { font-size: 0.7rem; color: var(--sfc-muted); }
.score { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1rem; }
.score.muted { color: var(--sfc-muted); font-weight: 450; font-size: 0.85rem; }
.score.win { color: #b45309; }
.sfc-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 7px;
}
.date { font-size: 0.72rem; color: var(--sfc-muted); }
.st-final { background: rgba(5, 150, 105, 0.15); color: #059669; }
.st-live { background: rgba(239, 68, 68, 0.18); color: #ef4444; animation: sfc-pulse 2s ease-in-out infinite; }
.st-pre { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.st-other { background: #e8ecf1; color: var(--sfc-muted); }
@keyframes sfc-pulse { 50% { opacity: 0.55; } }
.muted { color: var(--sfc-muted); }

/* ---------- Panels (sidebar and admin sections) ---------- */
.card-sfc {
  background: var(--sfc-card-bg);
  border: var(--sfc-card-border);
  border-radius: var(--sfc-card-radius);
  box-shadow: var(--sfc-card-shadow);
  padding: var(--sfc-card-pad);
  margin-bottom: 1.5rem;
}

/* ---------- Forms and buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--sfc-btn-bg);
  --bs-btn-border-color: var(--sfc-btn-bg);
  --bs-btn-hover-bg: var(--sfc-btn-hover-bg);
  --bs-btn-hover-border-color: var(--sfc-btn-hover-bg);
  --bs-btn-active-bg: var(--sfc-btn-hover-bg);
  --bs-btn-active-border-color: var(--sfc-btn-hover-bg);
  --bs-btn-disabled-bg: var(--sfc-btn-bg);
  --bs-btn-disabled-border-color: var(--sfc-btn-bg);
}
.form-control:focus, .form-check-input:focus { border-color: var(--sfc-accent); box-shadow: 0 0 0 0.2rem var(--sfc-focus-ring); }
.form-check-input:checked { background-color: var(--sfc-btn-bg); border-color: var(--sfc-btn-bg); }
.sfc-num { width: 4rem; display: inline-block; }

/* ---------- Tabs (news) and accordion (admin overview) ---------- */
/* News source tabs follow the table-header colour option (--sfc-thead-*):
   active = header colour; inactive/hover = light tints of it with body text (>= 4.5:1 for every option) */
.nav-tabs { border-bottom: 3px solid var(--sfc-thead-bg); gap: 0.25rem; }
.nav-tabs .nav-link {
  color: var(--sfc-text);
  background: color-mix(in srgb, var(--sfc-thead-bg) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--sfc-thead-bg) 30%, #fff);
  border-bottom: 0;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible { color: var(--sfc-text); background: color-mix(in srgb, var(--sfc-thead-bg) 28%, #fff); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover { color: var(--sfc-thead-fg); background: var(--sfc-thead-bg); border-color: var(--sfc-thead-bg); }
.accordion {
  --bs-accordion-active-bg: var(--sfc-accordion-active-bg);
  --bs-accordion-active-color: var(--sfc-accordion-active-color);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--sfc-focus-ring);
}
.accordion-button { font-weight: 600; }

/* ---------- Theme picker (formerly admin_theme.php; Settings > Display) ---------- */
.sfc-theme-option { cursor: pointer; }
.sfc-theme-option .form-check-input { margin-top: 0.35rem; }
/* Per-theme table-header block: indent to the label text column (radio width 1em + gap-2 0.5rem) */
.sfc-theme-thead { padding-left: calc(1em + 0.5rem); }
.sfc-swatch {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* ---------- Footer ---------- */
.footer-sfc {
  background: var(--sfc-footer-bg);
  color: var(--sfc-footer-color);
  border-top: var(--sfc-footer-border);
  padding: 1.25rem 0;
  flex-shrink: 0;
}
.footer-sfc a { color: var(--sfc-footer-link); }
.footer-sfc a:hover { color: var(--sfc-footer-link-hover); }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  background: var(--sfc-btn-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.back-to-top:hover, .back-to-top:focus { color: #fff; }
.back-to-top.show { opacity: 1; pointer-events: auto; }

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
  .navbar-sfc .navbar-nav { margin-top: 0.5rem; }
  .space60 { height: 0; }
}
@media (max-width: 767.98px) {
  .navbar-sfc .navbar-brand img { height: var(--sfc-logo-h-sm); }
  .text-1 { padding-left: 0; }
  #tblTeams, #tblAddEntry, #tblEntries { font-size: 0.82rem; }
}

/* ---------- Rules page (rules.php) ---------- */
.sfc-rules section.card-sfc { margin-bottom: 1.5rem; }
.sfc-rules section.card-sfc > .title-1:first-child h3 { margin-top: 0; }
.sfc-rules p { line-height: 1.6; overflow-wrap: anywhere; }
.sfc-rules-list { padding-left: 1.25rem; margin-bottom: 1rem; }
.sfc-rules-list li { margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.sfc-rules-address { padding-left: 1.25rem; margin-bottom: 1rem; }
.sfc-rules .table td:first-child, .sfc-rules .table th:first-child { white-space: nowrap; width: 1%; }
@media (max-width: 767.98px) {
  .sfc-rules section.card-sfc { margin-bottom: 1rem; }
  .sfc-rules .table { font-size: 0.9rem; }
}