.tsp-root{font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#e6edf3}
.tsp-loading{padding:14px;border:1px solid #1f2a3a;border-radius:14px;background:#0b1320;color:#9fb0c0}

/* When the JS app has rendered, drop the loading placeholder box so the
   public background (e.g. grass) can remain visible around the cards. */
#tsp-app-slot.tsp-loaded{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
}

.tsp-wrap{max-width:1200px;margin:18px auto;padding:0 10px}

/* Public view: show the site's background (e.g. grass) also behind the lower sections.
   Some themes wrap the content area with a solid background; by inheriting the background
   image/properties we keep the same texture visible in side gutters across all sections.
*/
.tsp-view-public{
  /* Ensure the "grass" background is visible behind ALL public sections.
     Many themes render page content on a solid background which prevents the
     site-wide background image from showing in side gutters. We provide a
     lightweight grass texture fallback for the plugin area.
  */
  /* Stay inside the theme's content column so public pages keep the same
     side margins as admin views. We still paint the grass behind the plugin
     area, but we do not force full-bleed layout. */
  width: 100%;
  margin: 0;
  overflow-x: clip;

  /* Background is configurable from WP Admin (Asetukset -> Tulospalvelu).
     We keep the container transparent here and paint the chosen background
     via an inline style injected by the plugin. */
  background: transparent;

  /* Provide consistent left/right breathing room on mobile.
     The inner .tsp-wrap adds additional max-width centering. */
  padding: 18px 12px 26px;

  /* Create a stacking context so our dedicated background layer can sit
     behind the UI regardless of theme wrappers. */
  position: relative;
  min-height: 100vh;
}

/* Admin view: use the same configurable background as public view.
   We keep the layout inside the theme/content column.
*/
.tsp-view-admin{
  width: 100%;
  margin: 0;
  overflow-x: clip;
  padding: 18px 12px 26px;
  position: relative;
}
.tsp-view-admin .tsp-bg-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.tsp-view-admin > *{ position: relative; z-index: 1; }

/* Dedicated background layer (public view)
   - plugin scope: covers the plugin root only
   - page scope: fixed full-viewport background
*/
.tsp-view-public .tsp-bg-layer{
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tsp-view-public.tsp-bg-scope-plugin .tsp-bg-layer{ position:absolute; }
.tsp-view-public.tsp-bg-scope-page .tsp-bg-layer{ position:fixed; }

/* Ensure all plugin UI renders above the background layer */
.tsp-view-public > *{ position: relative; z-index: 1; }
/* Leave more "grass" visible on the sides on mobile */
.tsp-view-public .tsp-wrap{padding:0 16px;background:transparent}
.tsp-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.tsp-title{display:flex;flex-direction:column;gap:2px}
.tsp-title h2{margin:0;font-size:18px}
.tsp-title .sub{font-size:12px;color:#9fb0c0}

.tsp-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tsp-tabs-spacer{flex:1 1 auto;min-width:8px}
.tsp-tabbtn{border:1px solid #1f2a3a;background:transparent;color:#e6edf3;padding:8px 10px;border-radius:999px;cursor:pointer}
.tsp-tabbtn.active{border-color:rgba(77,163,255,.85);box-shadow:0 0 0 2px rgba(77,163,255,.15) inset}


.tsp-tabs-actions{display:flex;gap:8px;align-items:center}
.tsp-btn-pill{border-radius:999px;padding:8px 14px}
@media(max-width:520px){.tsp-tabs-actions{width:100%;justify-content:flex-end}}
.tsp-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:980px){.tsp-grid.two{display:grid;grid-template-columns:1fr !important;gap:16px}}

.tsp-card{background:linear-gradient(180deg,#111826,#0f1724);border:1px solid #1f2a3a;border-radius:14px;padding:14px}
.tsp-card h3{margin:0 0 10px 0;font-size:14px;color:#d7e3ef}

.tsp-row{display:flex;gap:10px;flex-wrap:wrap}
.tsp-row > *{flex:1}

/* Filters row: keep the action button (e.g. Tulosta) on the same row on wide views */
.tsp-row-filters{align-items:flex-end}
.tsp-row-filters > *{flex:1 1 170px}
.tsp-row-filters .tsp-actions{flex:0 0 auto;margin-left:auto}

/* Public match list filters: give the dropdowns a bit more room (esp. team) */
#pubTeam{min-width:220px}
#pubSeries{min-width:200px}
#pubGroup{min-width:140px}
#pubStage{min-width:160px}
#pubOrder{min-width:180px}

/* Public match list filters: keep print button on the same row on wider screens */
.tsp-pub-filters{align-items:flex-end;flex-wrap:nowrap}
.tsp-pub-filters > *{flex:1 1 160px}
.tsp-pub-filters .tsp-actions{flex:0 0 auto;margin-left:auto;display:flex;align-items:flex-end}

@media (max-width: 780px){
  .tsp-pub-filters{flex-wrap:wrap}
  .tsp-pub-filters .tsp-actions{width:100%;justify-content:flex-end}
}

.tsp-label{display:block;color:#9fb0c0;font-size:12px;margin:8px 0 4px}
.tsp-input,.tsp-select,.tsp-textarea{width:100%;background:#0b1320;border:1px solid #1f2a3a;color:#e6edf3;padding:9px 10px;border-radius:10px;outline:none}
.tsp-input,.tsp-select{min-height:38px;line-height:1.2}
.tsp-textarea{min-height:90px;resize:vertical}

.tsp-btn{background:#0b1320;border:1px solid #1f2a3a;color:#e6edf3;padding:9px 12px;border-radius:10px;cursor:pointer}
.tsp-btn.primary{border-color:rgba(77,163,255,.6);background:rgba(77,163,255,.12)}
.tsp-btn.good{border-color:rgba(42,209,139,.6);background:rgba(42,209,139,.10)}
.tsp-btn.danger{border-color:rgba(255,92,92,.6);background:rgba(255,92,92,.10)}
.tsp-btn:disabled{opacity:.55;cursor:not-allowed}

.tsp-table{width:100%;border-collapse:collapse;margin-top:6px}
.tsp-table th,.tsp-table td{padding:8px;border-bottom:1px solid #1f2a3a;text-align:left;vertical-align:top}
.tsp-table th{color:#9fb0c0;font-size:12px;font-weight:600}
.tsp-right{text-align:right}
.tsp-center{text-align:center}

.tsp-pill{display:inline-flex;align-items:center;gap:6px;background:#0e2438;border:1px solid #1f2a3a;padding:4px 8px;border-radius:999px;color:#cfe1f2;font-size:12px}
.tsp-muted{color:#9fb0c0}
.tsp-hr{height:1px;background:#1f2a3a;margin:10px 0}
.tsp-note{font-size:12px;color:#9fb0c0;margin-top:8px}

/* Turnausinfo: shown on public view before standings */
.tsp-turnausinfo-text{font-size:14px;line-height:1.4}

.tsp-banner{border:1px solid rgba(255,204,102,.45);background:rgba(255,204,102,.06);color:#ffe6b0;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.tsp-ok{border-color:rgba(42,209,139,.45);background:rgba(42,209,139,.06);color:#bff7dc}

/* Team logo */
.tsp-logo{width:18px;height:18px;border-radius:4px;object-fit:cover;border:1px solid #1f2a3a;background:#0b1320;flex:0 0 auto;display:inline-block}
.tsp-teamcell{display:flex;align-items:center;gap:8px}
.tsp-teamname{white-space:normal}

/* Desktop public match table: home team (Koti) is right-aligned and rendered as name then logo */
#tulospalvelu-root #pubMatches td.tsp-home{ text-align:right; }
#tulospalvelu-root #pubMatches td.tsp-home .tsp-teamcell{ justify-content:flex-end; }
#tulospalvelu-root #pubMatches td.tsp-home .tsp-teamname{ text-align:right; }

/* Public match list score cell: show penalty shootout score on its own line under the main score */
#tulospalvelu-root #pubMatches .tsp-scorecell{ line-height:1.2; }
#tulospalvelu-root #pubMatches .tsp-score-main{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
#tulospalvelu-root #pubMatches .tsp-score-pen{ margin-top:2px; font-size:12px; color:#9fb0c0; }

@media (min-width: 761px){
  .tsp-teamname{white-space:nowrap}
}


/* Tables: fit all viewports without horizontal scrolling.
   We avoid forcing a minimum width and instead let the table shrink,
   wrap long content, and reduce padding/font-size on small screens.
*/
#tulospalvelu-root .tsp-card{overflow-x:hidden}
#tulospalvelu-root .tsp-table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0}
#tulospalvelu-root .tsp-table th,
#tulospalvelu-root .tsp-table td{white-space:normal; word-break:break-word}

/* Prevent the whole page from getting a horizontal scrollbar */
html, body{overflow-x:hidden}

@media (max-width: 760px){
  #tulospalvelu-root .tsp-table th,
  #tulospalvelu-root .tsp-table td{padding:10px 8px;font-size:12px}
  #tulospalvelu-root .tsp-chip{font-size:12px;padding:8px 10px}
}

#tulospalvelu-root .tsp-table input.tsp-input{padding:6px 8px;border-radius:8px;}

/* Inline score entry */
#tulospalvelu-root input.tsp-score{
  width: 70px;
  text-align: center;
}
#tulospalvelu-root .tsp-saveRow{
  padding: 6px 10px;
}
#tulospalvelu-root .tsp-more{
  padding: 6px 10px;
  margin-left: 6px;
}

/* Team copy checklist */
.tsp-checklist{
  max-height: 220px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,0.20);
}
.tsp-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tsp-check:last-child{ border-bottom: none; }
.tsp-check input{ width: 18px; height: 18px; }
.tsp-check img{ width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: rgba(255,255,255,0.85); }
.tsp-check span{ color: #eaf0ff; font-weight: 600; }

/* Team participation modal */
.tsp-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:99999; }
.tsp-modal.open{ display:flex; }
.tsp-modal-card{ width:min(720px, 92vw); max-height:86vh; overflow:auto; background:rgba(10,16,26,.92); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.tsp-modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.tsp-chip{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); font-size:12px; }
.tsp-chip b{ font-weight:800; }


/* Force one-column layout for Matches + Standings */
.tsp-grid.onecol{display:grid;grid-template-columns:1fr !important;gap:16px}


/* 1.4.9 responsive fixes: prevent horizontal scrolling */
#tulospalvelu-root, .tsp-wrap { overflow-x: hidden; }
.tsp-wrap * { box-sizing: border-box; }
.tsp-card, .tsp-panel { max-width: 100%; }
table.tsp-table { width: 100%; table-layout: auto; }
table.tsp-table th, table.tsp-table td { overflow-wrap: anywhere; word-break: break-word; }
input, select, textarea { max-width: 100%; min-width: 0; }

/* --- Layout overrides (latest) --- */
/* Admin: generator edit table - make Kenttä and team selects roomier */
#gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3){width:180px !important} /* Kenttä */
#gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4),
#gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5){width:230px !important} /* Koti + Vieras */

/* gEditTbl: make date/time inputs slightly more compact (admin table) */
#gEditTbl input.tsp-input[type="date"],
#gEditTbl input.tsp-input[type="time"]{
  height: 28px;
  padding: 2px 6px;
  font-size: 13px;
}

/*
  Table readability: keep labels and values on a single line.
  Avoid horizontal scrolling by using fixed table layout + truncation.
*/
#tulospalvelu-root table.tsp-table{ table-layout: fixed; }
#tulospalvelu-root table.tsp-table th,
#tulospalvelu-root table.tsp-table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  /* Prevent occasional glyph clipping on some devices/browsers */
  line-height: 1.35;
}

/* Team cell: logo + name should truncate nicely. */
#tulospalvelu-root .tsp-teamcell{ min-width: 0; }
#tulospalvelu-root .tsp-teamcell > div{ min-width: 0; }
#tulospalvelu-root .tsp-teamcell .tsp-teamname{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  Public matches list: mobile portrait readability.
  In portrait on narrow screens, hide less critical columns (Aika, Kenttä)
  so Pvm + Koti/Tulos/Vieras remain readable without horizontal scrolling.
  Landscape stays unchanged (all columns visible).
*/
/*
  NOTE: Some themes wrap/relocate the rendered table so root-based selectors may fail.
  Use a robust selector (no root dependency) + !important.
  Additionally, some mobile browsers are inconsistent with orientation media queries,
  so we provide a max-width fallback.
*/
@media (max-width: 900px) and (orientation: portrait){
  #matchesTbl th:nth-child(2),
  #matchesTbl td:nth-child(2),
  #matchesTbl th:nth-child(3),
  #matchesTbl td:nth-child(3){
    display:none !important;
  }
}

@media (max-width: 600px){
  #matchesTbl th:nth-child(2),
  #matchesTbl td:nth-child(2),
  #matchesTbl th:nth-child(3),
  #matchesTbl td:nth-child(3){
    display:none !important;
  }
}


/* JS fallback: if theme lacks viewport meta and media queries don’t trigger,
   we add a class to <html> when screen is narrow + portrait. */
html.tsp-mobile-portrait #matchesTbl th:nth-child(2),
html.tsp-mobile-portrait #matchesTbl td:nth-child(2),
html.tsp-mobile-portrait #matchesTbl th:nth-child(3),
html.tsp-mobile-portrait #matchesTbl td:nth-child(3){
  display:none !important;
}

/* Slightly smaller header text on narrow screens to reduce truncation. */
@media (max-width: 480px){
  #tulospalvelu-root table.tsp-table th,
  #tsp-app-slot table.tsp-table th{ font-size: 12px; }
  #tulospalvelu-root table.tsp-table td,
  #tsp-app-slot table.tsp-table td{ font-size: 13px; }
}



/* === Standings table (public) === */
#tblStand{width:100%;table-layout:fixed}
#tblStand th,#tblStand td{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Prevent occasional glyph clipping in table cells */
  line-height: 1.35;
}
#tblStand th:nth-child(1),#tblStand td:nth-child(1){width:7%;text-align:center}
#tblStand th:nth-child(2),#tblStand td:nth-child(2){width:36%}
#tblStand th:nth-child(n+3),#tblStand td:nth-child(n+3){width:7%;text-align:center}
#tblStand th:nth-child(9),#tblStand td:nth-child(9){width:8%;font-weight:700}

#tblStand th,#tblStand td{padding-left:8px;padding-right:8px}
#tblStand td:nth-child(n+3){padding-left:4px;padding-right:4px}
#tblStand td:nth-child(2) img{max-width:26px;max-height:26px}

/* Small screens: shrink fonts a bit so team names fit better */
@media (max-width:420px){
  #tblStand th,#tblStand td{font-size:12px}
  #tblStand th:nth-child(2),#tblStand td:nth-child(2){font-size:12px}
  #tblStand td:nth-child(2) img{max-width:22px;max-height:22px}
}


/* === Admin: match tables (better field column fit + more even controls) === */
#matchesTbl, #gEditTbl{width:100%;table-layout:fixed}

/* Column sizing (admin edit table)
   - Make Pvm + Aika a bit wider so the selected values don't collapse to “:” on mobile
   - Give Kenttä enough space for readable field names
*/
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){width:22%} /* Pvm */
#gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){width:15%} /* Aika */
#gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3){width:23%} /* Kenttä */
#gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4){width:17%} /* Koti */
#gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5){width:11%} /* Vieras */
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){width:12%} /* Poista */

#matchesTbl th:nth-child(1), #matchesTbl td:nth-child(1){width:18%}
#matchesTbl th:nth-child(2), #matchesTbl td:nth-child(2){width:15%}
#matchesTbl th:nth-child(3), #matchesTbl td:nth-child(3){width:17%}

/* Admin: Pvm/Aika kentät – parannetaan kosketettavuutta */
#matchesTbl td:nth-child(1) select,
#matchesTbl td:nth-child(1) input {
  min-width: 140px;
}
#matchesTbl td:nth-child(2) select,
#matchesTbl td:nth-child(2) input {
  min-width: 120px;
}
#matchesTbl th:nth-child(4), #matchesTbl td:nth-child(4){width:16%}
#matchesTbl th:nth-child(5), #matchesTbl td:nth-child(5){width:7%}
#matchesTbl th:nth-child(6), #matchesTbl td:nth-child(6){width:15%}
#matchesTbl th:nth-child(7), #matchesTbl td:nth-child(7){width:12%}

/* Widen date/time controls slightly (admin + responsive tables) */
#matchesTbl td:nth-child(1) select,
#matchesTbl td:nth-child(1) input,
#matchesTbl td:nth-child(2) select,
#matchesTbl td:nth-child(2) input{
  width:100%;
  min-width:7.5em;
  box-sizing:border-box;
}

/* Allow field column to wrap (others stay truncated) */
#gEditTbl td:nth-child(3), #gEditTbl th:nth-child(3),
#matchesTbl td:nth-child(3), #matchesTbl th:nth-child(3){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* Make in-table inputs/selects more compact and consistent */
#matchesTbl .tsp-input, #matchesTbl .tsp-select,
#gEditTbl .tsp-input, #gEditTbl .tsp-select{
  padding:6px 8px;
  min-height:34px;
  font-size:12px;
  border-radius:8px;
}

@media (max-width: 480px){
  /* Prioritize Kenttä on very small screens */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){width:22%}
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){width:16%}
  #gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3){width:30%}

  /* Add-match table: ensure Pvm/Aika stay readable on very small screens */
  #matchesTbl th:nth-child(1), #matchesTbl td:nth-child(1){width:22%}
  #matchesTbl th:nth-child(2), #matchesTbl td:nth-child(2){width:16%}
  #matchesTbl th:nth-child(3), #matchesTbl td:nth-child(3){width:24%}
  #matchesTbl th:nth-child(7), #matchesTbl td:nth-child(7){width:14%}
}

