.statsDetailSubGroupTitle{
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 6px;
  opacity: .85;
}
/* =========================================================
   Golfstats – scorecard.css (rensad, sammanslagen, sorterad)
   - En version av varje regel (inga dubletter)
   - Rounds-table filter UI: synligt, vänsterjusterat, får plats
========================================================= */

/* Visible build/version label (helps avoid confusion when testing zips) */
.gm-version-badge {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  overflow-wrap: anywhere;
}

/* Utility: hide element (used across UI for conditional rendering) */
.hidden{ display: none !important; }

/* =========================================================
   0) Tema / CSS-variabler
========================================================= */
:root{
  /* Tell the browser this page is dark-themed (can affect mobile UI chrome where supported). */
  color-scheme: dark;
  --recScramble:#7b6fd6;
  --recSand:#f4c84c;
  --bg1:#0b1220;
  --bg2:#0f1b2f;
  --card:#ffffff;
  --muted:#6b7280;
  --line:#e5e7eb;
  --pill:#0b1220;
  --accent:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 14px;
  --radius2: 18px;
  --gap: 12px;
  /* Global UI font (test): Inter, with system fallbacks */
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* Paint background behind iOS safe-areas (status bar / home indicator) */
html{
  background-color: var(--bg1);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* =========================================================
   1) Baslayout / bakgrund
========================================================= */
body{
  margin:0;
  font-family:var(--font);
  background-color: var(--bg1);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color:#fff;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Make sure form controls also use the global font */
button, input, select, textarea {
  font-family: inherit;
}

/* Ensure the dark background is also painted behind iOS PWA status bar and home indicator.
   (Safari UI chrome in a normal tab is still controlled by the browser.) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  z-index:-1;
}

/* =========================================================
   2) Header + tabs + status
========================================================= */
header{
  padding:16px 2vw;
  padding-top: calc(16px + env(safe-area-inset-top));
  position:sticky;
  top:0;
  background: linear-gradient(180deg, rgba(11,18,32,.98), rgba(11,18,32,.92));
  backdrop-filter: blur(8px);
  z-index:10;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

header h1{
  margin:0 0 10px 0;
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
}

.tabs{
  display:flex;
  gap:10px;
  align-items:center;
}

.tabbtn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  padding:7px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  line-height: 1;
}
.tabbtn.active{
  background:#fff;
  color:#111827 !important;
  -webkit-text-fill-color:#111827;
  border-color:#fff;
}

.status{
  margin-top:8px;
  font-size:13px;
  color: rgba(255,255,255,.85);
}
.status.ok{ color: #9ae6b4; }
.status.warn{ color: #fcd34d; }
.status.err{ color: #fca5a5; }

/* =========================================================
   3) Container + cards
========================================================= */
.container{
  width: min(2200px, 96vw);
  margin: 0 auto;
  padding: 10px 0 30px;
}

.card{
  background: var(--card);
  color:#111827;
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: var(--shadow);
}

h2{ 
  margin:0 0 10px 0;
  font-size:15px;
}

/* =========================================================
   4) Form controls
========================================================= */
.row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap: wrap;
}
.rowBetween{ justify-content: space-between; }
.grow{ flex:1; min-width: 220px; }

label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin-bottom:6px;
}

input, select, button{ font: inherit; }

input, select{
  width: 100%;
  min-width: 0;
  height: 30px;
  font-size:13px;
  vertical-align: middle;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  outline: none;
  background:#fff;
  color:#111827;
  -webkit-text-fill-color:#111827;
}
input:focus, select:focus{
  border-color:#93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

/* Normalize iOS date input so it matches other fields */
input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  line-height: 18px;
  padding: 6px 10px;

  color:#111827;
  -webkit-text-fill-color:#111827;
}

.btnrow{
  display:flex;
  gap:10px;
  align-items:center;
}

button{
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  font-weight:700;
  font-size: 14px;
  cursor:pointer;
}
button.secondary{
  border-color: var(--line);
  background:#f3f4f6;
  color:#111827;
  font-weight:700;
}
button.danger{
  border-color: var(--danger);
  background: var(--danger);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}

/* Smaller action button (Admin) */
button.btnSmall{
  height: 26px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

/* Toasts */
.toastHost{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast{
  pointer-events: none;
  background: rgba(0,0,0,0.80);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 220px;
  max-width: 92vw;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  backdrop-filter: blur(8px);
}
.toast.ok{ background: rgba(15, 120, 60, 0.85); }
.toast.err{ background: rgba(150, 30, 30, 0.85); }

/* Confirm dialog */
.confirmOverlay{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
}
.confirmOverlay.hidden{ display: none; }
.confirmModal{
  width: min(520px, 92vw);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20,20,20,0.92);
  padding: 14px 14px 12px;
}
.confirmTitle{ font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.confirmMsg{ font-size: 13px; color: rgba(255,255,255,0.88); line-height: 1.35; }
.confirmActions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; }

.small{
  font-size:12px;
  color: var(--muted);
}

/* =========================================================
   5) Rounds list (tabellen med rundor)
========================================================= */
.roundsCard{ padding: 10px 10px 12px; }

.roundsTableWrap{
  overflow:auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.roundsTable{
  /* Desktop/default: låt tabellen fylla kortets bredd (ingen "oändlig" bredd). */
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;           /* kolumnbredd styrs av innehåll */
}

/* GM25: Mobil – låt kolumnerna ta "så mycket som behövs" (utan att stacka/över­lappa)
   istället för att tvingas till 1/14-del vardera. Detta gör att ID inte tar onödig
   plats och att Datum/Bana kan få mer utrymme. */
@media (max-width: 820px){
  .roundsTable{
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }
  .roundsTable th, .roundsTable td{
    width: auto;          /* släpp 1/14-regeln */
    padding: 10px 8px;    /* lite tightare i mobil */
  }
  /* Gör ID-kolumnen mer kompakt */
  .roundsTable th:nth-child(1),
  .roundsTable td:nth-child(1){
    min-width: 52px !important;
  }
}

/* Celler: ellipsis + jämn kolumnbredd */
.roundsTable th, .roundsTable td{
  border-bottom: 1px solid #eef2f7;
  padding: 10px 10px;
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;

  width: auto; /* auto-layout per kolumn */
}

/* Sticky header */
.roundsTable thead th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  font-size: 12px;
  color:#334155;
  letter-spacing: .2px;
  overflow: visible; /* så filterknapp inte klipps */
}

.roundsTable tr:hover td{ background: #f8fafc; }

/* Minimum per kolumn (så inget kollapsar när ytan blir mindre)
   När total minbredd inte får plats -> scroll i .roundsTableWrap. */
.roundsTable th:nth-child(1),
.roundsTable td:nth-child(1){ min-width: 70px; }   /* ID */

.roundsTable th:nth-child(2),
.roundsTable td:nth-child(2){ min-width: 115px; }  /* Datum */

.roundsTable th:nth-child(3),
.roundsTable td:nth-child(3){ min-width: 150px; max-width: 170px; }  /* Bana */

.roundsTable th:nth-child(4),
.roundsTable td:nth-child(4){ min-width: 70px; }   /* +/- */

.roundsTable th:nth-child(5),
.roundsTable td:nth-child(5){ min-width: 110px; }  /* Spelade hål */

.roundsTable th:nth-child(6),
.roundsTable td:nth-child(6){ min-width: 70px; }   /* UT */

.roundsTable th:nth-child(7),
.roundsTable td:nth-child(7){ min-width: 80px; }   /* Slag ut */

.roundsTable th:nth-child(8),
.roundsTable td:nth-child(8){ min-width: 70px; }   /* IN */

.roundsTable th:nth-child(9),
.roundsTable td:nth-child(9){ min-width: 80px; }   /* Slag in */

.roundsTable th:nth-child(10),
.roundsTable td:nth-child(10){ min-width: 70px; }   /* PAR */

.roundsTable th:nth-child(11),
.roundsTable td:nth-child(11){ min-width: 90px; }  /* Slag totalt */

.roundsTable th:nth-child(12),
.roundsTable td:nth-child(12){ min-width: 70px; }  /* FIR % */

.roundsTable th:nth-child(13),
.roundsTable td:nth-child(13){ min-width: 70px; }  /* GIR % */

.roundsTable th:nth-child(14),
.roundsTable td:nth-child(14){ min-width: 80px; }  /* Puttar */

/* Mobile: keep the first four columns (ID, Datum, Bana, +/-) visible in portrait */


/* Trend thresholds settings UI */
.trendSettingsRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 6px;
}
.trendSettingsLabel{
  font-size: 12px;
  color: rgba(11,15,26,.72);
  font-weight: 600;
}
.trendThresholdGrid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}
.trendThresholdRow{
  display:grid;
  grid-template-columns: 1fr 86px 86px;
  gap: 10px;
  align-items:center;
}
.trendThresholdRow .trendKeyLabel{
  font-size: 12px;
  color: rgba(11,15,26,.8);
  font-weight: 600;
}
.trendThresholdRow input{
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 10px;
  font-size: 13px;
}
.trendThresholdRow input:focus{
  outline: none;
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.trendThresholdHeader{
  display:grid;
  grid-template-columns: 1fr 86px 86px;
  gap: 10px;
  font-size: 11px;
  color: rgba(11,15,26,.55);
  padding-top: 6px;
}

@media (max-width: 520px){
  .roundsTable th:nth-child(1),
  .roundsTable td:nth-child(1){ min-width: 60px; }

  .roundsTable th:nth-child(2),
  .roundsTable td:nth-child(2){ min-width: 110px; }

  .roundsTable th:nth-child(3),
  .roundsTable td:nth-child(3){ min-width: 130px; width: max-content;
  max-width: 320px; }

  .roundsTable th:nth-child(4),
  .roundsTable td:nth-child(4){ min-width: 60px; }
}
/* =========================================================
   5.1) Header: sort + filter (ikon direkt efter text)
   - Viktig: gör INTE space-between (det flyttar ikon till höger)
========================================================= */
.roundsTh{
  overflow: visible;
  white-space: nowrap;
}

.roundsTh .thWrap{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  overflow: visible;
}

.thLabelBtn{
  all: unset;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Filterknapp */
.thFilterBtn{
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  opacity: 0.75;
  flex: 0 0 auto;            /* <-- FIX: får inte krympa bort */
  color: inherit;
}

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

.thFilterBtn:hover{
  opacity: 1;
  background: rgba(0,0,0,0.04);
}

/* Filter aktiv -> byt färg */
.thFilterBtn.active{
  opacity: 1;
  color: #2563eb; /* blå */
}

/* =========================================================
   5.2) Filter popover (vit, som du visade i exemplet)
========================================================= */
.filterPopover{
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 20px);
  background: #fff;
  color:#111827;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
  padding: 12px;
}

.fpTitle{
  font-weight: 700;
  margin-bottom: 8px;
}

.fpTopRow{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 8px;
}

.fpRight{ margin-left:auto; }

.fpLink{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  color: #2563eb; /* <-- FIX: syns alltid */
}

.fpSep{ opacity: 0.6; }

.fpSearchRow{ margin-bottom: 10px; }

.fpInput{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  outline: none;
  background: #fff;
  color:#111827;
}

.fpList{
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 10px;
}

.fpItem{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.fpItem:hover{
  background: rgba(0,0,0,0.04);
}

/* Checkbox: normal storlek */
.fpItem input[type="checkbox"]{
  width: 16px;
  height: 16px;
  transform: none;
}

/* =========================================================
   Settings: custom checkbox (strict 1:1)
   (Backup/Import + CSV-import)
========================================================= */
.settingsIslandBody input[type="checkbox"].gs-checkbox{
  /* Force custom rendering to avoid native checkbox aspect quirks */
  -webkit-appearance: none !important;
  appearance: none !important;

  inline-size: 18px !important;
  block-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  background: #fff;
  border: 2px solid #111;
  border-radius: 0;
  cursor: pointer;

  display: inline-block;
  vertical-align: middle;
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.settingsIslandBody input[type="checkbox"].gs-checkbox:checked::after{
  content: "";
  position: absolute;
  /* simple check mark */
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}


.fpRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.fpLabel{
  display:block;
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.fpBtns{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* =========================================================
   6) Open round (expand under lista)
========================================================= */
.roundOpenShell{
  margin-top: 10px;
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
}

.roundOpenHeader{
  background: linear-gradient(180deg, rgba(11,18,32,.98), rgba(15,27,47,.98));
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.roundOpenHeader .title{
  font-weight: 800;
  font-size: 14px;
}

.roundOpenHeader .actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.roundOpenHeader .actions button{
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.roundOpenHeader .actions button.primary{
  border-color:#fff;
  background:#fff;
  color:#111827;
}
.roundOpenHeader .actions button.danger{
  border-color:#ef4444;
  background:#ef4444;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}

.roundOpenBody{
  background:#fff;
  color:#111827;
  padding: 10px;
}

.roundOpenGrid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  align-items:start;
}

.scorecardPane,
.statsPane{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}

.scorecardPane .paneTitle,
.statsPane .paneTitle{
  padding: 8px 10px;
  background:#f8fafc;
  border-bottom: 1px solid var(--line);
  font-weight:600;
  font-size: 16px;
  color:#334155;
}


/* Titelrad i Scorekort: runda-info + redigeraknappar */
.paneTitle.roundTitleBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.paneTitle.roundTitleBar .actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.scorecardPane .paneInner{
  overflow:auto;
  padding: 8px 6px;
  background:#fff;
}

/* Round achievements island (under scorecard) */
.roundAwardsIsland{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
}
.roundAwardsTitle{
  font-weight: 600;
  font-size: 14px;
  color: #334155;
  margin-bottom: 8px;
}
.roundAwardsGrid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Make awards tiles fit nicely inside the round island */
.roundAwardsIsland .awardCard{
  width: 150px;
}
.roundAwardsIsland .awardPlaque{
  width: 150px;
}

.statsPane .paneInner{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Neutraliserad scale */
.scorecardScaled{
  transform: none !important;
  width: 100% !important;
}

/* =========================================================
   7) Statistik: chips + bar blocks
========================================================= */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  display:flex;
  gap:8px;
  align-items:baseline;
  background:#fff;
}
.chip b{ font-size: 13px; }
.chip.warn{
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.08);
}
.chip.ok{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.08);
}

.barBlock{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.barBlock h3{
  margin:0 0 8px 0;
  font-size: 13px;
}
.barRow{
  display:grid;
  grid-template-columns: max-content 1fr 48px;
  gap: 10px;
  align-items:center;
  margin: 6px 0;
}
.barLabel{ font-size: 12px; color:#334155; }
.bar{
  height: 10px;
  background:#f1f5f9;
  border-radius: 999px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}
.bar > i{
  display:block;
  height: 100%;
  width: 0%;
  background:#111827;
}
.barVal{
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align:right;
}

/* =========================================================
   8) Scorecard-tabell
========================================================= */
.tableWrap{ overflow:auto; }

.scoreTable{
  border-collapse: collapse !important;
  width: 100% !important;
  min-width: 900px;
  table-layout: fixed !important;
}

/* Summering scorekort */
.scoreTable th, .scoreTable td{
  border-bottom: 1px solid #eef2f7;
  padding: 3px 1px !important;
  font-size: 13px;
  font-weight: 400;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Rubrik Hål 1-18 UT IN TOTAL */
.scoreTable thead th{
  position: sticky;
  top: 0;
  background:#fff;
  z-index: 2;
  font-size: 13px;
  font-weight:500;  
  color:#334155;
}

/* Rubriker: Par, Score, Puttar mm */
.scoreTable td.rowLabel,
.scoreTable th.rowLabel{
  text-align:left !important;
  font-weight:500;
  color:#334155;
  background:#fafafa;
  position: sticky;
  left:0;
  z-index: 3;
  font-size: 13px;
  border-right: 1px solid #eef2f7;

  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  padding-left: 10px !important;
}

.scoreTable th.stickyLeft{
  position: sticky;
  left:0;
  z-index: 4;
  background:#fff;
  border-right: 1px solid #eef2f7;

  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: left;
  padding-left: 10px;
}

.scoreTable td.scoreCell{
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

 /* Scorekort sifrror i scorekortet */
.scoreTable .scoreCell input.cellInput{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #d7dee8;
  background:#fff;
  color:#0b0f1a;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  outline:none;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 28px;
}

.totCell{
  font-weight:700;
  color:#334155;
  background:#f8fafc;
}
.totIncomplete{
  background: rgba(245,158,11,.18) !important;
}

.scrCell{
  font-size: 16px;
  line-height: 28px;
  text-align:center;
}

/* Split 9/10 och före totals */
.scoreTable thead th:nth-child(11),
.scoreTable tbody td:nth-child(11){
  border-left: 2px solid #111827;
}
.scoreTable thead th:nth-last-child(3),
.scoreTable tbody td:nth-last-child(3){
  border-left: 3px solid #111827;
}

/* EXTRA: Ram runt hål 1–18 + UT/IN/TOTAL */
.scoreTable thead th:nth-child(n+2):nth-child(-n+19){
  border-bottom: 3px solid #111827;
  border-left: none;
}
.scoreTable thead th:nth-last-child(-n+3){
  border-bottom: 3px solid #111827;
}
.scoreTable thead th:nth-child(2),
.scoreTable tbody td:nth-child(2){
  border-left: 3px solid #111827;
}
.scoreTable thead th:nth-child(11){
  border-left: 2px solid #111827 !important;
}
.scoreTable thead th:nth-last-child(3){
  border-left: 3px solid #111827 !important;
}

/* =========================================================
   9) FIR/GIR Icon Picker
========================================================= */
.iconPicker{
  position: relative;
  display:inline-block;
}

.iconBtn{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#0b0f1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  padding:0;
  cursor:pointer;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Distance picker button in the table (same size as icon picker) */
.distPicker{
  position: relative;
  display:inline-block;
}

.distBtn{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#0b0f1a;            /* <- här styr du textfärgen i rutan */
  font-size: 11px;
  font-weight: 400;
  line-height: 28px;
  padding:0;
  cursor:pointer;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Popup-menyn för Miss +/- (2 rader: + överst, - nederst) */
.distMenuGrid{
  padding: 10px;
  border-radius: 14px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-auto-rows: 28px;
  gap: 8px;
  align-items: center;
}

.distOpt{
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.distOpt:hover{ background: rgba(255,255,255,.14); }

.scoreTable input[type="hidden"]{ display:none !important; }

.iconMenuCross{
  position:absolute;
  top: 34px;
  left: 0;
  z-index: 50;
  padding: 6px;
  border-radius: 10px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  display:grid;
  grid-template-columns: 28px 28px 28px;
  grid-template-rows: 28px 28px 28px;
  gap: 6px;
}

.iconOpt{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  font-weight: 700;
  color:#0b0f1a;
}
.iconOpt:hover{ background: rgba(0,0,0,.04); }

.iconOpt.disabled,
.iconOpt:disabled{
  opacity: .28;
  cursor: default;
}

.iconOpt[data-area="up"]{ grid-column: 2; grid-row: 1; }
.iconOpt[data-area="dr"]{ grid-column: 3; grid-row: 3; }
.iconOpt[data-area="dl"]{ grid-column: 1; grid-row: 3; }
.iconOpt[data-area="ur"]{ grid-column: 3; grid-row: 1; }
.iconOpt[data-area="ul"]{ grid-column: 1; grid-row: 1; }
.iconOpt[data-area="left"]{ grid-column: 1; grid-row: 2; }
.iconOpt[data-area="center"]{ grid-column: 2; grid-row: 2; }
.iconOpt[data-area="right"]{ grid-column: 3; grid-row: 2; }
.iconOpt[data-area="down"]{ grid-column: 2; grid-row: 3; }
.iconOpt[data-area="na"]{ grid-column: 1; grid-row: 1; opacity: .75; }

.iconPicker.disabled .iconBtn{
  opacity: 0.35;
  cursor: not-allowed;
}

/* =========================================================
   10) View/Edit mode
========================================================= */
.roundOpenWrap.viewMode .iconPicker,
.roundOpenWrap.viewMode .iconBtn,
.roundOpenWrap.viewMode .iconBtn *{
  opacity: 1 !important;
  filter: none !important;
}

.roundOpenWrap.viewMode .scoreTable td.scoreCell{
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Score-raden (strokes): lite spacing så färgfälten inte flyter ihop */
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"]{
  padding: 2px 2px !important;
  background-clip: content-box !important;
}

.roundOpenWrap.viewMode .scoreTable .scoreCell input.cellInput{
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Score-raden (strokes): alltid vit text i visningsläge */
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"] input.cellInput,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"]{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* iOS/Safari */
}

/* Fallback för mobilsplit-tabeller (ifall de ligger utanför .roundOpenWrap) */
table.scorecardMobileTable td.scoreCell[data-key="strokes"]{
  padding: 2px 2px !important;
  background-clip: content-box !important;
}

table.scorecardMobileTable td.scoreCell[data-key="strokes"] input.cellInput,
table.scorecardMobileTable td.scoreCell[data-key="strokes"]{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Samma spacing för mobilsplit-tabeller */
table.scorecardMobileTable td.scoreCell[data-key="strokes"]{
  padding: 2px 2px !important;
  background-clip: content-box !important;
}

/* ===============================
   Score (under par) = rund ring
   - Gäller i visningsläge (viewMode)
   - Färgerna kommer från befintliga --score-* variabler
   - Under par-kategorier: birdie/eagle/albatross/hio
================================ */
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_birdie,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_eagle,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_albatross,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_hio{
  background: transparent !important;
}

.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput,
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput{
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border-width: 2px !important;
  border-style: solid !important;
}

/* Under par: fylld cirkel med samma färg som tidigare (ändrar inte variablerna) */
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput{
  background: var(--score-birdie) !important;
  border-color: var(--score-birdie) !important;
}
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput{
  background: var(--score-eagle) !important;
  border-color: var(--score-eagle) !important;
}
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput{
  background: var(--score-albatross) !important;
  border-color: var(--score-albatross) !important;
}
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput{
  background: var(--score-hio) !important;
  border-color: var(--score-hio) !important;
}

/* Fallback: mobilsplit-tabeller (om de inte ligger under .roundOpenWrap) */
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_birdie,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_eagle,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_albatross,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_hio{
  background: transparent !important;
}

table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput,
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput{
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  border-width: 2px !important;
  border-style: solid !important;
}

table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput{
  background: var(--score-birdie) !important;
  border-color: var(--score-birdie) !important;
}
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput{
  background: var(--score-eagle) !important;
  border-color: var(--score-eagle) !important;
}
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput{
  background: var(--score-albatross) !important;
  border-color: var(--score-albatross) !important;
}
table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput{
  background: var(--score-hio) !important;
  border-color: var(--score-hio) !important;
}

/* Puttar: 3+ får röd fyrkant (endast färg enligt krav)
   - Bas (GM29-D042-M036): mobil/desktop använder röd bakgrund på input
   - Desktop-fix läggs som en override i min-width nedan (mobil lämnas orörd)
*/
.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh,
table.scorecardMobileTable td.scoreCell[data-key="putts"].puttsHigh{
  background: transparent !important;
  /* Gap between cells so they don't visually merge */
  padding: 2px 2px !important;
  background-clip: content-box !important;
}

.roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh input.cellInput,
table.scorecardMobileTable td.scoreCell[data-key="putts"].puttsHigh input.cellInput{
  /* Match Score-radens kvadratstorlek (fyll cellens content-box) */
  height: 100% !important;
  width: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 0 !important; /* sharp corners */
  background: #e06666 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-sizing: border-box !important;
}

/* Desktop: lås putt-radens cellhöjd och gör 3+ som Score-radens kvadrat (röd bakgrund i content-box).
   Mobil lämnas orörd genom min-width. */
@media (min-width: 521px){
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"]{
    height: 32px !important; /* 28px content-box + 2px padding top/bottom */
  }

  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh{
    background: #e06666 !important;
    background-clip: content-box !important;
  }

  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh input.cellInput{
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
  }
}

/* Mobile: under-par-cirklar får inte flyta in i varandra.
   Minska storlek och padding på små skärmar så varje cell ryms utan overlap. */
@media (max-width: 520px){
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"],
  table.scorecardMobileTable td.scoreCell[data-key="strokes"]{
    padding: 1px 1px !important;
    height: 24px !important; /* 24 - (1px*2) = 22px content-box -> match circle size */
  }

  /* Mobil: röd putt-kvadrat (3+) ska ha samma cell-höjd/spacing som Score-raden */
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh,
  table.scorecardMobileTable td.scoreCell[data-key="putts"].puttsHigh{
    padding: 1px 1px !important;
    height: 24px !important;
  }

  /* Mobil: matcha kvadraternas storlek mot den tajtare Score-layouten */
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="putts"].puttsHigh input.cellInput,
  table.scorecardMobileTable td.scoreCell[data-key="putts"].puttsHigh input.cellInput{
    height: 100% !important;
    width: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
  }

  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput,
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput,
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput,
  .roundOpenWrap.viewMode .scoreTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput,
  table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_birdie input.cellInput,
  table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_eagle input.cellInput,
  table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_albatross input.cellInput,
  table.scorecardMobileTable td.scoreCell[data-key="strokes"].scoreCat_hio input.cellInput{
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    border-width: 2px !important;
  }
}

.roundOpenWrap.viewMode .scoreTable .scoreCell input.cellInput::-webkit-outer-spin-button,
.roundOpenWrap.viewMode .scoreTable .scoreCell input.cellInput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.roundOpenWrap.viewMode .scoreTable .scoreCell input.cellInput[type="number"]{
  -moz-appearance: textfield;
}

.roundOpenWrap.viewMode .iconBtn,
.roundOpenWrap.viewMode .distBtn{
  border: 0 !important;
  background: transparent !important;
}

.roundOpenWrap.editMode .scoreTable{
  outline: 3px solid #111827;
  outline-offset: -2px;
}
.roundOpenWrap.editMode .scoreTable .cellInput,
.roundOpenWrap.editMode .iconBtn,
.roundOpenWrap.editMode .distBtn{
  border: 1px solid rgba(0,0,0,.35) !important;
  background: #fff !important;
}

.roundOpenWrap.editMode .scoreTable .scoreCell input.cellInput{
  text-align: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  line-height: normal;
}
.roundOpenWrap.editMode .scoreTable .scoreCell input.cellInput::-webkit-outer-spin-button,
.roundOpenWrap.editMode .scoreTable .scoreCell input.cellInput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.roundOpenWrap.editMode .scoreTable .scoreCell input.cellInput[type="number"]{
  -moz-appearance: textfield;
}

/* =========================================================
   11) Text-läsbarhet (även disabled)
========================================================= */
.scoreTable input,
.scoreTable select{
  color: #0b0f1a !important;
  caret-color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
  opacity: 1 !important;
}

.scoreTable input:disabled,
.scoreTable select:disabled{
  opacity: 1 !important;
  color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
}

/* =========================================================
   12) Refresh-knapp + saved flash
========================================================= */
button.iconOnly{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

button.iconOnly svg{
  width: 20px;
  height: 20px;
  display: block;
}

button.refreshBtn.isLoading svg{
  animation: refreshSpin 0.8s linear infinite;
}

@keyframes refreshSpin{
  to{ transform: rotate(360deg); }
}

button.iconOnly.refreshBtn:hover{
  background: rgba(0,0,0,.04);
}

button.iconOnly.refreshBtn:active{
  transform: scale(0.96);
}

tr.justSaved td{
  animation: savedFlash 1.6s ease-out;
}

@keyframes savedFlash{
  0%   { background: rgba(255, 225, 120, 0.55); }
  100% { background: transparent; }
}

/* =========================================================
   13) Responsive
========================================================= */
@media (max-width: 980px){
  .roundOpenGrid{ grid-template-columns: 1fr; }
  .scoreTable{ min-width: 780px; }

  /* Mobile: separata kort för Scorekort och Rundstatistik (bredd oberoende) */
  .roundOpenBody{
    background: transparent;
    padding: 0;
    overflow-x: hidden;
  }

  .scorecardPane,
  .statsPane{
    background:#fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .scorecardPane{ margin-bottom: 12px; }

  .scorecardPane .paneInner{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .statsPane .paneInner{
    overflow-x: hidden;
  }

  /* Mobile: Öppnat scorekort ligger inuti en bred rounds-tabell (min-width).
     Kläm öppet innehåll till viewport-bredd så listans tabellbredd inte drar ut ramen. */
  .roundsTableWrap tr[data-open-for] > td{ overflow: hidden; }
  .roundsTableWrap tr[data-open-for] .roundOpenShell{
    box-sizing: border-box;
    /* Mobile: vänsterjustera även när listan är horisontellt scrollad.
       Krymp kortets ram till innehållet så vi inte får "luft" efter TOT. */
    position: sticky;
    left: 8px;
    display: inline-block;
    width: fit-content;
    max-width: calc(100vw - 16px);
    margin: 0;
  }

  /* Låt respektive "kort" krympa till sin tabellbredd (men aldrig större än viewport). */
  .roundsTableWrap tr[data-open-for] .scorecardPane,
  .roundsTableWrap tr[data-open-for] .statsPane{
    width: fit-content;
    max-width: calc(100vw - 16px);
  }
}


#viewSettings{
  color:#111827;
  /* Align Settings "ö" with Statistik: no extra inset on the section itself */
  padding: 0;
}

/* Settings page layout wrapper
   The Settings view is outside the global .container (Rounds/Stats).
   On desktop we therefore emulate the same container width/padding here,
   so Settings aligns with Statistik and doesn't stick to the edges.
*/
@media (min-width: 900px){
  #viewSettings .settingsRootIslands{
    width: min(2200px, 96vw);
    margin: 0 auto;
    padding: 10px 0 30px;
  }
}


/* Settings: solid card background (match GM29-D042-M036) */
#viewSettings .statCard{
  background: #ffffff;
}
/* =========================================================
   Settings: submenus + score colors
========================================================= */
.settingsHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settingsTabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settingsTabs .subtab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.settingsTabs .subtab.active{
  background: #0f172a;
  color: #fff;
  border-color: rgba(15,23,42,0.6);
}


/* =========================================================
   Settings: "Öar" (kort) i Scorekort/Statistik
   - Samma card-känsla som statCard (t.ex. "Avstånd efter första putt")
========================================================= */
.settingsIslands{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch; /* fyll hela bredden (desktop + mobil) */
  width: 100%;
  max-width: 100%;
  margin: 10px 0 0;
}

.settingsIsland{
  /* statCard ger bakgrund/ram/rundning/skugga */
  display: block;
  width: 100%;
  max-width: 100%;
}

.settingsIslandBody{
  padding: 12px;
}

/* Backup/Import: checkboxes (tydligt klickbara) */
#chkMyDataReplace,
#chkRecomputeAchievementsAfterImport{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #111827;
  background: #fff;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}

#chkMyDataReplace:checked::after,
#chkRecomputeAchievementsAfterImport:checked::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #111827;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


.islandSectionTitle{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.islandSoftSep{
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 14px 0;
}


.scoreColorGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  justify-content: stretch;
  width: 100%;
}

.scoreColorRow{
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

.scoreColorRow .lbl{
  font-weight: 700;
}

.scoreColorRow input[type="color"]{
  width: 46px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
}

/* Scorecell background coloring via CSS variables */
:root{
  --score-hio: #ffe4e6;
  --score-albatross: #fef3c7;
  --score-eagle: #fde68a;
  --score-birdie: #dcfce7;
  --score-par: #fafafa;
  --score-bogey: #e0f2fe;
  --score-bogeyPlus: #e5e7eb;
  --score-dbogey: #e5e7eb;
  --score-worse: #e5e7eb;
}

.scoreTable td.scoreCell.scoreColored{
  background: var(--score-fill, transparent);
}


/* =========================================================
   Settings: submenus + score colors
========================================================= */
.settingsHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settingsTabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settingsTabs .subtab{
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #0b0f1a;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.settingsTabs .subtab.active{
  border-color: rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.scoreColorGrid{
  display: grid;
  grid-template-columns: minmax(180px, 260px) 140px;
  gap: 10px 14px;
  align-items: center;
  max-width: 520px;
}

.scoreColorRow{
  display: contents;
}

.scoreColorLabel{
  font-weight: 600;
}

.scoreColorGrid input[type="color"]{
  width: 140px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
}

/* Score-cell coloring (applied via JS) */
.scoreCell.scoreColored{
  background: var(--scorecell-bg, transparent);
}


/* =========================================================
   Settings: submenus + score colors
========================================================= */
.settingsHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settingsTabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.settingsTabs .subtab{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 600;
}

.settingsTabs .subtab.active{
  border-color: rgba(0,0,0,.28);
  background: rgba(0,0,0,.04);
}

.scoreColorGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 520px;
}

.scoreColorRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
}

.scoreColorRow label{
  font-weight: 600;
}

.scoreColorRow input[type="color"]{
  width: 46px;
  height: 32px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

/* Score cell coloring (uses CSS variables set from Settings) */
:root{
  --score-hio: #b5f5ec;
  --score-albatross: #b8e1ff;
  --score-eagle: #c7f0ff;
  --score-birdie: #d7ffd9;
  --score-par: #fafafa;
  --score-bogey: #fff4c4;
  --score-bogeyPlus: #ffd6d6;
  --score-dbogey: #ffd6d6;
  --score-worse: #ffd6d6;
}

.scoreCell.scoreColored{
  background: transparent; /* fallback; cell itself will get bg via inline or class */
}

.scoreCell.scoreColored input.cellInput{
  background: transparent !important;
}

/* =========================================================
   Settings: submenus + score colors
========================================================= */
.settingsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.settingsTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.settingsTabs .subtab{
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.settingsTabs .subtab.active{
  border-color: rgba(255,140,0,.45);
  box-shadow: 0 0 0 2px rgba(255,140,0,.12) inset;
}

.scoreColorGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.scoreColorRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
}

.scoreColorRow .label{
  font-weight: 600;
}

.scoreColorRow input[type="color"]{
  width: 44px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 8px;
  background: transparent;
}

/* Score cell coloring (applied inline via CSS variables) */
.scoreTable td.scoreCell.scoreColored{
  transition: background-color 120ms ease-in-out;
}

/* =========================================================
   Settings: submenus + score colors
========================================================= */
.settingsHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settingsTabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.settingsTabs .subtab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.7);
  cursor: pointer;
}
.settingsTabs .subtab.active{
  background: #121b2c;
  color: #fff;
  border-color: #121b2c;
}

.scoreColorGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 16px;
}
@media (max-width: 780px){
  .scoreColorGrid{ grid-template-columns: 1fr; }
  .statColorGrid{ grid-template-columns: 1fr; }
}

/* Ringfärger: samma 2-kolumns-grid som "Färger för Score" */
.statColorGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 16px;
  width: 100%;
  max-width: 520px; /* matchar Färger för Score */
  margin: 0; /* vänsterjusterad */
}
@media (max-width: 780px){
  .statColorGrid{ grid-template-columns: 1fr; }
}

.statColorGroupHeader{
  grid-column: 1 / -1;
}

.scoreColorRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
}
.scoreColorRow .label{
  font-weight: 600;
}
.scoreColorRow input[type="color"]{
  width: 48px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}
.scoreColorRow .preview{
  width: 80px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
}

/* =========================================================
   Custom color picker (palett + standardrad som i referensbild)
========================================================= */
.scoreColorPickBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.8);
  cursor: pointer;
}
.scoreColorPickBtn:active{ transform: scale(.98); }
.scoreColorPickSwatch{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.scoreColorPickSwatch.transparent{
  background: repeating-conic-gradient(#e8e8e8 0% 25%, #ffffff 0% 50%) 50% / 10px 10px;
}
.scoreColorPickSwatch.transparent::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 46%, rgba(0,0,0,.35) 46%, rgba(0,0,0,.35) 54%, transparent 54%);
}

.scoreColorPopover{
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  padding: 10px;
}
.scpHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.scpTitle{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(0,0,0,.75);
}
.scpClose{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
}
.scpClose:hover{ background: rgba(0,0,0,.06); }

.scpGrid{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 6px 2px 10px 2px;
}
.scpSwatch{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.scpSwatch:hover{ transform: translateY(-1px); }
.scpSwatch:active{ transform: translateY(0); }

.scpStandard{
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 8px;
}
.scpStandardHdr{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(0,0,0,.65);
}
.scpStandardHdr svg{ width: 16px; height: 16px; opacity: .7; }
.scpStandardHdr:hover{ background: rgba(0,0,0,.05); border-radius: 10px; }

.scpStandardRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 2px 2px 2px;
}
.scpStandardSwatch{ width: 22px; height: 22px; }

.scpTransparent{
  background: repeating-conic-gradient(#e8e8e8 0% 25%, #ffffff 0% 50%) 50% / 10px 10px;
}
.scpTransparentIcon{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  line-height: 1;
}
/* Ytan bakom scorekortet */
.roundOpenBody {
  background: #121b2c;
}
.statsPane{
  background: #fafafa !important;
}
.statsPane .paneTitle{
  background: #fafafa !important;
}
.statsPane .paneInner{
  background: #fafafa !important;
}

/* Inre "kort" i statistiken får vara vita för kontrast */
.statsPane .barBlock{
  background: #fff !important;
}

/* =========================================================
   Roundstatistik: iOS-list donuts (FIR/GIR)
========================================================= */
:root{
  --stat-hit: #93c47d;
  --stat-left: #e06666;
  --stat-right: #6d9eeb;
  --stat-long: #8e7cc0;
  --stat-short: #ffd966;
  --stat-unfilled: #e5e7eb;
  --stat-scramble: #8e7cc0;
  --stat-sand: #ffd966;
}

.roundStatsBox{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .roundStatsBox{ grid-template-columns: 1fr; }
}



/* --- Chips layout in Rundstatistik (prevent stretching + ensure full-width row) --- */
.roundStatsBox > .chips{
  grid-column: 1 / -1;   /* span across both columns */
  align-self: start;     /* don't stretch to row height */
}
.roundStatsBox > .chips{
  align-items: flex-start; /* prevent flex cross-axis stretch */
}
.roundStatsBox > .chips > .chip{
  align-self: flex-start; /* extra safety */
}

.statCard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.statCardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.statTitle{
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--pill);
  letter-spacing: 0;
}
.statChevron{
  opacity:.55;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.statCardBody{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px;
  align-items: center;
}

.statDonutWrap{
  position: relative;
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
}
.statDonut{
  width: 168px;
  height: 168px;
  display:block;
}

.statDonut .donutSeg{
  cursor: pointer;
}

/* Hover outline: thinner + black across all donuts */
.statDonutWrap [data-donut-outline]{
  stroke: #000 !important;
  stroke-width: 24px !important;
}
.statDonutTip{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.statDonutTip.show{
  opacity: 1;
}
.statLegendRow{
  cursor: pointer;
}
.statLegendRow.active{
  background: rgba(0,0,0,.06);
  border-radius: 10px;
}
.statDonutCenter{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  pointer-events:none;
  opacity: .9;
}

/* Auto-created center label should be invisible until hover/press */
.statDonutCenterAuto{ opacity: 0; }
.statDonutCenter.show{ opacity: 1; }

.statDonutCenter .donutCenterValue{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.statDonutCenter .donutCenterLabel{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
  text-align: center;
  line-height: 1.15;
}


.puttsDonutCenter{
  flex-direction: column;
  gap: 2px;
}
.puttsDonutCenter .puttsCenterInner{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.puttsDonutCenter .puttsCenterVal{
  /* match stat grid value (green marker) */
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.puttsDonutCenter .puttsCenterLbl{
  /* match stat grid label (pink marker) */
  font-size: 12px;
  font-weight: 400;
  color: rgba(11,15,26,.72);
  opacity: 1;
}
@media (max-width: 520px){
  .puttsDonutCenter .puttsCenterLbl{
    font-size: 10px;
  }
}


/* Putts card: metrics layout */
.puttsBottomBlock{
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.puttsTopRow{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 14px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  align-items: start; /* align left/right headers */
}
.puttsMetric{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap: 2px;
}
.puttsMetricLabel{
  /* match stat grid label (pink marker) */
  font-size: 12px;
  font-weight: 400;
  color: rgba(11,15,26,.72);
  opacity: 1;
}
.puttsMetricValue{
  /* match stat grid value (green marker) */
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}
.puttsBarBlock{
  padding: 0;
  border: none;
  background: transparent;
}
.puttsBarBlock h3{
  margin: 0 0 8px 0;
  /* match stat grid label (pink marker) */
  font-size: 12px;
  font-weight: 400;
  color: rgba(11,15,26,.72);
  opacity: 1;
}

.puttsBarBlock .barRow{
  grid-template-columns: 52px 1fr 48px;
}

/*
  Putts bars are rendered using the shared .bar component.
  The shared component includes internal padding (for other cards),
  which makes the fill strip too thin here and it can look like the
  color is missing.
*/
.puttsBarBlock .bar{
  padding: 0;
  height: 14px;
}
.puttsBarBlock .bar > i{
  height: 100%;
}

/* Scale for "Snittputt per hål" (0–3) */
.puttsScaleRow{
  display:grid;
  grid-template-columns: 52px 1fr 48px;
  gap: 10px;
  align-items: flex-end;
  margin: 2px 0 6px;
}
.puttsScale{
  position: relative;
  height: 14px;
  font-size: 10px;
  color: rgba(0,0,0,.45);
}
.puttsScaleTick{
  position:absolute;
  bottom:0;
  transform: translateX(-50%);
  white-space:nowrap;
}

/* Mobile: ensure bar + value + trend icon fit on one line */
@media (max-width: 560px){
  .puttsBarBlock .barRow{
    grid-template-columns: 52px 1fr 76px;
    gap: 8px;
  }
  .puttsScaleRow{
    grid-template-columns: 52px 1fr 76px;
    gap: 8px;
  }
  .puttsBarBlock .barVal{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }
  .puttsBarBlock .trendIcon{
    margin-left: 6px;
  }
}
@media (max-width: 560px){
  .puttsTopRow{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px){
  .statDonutWrap,
  .statDonut{ width: 132px; height: 132px; }
}
@media (max-width: 400px){
  .statDonutWrap,
  .statDonut{ width: 112px; height: 112px; }
}

.statLegend{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.statLegendRow{
  display:grid;
  grid-template-columns: 14px 18px 44px 1fr;
  gap: 8px;
  align-items:center;
  font-variant-numeric: tabular-nums;
  color: #0b0f1a;
}
.statLegendRow .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
}
.statLegendRow .ico{
  text-align:center;
  opacity:.85;
}


/* GIR 2x2 breakdown grid */
.statGrid{
  grid-column: 1 / -1;
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.statGridItem{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
}
.statGridItem .statGridLabel{
  font-size: 12px;
  color: rgba(11,15,26,.72);
  line-height: 1.2;
}
.statGridItem .statGridValue{
  font-weight: 800;
  font-size: 18px;
  color: #0b0f1a;
}

/* Trend arrows (FIR v1) */
.trendIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  width: 16px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
 .trendGood{ color: #16a34a !important; }
.trendGoodWeak{ color: #4ade80 !important; }
.trendBad{ color: #dc2626 !important; }
.trendBadWeak{ color: #f87171 !important; }
/* Neutral trend arrow must ALWAYS be yellow and readable (never inherit value colors). */
.trendNeutral{ color: #eab308 !important; font-size: 16px; } /* yellow */
.trendNone{ color: rgba(0,0,0,.35) !important; }

.trendTip{
  position: fixed;
  z-index: 9999;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #0b0f1a;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
  max-width: min(320px, calc(100vw - 16px));
  pointer-events: none;
}
@media (max-width: 520px){
  .statGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.statLegendRow .pct{
  font-weight: 800;
}
.statLegendRow .lbl{
  color:#334155;
  font-weight: 600;
}


/* =========================================================
   Settings: statColorGrid (FIR/GIR ring colors)
========================================================= */
.statColorGrid{
  display: grid;
  /* Samma två-kolumns-layout som färger för score */
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 16px;
}

@media (max-width: 780px){
  .statColorGrid{ grid-template-columns: 1fr; }
}

/* ==============================
   Ringfärger – grupp-rubrik
   (Inställningar → Scorekort/Statistik)
   ============================== */
.statColorGroupHeader{
  grid-column: 1 / -1;
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
}


/* ---------------------------------------
   Round summary (new stats card)
----------------------------------------*/
.roundSummaryCard{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 0;
  margin-bottom: 14px;
}

.roundSummaryBody{
  padding: 12px 14px 12px;
}
.roundSummaryTop{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.scoreDist{
  /*
    Viktigt: score-staplarna ska ALDRIG kunna trycka ut kortet.
    Vi använder en enradig flexlayout (ingen radbrytning), där varje
    stapel delar på maxbredden och kan krympa vid behov.
  */
  display:flex;
  flex-wrap: nowrap;
  gap: clamp(6px, 1.6vw, 14px);
  align-items:flex-end;
  justify-content: space-between;
  padding: 4px 0 6px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.scoreDistItem{
  flex: 1 1 0;
  min-width: 0;
  text-align:center;
}
.scoreDistBarWrap{
  height:92px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:0 auto 6px;
}
.scoreDistBar{
  width: 100%;
  max-width: 30px;
  border-radius: 12px;
  background: rgba(0,0,0,.08);
}
.scoreDistPct{
  font-weight: 500;
  font-size: clamp(12px, 3.2vw, 16px);
  line-height: 1;
  margin-bottom: 6px;
}
.scoreDistLbl{
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(0,0,0,.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoreDistCnt{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-top: 2px;
}

/* När det blir väldigt trångt: krymp staplar och mellanrum istället för radbrytning */
@media (max-width: 520px){
  .scoreDist{ gap: 6px; }
  .scoreDistBar{ max-width: 24px; border-radius: 10px; }
  .scoreDistPct{ margin-bottom: 4px; }
  .scoreDistCnt{ font-size: 11px; }
}
@media (max-width: 420px){
  .scoreDist{ gap: 4px; }
  .scoreDistBar{ max-width: 20px; border-radius: 9px; }
}

.roundSummaryBottom{
  display:flex;
  gap:14px;
  align-items:stretch;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  flex-wrap:wrap;
}
.scoreVsParBox{
  min-width: 190px;
  flex: 1;
}
.scoreVsParLabel{
  font-size: 12px;
  color: rgba(0,0,0,.60);
  margin-bottom: 6px;
}
.scoreVsParValue{
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.02em;
  display: flex;
  /* Center trend arrow vertically against the big value */
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Larger trend icon for the big "Score mot par" value */
.scoreVsParValue .trendIcon{
  font-size: 22px;
  width: 22px;
  margin-left: 2px;
}
.parTypeBox{
  flex: 2;
  min-width: 240px;
}
.parTypeLabel{
  font-size: 12px;
  color: rgba(0,0,0,.60);
  margin-bottom: 8px;
}
.parTypeRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0;
}
.parTypeName{
  width: 52px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
}
.parTypeBar{
  flex:1;
  height: 14px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
  position: relative;
}
.parTypeZero{
  position:absolute;
  top:0;
  height:100%;
  width: 2px;
  background: rgba(0,0,0,.18);
  transform: translateX(-1px);
}
.parTypeFill{
  position:absolute;
  top:0;
  height:100%;
  border-radius: 999px;
}
.parTypeScaleRow{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin: 2px 0 6px;
}
.parTypeScale{
  flex:1;
  position:relative;
  height: 14px;
  font-size: 10px;
  color: rgba(0,0,0,.45);
}
.parTypeScaleTick{
  position:absolute;
  bottom:0;
  transform: translateX(-50%);
  white-space:nowrap;
}
.parTypeVal{
  width: 64px;
  text-align:right;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.75);
}

.parTypeVal.hasTrend{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* ---------------------------------------
   Round summary – responsive stacking
   (När panelen blir smal ska "Snittscore per hål"
   hamna på egen rad under "Score mot par")
----------------------------------------*/
@media (max-width: 560px){
  .roundSummaryBottom{
    flex-direction: column;
  }
  .scoreVsParBox,
  .parTypeBox{
    min-width: 0;
    width: 100%;
  }
  /* Tillåt interna flex-element att krympa utan overflow */
  .parTypeRow,
  .parTypeScaleRow{
    min-width: 0;
  }
  .parTypeBar,
  .parTypeScale{
    min-width: 0;
  }
}

/* ---------------------------------------
   Threshold settings (colorpicker rows)
----------------------------------------*/
.thresholdGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.thresholdRow{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
}
.thresholdRow .label{
  flex: 0 0 auto;
  min-width: 110px;
  font-weight: 800;
}
.thresholdInputs{
  display:flex;
  align-items:center;
  gap:8px;
}
.thresholdInputs input{
  width: 88px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}
.thresholdDash{
  color: rgba(0,0,0,.45);
  font-weight: 800;
}
.thresholdRemove{
  border-radius: 12px;
}

/* Mobile: avoid horizontal scroll in threshold settings */
@media (max-width: 520px){
  .thresholdRow{
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: nowrap;
  }
  .thresholdInputs{
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .thresholdInputs input{
    width: 62px;
    padding: 5px 6px;
    border-radius: 11px;
    font-size: 13px;
  }
  .scoreColorPickBtn{
    width: 38px;
    height: 30px;
    border-radius: 9px;
  }
  .scoreColorPickSwatch{
    width: 20px;
    height: 20px;
  }
  .thresholdRemove{
    font-size: 12px;
    height: 28px;
    padding: 0 10px;
    white-space: nowrap;
  }
  /* keep action buttons readable but compact */
  #viewSettings .settingsIsland .btnrow{
    gap: 8px;
  }
  #viewSettings .settingsIsland .btnrow button{
    font-size: 12px;
    height: 28px;
    padding: 0 10px;
    white-space: nowrap;
  }
}


/* ---------------------------------------
   Trend threshold settings (trend arrows)
----------------------------------------*/
.trendSettingsRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 2px 12px;
}
.trendSettingsLabel{
  font-weight: 800;
  color: rgba(11,15,26,.75);
}
.trendThresholdGrid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 8px;
}
.trendThresholdRow{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
}
.trendThresholdRow .trendName{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
}
.trendThresholdRow .trendUnit{
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,15,26,.55);
  margin-left: 6px;
}

/* Info tooltips (Trendtrösklar) */
.trendThresholdRow .infoBtn{
  margin-left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
  color: rgba(11,15,26,.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
}
.trendThresholdRow .infoBtn:active{
  transform: translateY(1px);
}

.infoPopover{
  position:absolute;
  z-index: 9999;
  width: min(320px, calc(100vw - 24px));
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}
.infoPopoverHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.infoPopoverTitle{
  font-weight: 900;
  font-size: 14px;
  color: rgba(11,15,26,.9);
}
.infoPopoverClose{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.02);
  border-radius: 10px;
  width: 30px;
  height: 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(11,15,26,.8);
}
.infoPopoverBody{
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(11,15,26,.82);
}
.infoPopoverBody .infoLine{
  margin-bottom: 8px;
}
.infoPopoverBody .infoLine:last-child{
  margin-bottom: 0;
}
.infoPopoverBody .infoEx{
  color: rgba(11,15,26,.65);
  font-weight: 700;
}
.infoPopoverFoot{
  padding: 8px 12px 10px;
  font-size: 12px;
  color: rgba(11,15,26,.55);
  border-top: 1px solid rgba(0,0,0,.06);
}
.trendThresholdRow .trendInputs{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}
.trendThresholdRow .trendInputs input{
  width: 78px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}
.trendThresholdRow .trendHint{
  font-size: 11px;
  color: rgba(11,15,26,.5);
}
@media (max-width: 520px){
  .trendThresholdRow{
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .trendThresholdRow .trendInputs input{
    width: 66px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: 13px;
  }
}
/* =========================================================
   Miss (m) picker – match GIR picker look (override only)
   (Endast utseende, ingen positionering/ankring)
========================================================= */
.distMenuGrid{
  padding: 6px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;

  /* 2x3 grid like GIR picker */
  display: grid !important;
  grid-template-columns: 28px 28px 28px !important;
  grid-template-rows: 28px 28px !important;
  gap: 6px !important;

  align-items: center !important;
  justify-items: center !important;
}

.distOpt{
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: #fff !important;

  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #0b0f1a !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.distOpt:hover{
  background: #f8fafc !important;
}

/* =========================================================
   Puttmap (Avstånd efter första putt)
   - Ensure the SVG has a visible, square area inside the stats card.
========================================================= */
.puttMapBody{
  justify-items: center;
}

.puttMapWrap{
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  margin: 6px auto 12px;
  position: relative;
}

.puttMapTip{
  position: absolute;
  z-index: 50;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16, 24, 40, 0.92);
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  pointer-events: none;
  user-select: none;
  overflow-wrap: anywhere;
}


.puttMapTip .puttTipTitle{
  font-weight: 700;
  margin-bottom: 8px;
  white-space: nowrap;
}

.puttMapTip .puttTipTable{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
}

.puttMapTip .puttTipTable .k{
  opacity: 0.92;
}

.puttMapTip .puttTipTable .v{
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.puttMapSvg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Vita prickar (bollar) – hover highlight */
.puttMapBall,
.puttMapHitCenterBall{
  cursor: pointer;
  pointer-events: all;
  transform-box: fill-box;
  transform-origin: center;
}

.puttMapBall:hover,
.puttMapHitCenterBall:hover{
  stroke: rgba(0,0,0,0.85) !important;
  stroke-width: 0.9 !important;
  transform: scale(1.18);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}



/* SETTINGS - COURSES LAYOUT (scoped) */
#viewSettings .settingsHeader{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:10px;
}
#viewSettings .settingsTabs{
  margin-left:0;
}
#viewSettings .settingsPanel{
  border:1px solid rgba(15,23,42,0.10);
  border-radius:18px;
  padding:14px 14px 12px;
  margin:12px 0;
}
#viewSettings .settingsPanelTitle{
  margin:0 0 10px;
}
#viewSettings #settingsCoursesPane > .settingsPanel:first-child .row{
  align-items:flex-end;
  gap:12px;
}
#viewSettings #settingsCoursesPane .row .grow{
  max-width:260px;
}
#viewSettings #settingsCoursesPane .btnrow{
  justify-content:flex-start;
}

/* Banor (desktop): make course editor panels compact instead of full width */
@media (min-width: 721px){
  #viewSettings #settingsCoursesPane{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  #viewSettings #settingsCoursesPane .settingsPanel{
    width: fit-content;
    max-width: 520px; /* roughly ~1/4 of wide desktops */
  }
  #viewSettings #settingsCoursesPane .parGridWrap{
    max-width: 718px; /* +15% jämfört med tidigare 624px */
  }
}
#viewSettings .parGridWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
#viewSettings .parGrid{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#viewSettings .parGridRow{
  display:grid;
  grid-template-columns: 44px 1fr 58px;
  align-items:center;
  gap:8px;
}
#viewSettings .parGridLabel{
  font-weight:600;
}
#viewSettings .parGridCells{
  display:grid;
  justify-items:center;
  align-items:center;
  /* Default (fallback): 18 hål */
  grid-template-columns: repeat(18, 34px);
  gap:3px;
  justify-content:start;
  padding:4px 5px; /* room so first input isn't clipped by borders */
  box-sizing:border-box;
}

/* Delad layout för banregistreraren: 1–9 och 10–18 */
#viewSettings .parGridTable--out .parGridCells,
#viewSettings .parGridTable--in .parGridCells,
#viewSettings .parGridSection--out .parGridCells,
#viewSettings .parGridSection--in .parGridCells{
  grid-template-columns: repeat(9, 34px);
}

#viewSettings .parGridTableUnified{
  border:2px solid rgba(15,23,42,0.80);
  border-radius:0;
  background:#fff;
  overflow:hidden;
  display:inline-block;
  max-width:100%;
}
/* Delade sektioner (rad 1 / rad 2) i samma ram */
#viewSettings .parGridSection{
  display:flex;
  flex-direction:column;
}
#viewSettings .parGridSection--in{
  border-top:2px solid rgba(15,23,42,0.80);
}
#viewSettings .parGridTable{
  border:2px solid rgba(15,23,42,0.80);
  border-radius:0;
  background:#fff;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}

#viewSettings .parGrid.parGridTable{
  gap:0;
}
#viewSettings .parGridLabel,
#viewSettings .parGridSumHead,
#viewSettings .parGridSumVal{
  font-size:12px;
}
#viewSettings .parGridSumHead,
#viewSettings .parGridSumVal{
  min-height:28px;
}

#viewSettings .parGridRow{
  display:grid;
  align-items:stretch;
  gap:0;
}

/* Default (fallback 18 hål + UT/IN/TOTAL) */
#viewSettings .parGridTable:not(.parGridTable--out):not(.parGridTable--in) .parGridRow{
  grid-template-columns: 52px auto 38px 38px 52px;
}

/* Rad 1: UT */
#viewSettings .parGridTable--out .parGridRow,
#viewSettings .parGridSection--out .parGridRow{
  /* Två summeringskolumner för att linjera UT över IN (TOT. finns på rad 2) */
  grid-template-columns: 52px auto 44px 44px;
}

