/**
 * Fil: /assets/css/score-tables.css
 * Syfte:
 * - Gemensam tabellmotor för:
 *   - /public/topp5.php
 *   - /public/rattatipset.php
 *   - /public/rattapolarna.php
 *
 * De gamla sidfilerna finns kvar tills vidare, men ska bara innehålla
 * sidunika regler.
 */

/* =========================================================
   Sida / titel
   ========================================================= */

.rattapolarna-page,
.rattatipset-page,
.topp5-page {
  max-width: 100%;
}

.rattapolarna-page-title,
.rattatipset-page-title,
.topp5-page-title {
  margin-bottom: .75rem;
}

.rattapolarna-page-title h1,
.rattatipset-page-title h1,
.topp5-page-title h1 {
  margin-bottom: .15rem;
}

/* =========================================================
   Kort / ram
   ========================================================= */

.rattapolarna-card,
.rattatipset-card,
.topp5-card {
  background: #fff;
  border: 1px solid var(--ft-border-color);
  border-radius: var(--ft-radius-lg);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.05);
}

/* =========================================================
   Scrollram / tabellbas
   ========================================================= */

.rattapolarna-table-wrap,
.rattatipset-table-wrap,
.topp5-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #333;
  border-radius: .35rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.rattapolarna-table-wrap,
.rattatipset-table-wrap {
  width: 100%;
}

.rattapolarna-table,
.rattatipset-table,
.topp5-table {
  width: max-content;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: .76rem;
  line-height: 1.15;
}

.rattapolarna-table,
.rattatipset-table {
  min-width: auto;
}

.topp5-table {
  min-width: 0;
}

.rattapolarna-table th,
.rattapolarna-table td,
.rattatipset-table th,
.rattatipset-table td,
.topp5-table th,
.topp5-table td {
  border: 1px solid #333;
  padding: .18rem .28rem;
  vertical-align: middle;
  white-space: nowrap;
}

.rattapolarna-table thead th,
.rattatipset-table thead th,
.topp5-table thead th {
  background: #fff;
  color: #111;
  font-weight: 800;
  text-align: center;
}

/* =========================================================
   Gemensamma kolumnbredder
   ========================================================= */

.rattapolarna-col-date,
.rattatipset-col-date,
.topp5-col-date {
  width: 5.6rem;
  min-width: 5.6rem;
  max-width: 5.6rem;
  white-space: nowrap;
}