/* Ensure date/time selects have enough room and don't shrink to a single character on mobile */
#gEditTbl td:nth-child(1) select.tsp-select,
#gEditTbl td:nth-child(2) select.tsp-select,
#matchesTbl td:nth-child(1) select,
#matchesTbl td:nth-child(2) select{
  width: 100%;
  min-width: 92px;
}

/* Add-match table: make sure the Pvm/Aika dropdowns are readable (avoid ':' and truncated dates). */
#matchesTbl td:nth-child(1) select{ min-width: 140px; }
#matchesTbl td:nth-child(2) select{ min-width: 110px; }

/* If the date/time fields are rendered as inputs (themes/plugins may alter selects), ensure they stay usable */
#matchesTbl td:nth-child(1) input,
#matchesTbl td:nth-child(2) input{
  width: 100%;
  min-width: 110px;
}

/* In the add-match table, do not ellipsize Pvm/Aika cells (otherwise selects show only ':' or truncated dates). */
#matchesTbl td:nth-child(1),
#matchesTbl td:nth-child(2){
  overflow: visible;
  text-overflow: clip;
}


/* === Public: matches table column balance ===
   - Aika column can be tighter
   - Kenttä needs more room
*/
#pubMatches{width:100%;table-layout:fixed}
#pubMatches th:nth-child(1), #pubMatches td:nth-child(1){width:13%}
#pubMatches th:nth-child(2), #pubMatches td:nth-child(2){width:8%}
#pubMatches th:nth-child(3), #pubMatches td:nth-child(3){width:18%}
#pubMatches th:nth-child(4), #pubMatches td:nth-child(4){width:18%}
#pubMatches th:nth-child(5), #pubMatches td:nth-child(5){width:10%}
#pubMatches th:nth-child(6), #pubMatches td:nth-child(6){width:18%}
#pubMatches th:nth-child(7), #pubMatches td:nth-child(7){width:15%}

