/* =========================================================================
   Widget de tablas (dutcher 3 opciones, dutcher, oddsmatcher)
   Mantiene los nombres de clase que genera assets/js/widget.js.
   ========================================================================= */

#sbet_widget {
  --sbet-margin: 14px;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-family: var(--font-widget);
  font-size: 14px;
  color: var(--text);
}

#sbet_widget *,
#sbet_table * {
  box-sizing: border-box;
}

#sbet_widget tr,
#sbet_widget td,
#sbet_widget td span,
#sbet_widget td div {
  vertical-align: middle;
  border: none;
}

/* -------------------------------------------------------------------------
   Panel de filtros
   ------------------------------------------------------------------------- */

#sbet_filters {
  display: flex;
  flex-direction: column;
  flex: 0 0 288px;
  max-width: 288px;
  padding: 16px;
  background: #f6f7ff;
  border-right: 1px solid #e2e5f5;
}

#sbet_filters .sbet_filter {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 14px;
}

#sbet_filters .sbet_filter.hidden,
#sbet_filters .sbet_filter[hidden] {
  display: none !important;
}

#sbet_filters .sbet_filter > span:not(.placeholder) {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#sbet_filters select[hidden] {
  display: none !important;
}

#sbet_filters input:not([type="checkbox"]),
#sbet_filters select {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-widget);
  font-size: 13px;
}

#sbet_filters input:focus,
#sbet_filters select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

#sbet_filters .sbet_range {
  display: flex;
  gap: 8px;
}

#sbet_filters .sbet_range input {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}

/* --- multiselect --------------------------------------------------------- */

.multiselect-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 40px;
  width: 100%;
  padding: 0 34px 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.multiselect-dropdown.is-open,
.multiselect-dropdown:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.multiselect-dropdown span.optext,
.multiselect-dropdown span.placeholder {
  display: block;
  max-width: 100%;
  padding: 2px 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
}

.multiselect-dropdown span.optext {
  color: var(--text);
  font-weight: 500;
}

.multiselect-dropdown span.optext .optdel {
  margin-left: 6px;
  color: var(--muted-2);
  font-size: 11px;
  cursor: pointer;
}

.multiselect-dropdown span.optext .optdel:hover {
  color: var(--ko);
}

.multiselect-dropdown-list-wrapper {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  display: none;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(16, 24, 40, .16);
  cursor: default;
}

.multiselect-dropdown.is-open .multiselect-dropdown-list-wrapper {
  display: block;
}

.multiselect-dropdown-search {
  display: block;
  width: 100% !important;
  height: 36px !important;
  margin: 0 0 6px;
  padding: 0 10px !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-widget);
  font-size: 13px;
  color: var(--text);
}

.multiselect-dropdown-list {
  height: 15rem;
  overflow-y: auto;
}

.multiselect-dropdown-list > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.multiselect-dropdown-list > div:hover {
  background: var(--surface-2);
}

.multiselect-dropdown-list input[type="checkbox"] {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.multiselect-dropdown-list label {
  margin: 0;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Paginación y botones
   ------------------------------------------------------------------------- */

#sbet_pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}

.sbet_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-widget);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sbet_button:hover {
  background: var(--surface-2);
}

.sbet_button:disabled {
  opacity: .45;
  cursor: default;
  background: var(--surface);
}

.sbet_button svg {
  width: 16px;
  height: 16px;
}

#sbet_pagination .sbet_button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

#sbet_no_duplicates {
  width: auto !important;
  min-width: 52px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#sbet_no_duplicates.is-on {
  background: var(--accent-soft);
  border-color: #c7d2fe;
  color: var(--accent-600);
}

#sbet_current_page,
#sbet_total_pages,
#sbet_separator {
  white-space: nowrap;
}

#sbet_current_page,
#sbet_total_pages {
  color: var(--text);
  font-weight: 600;
}

#clear_filters {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
}

#copy_view {
  width: 100%;
  min-height: 36px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--accent-600);
  border-color: #d9ddf8;
  background: #fff;
}

#copy_view:hover {
  background: var(--accent-soft);
}

/* -------------------------------------------------------------------------
   Tabla
   ------------------------------------------------------------------------- */

#sbet_table_container {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  background: var(--surface);
}

#sbet_table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-family: var(--font-widget);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#sbet_table tr td {
  padding: 0 7px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}

#sbet_table tbody tr:last-child td {
  border-bottom: 0;
}