/* Rad 2: IN + TOTAL */
#viewSettings .parGridTable--in .parGridRow,
#viewSettings .parGridSection--in .parGridRow{
  grid-template-columns: 52px auto 44px 44px;
}

#viewSettings .parCellInput{
  width:24px;
  height:24px;
  padding:0;
  margin:0;
  border-radius:6px;
  text-align:center;
  box-sizing:border-box;

  border:1px solid rgba(15,23,42,0.70);
  background:#fff;
  outline:none;
  box-shadow:none;
  appearance:textfield;
  font-size:12px;
  font-weight:500;
}
/* Banor (mobil): komprimera par-grid så hela (inkl. TOT) får plats utan sidscroll */
@media (max-width: 720px){
  /* Mobil: par-tabellen måste kunna krympa till panelens bredd */
  #viewSettings .parGridTableUnified{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    /* Låt inte tabellen klippa innehållet på mobil (outer wrap kan då scrolla vid behov) */
    overflow:visible;
  }

  #viewSettings #settingsCoursesPane .parGridWrap{
    max-width: 100%;
  }

  /* På mobil: ta bort "placeholder"-kolumnen (tom TOT-kolumn i UT-raden)
     för att vinna bredd. Desktop behåller alignment. */
  #viewSettings .parGridSection--out .parGridRow{
    grid-template-columns: 30px minmax(0, 1fr) 24px;
  }
  #viewSettings .parGridSection--out .parGridRow > .parGridSumHead[aria-hidden="true"],
  #viewSettings .parGridSection--out .parGridRow > .parGridSumVal[aria-hidden="true"]{
    display:none;
  }

  /* smalare etiketter och summeringar */
  #viewSettings .parGridTable--in .parGridRow,
  #viewSettings .parGridSection--in .parGridRow{
    grid-template-columns: 30px minmax(0, 1fr) 24px 24px;
  }

  /* smalare hål-kolumner */
  #viewSettings .parGridTable--out .parGridCells,
  #viewSettings .parGridTable--in .parGridCells,
  #viewSettings .parGridSection--out .parGridCells,
  #viewSettings .parGridSection--in .parGridCells{
    /* Mobil: håll 9 kolumner men minska luft så alla hål (1–9 / 10–18) får plats */
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap:0;
    padding: 0;
    width:100%;
    min-width:0;
    overflow:hidden;
    justify-content:stretch;
  }

  /* Grid/flex defaultar till min-width:auto vilket kan tvinga overflow.
     Tillåt krympning så 1–9 + UT/IN/TOT får plats på smala skärmar. */
  #viewSettings .parGridRow > *{
    min-width:0;
  }

  /* Mindre intern padding i etikettcellen så den inte driver bredd */
  #viewSettings .parGridLabel{
    padding:2px 4px;
  }

  /* Förhindra att hålnummer/inputs överlappar summeringskolumnerna */
  #viewSettings .parGridCells > .parCell{
    min-width:0;
    overflow:hidden;
  }
  #viewSettings .parGridCells .holeNum{
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  /* något mindre inputs */
  #viewSettings .parCellInput{
    width:100%;
    max-width:18px;
    height:18px;
    font-size:11px;
    border-radius:5px;
  }

  #viewSettings .parGridLabel,
  #viewSettings .parGridSumHead,
  #viewSettings .parGridSumVal{
    font-size:9px;
  }
  #viewSettings .parGridSumHead,
  #viewSettings .parGridSumVal{
    min-height:24px;
  }

  /* Mobil: tunnare separatorer så inget "äter" hålkolumner (undviker att UT/IN/TOT ser ut att hamna inne bland hålen) */
  #viewSettings .parGridSumHead,
  #viewSettings .parGridSumVal{
    border-left:1px solid rgba(15,23,42,0.30);
    padding:0 2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
  #viewSettings .parGridTable--out .parGridSumHead,
  #viewSettings .parGridTable--out .parGridSumVal,
  #viewSettings .parGridTable--in .parGridSumHead:first-of-type,
  #viewSettings .parGridTable--in .parGridSumVal:first-of-type,
  #viewSettings .parGridSection--in .parGridSumVal:first-of-type{
    border-left:1px solid rgba(15,23,42,0.60);
  }

  /* Förhindra att hålnummer "läcker" in i summeringskolumner när det är tajt */
  #viewSettings .parGridCells > .parCell{
    min-width:0;
    overflow:hidden;
  }
  #viewSettings .parGridCells .holeNum{
    font-size:12px;
  }

  /* Mobil: undvik horisontell scroll – tabellen ska krympa in i panelen */
  #viewSettings .parGridWrap{
    overflow-x:hidden;
  }
  #viewSettings .parGridTableUnified{
    border-width:1px;
  }
  #viewSettings .parGridSumHead,
  #viewSettings .parGridSumVal{
    min-height:22px;
  }
}