/* Let Kenttä wrap (public) while keeping others nicely truncated */
#pubMatches th:nth-child(3), #pubMatches td:nth-child(3){
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}



/* --- Public hero banner (1.5.x) --- */
.tsp-hero{
  /* Keep the hero visually connected with the public cards below */
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  /* Match the rest of the public cards (Sarjataulukko / Ottelut) */
  border: 1px solid #1f2a3a;
  background: linear-gradient(180deg,#111826,#0f1724);
}
.tsp-hero-head{
  padding: 12px 14px 8px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.tsp-hero-stage{
  position: relative;
  padding: 8px 12px 12px;
  min-height: 118px;
}
.tsp-hero-slide{
  position:absolute;
  inset: 8px 12px 0 12px;
  transition: transform 320ms ease, opacity 320ms ease;
  will-change: transform, opacity;
}
.tsp-hero-card{
  height: 100%;
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(11,19,32,0.92);
  border: 1px solid #1f2a3a;
}
.tsp-hero-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.tsp-hero-badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.tsp-hero-sub{
  font-size: 12px;
  opacity: 0.88;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsp-hero-scoreboard{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 10px;
}
.tsp-hero-team{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.tsp-hero-team--right{
  justify-content:flex-end;
  text-align:right;
}
.tsp-hero-logo{
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  padding: 2px;
  flex: 0 0 auto;
}
.tsp-hero-logo--ph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .5px;
  color: rgba(0,0,0,0.78);
}

@media (max-width: 420px){
  .tsp-hero-logo{ width: 48px; height: 48px; border-radius: 10px; }
}
.tsp-hero-staticon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 18px;
  flex: 0 0 auto;
}
.tsp-hero-teamname{
  font-weight: 700;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsp-hero-score{
  font-size: 22px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.tsp-hero-title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}
.tsp-hero-stat{
  /* Stat row should visually sit "inside" the card like the scoreboard */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.tsp-hero-statval{
  font-size: 18px;
  font-weight: 800;
}
/* Dots removed: cleaner banner and no overlap with content */
.tsp-hero-dots{display:none !important}

.tsp-hero-slide--active{ opacity: 1; transform: translateX(0); }
.tsp-hero-slide--next{ opacity: 0; transform: translateX(12px); }
.tsp-hero-slide--next.is-enter{ opacity: 0; transform: translateX(26px); }
.tsp-hero-slide--next.is-enter-active{ opacity: 1; transform: translateX(0); }
.tsp-hero-slide--active.is-exit{ opacity: 0; transform: translateX(-26px); }

/* Public view: keep natural "grass" gaps between sections */
#tsp-hero-slot{ margin: 14px 0 14px; }



/* --- Banner (hero) – scorecard layout (logos edges, score center) --- */
.tsp-hero {
  /* Prevent layout/scroll jumps when slides change */
  min-height: 160px;
}

.tsp-hero-card {
  padding: 0;
}

.tsp-hero-scoreboard.tsp-hero-scoreboard--match,
.tsp-hero-scoreboard.tsp-hero-scoreboard--stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 140px;
  padding: 18px 18px;
}

.tsp-hero-scoreboard--stat {
  justify-content: center;
}

.tsp-hero-team {
  width: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tsp-hero-team--right .tsp-hero-teamname {
  text-align: center;
}

.tsp-hero-center {
  width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.tsp-hero-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  padding: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.tsp-hero-logo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tsp-hero-teamname {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  max-width: 88%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-hero-score {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tsp-hero-sub {
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.15;
  text-align: center;
  max-width: 88%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsp-hero-subtitle {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.tsp-hero-statline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Stat slides: keep title on left and value on right (prevents overlap on mobile) */
.tsp-hero-scoreboard--stat { justify-content: flex-start; }

.tsp-hero-statgrid{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tsp-hero-stattext{
  flex: 1 1 auto;
  min-width: 0;
}

.tsp-hero-scoreboard--stat .tsp-hero-subtitle{
  text-align: left;
  margin: 0;
}

.tsp-hero-scoreboard--stat .tsp-hero-statline{
  flex: 0 0 auto;
}

@media (max-width: 520px){
  .tsp-hero-statgrid{ gap: 12px; }
  .tsp-hero-scoreboard--stat .tsp-hero-statline{ max-width: 88%; }
}


.tsp-hero-statvalue {
  font-size: 20px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .tsp-hero { min-height: 150px; }
  .tsp-hero-scoreboard.tsp-hero-scoreboard--match,
  .tsp-hero-scoreboard.tsp-hero-scoreboard--stat {
    min-height: 126px;
    padding: 14px 14px;
    gap: 10px;
  }
  .tsp-hero-logo { width: 52px; height: 52px; border-radius: 14px; padding: 8px; }
  .tsp-hero-teamname { font-size: 18px; }
  .tsp-hero-score { font-size: 44px; }
  .tsp-hero-sub { font-size: 14px; }
}


/* Legacy elements (kept for backward compatibility) */
.tsp-hero-meta, .tsp-hero-badge { display: none !important; }

/* Sarjataulukon lisäasetukset: tasaa pistelokerot samalle tasolle myös kun otsikko katkeaa kahdelle riville */
.tsp-series-settings .tsp-row{align-items:flex-start}
.tsp-series-settings .tsp-row .tsp-label{display:block;min-height:2.6em;line-height:1.3}

.tsp-series-settings .tsp-row input[type="number"]{height:52px;}

/* Admin save bar (mobile-friendly) */
.tsp-savebar{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  flex-wrap:wrap;
}

@media (max-width: 640px){
  .tsp-savebar-row{
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background: rgba(8, 14, 26, 0.95);
    padding: 10px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
  }
  .tsp-savebar{
    justify-content: space-between;
    width: 100%;
  }
  #tspSaveBtn{
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 14px;
  }
}

/* Row save feedback */
.tsp-savedflash{
  animation: tsp-savedflash 1.1s ease-out;
}

@keyframes tsp-savedflash{
  0% { background: rgba(46, 204, 113, 0.18); }
  100% { background: transparent; }
}


/* --- Playoff bracket (graphic) --- */
.tsp-playoff-bracket{
  margin:10px 0 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px 10px;
}
.tsp-bracket-grid{
  display:grid;
  grid-auto-flow:column;
  gap:14px;
  align-items:start;
  min-width:560px;
}
.tsp-bracket-round{min-width:220px}
.tsp-bracket-round-title{font-size:12px;color:#9fb0c0;font-weight:600;margin:0 0 8px 2px}
.tsp-bracket-round-matches{display:flex;flex-direction:column;gap:10px}
.tsp-bracket-match{
  background:#0b1320;
  border:1px solid #1f2a3a;
  border-radius:14px;
  padding:8px 10px;
  margin-bottom:0;
}
.tsp-bracket-match-meta{font-size:11px;color:#7f93a7;margin-bottom:6px}
.tsp-bracket-pen{font-size:11px;color:#7f93a7;opacity:.95;margin-left:6px}
.tsp-bracket-team{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0}
.tsp-bracket-team-left{display:flex;align-items:center;gap:8px;min-width:0}
.tsp-bracket-team-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsp-bracket-team-score{font-weight:700;min-width:18px;text-align:right}
.tsp-bracket-team.win .tsp-bracket-team-name,
.tsp-bracket-team.win .tsp-bracket-team-score{color:#bff7dc}

/* Slightly tighter bracket on small screens */
@media (max-width:760px){
  .tsp-bracket-round{min-width:200px}
  .tsp-bracket-grid{min-width:520px}
}

/* === ADMIN VIEW: background only (do not affect tables/cards) === */
.tsp-view-admin{
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Hide plugin background layer in admin so only white page shows behind UI */
.tsp-view-admin .tsp-bg-layer{
  display: none !important;
}



/* Admin: make the top controls readable regardless of the page background */
.tsp-view-admin .tsp-top{
  background: linear-gradient(180deg,#111826,#0f1724);
  border: 1px solid #1f2a3a;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.tsp-view-admin .tsp-title h2{ color:#e6edf3; }
.tsp-view-admin .tsp-title .sub{ color:#9fb0c0; }
.tsp-view-admin .tsp-label{ color:#9fb0c0; }

/* Admin tabs: match the primary button look (like "Tallenna") */
.tsp-view-admin .tsp-tabbtn{
  background:#0b1320;
  border:1px solid rgba(77,163,255,.6);
  color:#e6edf3;
  font-weight:700;
  padding:9px 12px;
}
.tsp-view-admin .tsp-tabbtn.active{
  box-shadow:0 0 0 2px rgba(77,163,255,.15) inset;
  border-color:rgba(77,163,255,.85);
}
/* Version badge (admin only) — removed in v1.1.2 */
.tsp-view-admin::after{
  display:none !important;
  content:"" !important;
}



/* Public view: match cards (mobile) */
.tsp-wrap .tsp-matchcards { margin-top: 12px; }
.tsp-wrap .tsp-matchcards-heading {
  margin: 14px 0 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.tsp-wrap .tsp-matchcard {
  border-radius: 14px;
  padding: 12px 12px;
  margin: 10px 0;
  /* White cards to match the light standings table style */
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  color: #0f172a;
}
.tsp-wrap .tsp-matchcard-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 1;
  color: #475569;
  margin-bottom: 10px;
}
.tsp-wrap .tsp-matchcard-mid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.tsp-wrap .tsp-matchcard-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tsp-wrap .tsp-matchcard-team.away { justify-content: flex-end; text-align: right; }
.tsp-wrap .tsp-matchcard-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Palloliitto-tyylinen asemointi: nimet reunoille, logot kohti keskikohtaa */
.tsp-wrap .tsp-matchcard-team.home .tsp-matchcard-logo-box { margin-left: auto; }
.tsp-wrap .tsp-matchcard-team.away .tsp-matchcard-logo-box { margin-right: auto; }

/* Kun ruutu on kapea, annetaan nimelle hieman enemmän tilaa */
@media (max-width: 420px) {
  .tsp-wrap .tsp-matchcard-name { font-size: 13px; }
}
.tsp-wrap .tsp-matchcard-score {
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  text-align: center;
}
.tsp-wrap .tsp-matchcard-score-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tsp-wrap .tsp-matchcard-score-badge {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.18);
}
.tsp-wrap .tsp-matchcard-score-sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.7);
}
.tsp-wrap .tsp-matchcard-bot {
  margin-top: 10px;
  font-size: 12px;
  opacity: 1;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 721px) {
  .tsp-wrap .tsp-matchcards { display: none; }
}



/* Public view: match cards (mobile) - square logo box like banner */
.tsp-wrap .tsp-matchcard-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  /* Thin dark outline to separate logos from white match cards (same idea as standings) */
  border: 1px solid rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  overflow: hidden;
}
.tsp-wrap .tsp-matchcard-logo-box img.tsp-matchcard-logo {
  width: 100%;
  height: 100%;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: block;
}




.tsp-results-input { display:flex; flex-direction:column; gap:10px; }
.tsp-results-card { background:#fff; border-radius:12px; padding:10px; }
.tsp-results-row { display:grid; grid-template-columns:1fr 50px 50px 1fr; gap:8px; align-items:center; }
.tsp-results-row input { text-align:center; font-size:16px; }
.tsp-results-save { margin-top:12px; padding:14px; font-size:18px; border-radius:10px; background:#2563eb; color:#fff; border:none; }

/* Admin results (mobile): result type controls */
.tsp-results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
}
.tsp-rt-group {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.tsp-rt-btn {
  border: none;
  background: transparent;
  padding: 6px 10px;
  min-width: 58px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.75);
  cursor: pointer;
}
.tsp-rt-btn.is-active,
.tsp-rt-btn.on,
.tsp-rt-btn.active {
  background: rgba(15, 23, 42, 0.10);
  color: rgba(15, 23, 42, 0.95);
}

.tsp-rt-btn:disabled,
.tsp-res-type-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
.tsp-pen-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tsp-pen-wrap .tsp-pen-label {
  font-size: 12px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.65);
}
.tsp-pen-wrap input.tsp-pen {
  width: 54px;
  text-align: center;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.85);
}

/* Admin results: mobile cards (editable) */
#resCards { margin-top: 12px; }
.tsp-res-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  margin: 14px 0;
}
.tsp-res-card .tsp-res-meta {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  opacity: .85;
  margin-bottom: 10px;
}
.tsp-res-card .tsp-res-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto 1fr;
  gap: 10px;
  align-items: center;
}
.tsp-res-team { font-weight: 700; font-size: 22px; color: #111827; }
.tsp-res-team.left { text-align: left; }
.tsp-res-team.right { text-align: right; }
.tsp-res-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.25);
  overflow: hidden;
}
.tsp-res-logo img { width: 100%; height: 100%; object-fit: contain; }
.tsp-res-score {
  width: 54px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.25);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  outline: none;
}
.tsp-res-dash {
  font-weight: 800;
  font-size: 26px;
  color: #111827;
  opacity: .8;
  line-height: 1;
}
.tsp-res-card .tsp-res-venue {
  margin-top: 10px;
  opacity: .75;
  font-size: 18px;
}
.tsp-res-card .tsp-res-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.tsp-res-save {
  border: none;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

/* Tulostyyppi (Jatkoaika / RP) -valinnat */
.tsp-resulttype {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.tsp-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.25);
  background: rgba(255,255,255,.9);
  color: #111827;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.tsp-type-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}
.tsp-type-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  opacity: .75;
}

@media (max-width: 860px) {
  #resTbl { display: none !important; }
  #resCards { display: block; }
}
@media (min-width: 861px) {
  #resCards { display: none; }
}

/* Admin mobile results (legacy class names used by JS):
   Provide a clean card layout identical in intent to the public matchcards.
*/
.tsp-rescard {
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
}
.tsp-rescard-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 14px;
}
.tsp-rescard-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.tsp-res-team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.tsp-res-home { justify-content: flex-start; }
.tsp-res-away { justify-content: flex-end; }
.tsp-res-teamname {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Team label shown under the logo in narrow/portrait views */
.tsp-res-teamlabel {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}
.tsp-res-score {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tsp-res-input {
  width: 2.4em;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.tsp-res-sep {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}
.tsp-res-venue {
  margin-top: 14px;
  font-size: 16px;
  color: #6b7280;
}
.tsp-rescard button.tsp-res-save {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
  background: #0b1220;
  color: #ffffff;
}


/* --- Admin mobiili: tulosten syotto korttityyli (Palloliitto-tyyppinen) --- */
.tsp-rescards .tsp-rescard-main{ padding: 18px 18px 10px; display:block; }

.tsp-rescards .tsp-res-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.tsp-rescards .tsp-res-side{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tsp-rescards .tsp-res-home{ align-items: flex-start; }
.tsp-rescards .tsp-res-away{ align-items: flex-end; }

.tsp-rescards .tsp-res-logo-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Admin: tulosten syöttö (mobiilikortit) – sijoita joukkueen logo + nimi reunoille */
.tsp-rescards .tsp-res-home .tsp-res-logo-wrap{ align-items: flex-start; }
.tsp-rescards .tsp-res-away .tsp-res-logo-wrap{ align-items: flex-end; }
.tsp-rescards .tsp-res-teamlabel{ width: 100%; }
.tsp-rescards .tsp-res-home .tsp-res-teamlabel{ text-align: left; }
.tsp-rescards .tsp-res-away .tsp-res-teamlabel{ text-align: right; }

.tsp-rescards .tsp-res-logo-box{
  width: 56px;
  height: 56px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.tsp-rescards .tsp-res-logo-box img{
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
}

.tsp-rescards .tsp-res-teamname{ display: none; }

.tsp-rescards .tsp-res-teamlabel{
  display: block;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  color: #0f172a;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.tsp-rescards .tsp-res-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.tsp-rescards .tsp-res-scoreline{
  display: flex;
  align-items: center;
  gap: 10px;
}

.tsp-rescards .tsp-res-scoreline .tsp-res-input{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.25);
  background: #fff;
  color: #0f172a;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  padding: 0;
}

.tsp-rescards .tsp-res-scoreline .tsp-res-sep{
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #0f172a;
}

.tsp-rescards .tsp-res-type{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.tsp-rescards .tsp-res-type .tsp-res-typebtn{
  width: auto;
  min-width: 46px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
}

.tsp-rescards .tsp-res-pen{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.tsp-rescards .tsp-res-pen .tsp-res-penlabel{
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,0.7);
  text-align: center;
}

.tsp-rescards .tsp-res-pen .tsp-res-input{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
}

.tsp-rescards .tsp-res-save{
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 900;
}



/* Admin (results): show team names small + initials placeholder when no logo */
@media (max-width: 900px) {
  .tsp-rescards .tsp-res-teamname{
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    opacity: 0.95;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tsp-rescards .tsp-res-home .tsp-res-teamname{ text-align: left; }
  .tsp-rescards .tsp-res-away .tsp-res-teamname{ text-align: right; }

  /* Logo box: subtle border for separation */
  .tsp-rescards .tsp-res-logo-box{
    border: 1px solid rgba(15,23,42,0.25);
    background: #fff;
  }

  /* If logo missing, show initials */
  .tsp-rescards .tsp-res-logo-box:empty::after{
    content: attr(data-initials);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 900;
    color: rgba(15,23,42,0.65);
  }
}



/* Admin (results): ensure team names are readable on white cards (theme may set white text globally) */
@media (max-width: 900px) {
  .tsp-rescards .tsp-rescard,
  .tsp-rescards .tsp-rescard * {
    color: #0f172a;
  }
  .tsp-rescards .tsp-res-time,
  .tsp-rescards .tsp-res-meta,
  .tsp-rescards .tsp-res-field {
    color: rgba(15, 23, 42, 0.75);
  }
}

@media (max-width: 520px) {
  /* On very narrow screens, move the team name under the logo for better recognition. */
  .tsp-rescards .tsp-res-teamname {
    display: none;
  }
  .tsp-rescards .tsp-res-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .tsp-rescards .tsp-res-teamlabel {
    display: block;
  }
}

/* Admin (table): result type (REG / JA / RP) controls */
.tsp-resulttype {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.tsp-rt-btn {
  border: 1px solid rgba(15, 23, 42, 0.25);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.85);
  padding: 6px 10px;
  min-width: 58px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}

.tsp-rt-btn.active {
  border-color: rgba(15, 23, 42, 0.45);
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.tsp-pen {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.tsp-pen label {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.65);
  font-weight: 600;
}

.tsp-pen-score {
  width: 54px;
  text-align: center;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.9);
}

/* Admin mobile results cards: result type (JA/RP) + penalties */
.tsp-res-scoreedit{flex-direction:column;align-items:center;gap:10px;}
.tsp-res-scoreline{display:flex;align-items:center;gap:10px;}
.tsp-res-type-inline{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.tsp-res-type-btn{border:1px solid rgba(0,0,0,0.2);background:#fff;border-radius:999px;padding:6px 10px;min-width:58px;font-weight:700;font-size:12px;line-height:1;cursor:pointer;}
.tsp-res-type-btn.is-active{border-color:rgba(0,0,0,0.55);box-shadow:0 0 0 2px rgba(0,0,0,0.06) inset;}
.tsp-res-pen{display:flex;align-items:center;gap:8px;justify-content:center;}
.tsp-res-pen-label{font-weight:700;font-size:12px;opacity:0.9;}
.tsp-res-pen .tsp-res-input{width:52px;}



/* === 2.8.1: compact NORM / JA / RP buttons (admin result entry) === */
.tsp-res-type-inline{gap:6px;}
.tsp-res-type-btn{
  padding:4px 8px;
  min-width:46px;
  font-size:11px;
}

@media (max-width: 520px){
  .tsp-res-type-inline{gap:5px;}
  .tsp-res-type-btn{
    padding:3px 7px;
    min-width:42px;
    font-size:10.5px;
  }
}

/* === 2.8.1: fix portrait overlap + smaller NORM / JA / RP buttons (admin result entry) === */
.tsp-rescards .tsp-res-center{min-width:0;}
.tsp-rescards .tsp-res-type-inline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  max-width:180px;
}
.tsp-rescards .tsp-res-type-inline .tsp-res-type-btn{
  padding:4px 8px !important;
  min-width:42px !important;
  font-size:11px !important;
  line-height:1 !important;
  border-radius:999px !important;
  background: rgba(15, 23, 42, 0.10) !important;
  color: rgba(15, 23, 42, 0.90) !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.tsp-rescards .tsp-res-type-inline .tsp-res-type-btn.is-active{
  background: rgba(15, 23, 42, 0.18) !important;
  border-color: rgba(15, 23, 42, 0.28) !important;
}

@media (max-width: 520px){
  .tsp-rescards .tsp-res-type-inline{gap:5px;max-width:150px;}
  .tsp-rescards .tsp-res-type-inline .tsp-res-type-btn{
    padding:3px 7px !important;
    min-width:40px !important;
    font-size:10.5px !important;
  }
}

/* --- 2.8.1: Admin tulosten syöttö – pienempi Tallenna-nappi ja logot --- */
/* Pienennä Tallenna-nappi tuloskorteissa (mobiili/admin) */
.tsp-rescards button.tsp-res-save,
.tsp-rescard button.tsp-res-save,
button.tsp-res-save {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 10px;
}

/* Jos napin leveys on aiemmin pakotettu 100%:ksi, anna sen olla kompaktimpi */
.tsp-rescard button.tsp-res-save {
  width: auto;
  min-width: 140px;
}

/* Pienennä logoboksit tuloskorteissa */
.tsp-rescards .tsp-res-logo-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
.tsp-rescards .tsp-res-logo-box img {
  width: 84%;
  height: 84%;
}

/* Pienennä myös peruslogo-elementti (jos käytössä muissa admin-näkymissä) */
.tsp-res-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}


/* Admin: smaller and centered Save button */
.tsp-res-save,
.tsp-save-btn {
    padding: 6px 14px !important;
    font-size: 13px !important;
    margin: 12px auto 0 auto !important;
    display: block !important;
    max-width: 160px;
}


/* Admin matches table: horizontal scroll on small screens */
.tsp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#matchesTbl {
  min-width: 660px;
}
#matchesTbl th, #matchesTbl td {
  white-space: nowrap;
}


/* Admin: matches table column sizing (even distribution + stable selects) */
#matchesTbl {
  table-layout: fixed;
  width: 100%;
  min-width: 680px;
}
#matchesTbl th, #matchesTbl td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ensure inputs/selects take the cell width */
#matchesTbl .tsp-input,
#matchesTbl select {
  width: 100% !important;
  min-width: 0 !important;
}

/* Make delete column narrow and button visible */
#matchesTbl th:last-child,
#matchesTbl td:last-child {
  width: 92px;
}
#matchesTbl td:last-child .tsp-btn {
  width: 100%;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* Admin: matches edit table responsive scroll */
#matchesTbl{min-width:680px; table-layout:fixed; width:100%;}
#matchesTbl th,#matchesTbl td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#matchesTbl .tsp-input,#matchesTbl select{width:100% !important; min-width:0 !important;}
#matchesTbl th:last-child,#matchesTbl td:last-child{width:92px;}


/* Admin: ensure delete buttons in matches table are visible */
#matchesTbl td:last-child { background: transparent; }
#matchesTbl td:last-child .tsp-btn { opacity: 1 !important; visibility: visible !important; }

/* Admin: ensure matches delete button column is visible */
#matchesTbl td:last-child{padding:10px !important;}


/* Admin: schedule editor table (#gEditTbl) responsive + balanced columns */
#gEditTbl {
  table-layout: fixed;
  width: 100%;
  min-width: 680px;
}
#gEditTbl th, #gEditTbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gEditTbl .tsp-input, #gEditTbl .tsp-select, #gEditTbl select { width: 100% !important; min-width: 0 !important; }
#gEditTbl th:last-child, #gEditTbl td:last-child { width: 92px; }
#gEditTbl td:last-child .tsp-btn { width: 100%; }

/* Wrap tables in horizontal scroll on small screens */
.tsp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* Admin: gEditTbl - make Away (Vieras) column wider */
#gEditTbl th:nth-child(5),
#gEditTbl td:nth-child(5) {
  width: 160px;
}
/* Keep delete column narrow */
#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) {
  width: 120px;
}

/* Ensure horizontal scroll works when table is wider than viewport */
.tsp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Admin: equalize Home (Koti) and Away (Vieras) column widths */
#gEditTbl th:nth-child(4),
#gEditTbl td:nth-child(4),
#gEditTbl th:nth-child(5),
#gEditTbl td:nth-child(5) {
  width: 180px;
}

/* Admin: gEditTbl fine-tuning (make Time + Delete a bit wider, Home/Away a bit narrower) */
#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2) { /* Aika */
  width: 105px !important;
}
#gEditTbl th:nth-child(4),
#gEditTbl td:nth-child(4) { /* Koti */
  width: 170px !important;
}
#gEditTbl th:nth-child(5),
#gEditTbl td:nth-child(5) { /* Vieras */
  width: 170px !important;
}
#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) { /* Poista */
  width: 130px !important;
}


/* Admin: gEditTbl - prioritize Pvm/Aika/Kenttä visibility, reduce team columns */
#gEditTbl th:nth-child(1),
#gEditTbl td:nth-child(1) { width: 150px; } /* Pvm */
#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2) { width: 95px; }  /* Aika */
#gEditTbl th:nth-child(3),
#gEditTbl td:nth-child(3) { width: 170px; } /* Kenttä */

/* Team columns slightly narrower to free space for left side */
#gEditTbl th:nth-child(4),
#gEditTbl td:nth-child(4),
#gEditTbl th:nth-child(5),
#gEditTbl td:nth-child(5) { width: 210px; } /* Koti + Vieras */

/* Delete column compact */
#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) { width: 110px; }

/* Ensure selects render readable in small cells */
#gEditTbl td:nth-child(1) .tsp-input,
#gEditTbl td:nth-child(2) .tsp-select,
#gEditTbl td:nth-child(3) .tsp-select,
#gEditTbl td:nth-child(4) .tsp-select,
#gEditTbl td:nth-child(5) .tsp-select {
  font-size: 14px;
}


/* Admin: gEditTbl compact layout for desktop fit */
#gEditTbl { table-layout: fixed; }

#gEditTbl th:nth-child(1),
#gEditTbl td:nth-child(1) { width: 120px; } /* Pvm */

#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2) { width: 80px; }  /* Aika */

#gEditTbl th:nth-child(3),
#gEditTbl td:nth-child(3) { width: 150px; } /* Kenttä */

#gEditTbl th:nth-child(4),
#gEditTbl td:nth-child(4),
#gEditTbl th:nth-child(5),
#gEditTbl td:nth-child(5) { width: 180px; } /* Koti + Vieras */

#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) { width: 95px; } /* Poista */

/* Prevent overflow text from stretching cells */
#gEditTbl th, 
#gEditTbl td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Admin: slightly increase Pvm & Aika for readability (balanced) */
#gEditTbl th:nth-child(1),
#gEditTbl td:nth-child(1) { width: 135px; } /* Pvm */

#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2) { width: 90px; }  /* Aika */


/* Admin: final tweak – Aika slightly wider */
#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2) { width: 95px; }  /* Aika */


/* Admin: Results entry (desktop) – make action pills + RP/JA/NORM always visible */
@media (min-width: 768px) {
  /* If results table is inside a wrapper, enable horizontal scroll instead of clipping */
  .tsp-results-wrap,
  .tsp-res-wrap,
  .tsp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure results table can be wider than viewport without hiding columns */
  #resultsTbl,
  #tspResultsTbl,
  .tsp-results-table {
    min-width: 980px;
  }

  /* Action/status pills: smaller and wrapping */
  .tsp-res-flags,
  .tsp-res-status,
  .tsp-result-flags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start;
  }

  .tsp-res-flag,
  .tsp-pill,
  .tsp-chip {
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  /* Make the "Toiminnot" column a bit wider so pills + save fit */
  th.tsp-actions,
  td.tsp-actions,
  th.tsp-toiminnot,
  td.tsp-toiminnot {
    width: 220px;
    min-width: 220px;
  }

  /* Save button compact in table */
  .tsp-res-save,
  .tsp-save-btn,
  button.tsp-save {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    max-width: 140px;
  }

  /* If RP (rankkarit) adds extra score inputs, keep them inline and compact */
  .tsp-rp-score,
  .tsp-pen-score,
  .tsp-rankkari-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .tsp-rp-score input,
  .tsp-pen-score input,
  .tsp-rankkari-score input {
    width: 54px !important;
    min-width: 54px !important;
    padding: 6px 8px !important;
    font-size: 12.5px !important;
    text-align: center;
  }
}

/* Admin: prevent clipping of action buttons inside table cells */
.tsp-results-table td,
#resultsTbl td,
#tspResultsTbl td {
  overflow: visible;
}