#sbet_table tbody tr:nth-child(even) td {
  background: #fafbff;
}

#sbet_table tbody tr:hover td {
  background: var(--accent-soft);
}

/* fila con beneficio aceptable (no pierde más de 10 € por 1.000 €) */
#sbet_table tbody tr.is-good td {
  background: #f0fdf4;
}

#sbet_table tbody tr.is-good td:first-child {
  box-shadow: inset 3px 0 0 var(--ok);
}

#sbet_table tbody tr.is-good:hover td {
  background: #dcfce7;
}

#sbet_table tr.sbet_header td {
  padding: 12px 7px;
  border-bottom: 1px solid #e2e5f5;
  background: #eef0fb;
  color: #4a5570;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* anchos */
#sbet_table td.date {
  width: 64px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

#sbet_table .match-head,
#sbet_table td.match {
  min-width: 150px;
  text-align: left;
}

#sbet_widget #sbet_table tr.sbet_header td.match-head {
  text-align: left;
}

#sbet_table td.match {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sbet_match {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sbet_match .sport-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.sbet_match > div {
  min-width: 0;
  line-height: 1.3;
}

.sbet_match > div > span {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sbet_match .sbet_league {
  overflow: hidden;
  color: var(--muted-2);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* calculadora */
#sbet_table td.calculator,
#sbet_table td.name {
  white-space: nowrap;
}

.sbet_calculator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-600);
  cursor: pointer;
}

.sbet_calculator svg {
  width: 16px;
  height: 16px;
  display: block;
}

.sbet_calculator:hover {
  background: #e0e7ff;
  border-color: #c7d2fe;
}

#sbet_widget[data-type="dutcher-full"] #sbet_table td.calculator {
  width: 52px;
  text-align: center;
}

#sbet_widget[data-type="dutcher-simple"] #sbet_table td.name,
#sbet_widget[data-type="oddsmatcher"] #sbet_table td.name {
  color: var(--muted);
  font-size: 13px;
}

#sbet_widget[data-type="dutcher-simple"] #sbet_table td.name .sbet_calculator,
#sbet_widget[data-type="oddsmatcher"] #sbet_table td.name .sbet_calculator {
  margin-right: 7px;
  vertical-align: middle;
}

/* beneficio por 1.000 € */
#sbet_table .b1000-head,
#sbet_table td.b1000 {
  width: 118px;
  text-align: center;
  white-space: nowrap;
}

#sbet_table td.b1000 .b1000-values {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

#sbet_table td.b1000 .b1000-main {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* cuota aumentada: la cifra grande es la de la cuota mostrada */
#sbet_table td.b1000 .b1000-boosted {
  text-decoration: underline dotted rgba(16, 24, 40, .4);
  text-underline-offset: 3px;
  cursor: help;
}

#sbet_table td.b1000 .b1000-orig {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

#sbet_table td.b1000 .ko {
  color: var(--ko);
}

#sbet_table td.b1000 .ok {
  color: var(--ok);
}

/* rating */
#sbet_table td.rating,
#sbet_table .rating-head {
  min-width: 78px;
  text-align: center;
}

#sbet_table td.rating span {
  font-weight: 600;
}

#sbet_table td span.rating-over-100 {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 700;
}

/* cuotas */
#sbet_table td.o1,
#sbet_table td.o2,
#sbet_table td.o3 {
  width: 124px;
}

.sbet_holder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sbet_odd_flex {
  min-width: 34px;
  text-align: right;
}

.sbet_odd {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
}

/* casas */
#sbet_table .bookie {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06);
}

#sbet_table .bookie img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 26px;
  border-radius: 0;
  user-select: none;
}

#sbet_table a.bookie {
  text-decoration: none;
  cursor: pointer;
}

#sbet_table a.bookie:hover {
  outline: 2px solid rgba(79, 70, 229, .45);
  outline-offset: 1px;
}

#sbet_table a.bookie:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#sbet_table .bookie {
  position: relative;
}

#sbet_table .bookie .two-goals {
  position: absolute;
  top: 1px;
  right: 2px;
  padding: 1px 2px;
  border-radius: 3px;
  background: #d1fae5;
  color: #065f46;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

#sbet_table .bookie[data-two-goals-kind="market"] .two-goals,
#sbet_table .bookie[data-two-goals-kind="manual"] .two-goals {
  background: #fef3c7;
  color: #92400e;
}

#sbet_table .bookie[data-bookie="marca_apuestas"],
#sbet_table .bookie[data-bookie="jokerbet"],
#sbet_table .bookie[data-bookie="kirolbet"] {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