#viewSettings .parGridHead{
  background:rgba(15,23,42,0.02);
}
#viewSettings .parGridLabel{
  font-weight:600;
  padding:6px 8px;
  border-right:1px solid rgba(15,23,42,0.10);
  display:flex;
  align-items:center;
}
#viewSettings .parGridSumHead,
#viewSettings .parGridSumVal{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  border-left:1px solid rgba(15,23,42,0.35);
  white-space:nowrap;
}

/* Tjock separator innan summeringskolumn(er) */
#viewSettings .parGridTable--out .parGridSumHead,
#viewSettings .parGridTable--out .parGridSumVal,
#viewSettings .parGridTable--in .parGridSumHead:first-of-type,
#viewSettings .parGridTable--in .parGridSumVal:first-of-type,
#viewSettings .parGridSection--in .parGridSumVal:first-of-type{
  border-left:2px solid rgba(15,23,42,0.80);
}

#viewSettings .parGridSumVal{
  font-weight:700;
}
#viewSettings .parGridCells > .parCell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
}
#viewSettings .parGridCells .holeNum{
  font-size:12px;
  color:#334155;
  font-weight:600;
}
#viewSettings .parCellInput:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(15,23,42,0.25);
}
#viewSettings .parGridTotal{
  text-align:left;
  white-space:nowrap;
}
#viewSettings .courseList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#viewSettings .courseItem{
  display:block;
}