/* Admin: gEditTbl columns (6 cols) - ensure correct mapping after header fix */
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1) { width: 135px; } /* Pvm */
#gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2) { width: 95px; }  /* Aika */
#gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3) { width: 150px; } /* Kenttä */
#gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4) { width: 180px; } /* Koti */
#gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5) { width: 180px; } /* Vieras */
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6) { width: 95px; }  /* Poista */


/* Admin: gEditTbl delete button – ensure label visible */
#gEditTbl td:nth-child(6) .tsp-btn.danger,
#gEditTbl td:last-child .tsp-btn.danger {
  width: 100%;
  min-width: 80px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.1;
  color: #fff;
}


/* Admin: gEditTbl delete column – do not clip button label */
#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) {
  width: 110px !important;
  min-width: 110px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#gEditTbl td:nth-child(6) .tsp-btn.danger,
#gEditTbl td:last-child .tsp-btn.danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 100px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

/* Override global ellipsis rule for delete cell if present */
#gEditTbl td:nth-child(6),
#gEditTbl th:nth-child(6) {
  text-overflow: clip !important;
}


/* Admin: gEditTbl delete button column ensures label visible */
#gEditTbl th:nth-child(6),
#gEditTbl td:nth-child(6) {
  width: 110px !important;
  min-width: 110px !important;
  overflow: visible !important;
}
#gEditTbl td:nth-child(6) .tsp-btn.danger {
  width: 100% !important;
  min-width: 100px !important;
}


