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

/* Gemensamt modalskal: mörk topp, vit arbetsyta och samma stängningskontroll. */
.thl-modal__surface {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 20px !important;
  color: var(--thl-ink) !important;
  background: rgba(255, 255, 255, 0.985) !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.34) !important;
  text-align: left;
}

.thl-modal__surface::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--thl-blue) 0 76%, var(--thl-orange) 76% 100%);
  pointer-events: none;
}

.thl-modal__surface > .thl-modal__header,
.thl-modal__header {
  position: relative;
  display: block;
  min-height: 112px;
  margin: 0 !important;
  padding: 25px 70px 22px 24px !important;
  border: 0 !important;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 18% -80%, rgba(36, 118, 173, 0.7), transparent 55%),
    linear-gradient(145deg, #0d151d, #1d2b38);
}

.thl-modal__header--danger {
  background:
    radial-gradient(circle at 18% -80%, rgba(185, 72, 72, 0.48), transparent 55%),
    linear-gradient(145deg, #0d151d, #241c20);
}

.thl-modal__header .thl-modal__eyebrow,
.thl-modal__header .modal-heading__eyebrow,
.thl-modal__eyebrow {
  display: block;
  margin: 0 0 5px;
  color: #75ceff !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.35px;
  line-height: 1.2;
  text-transform: uppercase;
}

.thl-modal__header--danger .thl-modal__eyebrow,
.thl-modal__header--danger .modal-heading__eyebrow {
  color: #ff9d8c !important;
}

.thl-modal__header h1,
.thl-modal__header h2,
.thl-modal__header h3,
.thl-modal__surface > .thl-modal__header h1,
.thl-modal__surface > .thl-modal__header h2,
.thl-modal__surface > .thl-modal__header h3 {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--thl-display-font) !important;
  font-size: 23px !important;
  font-weight: 750;
  line-height: 1.15;
}

.thl-modal__header p,
.thl-modal__surface > .thl-modal__header p {
  max-width: 480px;
  margin: 7px 0 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 11px !important;
  line-height: 1.45;
}

.thl-modal__body {
  padding: 22px 24px 24px;
  color: var(--thl-ink);
  background: rgba(255, 255, 255, 0.985);
}

.thl-modal__surface .thl-modal__close {
  position: absolute;
  z-index: 6;
  top: 17px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.thl-modal__surface .thl-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.thl-modal__header-actions {
  position: absolute;
  top: 17px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.thl-modal__header-actions .thl-modal__close {
  position: static;
}

.thl-modal__header-actions .btn {
  min-height: 36px;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  background: rgba(36, 118, 173, 0.9) !important;
}

.modal,
#edit-modal,
#delete-modal,
.report-modal,
.blur-overlay {
  background: rgba(7, 12, 17, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.login-modal__body form {
  display: grid;
  gap: 12px;
}

.login-modal__body input,
.login-modal__body .btn-blue {
  width: 100%;
  margin: 0;
}

.login-modal__error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(185, 72, 72, 0.18);
  border-radius: 10px;
  color: #963d3d;
  background: #fff0ee;
  font-size: 12px;
  font-weight: 700;
}

.ref-login-card {
  max-width: 440px;
}

.ref-login-header .ref-login-sub {
  margin-top: 7px !important;
  color: #7fd6a0 !important;
}

.ref-login-card .ref-login-input {
  color: var(--thl-ink);
  background: #fff;
  border-color: rgba(17, 24, 32, 0.16);
}

.ref-login-card .ref-login-input::placeholder {
  color: #7b8793;
}

.ref-login-card .ref-login-input:focus {
  border-color: var(--thl-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 139, 102, 0.12);
}

.ref-login-card .ref-login-note {
  color: #245c7e;
  background: #e9f4fb;
}

.ref-login-card .ref-login-error {
  color: #933c3c;
  background: #fff0ee;
}

.report-modal__box .thl-modal__body > p {
  margin: 0;
  color: var(--thl-slate);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 620px) {
  .thl-modal__surface > .thl-modal__header,
  .thl-modal__header {
    min-height: 104px;
    padding: 22px 58px 19px 19px !important;
  }

  .thl-modal__header h1,
  .thl-modal__header h2,
  .thl-modal__header h3 {
    font-size: 20px !important;
  }

  .thl-modal__body {
    padding: 18px 19px 20px;
  }

  .thl-modal__header-actions {
    position: static;
    margin-top: 14px;
  }

  .thl-modal__surface > .thl-modal__header:has(.thl-modal__header-actions) {
    padding-right: 19px !important;
  }
}

.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,
.halftime-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,
.halftime-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; }
}