::selection { color: #fff; background: var(--thl-blue); }
:focus-visible { outline: 3px solid rgba(36, 118, 173, 0.38); outline-offset: 2px; }

.workflow-nav {
  position: relative;
  z-index: 3;
  width: min(var(--thl-content), 100%);
  margin: 0 auto 24px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--thl-shadow-sm);
  backdrop-filter: blur(15px) saturate(120%);
}
.workflow-nav__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.workflow-nav__item { position: relative; min-width: 0; }
.workflow-nav__item:not(:last-child)::after { content: ""; position: absolute; top: 25px; right: -5px; z-index: 2; width: 10px; height: 1px; background: rgba(17, 24, 32, 0.16); }
.workflow-nav__item a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 12px; color: var(--thl-slate); text-decoration: none; transition: color var(--thl-ease), background var(--thl-ease), transform var(--thl-ease); }
.workflow-nav__item a:hover { color: var(--thl-ink); background: rgba(255, 255, 255, 0.8); transform: translateY(-1px); }
.workflow-nav__number { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(17, 24, 32, 0.13); border-radius: 50%; background: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 900; }
.workflow-nav__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workflow-nav__copy strong { overflow: hidden; color: inherit; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.workflow-nav__copy small { overflow: hidden; color: inherit; font-size: 9px; font-weight: 600; opacity: 0.72; text-overflow: ellipsis; white-space: nowrap; }
.workflow-nav__item.is-active a { color: #fff; background: linear-gradient(135deg, var(--thl-blue), var(--thl-blue-deep)); box-shadow: 0 8px 20px rgba(36, 118, 173, 0.24); }
.workflow-nav__item.is-active .workflow-nav__number { color: var(--thl-blue-deep); border-color: #fff; background: #fff; }
.workflow-nav__item.is-complete .workflow-nav__number { color: #fff; border-color: var(--thl-green); background: var(--thl-green); }

.lottery-card, .review-card,
.admin-card, .stats-page .card, .h2h-page .card, .history-card, .sub-card, .qr-card,
.pm-card, .lm-card, .post-card, .post-goalie, .post-standings, .post-goals,
.no-games-card, .reporting-surface {
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: var(--thl-radius-lg) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--thl-shadow) !important;
  backdrop-filter: blur(13px) saturate(116%);
}

.register-shell, .lottery-page, .review-page, .admin-page, .stats-page, .h2h-page,
.history-page-wrap, .qr-page, .reporting-page {
  width: min(100%, 100%) !important;
  padding-left: clamp(16px, 3vw, 38px) !important;
  padding-right: clamp(16px, 3vw, 38px) !important;
  box-sizing: border-box;
}

.stats-title, .h2h-title, .history-title { position: relative; padding-left: 17px; text-align: left; }
.stats-title::before, .h2h-title::before, .history-title::before { content: ""; position: absolute; top: 1px; bottom: 0; left: 0; width: 5px; border-radius: 9px; background: linear-gradient(180deg, var(--thl-blue) 0 74%, var(--thl-orange) 74%); }
.stats-title h1, .h2h-title h1, .history-title h1 { margin: 0 !important; color: var(--thl-ink) !important; font-family: var(--thl-display-font, "Oxanium", "Arial Black", Arial, sans-serif) !important; font-size: clamp(30px, 4vw, 44px) !important; letter-spacing: .6px !important; line-height: 1.04 !important; }
.stats-sub, .h2h-sub, .history-sub { margin-top: 9px !important; color: var(--thl-slate) !important; font-size: 13px !important; }

.lottery-page input, .lottery-page select,
.review-page input, .review-page select, .admin-page input, .admin-page select,
.stats-page input, .stats-page select, .h2h-page input, .h2h-page select,
.history-page input, .history-page select, #reporting-wrapper input, #reporting-wrapper select,
.modal-box input {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(17, 24, 32, 0.16);
  border-radius: var(--thl-radius-sm);
  color: var(--thl-ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(17, 24, 32, 0.04);
  transition: border-color var(--thl-ease), box-shadow var(--thl-ease), background var(--thl-ease);
}
.lottery-page input:focus, .lottery-page select:focus,
.review-page input:focus, .review-page select:focus, .admin-page input:focus, .admin-page select:focus,
.stats-page input:focus, .stats-page select:focus, .h2h-page input:focus, .h2h-page select:focus,
.history-page input:focus, .history-page select:focus, #reporting-wrapper input:focus, #reporting-wrapper select:focus {
  outline: none; border-color: var(--thl-blue); box-shadow: 0 0 0 4px rgba(36, 118, 173, 0.12); background: #fff;
}

.lottery-page button, .review-page button, .admin-page button,
.stats-page button, .h2h-page button, .history-page button, #reporting-wrapper button {
  border-radius: 10px !important;
  font-weight: 800 !important;
  transition: transform var(--thl-ease), box-shadow var(--thl-ease), filter var(--thl-ease) !important;
}
.lottery-page button:hover, .review-page button:hover, .admin-page button:hover,
.stats-page button:hover, .h2h-page button:hover, .history-page button:hover, #reporting-wrapper button:hover { transform: translateY(-1px); filter: saturate(108%); }
.lottery-page button:active, .review-page button:active, .admin-page button:active,
.stats-page button:active, .h2h-page button:active, .history-page button:active, #reporting-wrapper button:active { transform: translateY(0); }

.lottery-table, .teams-table, .review-page table, .admin-page table, .stats-page table,
.h2h-page table, .history-page table, .pm-table, .lm-table, .post-table { border-collapse: separate !important; border-spacing: 0 !important; }
.lottery-table thead th, .teams-table thead th, .review-page thead th, .admin-page thead th,
.stats-page thead th, .h2h-page thead th, .history-page thead th, .pm-table thead th,
.lm-table thead th, .post-table thead th {
  color: var(--thl-ink-soft) !important; background: rgba(36, 118, 173, 0.07) !important;
  border-bottom: 1px solid rgba(36, 118, 173, 0.14) !important; font-size: 10px !important;
  font-weight: 900 !important; letter-spacing: .7px; text-transform: uppercase;
}
.lottery-table tbody tr, .teams-table tbody tr, .review-page tbody tr, .admin-page tbody tr,
.stats-page tbody tr, .h2h-page tbody tr, .history-page tbody tr, .pm-table tbody tr,
.lm-table tbody tr, .post-table tbody tr { transition: background var(--thl-ease); }
.lottery-table tbody tr:hover, .teams-table tbody tr:hover, .review-page tbody tr:hover, .admin-page tbody tr:hover,
.stats-page tbody tr:hover, .h2h-page tbody tr:hover, .history-page tbody tr:hover { background: rgba(36, 118, 173, 0.045); }

.stats-tabs, .history-tabs { gap: 5px !important; padding: 5px !important; border: 1px solid rgba(17, 24, 32, .08); border-radius: 14px; background: rgba(255,255,255,.65); box-shadow: var(--thl-shadow-sm); }
.tab-btn, .history-tab-btn { min-height: 38px; padding: 0 13px !important; border: 0 !important; border-radius: 9px !important; color: var(--thl-slate) !important; background: transparent !important; }
.tab-btn.active, .history-tab-btn.active { color: #fff !important; background: var(--thl-ink-soft) !important; box-shadow: 0 5px 12px rgba(17,24,32,.16); }

.lottery-card { overflow: hidden; }
.lottery-card--center { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(235,246,253,.92)) !important; }
.tournament-name { color: var(--thl-ink) !important; font-family: var(--thl-display-font, "Oxanium", "Arial Black", Arial, sans-serif); }
.current-team { border-radius: 14px !important; background: linear-gradient(135deg, rgba(36,118,173,.10), rgba(242,100,69,.07)) !important; }
.review-controls { padding: 14px; border-radius: 14px; background: rgba(36,118,173,.055); }
.admin-card h3, .review-card h2, .review-card h3, .lottery-card .card-title { color: var(--thl-ink); }

.reporting-page { position: relative; z-index: 1; min-height: calc(100vh - 72px); padding-top: clamp(26px, 4vw, 48px); padding-bottom: 60px; }
.reporting-page::before { content: ""; position: fixed; z-index: -2; inset: 72px 0 0; background: url('/static/img/live_thl-bg.png') center / cover no-repeat; }
.reporting-page::after { content: ""; position: fixed; z-index: -1; inset: 72px 0 0; background: rgba(246,249,251,.78); backdrop-filter: blur(1.5px); }

/*
  Gemensam bakgrundsbehandling för de omgjorda vyerna.
  Samma skarpa nivå som Statistik: 75 % bild och 50 % vit toning,
  utan oskärpa över själva sidbakgrunden.
*/
.register-shell::before,
.lottery-page::before,
.review-page::before,
.qr-page::before,
.reporting-page::before,
.pre-game-page::before,
.live-game-page::before,
.post-game-page::before,
.no-games-page::before {
  opacity: 0.75 !important;
}

.register-shell::after,
.lottery-page::after,
.review-page::after,
.qr-page::after,
.reporting-page::after,
.pre-game-page::after,
.live-game-page::after,
.post-game-page::after,
.no-games-page::after {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#reporting-wrapper { max-width: var(--thl-content) !important; margin: 0 auto !important; padding: 0 !important; }
.reporting-surface { padding: clamp(20px, 3vw, 34px); }
.reporting-surface .page-header__title, #reporting-wrapper .page-header__title { text-align: left !important; }
.score-panel { padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #111820, #233241); box-shadow: 0 14px 30px rgba(17,24,32,.19); }
.score-panel h1, .score-panel .score { color: #fff !important; }
.score-panel #timer-display { color: #7df58d !important; background: rgba(0,0,0,.34) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.timer-panel { padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.09); }
.officials-row { margin-bottom: 18px; padding: 12px 15px; border: 1px solid rgba(17,24,32,.08); border-radius: 12px; background: rgba(36,118,173,.05); }

.history-list { gap: 16px !important; }
.history-card { transition: transform var(--thl-ease), box-shadow var(--thl-ease); }
.history-card:hover { transform: translateY(-3px); box-shadow: var(--thl-shadow-lg) !important; }
.history-back-link { display: inline-flex; align-items: center; min-height: 38px; margin-bottom: 18px; padding: 0 12px; border-radius: 10px; color: var(--thl-blue-deep); background: rgba(255,255,255,.7); box-shadow: var(--thl-shadow-sm); text-decoration: none; }
.qr-card { transition: transform var(--thl-ease), box-shadow var(--thl-ease); }
.qr-card:hover { transform: translateY(-3px); box-shadow: var(--thl-shadow-lg) !important; }
.no-games-card { padding: clamp(28px, 4vw, 46px) !important; }
.admin-card, .review-card, .lottery-card, .stats-page .card, .h2h-page .card, .history-card { overflow-x: auto; }

@media (max-width: 900px) {
  .workflow-nav { overflow-x: auto; border-radius: 14px; }
  .workflow-nav__list { width: max-content; min-width: 100%; grid-template-columns: repeat(5, minmax(145px, 1fr)); }
  .workflow-nav__item:not(:last-child)::after { display: none; }
  .register-shell, .lottery-page, .review-page, .admin-page, .stats-page, .h2h-page,
  .history-page-wrap, .qr-page, .reporting-page { padding-left: 14px !important; padding-right: 14px !important; }
  .reporting-page::before, .reporting-page::after { inset: 64px 0 0; }
  .stats-tabs, .history-tabs { flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; }
  .tab-btn, .history-tab-btn { flex: 0 0 auto; white-space: nowrap; }
  .admin-table { min-width: 720px; }
}

@media (max-width: 620px) {
  .stats-title, .h2h-title, .history-title { padding-left: 14px; }
  .stats-title h1, .h2h-title h1, .history-title h1 { font-size: 30px !important; }
  .reporting-surface { padding: 16px; }
  .officials-row { grid-template-columns: 1fr !important; gap: 6px !important; text-align: center; }
  .officials-left, .officials-center, .officials-right { text-align: center !important; }
  .score-panel { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .score-panel .timer-panel { grid-column: 1 / -1; grid-row: 1; width: 100%; margin: 0 !important; }
  .score-panel .score-box { width: auto !important; padding: 10px !important; }
  .score-panel .score-box h1 { font-size: 16px !important; }
  .score-panel .score { margin-top: 4px !important; font-size: 46px !important; }
  .score-panel #timer-display { width: min(190px, 100%) !important; padding: 10px !important; font-size: 42px !important; }
  .goal-input-row, .shots-input-row { flex-wrap: wrap; gap: 10px !important; }
  .goal-buttons { gap: 10px !important; }
  .goal-buttons button { min-width: 0; padding-inline: 12px; }
  .timer-adjust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
}