#viewSettings .courseItem .courseName{
  font-weight:700;
}
#viewSettings .courseItem .courseMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#viewSettings .courseItem .courseFavBtn{
  /* Favoritstjärna: ska se ut som en ren inline-ikon (ingen cirkel/ram) */
  background:transparent;
  border:0;
  padding:0 4px;
  margin-left:4px;
  cursor:pointer;

  font-size:16px;
  line-height:1;
  color:#111827;

  display:inline;
  width:auto;
  height:auto;

  /* iOS/Android: ta bort "button chrome" och ringar */
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  box-shadow:none;
  border-radius:0;

  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;

  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit;
}

#viewSettings .courseItem .courseFavBtn.isFav{
  font-weight:700;
}

#viewSettings .courseItem .courseFavBtn:not(.isFav){
  /* Inaktiv favorit: svart stjärna utan ring/ram */
  border:0;
  border-radius:0;
}

#viewSettings .courseItem .courseActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-top:8px;
}

#viewSettings .courseItem .small{
  margin-top:2px;
}

#viewSettings .courseNameField{
  max-width:260px;
}
#viewSettings .courseNameField input{
  width:100%;
}
#viewSettings .courseFormActions{
  margin-top:10px;
  justify-content:flex-start;
}
#viewSettings .settingsPanelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(15,23,42,0.10);
}