#sbet_table .bookie[data-bookie="888sport"] { background: #fc6200; }
#sbet_table .bookie[data-bookie="sportium"] { background: #d81921; }
#sbet_table .bookie[data-bookie="marca_apuestas"] { background: #fff; }
#sbet_table .bookie[data-bookie="william_hill"] { background: #00143c; }
#sbet_table .bookie[data-bookie="betfair"] { background: #ffb80c; }
#sbet_table .bookie[data-bookie="bet365"] { background: #126e51; }
#sbet_table .bookie[data-bookie="bwin"] { background: #000; }
#sbet_table .bookie[data-bookie="paf"] { background: #003833; }
#sbet_table .bookie[data-bookie="luckia"] { background: linear-gradient(266deg, #f80, #ea5b0c 53%, #dc4405); }
#sbet_table .bookie[data-bookie="interwetten"] { background: #ffd200; }
#sbet_table .bookie[data-bookie="betway"] { background: #000; }
#sbet_table .bookie[data-bookie="casino_barcelona"] { background: #000; }
#sbet_table .bookie[data-bookie="cgmapuestas"] { background: #27293e; }
#sbet_table .bookie[data-bookie="codere"] { background: #79c000; }
#sbet_table .bookie[data-bookie="leovegas"] { background: radial-gradient(100% 148px at 0, #f18825, #fd5c3c); }
#sbet_table .bookie[data-bookie="jokerbet"] { background: #fff; }
#sbet_table .bookie[data-bookie="winamax"] { background: #090909; }
#sbet_table .bookie[data-bookie="bet777"] { background: #000; }
#sbet_table .bookie[data-bookie="casumo"] { background: #32007e; }
#sbet_table .bookie[data-bookie="kirolbet"] { background: #fff; }
#sbet_table .bookie[data-bookie="retabet"] { background: #1b1b1b; }
#sbet_table .bookie[data-bookie="paston"] { background: #0090ea; }
#sbet_table .bookie[data-bookie="betfair_exchange"] { background: #1c1b17; }
#sbet_table .bookie[data-bookie="pokerstars"] { background: #000; }
#sbet_table .bookie[data-bookie="versus"] { background: #000; }
#sbet_table .bookie[data-bookie="dafabet"] { background: #af0000; }
#sbet_table .bookie[data-bookie="juegging"] { background: #58b202; }
#sbet_table .bookie[data-bookie="enracha"] { background: #282c2d; }
#sbet_table .bookie[data-bookie="ijuego"] { background: #015c57; }
#sbet_table .bookie[data-bookie="ebingo"] { background: #333; }
#sbet_table .bookie[data-bookie="tonybet"] { background: #303237; }
#sbet_table .bookie[data-bookie="betsson_es"] { background: #ff6600; }
#sbet_table .bookie[data-bookie="yosports"] { background: #131b28; }
#sbet_table .bookie[data-bookie="daznbet_es"] { background: #0c161b; }
#sbet_table .bookie[data-bookie="goldenpark"] { background: #000; }
#sbet_table .bookie[data-bookie="olybet"] { background: #f73535; }
#sbet_table .bookie[data-bookie="1xbet_es"] { background: #1a5685; }
#sbet_table .bookie[data-bookie="yaasscasino"] { background: #000; }
#sbet_table .bookie[data-bookie="zebet"] { background: #18242a; }
#sbet_table .bookie[data-bookie="speedybet"] { background: #091417; }
#sbet_table .bookie[data-bookie="goldenbull"] { background: #05161d; }
#sbet_table .bookie[data-bookie="solcasino"] { background: #e9ebf8; }

/* importes y columnas específicas */
#sbet_table td.back,
#sbet_table td.lay {
  width: 72px;
  text-align: center;
  font-weight: 600;
}

#sbet_table td.back {
  color: #0b4a8f;
  background: #eff6ff;
}

#sbet_table td.lay {
  color: #9f1239;
  background: #fff1f2;
}

#sbet_table td.volume,
#sbet_table td.u {
  min-width: 76px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
}

#sbet_table .bookmaker-head,
#sbet_table td.bookmaker,
#sbet_table .bookmaker_lay-head,
#sbet_table td.bookmaker_lay {
  width: 92px;
  text-align: center;
}

#sbet_table .back-head,
#sbet_table .lay-head {
  width: 72px;
}

