@charset "utf-8";
/* ***********************************************************************
 *
 *  File:   betting.css
 *
 *  Brief:  Styles for betting sessions, match listings, and coupon displays.
 *
 *  Author: Jomar Hønsi, 2011-2026
 *
 * ************************************************************************/

:root {
  --info-table-height: 120px;
}

table.session {
  text-align: center;
  border: 1px solid #999;
  margin: auto 0;
  background-color: var(--bg-text-panel);
  border-radius: 10px;
  font-size: 12px;

  & td {
    padding: 5px;
    background-color: var(--bg-text-panel);
  }

  & caption {
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px;
    text-shadow: #eee 1px 1px 3px;
    letter-spacing: 2px;
  }
}

table.info {
  background-color: #ccc;
  margin: 0 auto;
  height: var(--info-table-height);

  & th.header {
    padding: 5px;
    background-color: #fff;
    font-size: 1.1em;
  }

  & td {
    background-color: #fff;
  }

  & th {
    background-color: #eee;
  }

  &.win {
    border: 3px outset green;
    font-weight: bold;
  }

  &.loss {
    border: 3px outset red;
    font-style: italic;
  }
}

table.match {
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 0;
  height: var(--info-table-height);

  & caption {
    margin: 0;
    padding: 0;
    text-shadow: #eee 1px 1px 3px;
  }

  & td {
    text-align: center;
    background-color: #fff4e0;
    font-size: 0.9em;
  }

  & td:first-of-type {
    font-size: 10px;
    width: 12px;
  }

  & td:last-of-type {
    font-weight: bold;
    min-width: 30px;
  }
}

col.club {
  width: 140px;
}

table.coupons {
  & th {
    font-size: 1.1em;
  }
}

table.coupon,
table.coupon-ok {
  font-size: 12px;
  text-align: center;
  margin-bottom: 5px;

  & td:last-of-type {
    width: 20px;
  }

  & td:first-child {
    width: 20px;
  }

  & td:nth-child(n+2):nth-child(-n+3) {
    width: 50px;
  }
}

table.coupon {
  & td {
    background-color: #dfeee2;
  }
}

table.coupon-ok {
  & td {
    background-color: #cfc;
  }
}

td.correct {
  color: #fff;
  background-image: url('../../assets/bullet_green.png');
}

td.wrong {
  color: #fff;
  background-image: url('../../assets/bullet_red.png');
}

col.bet {
  width: 75px;
}

th.session-header-bet {
  color: black;
  font-size: 12px;
  margin-left: 15px;
}

@media (max-width: 700px) {
  /* Stack match table and info table vertically */
  table.session > tbody > tr:first-child > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Allow club name columns to shrink naturally */
  col.club {
    width: auto;
  }

  /* Stack the three coupon columns vertically */
  table.coupons > tbody > tr:first-child {
    display: none;
  }

  table.coupons > tbody > tr:last-child > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table.coupons > tbody > tr:last-child > td:nth-child(1)::before,
  table.coupons > tbody > tr:last-child > td:nth-child(2)::before,
  table.coupons > tbody > tr:last-child > td:nth-child(3)::before {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px 0;
  }

  table.coupons > tbody > tr:last-child > td:nth-child(1)::before {
    content: "Coupon 1";
  }

  table.coupons > tbody > tr:last-child > td:nth-child(2)::before {
    content: "Coupon 2";
  }

  table.coupons > tbody > tr:last-child > td:nth-child(3)::before {
    content: "Coupon 3";
  }

  /* Allow bet columns to shrink */
  col.bet {
    width: auto;
  }
}