/* =========================================================
   Mobile split (9 + 9) for Scorecard table and Settings Par grid
========================================================= */
@media (max-width: 720px){
  /* Scorecard: show split tables stacked */
  .tableWrap.tableWrapSplit{
    overflow-x: hidden;
    overflow-y: visible;
  }
  .tableWrap.tableWrapSplit .scorecardDesktopTable{
    display:none;
  }
  .tableWrap.tableWrapSplit .scorecardMobileSplit{
    display:block;
    width:100%;
  }
  .tableWrap.tableWrapSplit .scorecardSplitBlock{
    width:100%;
  }
  .scoreTable.scorecardScaled.scoreTableMobileSplit{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: inline-table;
    table-layout: fixed !important;
  }

  /* GM7: tighten mobile split so columns use only needed space and fit 1–9 without horizontal scroll */
  .scoreTable.scorecardScaled.scoreTableMobileSplit{
    table-layout: fixed !important;
  }
  .scoreTable.scorecardScaled.scoreTableMobileSplit th,
  .scoreTable.scorecardScaled.scoreTableMobileSplit td{
    font-size: 11px;
    padding: 1px 0 !important;
  }
  .scoreTable.scorecardScaled.scoreTableMobileSplit tbody th{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
  }
  .scoreTable.scorecardScaled.scoreTableMobileSplit .scoreCell input.cellInput{
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 5px;
  }

  .scoreTableSplitBlock{
    margin-bottom: 10px;
  }
  .scoreTableSplitBlock:last-child{
    margin-bottom: 0;
  }

  /* Settings -> Banor: behåll samma tabell-layout även på mobil.
     (Tidigare mobil-specialgrid byggde på en äldre DOM-struktur och gav klipp/overflow.) */
  #viewSettings .parGridTableUnified .parGridRow{
    /* Mobil: komprimera så 1–9 + UT och 10–18 + IN + TOT alltid får plats */
    grid-template-columns: 34px minmax(0, 1fr) 28px 28px;
    grid-template-rows: none;
  }
  #viewSettings .parGridTableUnified .parGridLabel{
    grid-row: auto;
  }
  #viewSettings .parGridTableUnified .parGridCells{
    /* Fördela hålkolumnerna jämnt och minimera luft */
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap:0;
    padding:0;
  }

  /* GM7: remove extra whitespace before black value frame in mobile split */
  .scoreTable.scorecardScaled.scoreTableMobileSplit{
    table-layout: fixed !important;
  }
  .scoreTable.scorecardScaled.scoreTableMobileSplit td.rowLabel,
  .scoreTable.scorecardScaled.scoreTableMobileSplit th.rowLabel,
  .scoreTable.scorecardScaled.scoreTableMobileSplit th.stickyLeft{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 4px !important;
  }


  /* GM8: apply the same mobile-split compact rules even when scorecardScaled class is not present */
  .scoreTable.scoreTableMobileSplit{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    display: inline-table;
  }
  .scoreTable.scoreTableMobileSplit th,
  .scoreTable.scoreTableMobileSplit td{
    font-size: 11px;
    padding: 1px 0 !important;
  }
  .scoreTable.scoreTableMobileSplit tbody th,
  .scoreTable.scoreTableMobileSplit td.rowLabel,
  .scoreTable.scoreTableMobileSplit th.rowLabel,
  .scoreTable.scoreTableMobileSplit th.stickyLeft{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
  }
  .scoreTable.scoreTableMobileSplit .scoreCell input.cellInput{
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 5px;
  }

  /* GM10: make mobile-split columns truly compact WITHOUT clipping */
  .tableWrap.tableWrapSplit{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .scoreTable.scoreTableMobileSplit{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  /* Keep the row-label column compact; truncate long labels instead of stealing width */
  .scoreTable.scoreTableMobileSplit tbody th,
  .scoreTable.scoreTableMobileSplit td.rowLabel,
  .scoreTable.scoreTableMobileSplit th.stickyLeft{
    max-width: 72px !important;
    width: 72px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Compact score columns so 1–9 + UT fits on small screens */
  .scoreTable.scoreTableMobileSplit thead th:not(.stickyLeft),
  .scoreTable.scoreTableMobileSplit td.scoreCell{
    width: 22px !important;
    min-width: 22px !important;
	    max-width: 22px !important;
    padding: 0 !important;
  }
  .scoreTable.scoreTableMobileSplit th,
  .scoreTable.scoreTableMobileSplit td{
    font-size: 11px;
  }
  .scoreTable.scoreTableMobileSplit .scoreCell input.cellInput{
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 4px;
  }


  /* GM20 DEBUG: visual helpers for column sizing on mobile split */
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit{
    outline: 2px dashed rgba(255, 0, 0, 0.35);
  }
  .gm20-debug-mobilesplit .scoreMobileSplitGrid{
    outline: 2px dashed rgba(0, 140, 255, 0.35);
    outline-offset: -2px;
  }
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit th.stickyLeft,
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit td.stickyLeft{
    background: rgba(255, 230, 120, 0.25);
  }
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit th:not(.stickyLeft),
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit td:not(.stickyLeft){
    background: rgba(120, 255, 160, 0.10);
  }
  /* highlight summary columns (UT / IN / TOTAL) */
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit th:last-child,
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit td:last-child{
    background: rgba(255, 120, 200, 0.18);
  }
  /* Put a subtle divider on every score cell to spot extra width */
  .gm20-debug-mobilesplit .scoreTable.scoreTableMobileSplit td.scoreCell{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  }



}


/* GM21: Ensure 'Hål' header cell matches row labels (Par/Score/...) */
.scoreTable thead th.rowLabel{
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
  font-weight: 500 !important;
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 720px){
  .scorecardMobileBack .scorecardCol-total{
    transform: translateX(10px);
  }
  .scorecardMobileBack .scorecardCol-total,
  .scorecardMobileBack th.scorecardCol-total{
    background: #ffffff;
  }
}



/* GM23: Mobile split - show ONLY mobile tables on small screens */
.scorecard-mobile-front,
.scorecard-mobile-back {
  display: none;
}

@media (max-width: 820px) {
  /* Hide the original desktop scorecard table on phones */
  .scorecardDesktopTable {
    display: none !important;
  }

  /* Show mobile split tables */
  .scorecard-mobile-front,
  .scorecard-mobile-back {
    display: block;
  }
}


/* =========================================================
   GM24: Ren mobil-DOM för scorekortet (två tabeller: 1–9+UT och 10–18+IN+TOTAL)
   Desktop-tabellen lämnas orörd och göms bara på mobil.
========================================================= */
@media (max-width: 820px){
  .scorecardMobileRoot{
    display:block;
    width:100%;
  }
  .scorecardMobileBlocks{
	    display:flex; /* fyll hela panelens bredd så ramen inte "krymper" */
	    width:100%;
	    box-sizing:border-box;
	    flex-direction:column;
	    gap:0; /* inga mellanrum mellan övre/undre halvan */
	    align-items:stretch; /* tabellerna får använda hela kortets bredd */
	    max-width:100%;
	    background:#fff;
	    border:1px solid #e5e7eb;
	    border-radius:14px;
	    overflow:hidden;
  }
  .scorecardMobileDomTable{
    display:table; /* fyll kortets bredd (utan att skapa sidoscroll) */
    width:100%;
    max-width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    /* Override desktop .scoreTable sizing (which enforces large min-width/width).
       Mobile split tables must size to content and sit flush-left. */
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* .scoreTable has min-width:900px for desktop. Ensure it never applies on mobile DOM tables. */
  .scoreTable.scorecardMobileDomTable{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  .scorecardMobileDomTable td,
  .scorecardMobileDomTable th{
    font-size:11px;
    padding:1px 0 !important;
  }
  /* kompakt label-kolumn */
  .scorecardMobileDomTable td.rowLabel{
    max-width:72px !important;
    width:72px !important;
    min-width:72px !important;
    padding-left:4px !important;
    padding-right:4px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* hålkolumner */
  .scorecardMobileDomTable td.holeNoCell,
  .scorecardMobileDomTable td.scoreCell{
    width:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    padding:0 !important;
    text-align:center;
  }
  .scorecardMobileDomTable td.scoreCell input.cellInput{
    width:24px;
    height:24px;
    font-size:11px;
    border-radius:4px;
  }

  /* totals-kolumner */
  .scorecardMobileDomTable td.totCell{
    width:40px;
    min-width:40px;
    max-width:40px;
	    text-align:left;
	    padding:0 2px 0 6px !important;
    white-space:nowrap;
  }
  /* front: visa bara UT */
  .scorecardMobileDomTable--front td[data-tot="IN"]{
    display:none;
  }
  /* back: visa IN */
  .scorecardMobileDomTable--back td[data-tot="OUT"]{
    display:none;
  }

  /* =========================================================
     Mobile DOM table border fixes (GM24-A-008)
     - Remove desktop split borders that land in wrong column on mobile split tables
     - Remove thick horizontal lines at "Hål" rows
     - Add thick vertical separator after hole 9 / hole 18
  ========================================================= */
  /* Neutralize any scoreTable divider rules that target totals columns */
  .scorecardMobileDomTable td.totCell{
    border-left: none !important;
  }

  
/* GM29-D042-M036: Fix mobile separators
   - Remove the misplaced thick divider that landed between hole 7/8 (nth-last-child(3) in desktop rules)
   - Keep thick vertical separator after hole 9 / hole 18 */
.scorecardMobileDomTable thead th:nth-last-child(3),
.scorecardMobileDomTable tbody td:nth-last-child(3){
  border-left: none !important;
}

/* Add thick vertical separator after hole 9 / hole 18 (right edge of the last hole column) */
.scorecardMobileDomTable--front tbody td:nth-child(10),
.scorecardMobileDomTable--back tbody td:nth-child(10){
  border-right: 3px solid #111827 !important;
}
/* GM29-D042-M036: Remove vertical separator line in mobile scorecard */

}

/* GM25: Landscape on phone — tighten scorecard so the full 1–9+UT / 10–18+IN fits in width */
@media (max-width: 820px) and (orientation: landscape){
  .scorecardMobileDomTable td,
  .scorecardMobileDomTable th{
    font-size:10px;
  }
  .scorecardMobileDomTable td.rowLabel{
    width:60px !important;
    min-width:60px !important;
    max-width:60px !important;
  }
  .scorecardMobileDomTable td.holeNoCell,
  .scorecardMobileDomTable td.scoreCell{
    width:20px !important;
    min-width:20px !important;
    max-width:20px !important;
  }
  .scorecardMobileDomTable td.scoreCell input.cellInput{
    width:20px;
    height:20px;
    font-size:10px;
  }
  .scorecardMobileDomTable td.totCell{
    width:36px;
    min-width:36px;
    max-width:36px;
  }
  /* (TOTAL removed in mobile layout) */
}

@media (max-width: 820px) {
  /* "Hål"-raden ska kännas som en rubrik (mörk bakgrund + vit text) */
  .scorecardMobileDomTable tbody tr:first-child td {
    background: #0b1220;
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #111827;
  }
}


/* GM26 M001: Mobile hole editor overlay */
@media (max-width: 820px) {
  .mobileHoleEditorOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg, #f3f4f6);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
  }

  .mobileHoleEditor {
    width: 100%;
    max-width: 720px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
  }

  .mheTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--card, #fff);
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .mheTopBtn {
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .mheTopSpacer {
    width: 88px;
    flex: 0 0 88px;
  }

  .mheDangerBtn {
    min-width: 88px;
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
  }

  .mheActionBtn {
    height: 34px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
  }

  .mheActionBtn.saveMode {
    background: #2563eb;
    border-color: #2563eb;
  }

  .mheActionBtn.disabled {
    opacity: 0.55;
    cursor: default;
  }


  .mheTopMid {
    font-weight: 800;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    text-align: center;
    flex: 1;
  }

  .mheTop {
    gap: 8px;
  }

  .mheTopBtn {
    flex: 0 0 auto;
  }

  .mheTitle {
    padding: 14px 14px 6px 14px;
    font-size: 22px;
    font-weight: 800;
  }

  .mheSub {
    padding: 0 14px 10px 14px;
    color: rgba(0,0,0,0.65);
    font-size: 13px;
  }

  /* New: Course/date line placed directly under top bar (no extra "air") */
  .mheCourseLine {
    padding: 6px 14px 6px 14px;
    text-align: center;
    color: rgba(0,0,0,0.65);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--card, #fff);
  }

  /* New: Hole scroller */
  .mheHoleStripWrap {
    background: var(--card, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 10px 0;
  }
  .mheHoleStrip {
    display: flex;
    gap: 10px;
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mheHoleStrip::-webkit-scrollbar { display: none; }

  .mheHoleBtn {
    min-width: 48px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid rgba(0,0,0,0.85);
    background: #fff;
    color: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    padding: 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .mheHoleBtn.empty { border-color: rgba(0,0,0,0.85); }
  .mheHoleBtn.saved { }
  .mheHoleBtn.active {
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    border-width: 3px;
  }

  /* Round summary chips strip (between hole scroller and action buttons) */
  .mheChips {
    padding: 8px 14px;
    background: var(--card, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mheChips::-webkit-scrollbar { display: none; }
  .mheChips .chip { flex: 0 0 auto; }

  /* Chips text needs higher contrast on iOS (previously inherited muted styles) */
  .mheChips .chip { color: rgba(0,0,0,0.88); }
  .mheChips .chip b { color: rgba(0,0,0,0.90); }
  .mheChips .chip .small { color: rgba(0,0,0,0.62); }

  .mheBody {
    padding: 6px 14px 12px 14px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  
  /* -------------------------
     Mobile Hole Editor – iOS-style tabs + swipe panels
     ------------------------- */
  .mheTabs {
    display: none;
    gap: 10px;
    padding: 10px 14px 8px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    background: var(--card, #fff);
    position: sticky;
    top: 0;
    z-index: 2;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mheTabs::-webkit-scrollbar { display: none; }

  .mheTab {
    border: none;
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.88);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
  }
  .mheTab.active {
    background: rgba(0,0,0,0.12);
    color: rgba(0,0,0,0.98);
  }

  .mheTab.disabled {
    opacity: 0.35;
  }

  .mheCarousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
  .mheCarousel::-webkit-scrollbar { display: none; }

  /* Add safe-area awareness for notched devices (iOS) */
  @supports (padding: env(safe-area-inset-left)) {
    .mheCarousel {
      padding-left: calc(12px + env(safe-area-inset-left));
      padding-right: calc(12px + env(safe-area-inset-right));
    }
  }

  .mhePanel {
    flex: 0 0 96px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-width: 96px;
    border-radius: 16px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
  }

  .mhePanel.wide {
    flex-basis: 132px;
    min-width: 132px;
  }

  .mhePanel.active {
  border-color: rgba(0,0,0,0.06);
  box-shadow: none;
}

  /* Disabled column (e.g. Miss +/- when 1st putt is HIT/NONE). Keep layout but prevent interaction. */
  .mhePanel.disabled {
    opacity: 0.20;
  }
  .mhePanel.disabled .mheWheel {
    pointer-events: none;
  }


/* Hide Miss column completely.
   NOTE: We keep the DOM nodes mounted (no rebuild), but remove them from layout
   to avoid leaving an empty gap in the carousel/tabs.
*/
.mhePanel.missHidden {
  display: none;
}
.mheTab.missHidden {
  display: none;
}

  .mheColHead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px 6px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Score header should be right-aligned, others centered */
.mhePanel.scorePanel .mheColHead{
  justify-content: flex-end;
  text-align: right;
}
.mhePanel.scorePanel .mheColHeadLabel {
  width: 100%;
  text-align: right;
  font-weight: 700;
  color: rgba(0,0,0,0.92);
}

/* Column header contrast */
.mheColHeadLabel{
  color: rgba(0,0,0,0.92);
}

/* Ensure score wheel items inherit the gray/black selection color like other wheels */
.mheWheelItem.score .mheOptLeft,
.mheWheelItem.score .mheOptRight{
  color: inherit;
}
.mheWheelItem.score.selected .mheOptLeft,
.mheWheelItem.score.selected .mheOptRight{
  color: #000;
}


  .mheColHint {
  display: none;
}

  /* Wheel picker (values scroll, selector stays centered) */
  .mheWheelWrap {
    position: relative;
    flex: 1;
    min-height: 220px;
  }

  .mheWheel {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    padding: 0; /* set via JS for perfect centering */
    touch-action: pan-x pan-y;
  }

  .mheWheelItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 62px;
  font-size: 32px;
  line-height: 1;
  color: rgba(0,0,0,0.55);
  user-select: none;
  overflow-wrap: anywhere;
}

  /* Center values for non-score wheels (Putts, 1st putt, Miss, FIR, GIR, Bunker, Plikt etc.) */
  .mheWheelItem:not(.score) {
    justify-content: center;
    text-align: center;
  }

  .mheWheelItem.small {
    font-size: 28px;
  }

  .mheWheelItem.score {
    justify-content: space-between;
    padding: 0 8px;
    font-size: 18px;
    font-weight: 700;
  }

  /* Score column: left-align text like the iOS example */
  .mheWheelItem.score .mheOptLeft {
    flex: 1;
    text-align: left;
  }
  .mheWheelItem.score .mheOptRight {
    text-align: right;
  }

  .mheWheelItem.score .mheOptLeft {
    font-size: 17px;
  }
  .mheWheelItem.score .mheOptRight {
    font-size: 40px;
  }

  
  /* Tighter layout for Score wheel: reduce "air" between label and number */
  .mheWheelItem.score {
    justify-content: space-between;
    padding: 0 8px;
  }
  .mheWheelItem.score .mheOptLeft {
    flex: 0 0 auto;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mheWheelItem.score .mheOptRight {
    flex: 0 0 auto;
    min-width: 32px;
  }

  /* Score: allow "Spelades ej" to use full row width */
  .mheWheelItem.score.isDnp{
    justify-content: flex-start;
  }
  .mheWheelItem.score.isDnp .mheOptLeft{
    flex: 1 1 auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
  .mheWheelItem.score.isDnp .mheOptRight{
    display: none;
  }
.mheWheelItem.icon {
    font-size: 40px;
    width: 100%;
  }

  .mheWheelItem.selected {
    color: rgba(0,0,0,0.92);
  }

  .mheSelector {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 52px;
    border-radius: 12px;
    background: rgba(0,0,0,0.06);
    pointer-events: none;
  }

  .mheSelector::before,
  .mheSelector::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.10);
  }
  .mheSelector::before { top: 0; }
  .mheSelector::after { bottom: 0; }

  .mheOptions {
    display: none;
  }

  .mheOption {
    display: none;
  }
  .mheOption.selected {
    background: rgba(0,0,0,0.06);
  }

  .mheOptLeft {
    font-weight: 500;
    color: rgba(0,0,0,0.55);
  }
  .mheOptRight {
    font-weight: 800;
    font-size: 34px;
    color: rgba(0,0,0,0.92);
    line-height: 1;
  }
  .mheOptIcon {
    font-weight: 800;
    font-size: 36px;
    color: rgba(0,0,0,0.85);
    width: 100%;
    text-align: center;
  }

.mheRow {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .mheLabel {
    font-weight: 700;
    color: rgba(0,0,0,0.75);
  }

  .mheSelect {
    width: 100%;
    font-size: 16px;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
  }

  .mheIconWrap .iconPicker { display: inline-block; }
  .mheIconWrap .iconBtn {
    width: 56px;
    height: 44px;
    font-size: 22px;
    border-radius: 12px;
  }

  .mheBottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(6px + env(safe-area-inset-bottom)) 12px;
}

  .mheBottomBackBtn {
    justify-self: start;
  }

  .mheBottom .mheActionBtn {
    grid-column: 2;
    justify-self: center;
  }

  .mheBtn {
    border-radius: 14px;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: 800;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .mheBtn.primary {
    background: #2563eb;
    color: #fff;
  }

  .mheBtn.secondary {
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.85);
  }

  .mheBtn.disabled,
  .mheBtn:disabled {
    opacity: 0.45;
  }
}

.mheColHeadLabel{ font-weight: 800; color: rgba(0,0,0,0.90); }
.mhePanel.score .mheColHead{ justify-content:flex-end; }
.mhePanel.score .mheColHeadLabel{ text-align:right; width:100%; }



/* --- Custom Ja/Nej modal (used for unsaved-changes prompt on mobile) --- */
.gs-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.gs-modal{
  width: min(560px, calc(100vw - 32px));
  background: #1c1c1e;
  color: #fff;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.gs-modal-msg{
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  padding: 6px 4px 14px;
}
.gs-modal-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 6px;
}
.gs-modal-btn{
  border: none;
  background: transparent;
  color: #0a84ff; /* iOS-like blue */
  font-size: 17px;
  font-weight: 600;
  padding: 10px 10px;
}
.gs-modal-btn:active{ opacity: .75; }

/* Desktop: matcha mobilens rubrik-typografi i statistikkort */
@media (min-width: 821px){
  .statCardHeader .statTitle{
    font-family: var(--font) !important;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
  }
}


/* GM29-D042-M036 donut hover center layout */
@media (hover:hover) {
  .statDonutCenter .donutCenterValue,
  .statDonutCenter .donutCenterLabel { display:block; text-align:center; }
}

@media (hover:hover) {
  svg .donutOutlineActive { stroke: #000; stroke-width: 2; }
}


/* GM29-D042-M036: donut hover center layout (desktop) */
@media (hover:hover) {
  .statDonutCenter.show{ flex-direction: column; }
}


/* GM29-D042-M036: disable all donut hover outlines */
svg [data-donut-outline],
svg .donutEndCap { display: none !important; }


/* GM29-D042-M036: disable text selection on donut (mobile UX) */
.statDonut svg,
.statDonutCenter,
.statDonutCenter * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* GM29-D042-M036: prevent iOS text selection/callout on donut touch */
@media (hover: none) and (pointer: coarse) {
  .statDonutWrap,
  .statDonutWrap * ,
  .statDonutLegend,
  .statDonutLegend * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}


/* GM29-D042-M036: stronger iOS no-callout for donut interactions */
@media (hover: none) and (pointer: coarse) {
  .statDonutWrap,
  .statDonutLegend,
  .statDonutCenter,
  .statDonutWrap *,
  .statDonutLegend *,
  .statDonutCenter * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}


/* GM29-D042-M036: prevent iOS copy/lookup callout on legend rows */
@media (hover: none) and (pointer: coarse) {
  .statLegendRow,
  .statLegendRow * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}


/* GM29-D042-M036: mobile donut center value+label on separate lines */
@media (hover: none) and (pointer: coarse) {
  .statDonutCenter.show {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .statDonutCenter.show .donutCenterValue,
  .statDonutCenter.show .donutCenterLabel {
    display: block !important;
    width: 100%;
    text-align: center !important;
    line-height: 1.1;
  }
}


/* GM29-D042-M036: reduce mobile zoom gestures (double-tap) */
@media (hover: none) and (pointer: coarse) {
  body { touch-action: manipulation; }
}


/* Settings: root islands (tabs + pane islands) */
#viewSettings .settingsRootIslands{
  margin-top: 0;
}

.settingsTabsIsland{
  width: 100%;
}


/* GM29-D042-M036: green mark best 18-hole round in current year (unless also best ever) */
.roundsTable tr.best18year > td {
  background: #4db661 !important;
  color: #000 !important;
}

/* GM29-D042-M036: gold mark best 18-hole round in rounds list */
.roundsTable tr.best18 > td {
  background: #ffcf40 !important;
  color: #000 !important;
}


/* Round header moved into Scorecard pane */
.roundTitleBar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
/* Match "Rundstatistik" pane title typography */
.roundTitleBar .title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--font);
  font-weight:600;
  font-size:16px;
  color:#334155;
}
.roundTitleBar .actions{display:flex;gap:8px;align-items:center;}

/* Pencil edit button placed after the title */
.roundTitleBar .pencilBtn{
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  color: inherit;
}
.roundTitleBar .pencilBtn:hover{
  background: rgba(15, 23, 42, 0.06);
}

/* ================================
   GM29-D042-M036: Statistik (ny sida)
   Desktop-first med responsiv mobil drawer
   ================================ */

/* Textfärger: Statistik-sidan använder ljusa kort på mörk bakgrund.
   Sätt explicita textfärger här för att undvika att global "dark"-text (t.ex. vit)
   läcker in i korten. */
.statsPage{
  color: rgba(15, 23, 42, 0.92);
}

.statsPage .statTitle,
.statsPage h2{
  color: rgba(15, 23, 42, 0.92);
}

.statsPage .small,
.statsPage .statsKpiLabel{
  color: rgba(15, 23, 42, 0.72);
}

.statsSidebar,
.statsTopbar,
.statsKpiCard,
.statsCard{
  color: rgba(15, 23, 42, 0.92);
}

.statsPlaceholder{
  color: rgba(15, 23, 42, 0.62);
  opacity: 1;
}

.statsPage{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
}

/* Desktop: filterpanelen ska ligga horisontellt i toppen (inte som vänsterspalt) */
@media (min-width: 901px){
  .statsPage{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .statsSidebar{
    position: sticky;
    top: 12px;
    height: auto;
    width: auto;
    max-width: none;
    padding: 10px 12px 12px;
  }

  .statsSidebarHeader{
    margin-bottom: 8px;
  }

  .statsSidebarClose{
    display: none;
  }

  /* Desktop top filters should be compact and multi-column (avoid building on height). */
  .statsFilters{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    gap: 10px 12px;
    align-items: end;
    justify-content: start;
  }

  .statsField{
    min-width: 0;
    max-width: 260px;
  }

  .statsFieldWide{
    /* Date range is wider, but still bounded and stays inline with others. */
    max-width: 620px;
    grid-column: span 2;
  }

  .statsSidebarActions{
    margin-top: 10px;
    justify-content: flex-end;
  }

  /* Wide desktop: try to keep all filter controls on a single row to reduce panel height. */
  @media (min-width: 1200px){
    .statsSidebar{
      padding: 10px 12px;
    }

    .statsFilters{
      /* Explicit columns for a single-row layout (wrap remains for narrower screens). */
      grid-template-columns: 110px 200px 150px 280px 160px 170px 170px 200px;
      gap: 8px 10px;
      align-items: end;
    }

    .statsField{
      max-width: none;
    }

    .statsFieldWide{
      max-width: none;
      grid-column: auto;
    }
  }

}

/* Live filter: ingen "Tillämpa filter" behövs */
#btnStatsApply{
  display: none;
}

.statsSidebar{
  position: sticky;
  top: 12px;
  align-self: start;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(6px);
}

.statsSidebarHeader{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

/* Mobile/tablet: stacked filter controls */
@media (max-width: 900px){
  .statsFilters{
    display: grid;
    gap: 10px;
  }
}

.statsField label{
  display: block;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.92);
}

.statsField select,
.statsField input{
  width: 100%;
}

.statsDateRange{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.statsMain{
  display: grid;
  gap: 14px;
}

/* Mobile-only row for the filter drawer toggle (desktop always shows sidebar). */
.statsMobileFilterRow{
  display: none;
  justify-content: flex-end;
}

.statsTopbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: #fff;
  backdrop-filter: blur(6px);
}

.statsTopbarLeft{
  display: grid;
  gap: 4px;
}

.statsTopbarRight{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.statsTopbarRight .secondary{
  white-space: nowrap;
}


.statsTrendNWrap{
  display: grid;
  gap: 4px;
  align-items: start;
}

.statsTrendN{
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255,255,255,0.9);
}

.statsContextRow{
  padding: 0 4px;
}

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

.statsKpiTrend{
  width: 18px;
  text-align: right;
}

/* Statistik-kort: gör trendpilarna större (2x) utan att påverka andra sidor. */
.statsKpiTrend.trendIcon{
  font-size: 28px;
  width: 36px;
}

.trendNeutralStats{ color: rgba(15, 23, 42, 0.55) !important; }

.statsQuickFilters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.statsFilterBtn{
  display: none;
}

.statsKpiGrid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.statsKpiCard{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 12px;
}

/* KPI cards that open a detail view */
.statsKpiCard[data-kpi="scoreVsPar"],
.statsKpiCard[data-kpi="fir"],
.statsKpiCard[data-kpi="gir"],
.statsKpiCard[data-kpi="scramble"],
.statsKpiCard[data-kpi="putts"]{
  cursor: pointer;
}
.statsKpiCard[data-kpi="scoreVsPar"]:hover,
.statsKpiCard[data-kpi="fir"]:hover,
.statsKpiCard[data-kpi="gir"]:hover,
.statsKpiCard[data-kpi="scramble"]:hover,
.statsKpiCard[data-kpi="putts"]:hover{
  border-color: rgba(15, 23, 42, 0.22);
}

.statsKpiValue{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.statsKpiLabel{
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}

.statsKpiBar{
  height: 6px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.12);
  margin-top: 10px;
  overflow: hidden;
}

.statsKpiBar i{
  display: block;
  height: 100%;
  width: 40%;
  /* Default is overridden per KPI via CSS variables (from Inställningar → Scorekort/Statistik) */
  background: var(--stats-kpi-default, rgba(34, 197, 94, 0.75));
}

/* Statistik: Putt-KPI uses an aggregated puttmap instead of the KPI bar */
.statsKpiPuttMap{
  margin-top: 10px;
  width: 100%;
  display: grid;
  place-items: center;
}
.statsKpiPuttMap .puttMapWrap{
  width: 100%;
  width: max-content;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: 0;
}
.statsKpiPuttMap .puttMapTip{
  font-size: 13px;
  max-width: 170px;
}

:root{
  /* Statistik KPI-färger (binds till Inställningar → Scorekort/Statistik via stats.js) */
  --stats-kpi-default: var(--stat-hit, rgba(34, 197, 94, 0.75));
  --stats-kpi-scoreVsPar: var(--stat-hit, rgba(34, 197, 94, 0.75));
  --stats-kpi-fir: var(--stat-hit, rgba(34, 197, 94, 0.75));
  --stats-kpi-gir: var(--stat-hit, rgba(34, 197, 94, 0.75));
  --stats-kpi-scramble: var(--stat-scramble, rgba(34, 197, 94, 0.75));
  --stats-kpi-sandSave: var(--stat-sand, rgba(34, 197, 94, 0.75));
  --stats-kpi-putts: rgba(34, 197, 94, 0.75);
  --stats-kpi-threePutt: rgba(224, 102, 102, 0.8);
  --stats-kpi-onePutt: rgba(109, 158, 235, 0.75);
}

/* Per-KPI mapping */
.statsKpiCard[data-kpi="scoreVsPar"] .statsKpiBar i{ background: var(--stats-kpi-scoreVsPar, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="fir"] .statsKpiBar i{ background: var(--stats-kpi-fir, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="gir"] .statsKpiBar i{ background: var(--stats-kpi-gir, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="scramble"] .statsKpiBar i{ background: var(--stats-kpi-scramble, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="sandSave"] .statsKpiBar i{ background: var(--stats-kpi-sandSave, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="putts"] .statsKpiBar i{ background: var(--stats-kpi-putts, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="threePutt"] .statsKpiBar i{ background: var(--stats-kpi-threePutt, var(--stats-kpi-default)); }
.statsKpiCard[data-kpi="onePutt"] .statsKpiBar i{ background: var(--stats-kpi-onePutt, var(--stats-kpi-default)); }

.statsCard{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 12px;
}

.statsCardHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.statsPlaceholder{
  border: 1px dashed rgba(15, 23, 42, 0.22);
  border-radius: 12px;
  padding: 14px;
  opacity: .85;
}

.statsChart{
  max-width: 100%;
  position: relative;
  min-height: 160px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.02);
  overflow: hidden;
}

@media (max-width: 820px){
  /* Mobil: ge trendgrafen mer höjd så den inte blir ihoptryckt */
  .statsChart{ height: clamp(280px, 45vh, 440px); }
  /* Mobil pan-läge: tillåt horisontell dragning i SVG utan att trigga sid-scroll på sidan */
  .statsChartPanX svg{ touch-action: pan-y; }
}


.statsPoint{
  cursor: pointer;
}

.statsPointTip{
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity 120ms ease;
  max-width: 220px;
  white-space: nowrap;
}

@media (max-width: 820px){
  .statsPointTip{
    font-size: 8.5px; /* -30% on mobile */
  }
}

.statsPointTip.isOpen{
  opacity: 1;
}

.statsPointTip b{
  font-weight: 700;
}

.statsPointTip:after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(15, 23, 42, 0.92);
}

.statsChart svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* ScrollX: låt SVG vara bredare än viewporten så bara grafen kan sidoscrollas */
.statsChart.statsChartScrollX svg{
  width: auto;
}

.statsDist{
  padding: 10px;
}

.statsDistRow{
  display: grid;
  grid-template-columns: 78px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.statsDistLabel{
  font-size: 12px;
  color: rgba(15, 23, 42, 0.82);
}

.statsDistBar{
  height: 8px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.statsDistBar i{
  display: block;
  height: 100%;
  width: 0;
  background: rgba(34, 197, 94, 0.75);
}

.statsDistVal{
  text-align: right;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.72);
}

.statsTwoCol{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.statsOverlay{
  display: none;
}

/* --- Fördjupad vy (inline under KPI-korten) --- */
.statsDetailInline{
  margin-top: 14px;
}

/* Score-detaljer: trend till vänster, fördelning till höger (Desktop). */
.statsDetailScoreGrid{
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.statsDetailScoreTrendCard{ flex: 2 1 0; }
.statsDetailScoreDistCard{ flex: 1 1 0; }
}
/* Se till att båda stapelgrupperna kan fylla sin kolumn */
.statsDetailMiniGroup{
  min-width: 0;
}


/* Scramble: ge högerkolumnen mer utrymme så staplarna behåller samma bredd som tidigare */
/* Scramble: två stapelgrupper sida vid sida (desktop) */
.statsDetailTwoUp{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  justify-items: stretch;
}

.statsDetailTwoUp .statsDetailMiniGroup{
  width: 100%;
}

.statsDetailTwoUp .statsDetailMiniGroup > div{
  width: 100%;
}
@media (max-width: 900px){
  .statsDetailTwoUp{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  /* Mobil: förhindra sidbredd-läckage utan att klämma layouten.
     (Ingen ändring på desktop – allt ligger under denna media query.) */
  html, body{ overflow-x: hidden; }

  /* Anti-stretch (mobil): säkerställ att inga kort/panels kan bli bredare än viewport
     även om ett barn (t.ex. en bred SVG) har stor min-content width. */
  .statsPanel,
  .statsPanelInner,
  .statsCards,
  .statsCard,
  .statsDetailCard,
  .statsDetailSection,
  .statsDetailGrid,
  .statsDetailTwoUp{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Viktigt: även själva chart-host måste få krympa i flex/grid */
  .statsChart{
    min-width: 0;
  }
  .statsChartScrollInner{
    min-width: 0;
    max-width: 100%;
  }
  .statsChartScrollInner > svg{
    flex: 0 0 auto;
    max-width: none;
  }


  /* Viktigt i flex/grid: tillåt barn att krympa.
     Utan detta kan en bred SVG (min-content) blåsa upp hela sidan. */
  .statsDetailScoreGrid > *,
  .statsDetailGrid > *,
  .statsDetailTwoUp > *,
  .statsDetailCard,
  .statsCard{
    min-width: 0;
  }

  /* Variant 3 (mobil): panorera horisontellt INUTI SVG via viewBox.
     Detta undviker att en bred SVG kan läcka upp och göra hela sidan bred. */
  .statsChart.statsChartPanX{
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* yttre box får aldrig påverka sidbredd */
    /* Mobil: gör trendgrafen markant högre (ca ~2x) så den blir läsbar */
    height: clamp(320px, 48vh, 480px);
  }

  .statsChart.statsChartPanX svg{
    touch-action: pan-y; /* tillåt vertikal scroll på sidan, vi fångar horisontell dragning i JS */
  }

  /* Mobil: tooltip ska vara lättläst och större */
  .statsChart.statsChartPanX .statsPointTip{
    /* Minska hover/tooltip-texten på mobilen med ~30% */
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 16px;
    max-width: 420px;
  }

  /* Scroll-indikator: fade + pil på högerkanten (syns när vi är vid start) */
  .statsChart.statsChartPanX[data-scroll-start]::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,0.92), rgba(255,255,255,0));
  }
  .statsChart.statsChartPanX[data-scroll-start]::before{
    content: "›";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 22px;
    line-height: 1;
    color: rgba(15, 23, 42, 0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  }

  /* Enkel "track" längst ned som visar att grafen kan dras i sidled */
  .statsChartPanTrack{
    position: absolute;
    left: 14px;
    right: 14px;
    /* Lägg tracken längre ned så den inte hamnar mitt i X-axelns värden. */
    bottom: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    pointer-events: none;
  }
  .statsChartPanTrack > i{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.22);
  }

  /* Mobil pan-graf: låt sidan fortsätta scrolla vertikalt.
     Horisontell pan hanteras i JS och aktiveras först efter direction-lock. */
  .statsChart.statsChartPanX{
    touch-action: pan-y;
  }
}
.statsDetailTwoUp .statsDetailSubGroupTitle{ margin-top: 0; }

/* Scramble KPI-detalj: gör staplarna i "Resultat efter miss" lika smala som gruppen bredvid */
#statsDetailScrambleOutcome .statsVBar{
  justify-self: center;
  width: min(100%, 72px);
}



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

.statsDetailInline.hidden{
  display: none;
}

.statsDetailInline .statsDetailPanel{
  width: 100%;
  max-width: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

@media (max-width: 900px){
  .statsDetailInline{ margin-top: 12px; }
}


/* --- Fördjupad vy (modal/panel) --- */
.statsDetailOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}

.statsDetailOverlay.hidden{
  display: none;
}

.statsDetailPanel{
  width: min(1100px, 100%);
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  overflow: hidden;
}

.statsDetailHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

.statsDetailTitleWrap{ display:flex; flex-direction:column; gap:2px; }
.statsDetailTitle{ font-weight: 700; font-size: 16px; color: rgba(15, 23, 42, 0.92); }
.statsDetailSub{ font-size: 12px; color: rgba(15, 23, 42, 0.62); }

.statsDetailClose{
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
}

.statsDetailBody{
  padding: 14px;
}

.statsDetailGrid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.statsVBarChart{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 10px;
}

.statsVBar{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.statsVBarCol{
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
  display:flex;
  align-items: flex-end;
}

.statsVBarFill{
  width: 100%;
  height: 0;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.75);
  display:flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  box-sizing: border-box;
}

.statsVBarPct{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.92);
  /* No pill background behind the percentage label */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.statsVBarCount{
  font-size: 12px;
  color: rgba(15, 23, 42, 0.80);
  font-weight: 700;
}

.statsVBarLabel{
  font-size: 11px;
  color: rgba(15, 23, 42, 0.64);
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
}

/* Scorefördelning: trendpilar under antal */
.statsVBarTrend{
  margin-left: 0; /* override .trendIcon default */
  width: 16px;
}

/* Scorefördelning (Statistik): större trendpilar (2x). */
.statsVBarTrend.trendIcon{
  font-size: 28px;
  width: 32px;
}

@media (max-width: 900px){
  .statsDetailOverlay{ padding: 10px; }
  .statsDetailGrid{ grid-template-columns: 1fr; }
  .statsVBarCol{ height: 140px; }
  .statsVBarChart{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Responsive: collapse sidebar into a drawer */
@media (max-width: 900px){
  /* Mobile readability: add a brighter base surface so the translucent
     cards/panels don't blend into the dark page background. */
  .statsPage{
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 18px;
    padding: 12px;
  }

  /* Make the filter drawer/panel fully opaque on mobile (desktop can stay slightly translucent). */
  .statsSidebar{
    background: rgba(255,255,255,0.99);
  }

  /* On mobile: reduce the perceived "dark" background by placing the
     results area on a light surface. */
  .statsMain{
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    padding: 12px;
  }

  /* Keep cards readable even when the main container is light. */
  .statsTopbar,
  .statsKpiCard,
  .statsCard{
    background: rgba(255,255,255,0.96);
  }

  /* Drawer: make it fully opaque on mobile for max contrast. */
  .statsSidebar{
    background: rgba(255,255,255,0.98);
  }

  .statsPage{
    grid-template-columns: 1fr;
  }

  .statsFilterBtn{
    display: inline-flex;
  }

  .statsMobileFilterRow{
    display: flex;
    margin-bottom: 2px;
  }

  .statsSidebar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 92vw);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 1001;
    border-radius: 0 16px 16px 0;
    overflow: auto;
    padding-bottom: 18px;
  }

  body.statsFiltersOpen .statsSidebar{
    transform: translateX(0);
  }

  .statsOverlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    display: none;
  }

  body.statsFiltersOpen .statsOverlay{
    display: block;
  }

  .statsKpiGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statsTwoCol{
    grid-template-columns: 1fr;
  }

  .statsDetailGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .statsKpiGrid{
    grid-template-columns: 1fr;
  }
}


/* ===== Awards (Utmärkelser) ===== */

/* Give the Awards "island" some outer padding so the global background shows around it
   (matches the spacing used on other pages like Statistik). */
#viewAwards{
  /* Align the Awards "ö" with the other pages: rely on the global .container
     margins/padding rather than adding extra inset here. */
  padding: 0;
}
#viewAwards .container{
  /* Match the global .container rhythm (same as Statistik) */
  margin-top: 0;
}

/* Desktop: keep the same top rhythm as Statistik.
   We rely on the global .container padding (10px) for the gap under the header,
   so do not apply any extra pull-up/offset here. */
@media (min-width: 721px){
  #viewAwards{ margin-top: 0; }
}


@media (max-width: 720px){
  #viewAwards{ padding: 0; }
}

.awardsHeader{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:12px;
}
.awardsTitle{
  margin:0;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.awardsSummary{
  margin-top:0;
  opacity:.95;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  color: #fff;
}

.awardsSummary:focus{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}
.awardsRoot{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.awardsCategoryTitle{
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  padding: 2px 2px;
}

.awardsGrid{
  margin-top:10px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* AWARDS: subtle wood background behind tiles (removes the white panel feel) */
#viewAwards .card{
  /* Darker + much lower contrast grain (avoid "stripy" look) */
  background-color: #2f1f14;
  background-image:
    /* faint plank grain */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.006) 0px,
      rgba(255,255,255,.004) 22px,
      rgba(0,0,0,.010) 44px,
      rgba(0,0,0,.004) 70px
    ),
    /* tiny cross-grain to break up banding */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.003) 0px,
      rgba(255,255,255,.000) 24px,
      rgba(0,0,0,.006) 48px
    ),
    /* soft vignette so plaques pop */
    radial-gradient(140% 140% at 50% 0%, rgba(255,255,255,.05), rgba(0,0,0,.34));
  border: 1px solid rgba(0,0,0,.35);
  position: relative;
}

/* soften the wood so text stays readable */
#viewAwards .card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  /* soften and unify the surface */
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
  pointer-events:none;
}

#viewAwards .card > *{ position: relative; }

/* Tighter header spacing so the awards island aligns with other pages */
#viewAwards .card-title{
  margin: 0 0 10px 0;
}

/* Make the area around the plaque take the same background (no white) */
#viewAwards .awardCard{
  background: transparent;
}
@media (min-width: 760px){
  .awardsGrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
}
@media (min-width: 1100px){
  .awardsGrid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1400px){
  .awardsGrid{ grid-template-columns:repeat(10, minmax(0, 1fr)); }
}

.awardCard{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Title shown below the plaque: brass plate style for readability */
.awardCaption{
  display:block;
  text-align:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.30);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,232,165,.85) 28%,
      rgba(204,165,72,.90) 60%,
      rgba(120,86,24,.92) 100%
    );
  box-shadow:
    0 2px 10px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(0,0,0,.18);
  color: rgba(22,18,10,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  user-select:none;
}

.awardPlaque,
.awardTile{
  position:relative;
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 2 / 3;
  border:0;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.awardPlaque:active,
.awardTile:active{
  transform: translateY(1px);
}
.awardPlaque.isLocked,
.awardTile.isLocked{
  filter: grayscale(1) contrast(.95) brightness(.85);
}
.awardTile.isLocked::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);
}

.awardMid{
  position:absolute;
  left:11%;
  right:11%;
  top:34%;
  height:34%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  padding: 0 8px;
  pointer-events:none;
}
.awardMidTitle{
  font-weight:800;
  letter-spacing:.14em;
  font-size: 12px;
}
.awardMidDesc{
  font-weight:600;
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line;
  max-width: 100%;
  padding: 0 14px;
}


.awardCountBadge{
  position: relative;
  left:auto;
  top:auto;
  transform:none;
  display:inline-block;
  margin:0;
  padding:4px 10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  font-size:11px; /* 2px smaller than mid text (13px) */
  font-weight:600;
}

/* Row that sits right under the plaque (between image and brass title button) */
.awardBadgeRow{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  /* Slot between plaque and button */
  height: 44px;
  /* Pull the slot up so the badge sits centered in the gap under the plaque */
  margin-top:-46px;
  margin-bottom:6px;
}

.awardBadgeRow.isEmpty{
  visibility: hidden; /* keep spacing but hide content */
}
.awardMidMeta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size: 14px;
  opacity:.92;
}

.awardMidRow{
  line-height: 1.15;
}

/* Bottom brass plate text (date) */
.awardPlate{
  position:absolute;
  left: 19%;
  right: 19%;
  /* Higher value = moves the text up into the brass plate */
  /* Move up into the brass plate */
  bottom: calc(18.3% + 2px);
  height: 6.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  font-size: 14px;
  color: rgba(20,18,14,.88);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  pointer-events:none;
  user-select:none;
}

.awardRibbon{
  position:absolute;
  left:12%;
  right:12%;
  bottom:10.5%;
  height:12%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 10px;
  font-weight:800;
  font-size: 13px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
  pointer-events:none;
}
@media (max-width: 380px){
  .awardRibbon{ font-size:12px; }
}

/* Modal */
.awardOverlay{
  position:fixed;
  inset:0;
  z-index: 9999;
  background: rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.awardModal{
  width:100%;
  max-width: 560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Tighten spacing under the plaque so badge + name sits closer (mobile + desktop) */
  gap: 6px;
}
.awardModalPlaque{
  width: min(92vw, 520px);
  aspect-ratio: 2 / 3;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.awardModalPlaque.isLocked{
  filter: grayscale(1) contrast(.95) brightness(.85);
}
.awardModalMid{
  position:absolute;
  left:10%;
  right:10%;
  /* Center text within the chalkboard area (visual center of the green surface) */
  /* Fine-tune vertical placement: move content slightly upward within the green area */
  top:27%;
  bottom:28%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 10px;
  color: rgba(255,255,255,.97);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}
.awardModalTitle{
  font-weight:900;
  font-size: 28px;
}
.awardModalDesc{
  font-size: 24px;
  opacity:.95;
  white-space: pre-line;
}
.awardModalMeta{
  font-size: 24px;
  opacity:.92;
}

.awardModalPlate{
  position:absolute;
  left: 19%;
  right: 19%;
  /* Higher value = moves the text up into the brass plate */
  /* move the date up so it sits inside the brass plate */
  bottom: calc(18.2% + 6px);
  height: 6.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
  font-size: 26px;
  color: rgba(20,18,14,.88);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  pointer-events:none;
  user-select:none;
}

.awardModalPlateLink{
  pointer-events:auto;
  cursor:pointer;
}

/* (avoid duplicate #viewAwards .card rules below; handled in main Awards section) */

.awardModalState{
  font-weight:900;
  letter-spacing:.14em;
  font-size: 13px;
  opacity:.98;
}

.awardModalRibbon{
  position:absolute;
  left:12%;
  right:12%;
  bottom:10.5%;
  height:12%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 14px;
  font-weight:900;
  font-size: 16px;
  color: rgba(255,255,255,.97);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  pointer-events:none;
}

.awardProgressWrap{
  margin-top: 6px;
}
.awardProgressLabel{
  font-size: 12px;
  opacity:.92;
  margin-bottom: 6px;
}
.awardProgressBar{
  height: 10px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
  overflow:hidden;
}
.awardProgressFill{
  height: 100%;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
}

.awardCloseBtn{
  width: min(92vw, 520px);
}

.awardRibbon{ display:none !important; }

.awardModalRibbon{ display:none !important; }

.awardModalCaption{
  margin-top:0;
  text-align:center;
  padding: 12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  font-size: 26px;
  line-height: 1.25;
}

/* Badge row for the detail modal (sits under plaque, above the nameplate) */
.awardModalBadgeRow{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100%;
  height: 64px;
  /* Pull the badge up into the gap under the plaque, like overview */
  margin-top: -66px;
  margin-bottom: -2px;
}
.awardModalBadgeRow.isEmpty{
  visibility: hidden;
}

/* Make modal badge easier to read (do not affect overview tiles) */
.awardModalBadgeRow .awardCountBadge{
  font-size: 20px;
  padding: 10px 20px;
  border-width: 1px;
}

@media (max-width: 420px){
  .awardModalCaption{ font-size: 24px; }
  .awardModalBadgeRow{ margin-top: -60px; }
}

.award-category{margin:24px 0 8px;font-weight:600;opacity:.8}
.award-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}


/* Utmärkelser: klickbart datum i plakett */
.awardPlate.awardPlateLink { pointer-events: auto; cursor: pointer; }
.awardPlate.awardPlateLink:hover { filter: brightness(1.05); }


/* Awards: extra info lines inside plaque */
.awardMidExtra{
  margin-top:6px;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  opacity:0.95;
}

.awardModalExtra{
  margin-top:10px;
  text-align:center;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.awardModalExtraLine{
  font-size:14px;
  line-height:1.25;
  margin-top:4px;
}

/* --- Auth UI (Patch 3) --- */

.authUserBadge{
  position: absolute;
  top: 14px;
  right: 16px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:#d7e2ff;
  opacity:0.95;
}
.authUserBadge.hidden{ display:none; }
.authLogoutBtn{
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
.authLogoutBtn:hover{ background: rgba(0,0,0,0.35); }

.authOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, 0.75);
  backdrop-filter: blur(6px);
  z-index: 5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.authOverlay.hidden{ display:none; }
.authModal{
  width: min(520px, 100%);
  background: rgba(9, 14, 26, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.45);
}
.authTitle{ font-size:18px; font-weight:800; color:#fff; margin-bottom:6px; }
.authSub{ font-size:12px; color: rgba(255,255,255,0.75); margin-bottom:12px; }
.authErr{
  background: rgba(255, 80, 80, 0.14);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: rgba(255,255,255,0.92);
  padding: 10px 10px;
  border-radius: 12px;
  font-size: 12px;
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.authErr.hidden{ display:none; }
.authForm.hidden{ display:none; }
.authRow{ margin-bottom: 10px; }
.authRow label{ display:block; font-size:12px; color: rgba(255,255,255,0.85); margin-bottom:6px; }
.authRow input, .authRow textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  padding: 10px 12px;
  outline: none;
}
.authRow input::placeholder, .authRow textarea::placeholder{ color: rgba(255,255,255,0.45); }
.authRow input:-webkit-autofill,
.authRow input:-webkit-autofill:hover,
.authRow input:-webkit-autofill:focus,
.authRow textarea:-webkit-autofill,
.authRow textarea:-webkit-autofill:hover,
.authRow textarea:-webkit-autofill:focus{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  caret-color:#111827;
}
.authRow textarea{ resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.authHint{ font-size:11px; color: rgba(255,255,255,0.60); margin-top:6px; }
.authActions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-start;
  margin-top: 8px;
}
.authPrimary{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.authPrimary:hover{ background: rgba(255,255,255,0.16); }
.authLink{
  border:none;
  background: transparent;
  color: rgba(180, 205, 255, 0.95);
  cursor:pointer;
  font-weight:700;
  padding: 8px 6px;
}
.authLink:hover{ text-decoration: underline; }


/* Admin users table actions */
.adminActions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.adminBtnTiny{
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.adminBadge{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background: rgba(255,255,255,0.14);
  color: rgba(20,20,20,0.95);
}
.adminBadgeDanger{
  background: rgba(255, 80, 80, 0.85);
  color:#111;
}
.adminBadgeWarn{
  background: rgba(255, 200, 80, 0.95);
  color:#111;
}


/* Admin: Inbjudningskod / Recovery layout */
.adminGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .adminGrid2{ grid-template-columns: 1fr; }
}
.adminInviteRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.adminInviteInput{
  width: clamp(160px, 33%, 260px);
}