/* Admin: Results entry table (#resTbl) – actions column compact (more room for team columns) */
#resTbl th.tsp-right,
#resTbl td.tsp-right{
  min-width: 220px;
  width: 220px;
  /* Prevent action buttons from spilling over team name columns on narrow viewports */
  overflow: hidden !important;
  white-space: normal !important;
}

#resTbl td.tsp-right{
  vertical-align: middle;
}

#resTbl .tsp-btn.tsp-saveRow{
  padding: 6px 10px;
  font-size: 12px;
  max-width: 110px;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#resTbl .tsp-resulttype{
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 0;
  min-width: 0;
}

/* Admin results (desktop table): keep Save + (NORM/JA/RP) on the same row */
#resTbl .tsp-actions-row{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: 100%;
}

#resTbl .tsp-actions-row > .tsp-saveRow{
  flex: 0 0 auto;
}

#resTbl .tsp-actions-row > .tsp-resulttype{
  flex: 1 1 auto;
}

#resTbl .tsp-rt-btn{
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.1;
  border-radius: 999px;
  white-space: nowrap;
}

#resTbl .tsp-pen{
  margin-top: 6px;
}

/* If a global ellipsis rule exists for table cells, do not apply it to the actions column */
#resTbl td.tsp-right,
#resTbl th.tsp-right{
  text-overflow: clip !important;
}