.rattapolarna-col-group,
.rattatipset-col-group,
.topp5-col-group {
  width: 2.7rem;
  min-width: 2.7rem;
  max-width: 2.7rem;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-col-info,
.rattatipset-col-info,
.topp5-col-info {
  width: 10.9rem;
  min-width: 10.9rem;
  max-width: 10.9rem;
}

.rattapolarna-col-result,
.rattatipset-col-result,
.topp5-col-result {
  width: 6.3rem;
  min-width: 6.3rem;
  max-width: 6.3rem;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-col-tip-pair,
.rattatipset-col-tip-pair,
.topp5-col-tip-pair {
  width: 6.1rem;
  min-width: 6.1rem;
  max-width: 6.1rem;
}

.rattapolarna-col-tip-result,
.rattatipset-col-tip-result,
.topp5-col-tip-result {
  width: 4.25rem;
  min-width: 4.25rem;
  max-width: 4.25rem;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-col-tip-sign,
.rattatipset-col-tip-sign,
.topp5-col-tip-sign {
  width: 1.85rem;
  min-width: 1.85rem;
  max-width: 1.85rem;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-col-tip-wide,
.rattatipset-col-tip-wide,
.topp5-col-tip-wide {
  width: 6.1rem;
  min-width: 6.1rem;
  max-width: 6.1rem;
  text-align: center;
  white-space: nowrap;
}

/* Desktop: lite mer plats för långa lagnamn */
@media (min-width: 769px) {
  .rattapolarna-col-result,
  .rattatipset-col-result,
  .topp5-col-result {
    width: 6.8rem;
    min-width: 6.8rem;
    max-width: 6.8rem;
  }

  .rattapolarna-col-tip-pair,
  .rattapolarna-col-tip-wide,
  .rattatipset-col-tip-pair,
  .rattatipset-col-tip-wide,
  .topp5-col-tip-pair,
  .topp5-col-tip-wide {
    width: 6.8rem;
    min-width: 6.8rem;
    max-width: 6.8rem;
  }
}

/* =========================================================
   Personfärger
   ========================================================= */

.rattapolarna-person-1,
.rattapolarna-person-3,
.rattapolarna-person-5,
.rattapolarna-person-7,
.rattapolarna-person-9,
.rattatipset-person-1,
.rattatipset-person-3,
.rattatipset-person-5,
.rattatipset-person-7,
.rattatipset-person-9,
.topp5-person-1,
.topp5-person-3,
.topp5-person-5 {
  --score-person-bg: #c9c9c9;
  background: var(--score-person-bg);
}

.rattapolarna-person-2,
.rattapolarna-person-4,
.rattapolarna-person-6,
.rattapolarna-person-8,
.rattapolarna-person-10,
.rattatipset-person-2,
.rattatipset-person-4,
.rattatipset-person-6,
.rattatipset-person-8,
.rattatipset-person-10,
.topp5-person-2,
.topp5-person-4 {
  --score-person-bg: #aaa58b;
  background: var(--score-person-bg);
}

/* Bakåtkompatibla variabler om någon gammal regel använder dem */
.rattapolarna-person-1,
.rattapolarna-person-3,
.rattapolarna-person-5,
.rattapolarna-person-7,
.rattapolarna-person-9 {
  --rattapolarna-person-bg: var(--score-person-bg);
}

.rattapolarna-person-2,
.rattapolarna-person-4,
.rattapolarna-person-6,
.rattapolarna-person-8,
.rattapolarna-person-10 {
  --rattapolarna-person-bg: var(--score-person-bg);
}

.rattatipset-person-1,
.rattatipset-person-3,
.rattatipset-person-5,
.rattatipset-person-7,
.rattatipset-person-9 {
  --rattatipset-person-bg: var(--score-person-bg);
}

.rattatipset-person-2,
.rattatipset-person-4,
.rattatipset-person-6,
.rattatipset-person-8,
.rattatipset-person-10 {
  --rattatipset-person-bg: var(--score-person-bg);
}

.topp5-person-1,
.topp5-person-3,
.topp5-person-5 {
  --topp5-person-bg: var(--score-person-bg);
}

.topp5-person-2,
.topp5-person-4 {
  --topp5-person-bg: var(--score-person-bg);
}

/* Personfärg även i tabellhuvudet */
.rattapolarna-table thead th.rattapolarna-person-1,
.rattapolarna-table thead th.rattapolarna-person-2,
.rattapolarna-table thead th.rattapolarna-person-3,
.rattapolarna-table thead th.rattapolarna-person-4,
.rattapolarna-table thead th.rattapolarna-person-5,
.rattapolarna-table thead th.rattapolarna-person-6,
.rattapolarna-table thead th.rattapolarna-person-7,
.rattapolarna-table thead th.rattapolarna-person-8,
.rattapolarna-table thead th.rattapolarna-person-9,
.rattapolarna-table thead th.rattapolarna-person-10,
.rattatipset-table thead th.rattatipset-person-1,
.rattatipset-table thead th.rattatipset-person-2,
.rattatipset-table thead th.rattatipset-person-3,
.rattatipset-table thead th.rattatipset-person-4,
.rattatipset-table thead th.rattatipset-person-5,
.rattatipset-table thead th.rattatipset-person-6,
.rattatipset-table thead th.rattatipset-person-7,
.rattatipset-table thead th.rattatipset-person-8,
.rattatipset-table thead th.rattatipset-person-9,
.rattatipset-table thead th.rattatipset-person-10,
.topp5-table thead th.topp5-person-1,
.topp5-table thead th.topp5-person-2,
.topp5-table thead th.topp5-person-3,
.topp5-table thead th.topp5-person-4,
.topp5-table thead th.topp5-person-5 {
  background: var(--score-person-bg);
}

/* =========================================================
   Rubrikrader / personhuvuden
   ========================================================= */

.rattapolarna-section-title td,
.rattatipset-section-title td,
.topp5-section-title td {
  background: #f2f2f2;
  color: #111;
  font-weight: 800;
  text-align: left;
  padding: .32rem .28rem;
}

.rattatipset-section-title td {
  text-transform: none;
  letter-spacing: 0;
}

.rattapolarna-player-points,
.rattatipset-player-points,
.topp5-player-points {
  display: block;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.05;
}

.rattapolarna-player-name,
.rattatipset-player-name,
.topp5-player-name {
  display: block;
  font-weight: 800;
  line-height: 1.08;
  white-space: normal;
}

.rattapolarna-player-firstname,
.rattapolarna-player-lastname,
.rattatipset-player-firstname,
.rattatipset-player-lastname,
.topp5-player-firstname,
.topp5-player-lastname {
  display: block;
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-player-firstname,
.rattatipset-player-firstname,
.topp5-player-firstname {
  margin-bottom: .08rem;
}

/* =========================================================
   Match/fråga / resultat / tips
   ========================================================= */

.rattapolarna-match-title,
.rattatipset-match-title,
.topp5-match-title {
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.rattapolarna-result,
.rattatipset-result,
.topp5-result {
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.rattapolarna-tip,
.rattatipset-tip,
.topp5-tip {
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   Summor
   ========================================================= */

.rattapolarna-total-row th,
.rattapolarna-total-row td,
.rattatipset-total-row th,
.rattatipset-total-row td,
.topp5-total-row th,
.topp5-total-row td {
  color: #111;
  font-weight: 800;
  text-align: center;
}

.rattapolarna-total-label,
.rattatipset-total-label,
.topp5-total-label {
  background: #fff;
  color: #111;
  text-align: left !important;
  font-weight: 800;
}

.rattapolarna-total-points,
.rattatipset-total-points,
.topp5-total-points {
  font-weight: 900;
}

.rattapolarna-bottom-name-row td,
.rattatipset-bottom-name-row td,
.topp5-bottom-name-row td {
  color: #111;
  font-weight: 800;
  text-align: center;
}

/* =========================================================
   Poängfärger
   ========================================================= */

.rattapolarna-points-0,
.rattatipset-points-0,
.topp5-points-0 {
  background: var(--score-person-bg, #f5f5f5);
  color: #555;
}

.rattapolarna-points-1,
.rattatipset-points-1,
.topp5-points-1 {
  background: #ffff1A !important;
  color: #111 !important;
}

.rattapolarna-points-2,
.rattatipset-points-2,
.topp5-points-2 {
  background: #B8D6FE !important;
  color: #111 !important;
}

.rattapolarna-points-3,
.rattatipset-points-3,
.topp5-points-3 {
  background: #FFA500 !important;
  color: #111 !important;
}

.rattapolarna-points-4,
.rattatipset-points-4,
.topp5-points-4 {
  background: #80FF80 !important;
  color: #111 !important;
}

.rattapolarna-points-5,
.rattatipset-points-5,
.topp5-points-5 {
  background: #ff3333 !important;
  color: #111 !important;
}

.rattapolarna-points-6,
.rattatipset-points-6,
.topp5-points-6 {
  background: #F390FC !important;
  color: #111 !important;
}

.rattapolarna-points-7,
.rattatipset-points-7,
.topp5-points-7 {
  background: #0066ff !important;
  color: #111 !important;
}

.rattapolarna-points-8,
.rattatipset-points-8,
.topp5-points-8 {
  background: #4CAF50 !important;
  color: #071f07 !important;
}

.rattapolarna-points-9,
.rattatipset-points-9,
.topp5-points-9 {
  background: #548235 !important;
  color: #fff !important;
}

.rattapolarna-points-10,
.rattatipset-points-10,
.topp5-points-10 {
  background: #AA71e8 !important;
  color: #111 !important;
}

.rattapolarna-muted,
.rattatipset-muted,
.topp5-muted {
  color: #555;
  font-weight: 400;
}

/* =========================================================
   Tillbaka upp-knapp
   ========================================================= */

.rattapolarna-back-to-top,
.rattatipset-back-to-top,
.topp5-back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: .5rem;
  background: #f00;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.2);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(.5rem);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

.rattapolarna-back-to-top.is-visible,
.rattatipset-back-to-top.is-visible,
.topp5-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.rattapolarna-back-to-top:hover,
.rattatipset-back-to-top:hover,
.topp5-back-to-top:hover {
  color: #fff;
  background: #d60000;
}

/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 768px) {
  .rattapolarna-card,
  .rattatipset-card,
  .topp5-card {
    padding: .65rem;
    border-radius: .65rem;
  }

  .rattapolarna-table-wrap,
  .rattatipset-table-wrap,
  .topp5-table-wrap {
    border-radius: .25rem;
  }

  .topp5-table-wrap {
    width: 100%;
  }

  .rattapolarna-table,
  .rattatipset-table,
  .topp5-table {
    font-size: .72rem;
  }

  .topp5-table {
    min-width: 100%;
  }

  .rattapolarna-table,
  .rattatipset-table {
    min-width: auto;
  }

  .rattapolarna-table th,
  .rattapolarna-table td,
  .rattatipset-table th,
  .rattatipset-table td,
  .topp5-table th,
  .topp5-table td {
    padding: .15rem .22rem;
  }

  .rattapolarna-col-date,
  .rattatipset-col-date,
  .topp5-col-date {
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
  }

  .rattapolarna-col-group,
  .rattatipset-col-group,
  .topp5-col-group {
    width: 2.55rem;
    min-width: 2.55rem;
    max-width: 2.55rem;
  }

  .rattapolarna-col-info,
  .rattatipset-col-info,
  .topp5-col-info {
    width: 10.7rem;
    min-width: 10.7rem;
    max-width: 10.7rem;
  }

  .rattapolarna-col-result,
  .rattatipset-col-result,
  .topp5-col-result {
    width: 6.15rem;
    min-width: 6.15rem;
    max-width: 6.15rem;
  }

  .rattapolarna-col-tip-pair,
  .rattapolarna-col-tip-wide,
  .rattatipset-col-tip-pair,
  .rattatipset-col-tip-wide,
  .topp5-col-tip-pair,
  .topp5-col-tip-wide {
    width: 5.95rem;
    min-width: 5.95rem;
    max-width: 5.95rem;
  }

  .rattapolarna-col-tip-result,
  .rattatipset-col-tip-result,
  .topp5-col-tip-result {
    width: 4.15rem;
    min-width: 4.15rem;
    max-width: 4.15rem;
  }

  .rattapolarna-col-tip-sign,
  .rattatipset-col-tip-sign,
  .topp5-col-tip-sign {
    width: 1.8rem;
    min-width: 1.8rem;
    max-width: 1.8rem;
  }

  .rattapolarna-player-points,
  .rattatipset-player-points,
  .topp5-player-points {
    font-size: .68rem;
  }

  .rattapolarna-player-name,
  .rattapolarna-player-firstname,
  .rattapolarna-player-lastname,
  .rattatipset-player-name,
  .rattatipset-player-firstname,
  .rattatipset-player-lastname,
  .topp5-player-name,
  .topp5-player-firstname,
  .topp5-player-lastname {
    font-size: .68rem;
  }
}

@media (max-width: 576px) {
  .rattapolarna-page-title h1,
  .rattatipset-page-title h1,
  .topp5-page-title h1 {
    font-size: 1.35rem;
  }

  .rattapolarna-card,
  .rattatipset-card,
  .topp5-card {
    padding: .55rem;
    border-radius: .6rem;
  }

  .rattapolarna-table,
  .rattatipset-table,
  .topp5-table {
    font-size: .68rem;
  }

  .topp5-table {
    min-width: 100%;
  }

  .rattapolarna-table,
  .rattatipset-table {
    min-width: auto;
  }

  .rattapolarna-col-date,
  .rattatipset-col-date,
  .topp5-col-date {
    width: 5.4rem;
    min-width: 5.4rem;
    max-width: 5.4rem;
  }

  .rattapolarna-col-group,
  .rattatipset-col-group,
  .topp5-col-group {
    width: 2.45rem;
    min-width: 2.45rem;
    max-width: 2.45rem;
  }

  .rattapolarna-col-info,
  .rattatipset-col-info,
  .topp5-col-info {
    width: 10.4rem;
    min-width: 10.4rem;
    max-width: 10.4rem;
  }

  .rattapolarna-col-result,
  .rattatipset-col-result,
  .topp5-col-result {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
  }

  .rattapolarna-col-tip-pair,
  .rattapolarna-col-tip-wide,
  .rattatipset-col-tip-pair,
  .rattatipset-col-tip-wide,
  .topp5-col-tip-pair,
  .topp5-col-tip-wide {
    width: 5.85rem;
    min-width: 5.85rem;
    max-width: 5.85rem;
  }

  .rattapolarna-col-tip-result,
  .rattatipset-col-tip-result,
  .topp5-col-tip-result {
    width: 4.1rem;
    min-width: 4.1rem;
    max-width: 4.1rem;
  }

  .rattapolarna-col-tip-sign,
  .rattatipset-col-tip-sign,
  .topp5-col-tip-sign {
    width: 1.75rem;
    min-width: 1.75rem;
    max-width: 1.75rem;
  }

  .rattapolarna-back-to-top,
  .rattatipset-back-to-top,
  .topp5-back-to-top {
    width: 3.8rem;
    height: 3.8rem;
    right: .65rem;
    bottom: .65rem;
  }
}