/*
 * LigaHub — small plain-CSS overlay on top of Tabler (no preprocessor, no
 * Tailwind/@apply, no build step). Header, navbar, profile and footer use
 * native Tabler components/classes and need NO custom CSS here. This file only
 * keeps: a form-field shim for Django's default {{ form.as_p }}, icon alignment,
 * and a few content helpers (hero, stat cards, standings emphasis).
 */

/* --- Brand theme: indigo as the primary/action colour ------------------- */
/* Tabler 1.4.0 buttons/links/badges read these CSS variables, so recolouring
   the theme is just an override — no SCSS rebuild, no manual per-component
   repainting. Stays a light theme; only the accent moves to indigo (#735dff). */
:root {
  --tblr-primary: #735dff;
  --tblr-primary-rgb: 115, 93, 255;
  --tblr-primary-darken: #5a45e0; /* hover/active */
  --tblr-primary-lt: #ece9ff; /* soft tint for bg-primary-lt / avatars */
  --tblr-link-color: #735dff;
  --tblr-link-hover-color: #5a45e0;
}

/* --- Avatars ------------------------------------------------------------- */
/* Tabler draws a faint inset ring on every avatar — it defines
   --tblr-avatar-box-shadow ON the .avatar selector (not :root) and applies it via
   box-shadow. We show real logos / clean monograms, so drop the ring: null both
   the variable and the property at the same scope. No stacked avatar lists are
   used, so nothing relies on the ring for separation. */
.avatar {
  --tblr-avatar-box-shadow: none;
  box-shadow: none;
}

/* --- Icons (Tabler webfont) alignment ----------------------------------- */
.ti {
  vertical-align: -0.125em;
  line-height: 1;
}

/* --- Form field shim ----------------------------------------------------- */
/* Style bare inputs rendered by Django forms as Tabler-like .form-control. */
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
form select,
form textarea {
  display: block;
  width: 100%;
  max-width: 28rem;
  padding: 0.4375rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.4285714;
  color: #182433;
  background-color: #fff;
  border: 1px solid #dadfe5;
  border-radius: 4px;
  appearance: auto;
}

form input[type="file"] {
  margin-top: 0.25rem;
}

form p {
  margin-bottom: 1rem;
}

form label {
  font-weight: 500;
}

/* Django's default validation lists. */
ul.errorlist {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: #d63939;
  font-size: 0.8125rem;
  list-style: disc;
}

.helptext {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #667382;
}

/* --- Inline action groups (list rows with edit/remove buttons) ---------- */
.row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.row-actions form {
  margin: 0;
}

/* --- Public hero -------------------------------------------------------- */
.hero {
  padding: 4rem 1rem;
  text-align: center;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.hero-lead {
  font-size: 1.125rem;
  color: #667382;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

/* --- Summary / stat cards ----------------------------------------------- */
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}
.stat-card .stat-label {
  color: #667382;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

/* --- Standings table emphasis ------------------------------------------- */
.standings-table tbody tr:first-child {
  font-weight: 600;
}
.standings-table tbody tr:first-child td:first-child {
  border-left: 3px solid var(--tblr-primary, #4263eb);
}
/* Group stage: a green left stripe marks the rows advancing to the playoff
   (defined after the leader rule so it wins for a qualifying leader row). */
.standings-table tbody tr.lh-qualifies td:first-child {
  border-left: 3px solid var(--tblr-green, #2fb344);
}

/* --- Misc rhythm -------------------------------------------------------- */
.page-body .card + .card {
  margin-top: 1.25rem;
}
/* Inside a .space-y stack the flex gap already spaces cards; cancel the generic
   adjacent-card margin so it doesn't double up (e.g. the public leagues list). */
.page-body .space-y > .card + .card {
  margin-top: 0;
}
.feature-card .ti {
  font-size: 1.75rem;
  color: var(--tblr-primary, #4263eb);
}

/* Brand logo mark (inline SVG, no background). currentColor → brand colour so it
   tracks --tblr-primary; the adjacent wordmark keeps the link's own text colour. */
.brand-icon {
  color: var(--tblr-primary, #735dff);
  vertical-align: -0.2em;
}

/* --- Match row (mobile alignment) -------------------------------------- */
/* Flex children holding team names need min-width:0 so .text-truncate can
   shrink long names ("Красная Пресня") instead of pushing the row off-screen. */
.min-w-0 { min-width: 0; }
/* Score column: a min-width keeps scores aligned across rows ("10:10" fits),
   but it grows for a playoff row that also shows a penalty badge (пен. 5:4)
   instead of clipping it. A touch narrower on very small phones. */
/* Wide enough for the widest of the three stacked lines ("22.07.2026" and the
   "Тех. поражение" badge), and no wider: every pixel here comes straight out of
   the team names, which have to survive the half-width dashboard widgets too. */
.match-score { min-width: 6rem; }
@media (max-width: 480px) { .match-score { min-width: 5.5rem; } }
/* Date above the score and status below it: supporting detail, not the headline.
   The stack is a flex column so one `gap` spaces all three lines evenly. */
.match-score { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.match-meta-line { font-size: 0.6875rem; line-height: 1.4; }
.match-meta-line .badge { font-size: inherit; padding: 0.25rem 0.5rem; }

/* --- Team crests -------------------------------------------------------- */
/* Constrained by HEIGHT only — width follows the image's own proportions, so a
   wide wordmark is never sliced top and bottom the way .avatar's
   background-size: cover slices it. max-width stops one extreme banner logo from
   crowding out the team name; object-fit keeps it undistorted if it hits that. */
.team-logo {
  height: 1.75rem;
  width: auto;
  max-width: 3.5rem;
  object-fit: contain;
  flex-shrink: 0;
}
.team-logo-xs { height: 1.25rem; max-width: 2.5rem; }
/* Full-width match feeds (public/_match_feed_row.html): a 3-column grid whose
   outer tracks are equal, so the middle (the match itself) is centred on the row
   and every score lands on the same vertical line — with plain flex a row without
   a date is wider than one with a date and the scores stop lining up. The left
   track is an empty spacer; the right one holds the date/status/actions. Below md
   the row falls back to flex (spacer hidden), as on phones there is no room. */
/* Layout lives entirely here, not in utility classes: Bootstrap's .d-flex is
   !important and would win over the grid below. */
.match-feed-row { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) {
  .match-feed-row {
    display: grid;
    /* Outer tracks wide enough for "22 июля 2026 г. + badge" on one line, so
       rows with and without a date keep the same height. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: 0.5rem;
  }
}
/* Footer link rows: breathing room when they wrap to several lines on mobile
   (items are display:inline, so line-height — not row-gap — adds the space). */
.footer .list-inline { line-height: 2; }

/* Bracket accent presets — recolor winner/active cells (also carried into PNG). */
[data-bracket-grid][data-accent="blue"] .list-group-item.active { border-left-color: #066fd1; background-color: rgba(6, 111, 209, 0.12); }
[data-bracket-grid][data-accent="green"] .list-group-item.active { border-left-color: #2fb344; background-color: rgba(47, 179, 68, 0.14); }
[data-bracket-grid][data-accent="red"] .list-group-item.active { border-left-color: #d63939; background-color: rgba(214, 57, 57, 0.12); }
[data-bracket-grid][data-accent="orange"] .list-group-item.active { border-left-color: #f76707; background-color: rgba(247, 103, 7, 0.14); }