/* Final tweak: Pvm +5px, Aika -5px (gEditTbl / schedule table) */
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1) { width: 140px !important; min-width: 140px !important; } /* Pvm */
#gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2) { width: 110px !important;  min-width: 110px !important; }  /* Aika */


/* Final date/time fine-tuning */
/* Pvm wider so full date fits */
#gEditTbl th:nth-child(1), 
#gEditTbl td:nth-child(1) { 
    width: 150px !important; 
    min-width: 150px !important; 
}

/* Aika narrower */
#gEditTbl th:nth-child(2), 
#gEditTbl td:nth-child(2) { 
    width: 80px !important;  
    min-width: 80px !important; 
}


/* ===== 2.8.1: Fix: previous Pvm/Aika changes targeted wrong table. ===== */
/* Reset gEditTbl to default sizing */
#gEditTbl th, 
#gEditTbl td { 
  width: auto !important; 
  min-width: unset !important; 
}

/* ===== 2.8.1: Pvm & Aika widths – BOTH relevant tables ===== */

/* 1) Tulosten syöttö / results list table */
#resTbl th:nth-child(1),
#resTbl td:nth-child(1){
  width: 175px !important;
  min-width: 175px !important;
}

#resTbl th:nth-child(2),
#resTbl td:nth-child(2){
  width: 70px !important;
  min-width: 70px !important;
}