#sbet_table .volume-head {
  min-width: 76px;
}

#sbet_table .update-head {
  min-width: 76px;
}

/* sin resultados */
.sbet_no_results {
  padding: 40px 16px !important;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* -------------------------------------------------------------------------
   Vigilancia periódica
   ------------------------------------------------------------------------- */

.watch-box {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #dfe3f7;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.watch-box__title {
  display: block;
  margin-bottom: 9px;
  color: var(--accent-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.watch-box__check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.watch-box__check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.watch-box__interval {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px 22px;
  color: var(--muted);
  font-size: 12px;
}

#sbet_filters .watch-box__interval input {
  width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.watch-box__status {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.watch-box__status.is-on { color: #047857; }
.watch-box__status.is-alert { color: var(--accent-600); font-weight: 700; }
.watch-box__status.is-error { color: #b91c1c; }

/* -------------------------------------------------------------------------
   Avisos flotantes
   ------------------------------------------------------------------------- */

.alert-box {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding-bottom: 2px;
}

.alert-card {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
  animation: alert-in .22s ease-out;
}

@keyframes alert-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.alert-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
}

.alert-card__head strong {
  color: var(--text);
  font-size: 14px;
}

.alert-card__meta {
  color: var(--muted);
  font-size: 11.5px;
}

.alert-card__odds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.alert-card__odd {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12px;
}

.alert-card__label {
  color: var(--muted);
  font-weight: 700;
}

.alert-card__value {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.alert-card__bookie {
  color: var(--muted);
  font-size: 11px;
}

.alert-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.alert-card__benefit {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.alert-card__benefit.is-positive { color: #047857; }

.alert-card__view {
  min-height: 30px;
  padding: 0 14px;
}

.alert-card__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.alert-card__close:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Responsive: filtros plegables y filas en tarjeta
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
  #sbet_widget {
    flex-direction: column;
  }

  #sbet_filters {
    flex: 1 1 auto;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  /* la paginación queda siempre a la vista; el resto se pliega */
  #sbet_widget:not(.filters-open) #sbet_filters .sbet_filter,
  #sbet_widget:not(.filters-open) #sbet_filters .watch-box,
  #sbet_widget:not(.filters-open) #sbet_filters #copy_view,
  #sbet_widget:not(.filters-open) #sbet_filters #clear_filters {
    display: none;
  }

  #sbet_pagination {
    margin-bottom: 0;
  }

  #sbet_widget.filters-open #sbet_pagination {
    margin-bottom: 16px;
  }

  #sbet_filters {
    padding: 14px 16px;
  }

  #sbet_table_container {
    width: 100%;
  }
}

@media (max-width: 860px) {
  #sbet_table,
  #sbet_table tbody,
  #sbet_table tr,
  #sbet_table td {
    display: block;
    width: auto;
  }

  #sbet_table {
    min-width: 0;
  }

  #sbet_table thead {
    display: none;
  }

  #sbet_table tbody {
    padding: 12px;
  }

  #sbet_table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 28px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  #sbet_table td.date,
  #sbet_table td.match {
    grid-column: 1 / -1;
  }

  #sbet_table tbody tr:last-child {
    margin-bottom: 0;
  }

  #sbet_table tbody tr:hover td {
    background: transparent;
  }

  #sbet_table tbody tr.is-good {
    background: #f0fdf4;
    border-color: #abefc6;
  }

  #sbet_table tbody tr.is-good td,
  #sbet_table tbody tr.is-good:hover td {
    background: transparent;
  }

  #sbet_table tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  #sbet_table tr td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  #sbet_table tr td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  #sbet_table td.date {
    display: block;
    padding: 0 0 6px;
    border-bottom: 0;
    color: var(--muted-2);
    font-size: 12px;
    text-align: left;
  }

  #sbet_table td.date::before {
    content: none;
  }

  #sbet_table td.match {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
  }

  #sbet_table td.match::before {
    content: none;
  }

  #sbet_table td.match .sbet_match > div > span {
    white-space: normal;
  }

  #sbet_table td.calculator {
    justify-content: flex-start;
  }

  #sbet_table td.calculator::before {
    content: attr(data-label);
  }

  #sbet_table .sbet_holder {
    justify-content: flex-end;
  }

  #sbet_table td.rating {
    text-align: right;
  }

  #sbet_table td.back,
  #sbet_table td.lay {
    background: transparent;
  }
}

@media (max-width: 520px) {
  #sbet_table tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-box {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
  }
}