html {
  font-size: 12px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Shared FootyPreds styling extracted from views --- */

/* Layout container used across pages (predictions, league table, player pages) */
.league-wrapper,
.player-fixtures {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Card-like look for tables to match fixture "cards" */
.league-table .table,
.player-fixtures .table {
  background-color: #0B0692;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0 12px 24px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.18); */
}

/* Header row visual */
.league-table .table thead th,
.player-fixtures .table thead th {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
}

/* Row base and hover */
.league-table .table tbody tr,
.player-fixtures .table tbody tr {
  background: rgba(255,255,255,0.02);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

/* Highlight the current user row */
.current-user-row {
  outline: 2px solid var(--bs-success);
  outline-offset: -2px;
  background: rgba(0,0,0,0.06);
  box-shadow: 0 10px 20px rgba(0,0,0,0.24);
}

/* Trophies and small image helpers */
.trophies-cell {
  max-width: 100px;
}

.trophies {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: left;
}

.trophies img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.trophies-sm img {
  width: 8px;
  height: 16px;
  vertical-align: middle;
}

/* Table cell spacing */
.league-table .table td,
.league-table .table th,
.player-fixtures .table td,
.player-fixtures .table th {
  padding: .65rem .3rem;
}

/* Fixture list / card layout (Predictions page) */
.fixture-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Desktop and larger: two fixtures side-by-side */
@media (min-width: 992px) {
  .fixture-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fixture {
  background-color: #0B0692;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.fixture:hover {
  box-shadow: 0 18px 36px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.22);
  transform: translateY(-3px);
}

.teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.team {
  flex: 1;
  text-align: center;
  font-weight: bold;
  word-break: break-word;
  color: #fff;
}

.teams img {
  display: block;
  margin: 0.5rem auto 0;
  max-height: 48px;
  max-width: 100%;
  height: auto;
}

.kickoff {
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.predictions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Inputs styling for numeric predictions */
.predictions input[type="number"] {
  width: 60px;
  background-color: #060270;
  color: #fff;
  padding: 0.3rem;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
}

/* WebKit (Chrome, Safari, Edge Chromium) - style the spin buttons */
.predictions input[type="number"]::-webkit-outer-spin-button,
.predictions input[type="number"]::-webkit-inner-spin-button {
  background-color: #060270;
  color: #fff;
  height: auto;
  width: 18px;
  margin: 0;
  box-shadow: none;
  border-left: 1px solid rgba(255,255,255,0.06);
}

/* Firefox numeric spin pseudo-elements (if present) */
    .predictions input[type="number"]::-moz-number-spin-up-button,
    .predictions input[type="number"]::-moz-number-spin-down-button {
        background-color: #060270;
        color: #fff;
        box-shadow: none;
        border-left: 1px solid rgba(255,255,255,0.06);
    }

/* Ensure arrow glyphs (if any) inherit the color */
    .predictions input[type="number"]::-webkit-outer-spin-button::after,
    .predictions input[type="number"]::-webkit-inner-spin-button::after {
        color: inherit;
    }

/* On very small screens, slightly larger inputs for tap targets */
@media (max-width: 400px) {
  input[type="number"] {
    width: 80px;
  }
}

/* Player page header and spinner (HTMX) */
.player-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
}

.player-header .nav-left {
  justify-self: start;
}

.player-header .nav-right {
  justify-self: end;
}

.player-header .player-name {
  margin: 0;
  justify-self: center;
  text-align: center;
  font-weight: 600;
}

.htmx-indicator {
  display: none;
  margin-left: 8px;
}

.htmx-indicator.htmx-request {
  display: inline-block;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1; /* slate-300 */
  border-top-color: #1f2937; /* gray-800 */
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

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

/*.fixture-controls select:focus,
.fixture-controls select:focus-visible {
  outline: none;
  border-color: #2563eb;*/ /* blue border */
  /*border-radius: 6px;
  position: relative;
  z-index: 10;*/ /* ensure ring is above adjacent elements */
/*}*/

.btn-outline-secondary {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
}

/* Small badges used for points; server-side inline style still allowed */
.points-badge {
  display:inline-block;
  font-size: 0.6rem;
  min-width:1.5rem;
  text-align:center;
  padding:.2rem .5rem;
  border-radius:.25rem;
}

.points-zero {
    background-color: #dc3545;
    color: #fff;
}

.points-one {
    background-color: #ffc107;
    color: #212529;
}

.points-many {
    background-color: #28a745;
    color: #fff;
}

/* Scoped small badge column: fixed 24px width, prevent wrapping/overflow */
.badge-cell {
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
    text-align: center; /* default center, overridden by .home/.away */
}

    /* Left-align content for home badge cell */
    .badge-cell.home {
        text-align: right;
        padding-left: 0.25rem;
    }

    /* Right-align content for away badge cell */
    .badge-cell.away {
        text-align: left;
        padding-right: 0.25rem;
    }

    /* If the badge helper outputs an inline element that should be centered vertically, use this */
    .badge-cell .badge,
    .badge-cell > * {
        display: inline-block;
        vertical-align: middle;
    }

    /* Ensure any img inside the badge-cell is aligned/ spaced appropriately */
    .badge-cell.home img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.25rem;
    }

    .badge-cell.away img {
        display: inline-block;
        vertical-align: middle;
        margin-left: 0.25rem;
    }

.v-cell {
    width: 24px; /* enforce width */
    min-width: 24px;
    max-width: 24px;
    padding: 0;
    white-space: nowrap; /* keep single character on one line */
    overflow: hidden;
    text-align: center;
}

@media (max-width: 576px) {
  .league-wrapper,
  .player-fixtures {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}