#resTbl td:nth-child(1),
#resTbl td:nth-child(2){
  white-space: nowrap !important;
}

/* 2) Muokkaa otteluohjelmaa (valittu sarja+lohko) */
#matchEditTbl th:nth-child(1),
#matchEditTbl td:nth-child(1){
  width: 195px !important;
  min-width: 195px !important;
}

#matchEditTbl th:nth-child(2),
#matchEditTbl td:nth-child(2){
  width: 70px !important;
  min-width: 70px !important;
}

/* Controls inside date/time cells should fill the cell */
#matchEditTbl td:nth-child(1) select,
#matchEditTbl td:nth-child(1) input,
#matchEditTbl td:nth-child(2) select,
#matchEditTbl td:nth-child(2) input{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ===== 2.8.1: Minor width tweaks (admin) ===== */

/* Tulosten syöttö: the empty spacer column after Pvm (between Pvm and Aika) narrower */
#resTbl th:nth-child(2),
#resTbl td:nth-child(2){
  width: 24px !important;
  min-width: 24px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Otteluohjelman muokkaus: Aika column a bit wider */
#matchEditTbl th:nth-child(2),
#matchEditTbl td:nth-child(2){
  width: 80px !important;
  min-width: 80px !important;
}


/* ===== 2.8.1 FIX: correct column directions ===== */

/* Tulosten syöttö:
   PVM aavistuksen kapeampi, AIKA leveämpi */
#resTbl th:nth-child(1),
#resTbl td:nth-child(1){
  width: 120px !important;
  min-width: 120px !important;
}

#resTbl th:nth-child(2),
#resTbl td:nth-child(2){
  width: 90px !important;
  min-width: 90px !important;
}


/* ===== 2.8.2: Desktop fixes =====
   - Tulosten syöttö (resTbl): Pvm narrower, Aika wider (do NOT shrink Aika)
   - Otteluohjelman muokkaus (matchEditTbl): Aika select slightly wider
   - Ensure result-type buttons are clickable on desktop
*/
#resTbl{
  table-layout: fixed !important;
}
#resTbl th:nth-child(1),
#resTbl td:nth-child(1){
  width: 130px !important;
  min-width: 130px !important;
  white-space: nowrap !important;
}
#resTbl th:nth-child(2),
#resTbl td:nth-child(2){
  width: 95px !important;
  min-width: 95px !important;
  white-space: nowrap !important;
}

#matchEditTbl{
  table-layout: fixed !important;
}
#matchEditTbl th:nth-child(2),
#matchEditTbl td:nth-child(2){
  width: 90px !important;
  min-width: 90px !important;
}

#resTbl .tsp-rt-btn{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ===== 2.9.4: Schedule generator / editor (#gEditTbl) – widen Time (Aika) column ===== */
#gEditTbl{ table-layout: fixed !important; }
#gEditTbl th:nth-child(2),
#gEditTbl td:nth-child(2){
  width: 120px !important;
  min-width: 120px !important;
}
#gEditTbl td:nth-child(2) select,
#gEditTbl td:nth-child(2) .tsp-select{
  min-width: 92px !important;
}


/* ===== 2.10.8 UI FIX: Muokkaa otteluohjelmaa (valittu sarja+lohko) – ei vaakasrollia ===== */
#gEditTbl{width:100% !important; table-layout:fixed !important;}
#gEditTbl th, #gEditTbl td{white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){width:12% !important;} /* Pvm */
#gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){width:10% !important;} /* Aika */
#gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3){width:18% !important;} /* Kenttä */
#gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4){width:24% !important;} /* Koti */
#gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5){width:24% !important;} /* Vieras */
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){width:12% !important;} /* Poista */

#gEditTbl .tsp-input, #gEditTbl .tsp-select, #gEditTbl select{width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;}

/* Poista-nappi yhtenäiseksi muiden Poista-nappien kanssa (ei kirkkaan punaista inline-tyyliä) */
#gEditTbl td:nth-child(6) .tsp-btn{width:100% !important; padding:6px 10px !important; font-size:12px !important; line-height:1.1 !important; color:inherit !important;}

/* ===== 2.10.8 FIX: Muokkaa otteluohjelmaa (valittu sarja+lohko) – pakota mahtumaan ilman vaakasrollausta ===== */
#gEditTbl{width:100% !important;table-layout:fixed !important}
#gEditTbl th,#gEditTbl td{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

/* Sarakejaot (prosentteina, summa 100%) */
#gEditTbl th:nth-child(1),#gEditTbl td:nth-child(1){width:12% !important} /* Pvm */
#gEditTbl th:nth-child(2),#gEditTbl td:nth-child(2){width:12% !important} /* Aika */
#gEditTbl th:nth-child(3),#gEditTbl td:nth-child(3){width:19% !important} /* Kenttä */
#gEditTbl th:nth-child(4),#gEditTbl td:nth-child(4){width:22% !important} /* Koti */
#gEditTbl th:nth-child(5),#gEditTbl td:nth-child(5){width:22% !important} /* Vieras */
#gEditTbl th:nth-child(6),#gEditTbl td:nth-child(6){width:13% !important} /* Poista */

/* Selectit/inputit eivät saa pakottaa min-leveyttä */
#gEditTbl .tsp-input,#gEditTbl .tsp-select,#gEditTbl select{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}

/* Poista-nappi saman tyyliseksi kuin muualla (ei inline-punaisia) */
#gEditTbl td:nth-child(6) .tsp-btn{width:100% !important;padding:6px 10px !important;font-size:12px !important;line-height:1.1 !important;color:inherit !important}



/* 2.10.12: Mobile admin schedule editor – ensure full date/time visible */
@media (max-width: 768px){
  /* Make Pvm and Aika wide enough to show full values (dd.mm.yyyy / hh.mm) */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* Prevent mobile browsers from truncating select text too aggressively */
  #gEditTbl td:nth-child(1) select,
  #gEditTbl td:nth-child(2) select{
    text-overflow: clip !important;
  }
}


/* ===== 2.10.14: Otteluohjelman käsinmuokkaus (gEditTbl) – Pvm näkyy kokonaan, Poista kompaktimpi ===== */
#gEditTbl{ table-layout: fixed !important; }
#gEditTbl th, #gEditTbl td{ padding:6px !important; }

@media (max-width: 600px){
  /* Mobile: make sure full dd.mm.yyyy fits */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){ width: 145px !important; min-width:145px !important; }
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){ width: 90px !important;  min-width:90px !important; }
  #gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){ width: 66px !important;  min-width:66px !important; }
}

@media (min-width: 601px){
  /* Desktop: widen Pvm slightly, keep Poista smaller to avoid truncation */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){ width: 145px !important; min-width:145px !important; }
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){ width: 90px !important;  min-width:90px !important; }
  #gEditTbl th:nth-child(3), #gEditTbl td:nth-child(3){ width: 175px !important; min-width:175px !important; }
  #gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4),
  #gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5){ width: 200px !important; min-width:200px !important; }
  #gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){ width: 80px !important;  min-width:80px !important; }
}

/* Smaller delete button inside schedule editor */
#gEditTbl .tsp-del-match{
  padding:5px 8px !important;
  font-size:11px !important;
  min-height:32px !important;
}



/* ===== 2.10.16: gEditTbl Poista-painike kompaktimmaksi ja Aika-sarake hieman leveämmäksi ===== */
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){
  padding-left: 4px !important;
  padding-right: 4px !important;
}
#gEditTbl td:nth-child(6) .tsp-btn,
#gEditTbl td:nth-child(6) button{
  padding: 2px 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}


/* === 2.10.20 fine-tune: Pvm narrower, Poista wider === */
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){
  width: 10% !important;
}
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){
  width: 15% !important;
}

/* === 2.10.21 fine-tune: Pvm slightly wider, Koti/Vieras slightly narrower === */
#gEditTbl { table-layout: fixed; }
#gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){ width: 12% !important; } /* Pvm */
#gEditTbl th:nth-child(4), #gEditTbl td:nth-child(4){ width: 19% !important; } /* Koti */
#gEditTbl th:nth-child(5), #gEditTbl td:nth-child(5){ width: 19% !important; } /* Vieras */
#gEditTbl th:nth-child(6), #gEditTbl td:nth-child(6){ width: 17% !important; } /* Poista */

/* Keep date select readable */
#gEditTbl td:nth-child(1) select, #gEditTbl td:nth-child(1) input{
  min-width: 110px !important;
}

/* === 2.10.22 mobile fix: prevent Pvm/Aika overlap on small screens === */
@media (max-width: 640px){
  #gEditTbl { table-layout: fixed; width: 100% !important; }
  #gEditTbl td, #gEditTbl th { overflow: hidden; }
  #gEditTbl td select, #gEditTbl td input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Date/time: allow them to fit without bleeding into neighbor cells */
  #gEditTbl td:nth-child(1) select, #gEditTbl td:nth-child(1) input{ font-size: 14px; }
  #gEditTbl td:nth-child(2) select, #gEditTbl td:nth-child(2) input{ font-size: 14px; }
  #gEditTbl td:nth-child(1), #gEditTbl td:nth-child(2){ padding-left: 6px; padding-right: 6px; }
}

/* === 2.10.23 mobile fix v2: override min-width + allow horizontal scroll === */
@media (max-width: 640px){
  /* Make table scrollable instead of overlapping controls */
  #gEditTbl{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #gEditTbl thead, #gEditTbl tbody{
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  /* Force enough room for date + time, and prevent any min-width from leaking */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){ width: 160px !important; } /* Pvm */
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){ width: 110px !important; } /* Aika */

  #gEditTbl td:nth-child(1) select,
  #gEditTbl td:nth-child(1) input{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #gEditTbl td:nth-child(2) select,
  #gEditTbl td:nth-child(2) input{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === 2.10.30 mobile: prevent Aika from overlapping Pvm in gEditTbl === */
@media (max-width: 640px){
  /* Ensure first two columns have enough breathing room */
  #gEditTbl th:nth-child(1), #gEditTbl td:nth-child(1){ width: 175px !important; } /* Pvm */
  #gEditTbl th:nth-child(2), #gEditTbl td:nth-child(2){ width: 125px !important; } /* Aika */

  /* Add a small gutter between the two cells */
  #gEditTbl td:nth-child(1){ padding-right: 10px !important; }
  #gEditTbl td:nth-child(2){ padding-left: 10px !important; }

  /* Make sure controls never overflow their cell */
  #gEditTbl td:nth-child(1) select, #gEditTbl td:nth-child(2) select,
  #gEditTbl td:nth-child(1) input,  #gEditTbl td:nth-child(2) input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* === 2.10.31 desktop: make Pvm column a few px wider === */
@media (min-width: 641px){
  #gEditTbl th:nth-child(1),
  #gEditTbl td:nth-child(1){
    width: calc(12% + 12px) !important;
  }
}

/* === 2.10.32 desktop: Pvm a bit wider in gEditTbl === */
@media (min-width: 641px){
  #gEditTbl th:nth-child(1),
  #gEditTbl td:nth-child(1){
    width: calc(12% + 24px) !important; /* widen a few more px */
    min-width: 160px !important;       /* ensure date fits */
  }
}