/* ============================================================
   Træningslog — stylesheet
   Brand: lapis blue #15307E. Responsive: laptop + phone.
   Grows over later milestones; M1 covers shell, login, cards.
   ============================================================ */
:root{
  --brand:#15307E; --brand-mork:#0D1F58;
  --groen:#2E7D32; --groen-bg:#DAF2D0;
  --gul-bg:#FFE699;
  --tekst:#1a1a1a; --svag:#6b6b6b;
  --bg:#ececf0; --kant:#dcdce0; --kort-kant:#e3e3e3;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--tekst); line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100%;
}

/* --- Top bar --- */
/* Topbar + navbar er fastgjort i toppen på ALLE skærme, så logo og menu
   ikke scroller væk. Højderne måles til --topbar-h/--navbar-h af JS i
   footer.php; .container får et matchende top-offset (se nedenfor). */
.topbar{background:var(--brand); color:#fff; position:fixed; top:0; left:0; right:0; z-index:30;}
.topbar-inner{
  max-width:980px; margin:0 auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  color:#fff; text-decoration:none; font-weight:800; font-size:18px; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:8px;
}
.brand-text{ color:#fff; }
.brand-mark{
  width:28px; height:28px; display:block;
  /* Lægger sig pænt på den brand-blå topbar — hvid silhouette på blå. */
}
.topbar-env-badge{
  display:inline-block; padding:2px 8px;
  background:#FFD43B; color:#1A1A1A;
  font-size:11px; font-weight:800; letter-spacing:.08em;
  border-radius:4px;
  margin-left:4px;
}
.topbar-user{display:flex; align-items:center; gap:14px; font-size:14px;}
.topbar-name{font-weight:600; opacity:.92;}
.logout{
  color:#fff; text-decoration:none; font-weight:700; font-size:13px;
  border:1.5px solid rgba(255,255,255,.5); border-radius:8px; padding:5px 11px;
}
.logout:hover{background:rgba(255,255,255,.12);}

/* Sprog-toggle (DA|EN) i topbar — sidder mellem trænernavnet og Log ud.
   Det aktive sprog er fast tekst; det andet er en mikro-form med
   submit-knap stylet som link så et klik flipper sproget og lander
   tilbage på samme side via return_to. */
.lang-toggle{ display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.lang-toggle-form{ display:inline; margin:0; padding:0; }
.lang-toggle-active{ color:#fff; font-weight:700; }
.lang-toggle-link{
  background:none; border:0; padding:0; cursor:pointer;
  color:#fff; opacity:.55; font:inherit; font-weight:600;
}
.lang-toggle-link:hover{ opacity:1; text-decoration:underline; }
.lang-toggle-sep{ color:rgba(255,255,255,.5); }

/* Phone: tighten the brand bar — shrink padding + gap så brand + client
   chip + user + log-out passer på en smal viewport. Brand-wordmarket
   skjules under 520px så kun mark'en bærer brand-identiteten. */
@media (max-width:520px){
  .topbar-inner{ padding:8px 12px; gap:8px; }
  .brand{ font-size:16px; }
  .brand-text{ display:none; }
  .topbar-user{ gap:8px; }
  .topbar-client{ font-size:12px; gap:4px; }
}

/* --- Layout --- */
.container{
  flex:1; width:100%; max-width:980px; margin:0 auto;
  /* Top-offset = de fastgjorte topbar + navbar (måles af JS; fallback her). */
  padding:calc(var(--topbar-h,52px) + var(--navbar-h,46px) + 16px) 18px 40px;
}
.appfoot{
  text-align:center; color:var(--svag); font-size:12px;
  padding:18px; letter-spacing:.3px;
}

/* --- Centred pages (login, setup) --- */
body.centered{
  align-items:center; justify-content:center; padding:24px;
}

/* --- Cards --- */
.card{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  padding:22px 22px; margin-bottom:18px;
}
.card h1{font-size:22px; font-weight:800; margin-bottom:8px;}
.login-card{width:100%; max-width:380px; margin:0;}
.login-brand{
  font-weight:800; font-size:22px; color:var(--brand);
  text-align:center; margin-bottom:22px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.login-mark{
  width:96px; height:96px; display:block;
}
.login-brand-text{ display:block; }

/* --- Forms --- */
.field{display:block; margin-bottom:14px;}
.field > span{
  display:block; font-size:12px; font-weight:700; color:var(--svag);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
.field input{
  width:100%; padding:11px 12px; font-size:16px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:10px; background:#fff; color:var(--tekst);
}
.field input:focus{outline:none; border-color:var(--brand); background:#f4f7fc;}
/* Skrivebeskyttet felt-værdi (fx måle-enhed på en System-øvelse) — ser ud som
   et deaktiveret felt. */
.readonly-value{
  margin:0; padding:11px 12px;
  border:1.5px solid var(--kant); border-radius:10px;
  background:#f4f4f6; color:var(--svag); font-size:16px;
}

/* --- Buttons --- */
.btn{
  display:inline-block; padding:8px 14px; font-size:14px; font-weight:800;
  font-family:inherit; border:none; border-radius:10px; cursor:pointer;
  text-decoration:none; text-align:center;
}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-mork);}
.btn-block{width:100%; margin-top:4px;}

/* --- Alerts --- */
.alert{
  padding:11px 13px; border-radius:10px; font-size:14px; font-weight:600;
  margin-bottom:16px;
}
.alert-error{background:#FFC7CE; color:#9C0006;}
.alert-ok{background:var(--groen-bg); color:var(--groen);}
.alert-warning{
  background:#fff5d6; color:#7a5a00;
  padding:11px 13px; border-radius:10px; font-size:14px;
  border:1px solid #f0d97a;
  margin-bottom:10px;
}

/* --- Misc --- */
.muted{color:var(--svag); font-size:14px;}
code{
  background:#f2f2f2; padding:1px 6px; border-radius:5px;
  font-size:90%; font-family:Consolas,Menlo,monospace;
}
a{color:var(--brand);}

/* --- Wider screens: a touch more breathing room --- */
/* OBS: top-offset skal stadig rumme de faste topbar+navbar — sæt derfor
   IKKE en flad padding-top her (det klemmer indholdet op under bjælkerne på
   PC/iPad). Læg luften oven på bjælke-offsettet. */
@media (min-width:700px){
  .container{padding-top:calc(var(--topbar-h,52px) + var(--navbar-h,46px) + 24px);}
  .card{padding:26px 28px;}
}

/* ============================================================
   Milestone 2 additions — navbar, tables, builder, buttons
   ============================================================ */

/* --- Navbar (under topbar) --- */
.navbar{background:#fff; border-bottom:1px solid var(--kant); position:fixed; top:var(--topbar-h,52px); left:0; right:0; z-index:29;}
.navbar-inner{
  max-width:980px; margin:0 auto; padding:0 18px;
  display:flex; gap:6px;
  /* overflow:visible (ikke overflow-x:auto) — ellers klipper scroll-containeren
     "Mere"-dropdownen på bred skærm. Med kun primære faner + Mere er der ingen
     vandret overflow at scrolle alligevel. */
  overflow:visible;
}
.navbar a{
  display:inline-block; padding:11px 14px; color:var(--tekst);
  text-decoration:none; font-weight:700; font-size:14px;
  border-bottom:3px solid transparent; white-space:nowrap;
}
.navbar a:hover{color:var(--brand);}
.navbar a.aktiv{color:var(--brand); border-bottom-color:var(--brand);}

/* "Mere"-overflow: sekundære faner vises inline når der er bredde, ellers
   samlet under en "Mere"-dropdown. Bredde-styret (ikke orientering) — alt er
   altid nåbart. Se docs/Design.md "Navigation er appens ansvar". */
.nav-more{ display:flex; flex:none; position:relative; }
.nav-more > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  padding:11px 14px; font-weight:700; font-size:14px;
  color:var(--tekst); border-bottom:3px solid transparent; white-space:nowrap;
}
.nav-more > summary::-webkit-details-marker{ display:none; }
.nav-more > summary:hover{ color:var(--brand); }
.nav-more.has-active-sec > summary{ color:var(--brand); border-bottom-color:var(--brand); }
.nav-more-caret{ font-size:10px; opacity:.85; }
.nav-more-panel{
  position:absolute; right:0; top:calc(100% + 4px); z-index:60;
  min-width:170px; background:#fff;
  border:1px solid var(--kant); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px;
  display:flex; flex-direction:column;
}
.nav-more-panel a{
  display:block; padding:9px 12px; border-radius:7px; border-bottom:none;
  color:var(--tekst); text-decoration:none; font-weight:700; font-size:14px;
  white-space:nowrap;
}
.nav-more-panel a:hover{ background:var(--bg); color:var(--brand); }
/* Log ud nederst i Mere — adskilt med en tynd linje. */
.nav-more-logout{ border-top:1px solid var(--kant); margin-top:4px; color:var(--svag) !important; }
/* Diskret log ud nederst på Forside. */
.forside-logout{ text-align:center; margin:18px 0 4px; }
.forside-logout a{ color:var(--svag); text-decoration:none; font-size:13px; font-weight:700; }
.forside-logout a:hover{ color:var(--brand); }
.nav-more-panel a.aktiv{ background:var(--bg); color:var(--brand); }
/* Smal skærm (portrait-telefon): saml sekundære under "Mere". overflow:visible
   så dropdown-panelet ikke klippes af navbar-innerens scroll-container. */
@media (max-width:760px){
  /* Smal skærm: jævn tab-bar der fylder bredden — ingen scroll. Primære faner
     (Forside/Træning/Historik) + "Mere" deler pladsen ligeligt; alt andet
     (inkl. Krop) ligger under "Mere". overflow:visible er trygt fordi cellerne
     flex'er til at passe (intet overflow), så dropdownen heller ikke klippes. */
  .navbar-inner{ overflow:visible; gap:0; padding:0; }
  .navbar a.nav-sec{ display:none; }
  .navbar-inner > a,
  .navbar-inner > .nav-more{ flex:1 1 0; min-width:0; }
  .navbar-inner > a{ text-align:center; padding:11px 4px; }
  .nav-more{ display:flex; }
  .nav-more > summary{ flex:1; justify-content:center; padding:11px 4px; gap:3px; }
}

/* Opsætning sub-tabs (same visual language as the top nav, scoped to a section) */
.setup-tabs{
  display:flex; gap:2px;
  margin:0 0 14px 0; padding:0;
  border-bottom:1px solid var(--kant);
  overflow-x:auto;
}
.setup-tab{
  display:inline-block; padding:8px 14px;
  color:var(--svag); text-decoration:none;
  font-weight:700; font-size:14px;
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  transition:color .12s, border-color .12s;
}
.setup-tab:hover{ color:var(--tekst); }
.setup-tab.aktiv{ color:var(--brand); border-bottom-color:var(--brand); }

/* Glow the Træning nav while a training is in progress: layered
   brand-farvede text-shadows giver ordet selv et åndende halo der
   hugger bogstaverne (ingen firkantet boks). På Træning selv er den
   aktive underline undertrykt så glow'en alene koder som "live".
   Bruger color-mix() til at fade brand-farven mod transparent. */
.navbar a.has-active-training{
  position:relative;
  color:var(--brand);
  animation:training-pulse 2.1s ease-in-out infinite;
}
.navbar a.has-active-training.aktiv{
  border-bottom-color:transparent;
  color:var(--brand);
}
@keyframes training-pulse{
  0%, 100% {
    text-shadow:
      0 0 3px color-mix(in srgb, var(--brand) 55%, transparent),
      0 0 8px color-mix(in srgb, var(--brand) 30%, transparent);
  }
  50% {
    text-shadow:
      0 0 5px  color-mix(in srgb, var(--brand) 95%, transparent),
      0 0 12px color-mix(in srgb, var(--brand) 70%, transparent),
      0 0 22px color-mix(in srgb, var(--brand) 40%, transparent);
  }
}
@media (prefers-reduced-motion: reduce){
  .navbar a.has-active-training{
    animation:none;
    text-shadow:
      0 0 4px color-mix(in srgb, var(--brand) 75%, transparent),
      0 0 10px color-mix(in srgb, var(--brand) 45%, transparent);
  }
}

/* --- Headings inside content --- */
h1{font-size:24px; font-weight:800; margin-bottom:14px;}
h2{font-size:17px; font-weight:800; margin-bottom:14px;}

/* --- 2-col form grid (collapses on phone) --- */
.grid-2{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:560px){ .grid-2{grid-template-columns:1fr 1fr;} }
.grid-3{display:grid; grid-template-columns:1fr; gap:0 16px;}
@media (min-width:560px){ .grid-3{grid-template-columns:1fr 1fr 1fr;} }

/* --- Textareas --- */
.field textarea{
  width:100%; padding:11px 12px; font-size:15px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:10px; background:#fff; color:var(--tekst);
  resize:vertical; min-height:70px;
}
.field textarea:focus{outline:none; border-color:var(--brand); background:#f4f7fc;}

/* --- Form actions row --- */
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px;}

/* --- Hints / inline help --- */
.hint{font-size:12px; color:var(--svag); margin-top:5px;}
.hint-warn{color:#9C0006; font-weight:700;}

/* Wrapper for wide tables — scrolls only the table, not the page.
   On desktop the table fits inside the card and the wrapper is invisible;
   below the table's natural width a scrollbar appears inside the wrapper. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Phone: reflow .table-scroll'd tables as a stack of cards.
   Cells with a data-label get a small uppercase label on the left,
   value on the right (flex space-between). The row-action cell sits
   at the bottom of each card; the chevron cell is hidden. */
@media (max-width:720px){
  .table-scroll{ overflow:visible; }
  .table-scroll table.list{ display:block; }
  .table-scroll table.list thead{ display:none; }
  .table-scroll table.list tbody{ display:block; }
  .table-scroll table.list tr{
    display:block;
    margin-bottom:10px;
    padding:12px 14px;
    background:#fff;
    border:1.5px solid var(--kort-kant);
    border-radius:10px;
  }
  .table-scroll table.list tr:last-child{ margin-bottom:0; }
  .table-scroll table.list td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:3px 0;
    border:none;
    text-align:left;
    font-size:14px;
  }
  .table-scroll table.list td[data-label]:before{
    content:attr(data-label);
    font-weight:700; color:var(--svag);
    text-transform:uppercase; letter-spacing:.3px;
    font-size:11px;
    flex:0 0 auto;
  }
  .table-scroll table.list td.row-chev,
  .table-scroll table.list td.drag-cell{ display:none; }
  .table-scroll table.list td.row-action{
    justify-content:flex-end;
    margin-top:10px; padding-top:10px;
    border-top:1px solid var(--kant);
  }

  /* Aftale-listen beholder ægte tabel-rækker på mobil — kun
     3 kolonner (dato/tid/hvor) + chevron, og det får plads.
     Partner + noter (klasse .appt-col-extra) skjules — de ses
     i rediger-formen når man klikker en række. */
  .table-scroll table.list.appt-list{ display:table; }
  .table-scroll table.list.appt-list thead{ display:table-header-group; }
  .table-scroll table.list.appt-list tbody{ display:table-row-group; }
  .table-scroll table.list.appt-list tr{
    display:table-row;
    margin:0; padding:0;
    background:transparent; border:none; border-radius:0;
  }
  .table-scroll table.list.appt-list td{
    display:table-cell;
    padding:9px 6px;
    border:none; border-bottom:1px solid #eee;
    text-align:left;
  }
  .table-scroll table.list.appt-list td[data-label]:before{ content:none; }
  .table-scroll table.list.appt-list .appt-col-extra,
  .table-scroll table.list.appt-list th.appt-col-extra{ display:none; }
  .table-scroll table.list.appt-list td.row-chev{
    display:table-cell;
    width:18px; padding-right:0;
    color:var(--svag); text-align:right;
  }

  /* Generisk: behold ægte tabel-rækker på mobil (måle-log, historik) i stedet
     for kort-reflow — ensartet med PC. Vandret scroll hvis for bredt. */
  .table-scroll.table-scroll-rows{ overflow-x:auto; }
  .table-scroll table.list.list-rows{ display:table; }
  .table-scroll table.list.list-rows thead{ display:table-header-group; }
  .table-scroll table.list.list-rows tbody{ display:table-row-group; }
  .table-scroll table.list.list-rows tr{
    display:table-row; margin:0; padding:0; border:none; border-radius:0;
  }
  .table-scroll table.list.list-rows td{
    display:table-cell; padding:9px 5px;
    border:none; border-bottom:1px solid #eee; text-align:left;
  }
  .table-scroll table.list.list-rows td.r,
  .table-scroll table.list.list-rows th.r{ text-align:right; }
  .table-scroll table.list.list-rows td[data-label]:before{ content:none; }
  .table-scroll table.list.list-rows td.row-chev{
    display:table-cell; width:16px; padding-right:0;
    color:var(--svag); text-align:right;
  }
}

/* --- Generic data tables --- */
table.list, table.builder{width:100%; border-collapse:collapse;}
table.list th, table.list td{
  text-align:left; padding:9px 8px; border-bottom:1px solid #eee; font-size:14px; vertical-align:top;
}
table.list th{font-size:12px; text-transform:uppercase; color:var(--svag); font-weight:700; letter-spacing:.3px;}
table.list th a.sortable{
  color:inherit; text-decoration:none;
  display:inline-block; padding:2px 0;
}
table.list th a.sortable:hover{ color:var(--brand); }
table.list th a.sortable.sortable-active{ color:var(--brand); }
table.list .r, table.list th.r{text-align:right;}
table.list tr:last-child td{border-bottom:none;}
/* Kap en kolonne til én linje med "…" (fx Rutine-navn). max-width:0 lader
   cellen tage den resterende plads og trunkere; de andre kolonner er
   indholds-bredde. */
table.list td.td-ellip{ max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Zebra-striber på list-rows-tabeller (måle-log, historik) — som i Bottega.
   Hover på klikbare rækker vinder over zebra. */
table.list.list-rows tbody tr:nth-child(even){ background:#eceef3; }
table.list.list-rows tr.row-link:hover{ background:#e2e5ed; }
/* Enhed på egen linje, centreret under kolonne-overskriften (fx "(kg)"). */
.col-unit{ display:block; text-align:center; font-weight:400; font-size:11px; }
/* Ensartet, centreret kort-hovedoverskrift over data-lister ("Tidligere XX (antal)"). */
.card-h-center{ text-align:center; margin:0 0 10px; }
/* Session-detalje: titel + Tilbage på samme linje; venstre-stillet øvelses-navn. */
.detail-title{ margin:0 0 12px; }
.exc-detail-h{ margin:0 0 10px; }
/* Centreret handlings-række (fx Slet træning nederst i detaljen). */
.form-actions-center{ justify-content:center; }
/* Handlings-toolbar: centreret, aldrig wrap (scroller hvis ekstremt smal).
   Lige store knapper hvor der er plads (≥560px); naturlig bredde på mobil
   så de fortsat passer på én linje. */
.form-actions-bar{ justify-content:center; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.form-actions-bar .btn{ flex:0 0 auto; }
@media (min-width:560px){ .form-actions-bar .btn{ min-width:96px; } }
.nowrap{white-space:nowrap;}
.small{font-size:12px;}

/* --- Routine builder rows --- */
table.builder td{
  padding:6px 4px; border-bottom:1px solid #f4f4f4; vertical-align:middle; font-size:15px;
}
table.builder tr:last-child td{border-bottom:none;}
.pos-cell{width:64px;}
.pos-input{
  width:54px; padding:7px 6px; text-align:center; font-size:15px; font-weight:700;
  border:1.5px solid #ccc; border-radius:8px; font-family:inherit; background:#fff;
}
.pos-input:focus{outline:none; border-color:var(--brand); background:#f4f7fc;}

/* --- Button variants --- */
.btn-secondary{background:#fff; color:var(--tekst); border:1.5px solid #ccc;}
.btn-secondary:hover{border-color:var(--brand); color:var(--brand);}
.btn-danger{background:#fff; color:#9C0006; border:1.5px solid #d8a0a8;}
.btn-danger:hover{background:#9C0006; color:#fff; border-color:#9C0006;}
.btn-sm{padding:6px 11px; font-size:13px;}
.inline{display:inline; margin-left:4px;}


/* ============================================================
   Routine builder — chips and set-count segmented control
   ============================================================ */

/* Container rows that hold chips */
.chip-row{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px; min-height:60px;
  border:1.5px solid var(--kant); border-radius:14px;
  background:#fafafa;
}
.chip-row-selected{
  background:#e8eef8;
  border-color:rgba(21,48,126,.28);
}

/* Base chip */
.chip{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:#fff; color:#1a1a1a;
  border:1.5px solid #ccc; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:600;
  text-transform:none; letter-spacing:0; line-height:1.2;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s, transform .06s;
  -webkit-font-smoothing:antialiased;
}
.chip:focus{outline:none;}
.chip:focus-visible{box-shadow:0 0 0 3px rgba(21,48,126,.22);}
.chip:active{transform:scale(.97);}

/* Available chip — outline, click to add */
.chip-available:hover{
  border-color:var(--brand); color:var(--brand);
}

/* Selected chip — filled red, click to remove */
.chip-selected{
  background:var(--brand); color:#fff !important;
  border-color:var(--brand);
  padding:6px 14px 6px 6px; /* tighter on the badge side */
}
.chip-selected:hover{background:var(--brand-mork); border-color:var(--brand-mork);}
.chip-selected .chip-name{color:#fff;}

/* Position badge inside selected chip */
.chip-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px;
  background:#fff; color:var(--brand);
  font-size:12px; font-weight:800;
  flex-shrink:0;
}

/* ---- Set-count segmented control (1..6) ---- */
.seg{
  display:inline-flex; gap:6px; flex-wrap:wrap;
}
.seg-btn{
  -webkit-appearance:none; appearance:none;
  width:46px; height:46px;
  background:#fff; color:#1a1a1a;
  border:1.5px solid #ccc; border-radius:12px;
  font-family:inherit; font-size:17px; font-weight:800;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s, transform .06s;
}
.seg-btn:hover{border-color:var(--brand); color:var(--brand);}
.seg-btn:active{transform:scale(.95);}
.seg-btn:focus{outline:none;}
.seg-btn:focus-visible{box-shadow:0 0 0 3px rgba(21,48,126,.22);}
.seg-btn.aktiv{
  background:var(--brand); color:#fff;
  border-color:var(--brand);
}
.seg-btn.aktiv:hover{background:var(--brand-mork); border-color:var(--brand-mork);}

/* Hard guard against any cascade leak — chip text is never uppercased. */
.chip, .chip-name, .chip-num{
  text-transform:none !important;
  letter-spacing:normal !important;
}

/* ---- Selected-routine list (ordered, reorderable) ---- */
.selected-list{
  display:flex; flex-direction:column; gap:6px;
  padding:12px; min-height:60px;
  border:1.5px solid rgba(21,48,126,.28); border-radius:14px;
  background:#e8eef8;
}
.selected-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:#fff;
  border:1.5px solid var(--brand);
  border-radius:10px;
}
.drag-handle{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:34px;
  color:var(--svag); font-size:20px; line-height:1;
  cursor:grab; user-select:none; touch-action:none;
  flex-shrink:0;
}
.drag-handle:hover{ color:var(--brand); }
.drag-handle:active{ cursor:grabbing; }

/* SortableJS drag state */
.sortable-ghost{
  opacity:.35;
  border-style:dashed;
}
.sortable-drag{
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.selected-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 6px;
  background:var(--brand); color:#fff;
  font-size:12px; font-weight:800;
  border-radius:999px; flex-shrink:0;
}
.selected-name{
  flex:1; min-width:0;
  font-size:15px; font-weight:600;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.selected-controls{
  display:flex; gap:4px; flex-shrink:0;
}
.icon-btn{
  -webkit-appearance:none; appearance:none;
  width:34px; height:34px;
  background:#fff;
  border:1.5px solid #ccc; border-radius:8px;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1;
  cursor:pointer; color:var(--tekst);
  transition:border-color .12s, color .12s, background .12s, transform .06s;
}
.icon-btn:hover:not([disabled]){ border-color:var(--brand); color:var(--brand); }
.icon-btn:active:not([disabled]){ transform:scale(.95); }
.icon-btn:focus{ outline:none; }
.icon-btn:focus-visible{ box-shadow:0 0 0 3px rgba(21,48,126,.22); }
.icon-btn[disabled]{ opacity:.35; cursor:not-allowed; }
.icon-btn-danger:hover:not([disabled]){
  background:var(--brand); color:#fff; border-color:var(--brand);
}

.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-danger[disabled]:hover{ background:#fff; color:#9C0006; border-color:#d8a0a8; }
/* Generic "this element is currently uninteractive" helper. Works on
   anchors too where the disabled attribute has no effect. */
.is-disabled{ opacity:.45; pointer-events:none; cursor:not-allowed; }

/* ============================================================
   Sub-sections inside a card (used on the client edit page)
   ============================================================ */
.card-sep{ border:none; border-top:1px solid var(--kant); margin:22px 0; }
.card .block{ margin-bottom:4px; }
h3.mini{
  font-size:14px; font-weight:800; color:var(--brand);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}

/* Clickable table rows (used on the Klienter list) */
table.list tr.row-link{ cursor:pointer; }
table.list tr.row-link:hover{ background:#f8f8f8; }
table.list tr.row-link td.row-action{ cursor:default; }
table.list tr.row-link.is-readonly{ cursor:default; opacity:.78; }
table.list tr.row-link.is-readonly:hover{ background:transparent; }

/* Drag handle column in tables (routines list reorder) */
table.list td.drag-cell{
  width:34px; padding:6px 4px; text-align:center;
  cursor:default;
}
table.list td.drag-cell .drag-handle{
  display:inline-flex; vertical-align:middle;
}

/* Reorder save flash near the routines list */
.reorder-status{
  display:inline-block; margin-top:10px;
  padding:5px 11px; border-radius:999px;
  font-size:12px; font-weight:700;
  background:#f4f4f4; color:var(--tekst);
  transition:opacity .25s;
}
.reorder-status[data-state="ok"]  { background:var(--groen-bg); color:var(--groen); }
.reorder-status[data-state="err"] { background:#FFC7CE; color:#9C0006; }

/* Inline default weight/reps inputs in the Øvelser list */
table.list td.ex-default-cell{
  padding:6px 8px;
  cursor:default;
  white-space:nowrap;
}
.ex-default-pair{
  display:inline-flex; align-items:center; gap:6px;
}
.ex-default-input{
  width:64px; padding:6px 8px;
  font-family:inherit; font-size:14px;
  border:1px solid var(--kant); border-radius:6px;
  background:#fff; color:var(--tekst);
  text-align:right;
}
.ex-default-input:focus{
  outline:none; border-color:var(--brand); background:#f4f7fc;
}
.ex-default-input::-webkit-outer-spin-button,
.ex-default-input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.ex-default-input[type=number]{ -moz-appearance:textfield; }
.ex-default-x{
  color:var(--svag); font-size:12px;
}

/* ============================================================
   M5 — body measurements (Krop)
   ============================================================ */
.body-hero{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  padding:16px 18px; margin-bottom:14px;
}
/* Hele "seneste måling"-kortet er klikbart → ret/log dagens måling + mål.
   Tomt kort (ingen målinger endnu) er også et klikbart kort. */
a.body-hero-link, a.body-hero-empty{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color .12s, box-shadow .12s;
}
a.body-hero-link:hover, a.body-hero-empty:hover{
  border-color:var(--brand); box-shadow:0 2px 12px rgba(21,48,126,.12);
}
.body-hero-cue{
  display:flex; justify-content:flex-end; align-items:center;
  color:var(--svag); margin-bottom:4px; line-height:1;
}
.body-hero-cue .chev{ font-size:20px; }
.body-hero-empty{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:120px; text-align:center;
  color:var(--svag); font-weight:600;
}
.body-hero-empty .chev{ font-size:20px; color:var(--brand); }
.body-tiles{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.body-tile{
  text-align:center; padding:12px 8px;
  background:#fafafa; border-radius:10px;
}
.body-tile-label{
  font-size:11px; font-weight:700; color:var(--svag);
  text-transform:uppercase; letter-spacing:.3px;
}
.body-tile-value{
  font-size:22px; font-weight:800; color:var(--brand);
  margin:4px 0 2px;
}
.body-tile-delta{
  font-size:13px; font-weight:700;
}
.body-tile-goal{
  margin-top:4px; font-size:11px;
}
.delta-good   { color:var(--groen); }
.delta-bad    { color:#9C0006; }
.delta-neutral{ color:var(--svag); }
.body-hero-notes{
  margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--kant);
}
/* (mål-vægt redigeres nu via "Ret mål"-knap → ?editgoal=1, ikke inline) */

@media (max-width:640px){
  .body-tiles{ grid-template-columns:repeat(2, 1fr); }
}

/* ============================================================
   M6 — progress charts
   ============================================================ */
.progress-layout{
  display:flex; gap:16px; align-items:flex-start;
  margin-bottom:14px;
}
.progress-nav{
  flex:0 0 200px;
  display:flex; flex-direction:column; gap:4px;
}
.progress-nav-btn{
  display:block; padding:10px 12px;
  background:#fff; color:var(--tekst);
  border:1.5px solid var(--kort-kant); border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:700;
  text-decoration:none;
  transition:border-color .12s, color .12s, background .12s, transform .06s;
}
.progress-nav-btn:hover{ border-color:var(--brand); color:var(--brand); }
.progress-nav-btn:active{ transform:scale(.98); }
.progress-nav-btn.aktiv{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.progress-main{ flex:1; min-width:0; }
.progress-nav-select{ display:none; }  /* kun på mobil — se media query */

.chart-grid-body{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.chart-cell{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:12px;
  padding:14px; height:220px;
  min-width:0;             /* prevent canvas from forcing grid blowout */
  overflow:hidden;
}
.chart-cell.chart-cell-wide{
  grid-column:1 / -1;
  height:400px;
}
.chart-large{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:12px;
  padding:14px; height:400px; margin-bottom:10px;
}

.body-goal-form{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-bottom:14px; padding:10px 14px;
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:12px;
}
.body-goal-form input[type=number]{
  width:90px; padding:8px 10px;
  font-size:15px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:8px; background:#fff;
}
.body-goal-form input[type=number]:focus{
  outline:none; border-color:var(--brand); background:#f4f7fc;
}
.body-goal-label{
  font-size:12px; font-weight:700; color:var(--svag);
  text-transform:uppercase; letter-spacing:.3px;
}

@media (max-width:640px){
  /* align-items:stretch så graf-kortet fylder fuld bredde i kolonne-layoutet. */
  .progress-layout{ flex-direction:column; align-items:stretch; }
  /* Mobil: erstat øvelses-knap-listen med en dropdown (undgår knap-rod). */
  .progress-nav{ display:none; }
  .progress-nav-select{
    display:block; width:100%;
    padding:9px 12px; font-size:15px; font-family:inherit;
    border:1.5px solid var(--kort-kant); border-radius:10px; background:#fff;
  }
  .chart-grid-body{ grid-template-columns:1fr; }
  .chart-cell{ height:200px; }
  .chart-cell.chart-cell-wide{ height:260px; }
  .chart-large{ height:320px; }
}

/* Chevron at the end of a clickable row — visible at rest, no hover needed. */
.row-chev{
  width:28px; text-align:right;
  color:var(--svag); font-size:22px; font-weight:700;
  line-height:1; vertical-align:middle;
}
/* CTA-cell på forside-aftale-rækker: enten chevron (kommende) eller
   "Start træning"-knap (samme dag). Cursor er default på knap, ikke
   pointer fra row-link. */
.row-cta{ text-align:right; white-space:nowrap; cursor:default; }
.row-cta .btn{ cursor:pointer; }
table.list tr.row-link:active{ background:#f0f0f0; }

/* Antal-tællere ved overskriften "Kommende aftaler": to sidestående celler
   (Excel-stil) i én afrundet gruppe — ens størrelse, delt skillelinje, kun
   farven adskiller (træner følger paletten, hjemme grøn). */
.count-cells{
  display:inline-flex; vertical-align:middle; margin-left:8px;
  border:1px solid var(--kort-kant); border-radius:6px; overflow:hidden;
}
.count-pill{
  width:42px; padding:5px 0; box-sizing:border-box;
  font-size:15px; font-weight:800; text-align:center; line-height:1.15;
}
.count-pill + .count-pill{ border-left:1px solid var(--kort-kant); }
.count-pill.count-with{ background:#dde2f0; background:color-mix(in srgb, var(--brand) 16%, #fff); color:var(--brand); }
.count-pill.count-home{ background:#e2efe3; color:#3a7a3f; }

/* ============================================================
   Home screen (rutine cards + trainer client indicator)
   ============================================================ */
.rutine-grid{
  display:grid; gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .rutine-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .rutine-grid{ grid-template-columns:1fr 1fr 1fr; } }

.rutine-card{
  -webkit-appearance:none; appearance:none;
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  padding:18px 16px; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; gap:6px;
  cursor:pointer; transition:border-color .12s, transform .06s;
  color:var(--tekst); text-decoration:none;
}
.rutine-card:hover:not([disabled]){ border-color:var(--brand); }
.rutine-card:active:not([disabled]){ transform:scale(.98); }
.rutine-card[disabled]{ opacity:.7; cursor:not-allowed; }
.rutine-card-name{ font-weight:800; font-size:18px; color:var(--brand); }
.rutine-card-meta{ font-size:13px; color:var(--svag); }
.rutine-card-custom{ border-style:dashed; }
.rutine-card-custom .rutine-card-name{ color:var(--tekst); }
/* Skrivebeskyttet rutine (anden træners template) — ikke klikbar. */
.rutine-card.is-readonly{ cursor:default; }
.rutine-card.is-readonly:hover{ border-color:var(--kort-kant); }

/* 3-vejs landing på trænerens Forside: Træn klient / Træn gæst / Træn selv.
   Tre store kort side om side på desktop, stakkes på telefon. */
.train-cards{
  display:grid; gap:14px;
  grid-template-columns:1fr;
  margin:8px 0 4px;
}
@media (min-width:720px){ .train-cards{ grid-template-columns:1fr 1fr 1fr; } }

.train-card{
  display:flex; flex-direction:column; gap:6px;
  padding:22px 20px;
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  text-decoration:none; color:var(--tekst);
  transition:border-color .12s, transform .06s, box-shadow .12s;
}
.train-card:hover{
  border-color:var(--brand);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(21,48,126,0.08);
}
.train-card:active{ transform:scale(.99); }
.train-card-title{ font-size:20px; font-weight:800; color:var(--brand); }
.train-card-meta{ font-size:13px; color:var(--svag); }

.badge-trainer{
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:#f0e6ff; color:#5a2a8c; font-size:11px; font-weight:700;
}

/* Tids-vælger: to selects side om side med kolon-separator —
   konsekvent 24h-format på tværs af browsere uden locale-afhængighed. */
.time-picker{ display:flex; align-items:center; gap:6px; }
.time-picker select{
  flex:1; padding:8px 10px; border:1px solid var(--kort-kant);
  border-radius:8px; background:#fff; font-size:15px;
}
.time-picker select:focus{ outline:none; border-color:var(--brand); }
.time-sep{ font-weight:700; color:var(--svag); }

/* Aftaler-kalender (appointments.php) */
.appt-type-pill{
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
/* Hjemmetræning er altid grøn. Med-træner FØLGER paletten (--brand): en lys
   tone af brand-farven så pillen skifter med temaet (fallback til fast blå
   for browsere uden color-mix). Kalender-eventet bruger allerede var(--brand). */
.appt-type-home{ background:#e2efe3; color:#3a7a3f; }
.appt-type-with{ background:#dde2f0; background:color-mix(in srgb, var(--brand) 14%, #fff); color:var(--brand); }

/* Status-badges på aftale-rækker: vises ved siden af type-pillen.
   "Aflyst" og "Ændret" er forskellige tilstande — aflyst betyder
   aftalen ikke gælder længere; ændret betyder aftalen er rykket
   eller justeret efter oprettelse (udledt fra updated_at vs
   created_at + tolerance). */
.appt-status-badge{
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:11px; font-weight:600; margin-left:6px; white-space:nowrap;
  vertical-align:middle;
}
.appt-status-cancelled{ background:#f5d5d5; color:#8a2929; }
.appt-status-modified{ background:#f0e5cc; color:#7a5a14; }

/* "Vis alle (N)" / "Vis nyeste N"-kontrol under den historiske liste:
   centreret, luft over så den ikke klæber til tabellen. */
.appt-show-all{ margin-top:16px; text-align:center; }

/* Cancelled-rækker i listen: muted styling så aftalen stadig er
   læsbar men tydeligt "ude af spillet". Strikethrough på dato/tid
   så det bærer signalet uden tekst. */
.appt-row-cancelled td{ opacity:.55; }
.appt-row-cancelled td:nth-child(1) strong,
.appt-row-cancelled td:nth-child(2){ text-decoration:line-through; }

/* Cancelled events i kalender-grid: faded, strikethrough */
.cal-event-cancelled{
  background:#c8a5a5 !important; color:#fff;
  text-decoration:line-through;
}
.cal-event-cancelled:hover{ background:#a08080 !important; }
.cal-nav{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px; flex-wrap:nowrap;
}
.cal-month-label{ flex:1; min-width:0; margin:0; font-size:18px; text-align:center; }
.cal-nav-side{ flex:0 0 auto; white-space:nowrap; }
/* Smal skærm: skru måneds-teksten ned + stram nav'en så lange månedsnavne
   ("September 2026") ikke klemmer side-knapperne. */
@media (max-width:520px){
  .cal-nav{ gap:6px; }
  .cal-month-label{ font-size:15px; }
  .cal-nav-side{ padding:6px 8px; }
}
/* "I dag" centreret under kalenderen. */
.cal-today{ text-align:center; margin-top:14px; }

/* Forsidens top-kort: "Kommende aftaler"-overskrift + næste aftale som linje. */
.next-appt-heading{ margin:0 0 12px; font-size:18px; display:flex; align-items:center; }
.next-appt-heading .count-cells{ margin-left:auto; }
/* Næste aftale på forsiden — én klikbar linje over kalenderen. */
.next-appt{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px; cursor:pointer;
  background:#f4f4f6; border-radius:8px; transition:background .12s;
}
.next-appt:hover{ background:#ececef; }
.next-appt-when{ font-size:15px; }
.next-appt-when strong{ margin-right:4px; }
/* Chevron sidder altid yderst til højre på dato-linjen (rækken er klikbar →
   rediger) — uafhængigt af knappen. */
.next-appt-chev{ margin-left:auto; }
/* Start/Vis/Træn i dag-knappen ligger på sin egen linje under dato-linjen,
   kompakt og centreret på alle bredder. */
.next-appt-action{ flex-basis:100%; text-align:center; }
.cal-grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cal-grid th{
  background:var(--bg); padding:6px 4px; font-size:12px; font-weight:700;
  color:var(--svag); text-transform:uppercase; letter-spacing:.04em;
  text-align:center; border:1px solid var(--kant);
}
.cal-grid td{
  border:1px solid var(--kant); vertical-align:top;
  height:88px; padding:4px; position:relative;
}
.cal-day-outside{ background:#fafafa; opacity:.55; }
.cal-day-today{ background:rgba(21,48,126,.13); }
.cal-day-num{
  display:block; font-size:12px; font-weight:700; color:var(--svag);
  text-decoration:none; padding:2px 4px; border-radius:4px;
}
.cal-day-num:hover{ background:rgba(0,0,0,.05); color:var(--brand); }
.cal-day-today .cal-day-num{ color:var(--brand); }
.cal-event{
  display:block; font-size:11px; line-height:1.2; padding:2px 5px;
  border-radius:4px; margin-top:3px; text-decoration:none;
  background:var(--brand); color:#fff; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis;
}
.cal-event:hover{ background:var(--brand-mork); }
/* Drop-in: stadig "hos træner" — lysere blå-variant */
.cal-event-dropin{ background:#6f7fb1; }
.cal-event-dropin:hover{ background:#56638f; }
/* Hjemmetræning: tydelig anden farve (grøn) så det adskiller sig
   tydeligt fra "hos træner"-familien (blå). */
.cal-event-home{ background:#3a7a3f; }
.cal-event-home:hover{ background:#2a5a2f; }

/* Forsidens næste-aftale-kort: farvet venstrekant matchet typen */
.next-appointment-card{ border-left:4px solid var(--brand); }
.next-appointment-card.is-home{ border-left-color:#3a7a3f; }

/* Read-only info-liste til når træner ser klientens hjemmetræning */
.readonly-list{ margin:14px 0 0; }
.readonly-list dt{
  font-size:12px; font-weight:700; color:var(--svag);
  text-transform:uppercase; letter-spacing:.04em; margin-top:10px;
}
.readonly-list dd{ margin:2px 0 0; font-size:15px; }

@media (max-width:720px){
  .cal-grid td{ height:auto; min-height:60px; }
  .cal-event{ font-size:10px; }
}
/* Smal mobil: cellerne er ~40px brede — stram padding + font så tidspunktet
   (forrest i eventet) i det mindste er synligt før navnet trunkeres. */
@media (max-width:520px){
  .cal-grid td{ padding:2px; }
  .cal-day-num{ font-size:11px; padding:1px 2px; }
  /* Kun tidspunktet på mobil — navnet skjules, så ingen "…"-trunkering. */
  .cal-event{ font-size:10px; padding:1px 2px; margin-top:2px; text-align:center; }
  .cal-event-name{ display:none; }
}

/* Current client indicator in the topbar */
.topbar-client{
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-size:13px;
}
.topbar-client strong{ color:#fff; }
.topbar-client .muted{ color:rgba(255,255,255,.7) !important; }
.topbar-switch{
  color:rgba(255,255,255,.85); text-decoration:underline;
  font-size:12px; margin-left:4px;
}
.topbar-switch:hover{ color:#fff; }

/* Klient-skifter i topbaren (træner) — altid-tilgængelig vælger */
.client-switch{ position:relative; }
.client-switch > summary{
  list-style:none; cursor:pointer; color:#fff; font-size:13px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:8px;
}
.client-switch > summary::-webkit-details-marker{ display:none; }
.client-switch > summary:hover{ background:rgba(255,255,255,.12); }
.client-switch[open] > summary{ background:rgba(255,255,255,.16); }
.client-switch .cs-label{ color:rgba(255,255,255,.7); }
.client-switch .cs-pick{ font-weight:600; }
.client-switch .cs-caret{ font-size:10px; opacity:.85; }
.cs-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:210px; max-width:280px; max-height:60vh; overflow:auto;
  background:#fff; color:var(--tekst);
  border:1px solid var(--kant); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px;
}
.cs-list{ list-style:none; margin:0; padding:0; }
.cs-list a{
  display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:7px;
  color:var(--tekst); text-decoration:none; font-size:14px;
}
.cs-list a:hover{ background:var(--bg); }
.cs-list a.cs-current{ background:var(--bg); font-weight:700; }
.cs-list a .muted{ font-size:12px; }
.cs-clear{
  display:block; margin-top:4px; padding:8px 10px;
  border-top:1px solid var(--kant); color:var(--svag);
  text-decoration:none; font-size:13px;
}
.cs-clear:hover{ color:var(--tekst); }
.cs-empty{ padding:8px 10px; margin:0; }

/* Segmented radio inside the owner picker (routines.php) */
.seg-radio{
  position:relative;
  display:inline-flex; align-items:center;
  padding:8px 14px; border:1.5px solid #ccc; border-radius:10px;
  background:#fff; font-size:14px; cursor:pointer;
  user-select:none;
}
.seg-radio input[type=radio]{
  position:absolute; opacity:0; pointer-events:none;
  width:0; height:0; margin:0;
}
.seg-radio:has(input:checked){
  background:#e8eef8; border-color:var(--brand); color:var(--brand); font-weight:700;
}

.alert-info{
  background:#e8f0f9; color:#1a3a5a;
  padding:11px 13px; border-radius:10px; font-size:14px;
  margin-bottom:16px; border:1px solid #c9d8eb;
}
.alert-info a{ color:#1a3a5a; }

/* Slim inline checkbox row (used for routine ownership) */
.checkbox-row{
  display:inline-flex; align-items:center; gap:10px;
  margin:8px 0 18px; padding:8px 12px;
  font-size:14px; color:var(--tekst);
  background:#fafafa; border:1px solid var(--kant); border-radius:10px;
  cursor:pointer;
}
.checkbox-row input[type=checkbox]{ accent-color: var(--brand); width:16px; height:16px; }
.checkbox-row em{ font-style:normal; font-size:13px; color:var(--svag); }

/* Visibility radio (Privat / Træner-skabelon / Standardrutine) på
   rutine-formularen. Tre mutually-exclusive valg stablet vertikalt. */
.visibility-radio{
  margin:8px 0 18px; padding:12px 14px;
  background:#fafafa; border:1px solid var(--kant); border-radius:10px;
}
.visibility-radio legend{
  font-size:13px; font-weight:600; color:var(--svag);
  padding:0 6px; margin-left:-6px;
}
.radio-row,
.check-row{
  display:flex; align-items:flex-start; gap:10px;
  padding:6px 0; cursor:pointer; font-size:14px; color:var(--tekst);
}
.radio-row input[type=radio],
.check-row input[type=checkbox]{
  accent-color:var(--brand); width:16px; height:16px;
  margin-top:2px; flex:0 0 auto;
}
.radio-row em{ font-style:normal; font-size:13px; color:var(--svag); }
.email-recipients{
  border:1px solid var(--kant); border-radius:6px;
  padding:8px 14px 10px; margin:0;
}
.email-recipients legend{
  padding:0 6px; font-size:13px; color:var(--svag); font-weight:700;
}

/* Top-of-page action row (e.g. + Ny øvelse / + Ny rutine) */
.page-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:14px;
}
/* Ensartet, kompakt størrelse på alle top-handlingsknapper (+ Ny … / tilbage)
   på tværs af appen — ét sted, så nye sider arver samme størrelse. */
.page-actions .btn{ padding:6px 11px; font-size:13px; }

/* ============================================================
   Delt PDF-fremviser (overlay) — se pdf_viewer.php
   ============================================================ */
.pdfviewer{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.6);
  display:flex; flex-direction:column;
}
.pdfviewer[hidden]{ display:none; }
.pdfviewer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top, 0px));
  background:var(--brand); color:#fff;
}
.pdfviewer-title{ font-weight:700; font-size:15px; }
.pdfviewer-actions{ display:flex; align-items:center; gap:8px; }
.pdfviewer-dl{
  color:#fff; text-decoration:none; font-weight:700; font-size:13px;
  border:1.5px solid rgba(255,255,255,.5); border-radius:8px; padding:6px 12px;
}
.pdfviewer-dl:hover{ background:rgba(255,255,255,.12); }
.pdfviewer-close{
  background:#fff; color:var(--brand);
  border:none; border-radius:8px; padding:7px 16px;
  font-family:inherit; font-weight:800; font-size:14px; cursor:pointer;
}
.pdfviewer-doc{
  flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:12px; text-align:center;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
.pdfviewer-page{
  display:block; margin:0 auto 12px; max-width:100%; height:auto;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.pdfviewer-status{ color:#fff; padding:28px 12px; }

/* ============================================================
   Milestone 3 — session editor (one-screen, auto-save)
   ============================================================ */

/* Top line: routine name, date editor, save status */
.session-topline{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:10px; margin-bottom:10px;
}
.session-date-line{ display:inline-flex; align-items:center; gap:6px; }
.session-timer{
  display:inline-flex; align-items:center; gap:6px; margin:-2px 0 10px;
}
.session-timer-value{
  font-weight:700; color:var(--brand);
  font-variant-numeric:tabular-nums; letter-spacing:.3px;
}
.link-button{
  background:none; border:none; padding:0; margin:0;
  color:var(--brand); font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:underline;
}
.date-edit-form{
  display:flex; gap:8px; align-items:center; margin-bottom:12px;
}
.date-edit-form input[type=date]{
  padding:9px 10px; font-size:15px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:8px; background:#fff;
}

/* Auto-save status */
.save-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--svag);
  padding:4px 10px; border-radius:999px;
  background:#f4f4f4; border:1px solid var(--kant);
}
.save-dot{
  width:8px; height:8px; border-radius:999px; background:#bbb;
  flex-shrink:0;
}
.save-status[data-state="saving"] .save-dot{ background:#e0a800; }
.save-status[data-state="ok"]     .save-dot{ background:var(--groen); }
.save-status[data-state="err"]    .save-dot{ background:#c43; }
.save-status[data-state="err"]{ color:#9C0006; background:#fff0f0; border-color:#f0caca; }

/* Two-column layout: exercise nav on the left, active card on the right. */
/* Mobil-først, ét layout overalt (også pc — bredere skærm = bare mere plads).
   Nav-strimmel i toppen + stakkede øvelseskort, lodret. Ingen to-kolonne-
   side-skinne længere (besluttet 2026-06-11). */
.session-layout{
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  margin-bottom:14px;
}
.ex-nav{
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:8px;
  width:100%; min-width:0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.ex-nav-btn{
  -webkit-appearance:none; appearance:none;
  flex:0 0 auto; width:auto; min-width:110px;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:8px 12px;
  background:#fff; color:var(--tekst);
  border:1.5px solid var(--kort-kant); border-radius:10px;
  font-family:inherit; font-size:14px; font-weight:700; text-align:left;
  cursor:pointer;
  transition:border-color .12s, color .12s, background .12s, transform .06s;
}
.ex-nav-btn:hover{ border-color:var(--brand); color:var(--brand); }
.ex-nav-btn:active{ transform:scale(.98); }
.ex-nav-btn:focus{ outline:none; }
.ex-nav-btn:focus-visible{ box-shadow:0 0 0 3px rgba(21,48,126,.22); }
.ex-nav-btn.aktiv{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
.ex-nav-name{ flex:1; min-width:0; font-size:14px; text-overflow:ellipsis; overflow:hidden; }
.ex-nav-count{
  flex:0 0 auto;
  font-size:11px; font-weight:700; opacity:.8;
}

/* Per-exercise progress mark + count colouring.
   Tre tilstande:
     idle      — intet logget; ingen mark, default count colour.
     wip       — mindst ét sæt logget; grøn prik + grøn count.
                 ("Øvelsen er i gang." Træneren bestemmer selv hvornår
                 den er færdig — savedN === target er ikke nok.)
     finished  — eksplicit markeret færdig; grøn ✓ + grøn count.
   Aktiv-knap (rød bg) viser count i hvid; mark'en bærer state-aflæsningen. */
.ex-nav-mark{
  display:none;
  width:8px; height:8px;
  border-radius:999px;
  margin-right:6px;
  vertical-align:middle;
}
/* Wip-tilstanden glow'er på selve øvelsesnavnet — samme behandling
   som "Træning"-menupunktet bruger. Dot'en er overflødig her: glow'et
   er signalet, og det læses entydigt både på hvid (idle nav-knapper)
   og rød (aktiv nav-knap). */
.ex-nav-wip .ex-nav-mark{ display:none; }
.ex-nav-wip .ex-nav-name{
  animation:ex-nav-wip-glow 2.1s ease-in-out infinite;
}
@keyframes ex-nav-wip-glow{
  0%, 100% {
    text-shadow:
      0 0 3px color-mix(in srgb, var(--brand) 55%, transparent),
      0 0 8px color-mix(in srgb, var(--brand) 30%, transparent);
  }
  50% {
    text-shadow:
      0 0 5px  color-mix(in srgb, var(--brand) 95%, transparent),
      0 0 12px color-mix(in srgb, var(--brand) 70%, transparent),
      0 0 22px color-mix(in srgb, var(--brand) 40%, transparent);
  }
}
@media (prefers-reduced-motion: reduce){
  .ex-nav-wip .ex-nav-name{
    animation:none;
    text-shadow:
      0 0 4px color-mix(in srgb, var(--brand) 75%, transparent),
      0 0 10px color-mix(in srgb, var(--brand) 45%, transparent);
  }
}
.ex-nav-finished .ex-nav-mark{
  display:inline-flex;
  width:auto; height:auto;
  background:transparent;
  border-radius:0;
  color:var(--brand);
  font-weight:800;
  align-items:center;
}
.ex-nav-finished .ex-nav-mark::before{ content:'\2713'; }
.ex-nav-wip      .ex-nav-count{ color:var(--brand); opacity:1; }
.ex-nav-finished .ex-nav-count{ color:var(--brand); opacity:1; }
.ex-nav-btn.aktiv .ex-nav-count{ color:#fff; opacity:.9; }
.ex-nav-finished.aktiv .ex-nav-mark{ color:#fff; }

/* Aktiv + wip: brand bg (mørk + hvid tekst) ville æde text-shadow og
   slå wip-signalet ihjel. Bytter til en lys brand-tonet bg (35% brand
   blandet på bg) + mørk tekst → distinkt fra plain aktiv, men følger
   stadig farveskemaet. Drop text-shadow her. */
.ex-nav-btn.aktiv.ex-nav-wip{
  background:color-mix(in srgb, var(--brand) 35%, var(--bg));
  border-color:color-mix(in srgb, var(--brand) 35%, var(--bg));
  color:var(--tekst);
}
.ex-nav-btn.aktiv.ex-nav-wip .ex-nav-count{ color:var(--brand); }
.ex-nav-btn.aktiv.ex-nav-wip .ex-nav-name{
  animation:none;
  text-shadow:none;
}

.ex-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }

/* ---- Sæt-grid (B): flade tal-kolonner + editor til højre ---------------
   Øvelsesnavn i kort-headeren; sæt på tværs som faste kolonner; aktiv søjle
   vælges ved tap (cyklus aktiv → færdig → genåbn); editoren til højre er
   pinnet og række-justeret med kg/reps. Besluttet 2026-06-11. */
.exc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--kant);
}
.exc-head-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.exc-name{ font-size:17px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* Kort-status-pille: blå = i gang, grøn = alle sæt færdige; tom = skjult. */
.exc-status{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 8px; border-radius:999px; white-space:nowrap; flex:0 0 auto;
}
.exc-status:empty{ display:none; }
.exc-status.inprog{ background:#eaf0fb; color:var(--brand-mork); }
.exc-status.done{ background:#e4f5e9; color:#1b7a3d; }
.ex-card.is-done{ border-color:#bfe3cb; }
.exc-head-right{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.exc-prog{ font-size:13px; font-weight:700; color:var(--svag); white-space:nowrap; }
.exc-drop{
  -webkit-appearance:none; appearance:none; background:none; border:none;
  padding:2px; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--svag); cursor:pointer; touch-action:manipulation; white-space:nowrap;
}
.exc-drop:hover{ color:var(--brand); }

.exc-body{ display:block; }

.setgrid{
  display:grid; gap:0; align-items:stretch;
  border:1px solid var(--kant); border-radius:6px; overflow:hidden;
  /* Editoren er flyttet til den delte top-bjælke, så gridet får fuld plads;
     boksen hugger kolonnerne (hver kappet på 46px via minmax inline). */
  width:max-content; max-width:100%;
}
.setgrid .rl{
  font-size:10px; font-weight:700; color:var(--svag); text-transform:uppercase;
  display:flex; align-items:center; padding:0 8px;
  border-right:1px solid var(--kant); background:#fafafa;
}
.setgrid .setnum{
  -webkit-appearance:none; appearance:none;
  height:28px; display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:700; font-size:12px; color:var(--tekst);
  border:none; border-right:1px solid var(--kant); border-bottom:1px solid var(--kant);
  background:#fafafa; cursor:pointer; touch-action:manipulation;
}
/* Celler er kompakte visnings-tal (13px → flercifrede vægte passer; ingen
   input → ingen iOS-zoom). Tap vælger sættet; redigering sker i editoren. */
/* Cellerne er redigerbare input (tap → skriv). font-size:16px er bevidst —
   iOS zoomer ind på fokus af input < 16px. min-width:0 lader dem krympe i
   kolonnen. Fuld bredde nu hvor editoren bor i top-bjælken. */
.setgrid .setcell{
  width:100%; min-width:0; height:34px; box-sizing:border-box;
  border:none; border-right:1px solid var(--kant);
  background:transparent; text-align:center; padding:0;
  font-family:inherit; font-size:16px; font-weight:700; color:var(--tekst);
  -moz-appearance:textfield; touch-action:manipulation; cursor:text;
}
.setgrid .setcell::-webkit-outer-spin-button,
.setgrid .setcell::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.setgrid .setcell:focus{ outline:none; }
.setgrid .js-kg{ border-bottom:1px solid var(--kant); }
.setgrid .setnum:last-of-type,
.setgrid .setcell:last-child{ border-right:none; }
.setgrid .setcell.pre{ color:var(--svag); font-weight:600; }
/* færdig = grøn; aktiv = blå (vinder visuelt over grøn) */
.setgrid .setcell.done{ background:#e6f4ea; color:#1c6b3a; }
.setgrid .setnum.done{ background:#cdebd6; color:#1c6b3a; }
/* Aktiv = blå RING (skjuler ikke den grønne "gjort"-baggrund) — så et
   committet, stadig-aktivt sæt (typisk det sidste) ses som færdigt: grøn + ring.
   Sæt-nummeret får fuld blå fyld kun når det IKKE er gjort. */
.setgrid .setcell.active{ box-shadow:inset 0 0 0 2px var(--brand); }
.setgrid .setnum.active{ box-shadow:inset 0 0 0 2px var(--brand); }
.setgrid .setnum.active:not(.done){ background:var(--brand); color:#fff; }

/* Delt editor-bjælke, sticky i toppen: redigerer det aktive sæt. */
.set-editor-bar{
  position:sticky; top:0; z-index:10;
  background:#fff; border:1.5px solid var(--brand); border-radius:12px;
  padding:8px 12px; margin-bottom:12px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.seb-context{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:800; color:var(--brand-mork); }
.seb-context .save-status{ font-size:11px; font-weight:600; }
.seb-controls{ display:flex; align-items:flex-end; gap:10px; flex-wrap:nowrap; }
.seb-group{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.seb-u{ font-size:10px; font-weight:700; color:var(--svag); text-transform:uppercase; }
.set-editor-bar .edpm,
.set-editor-bar .ed{
  display:inline-flex; align-items:stretch;
  border:1.5px solid var(--brand); border-radius:8px; overflow:hidden; background:#fff;
}
.set-editor-bar .edpm{ border-color:var(--kort-kant); }
.set-editor-bar .edpm form{ display:contents; }
.set-editor-bar .edpm-btn,
.set-editor-bar .ed-btn{
  -webkit-appearance:none; appearance:none; width:28px; height:32px; border:none;
  background:#eef2fb; color:var(--brand-mork); font-size:17px; font-weight:800;
  cursor:pointer; touch-action:manipulation; font-family:inherit;
}
.set-editor-bar .edpm-btn{ background:#fafafa; color:var(--tekst); }
.set-editor-bar .edpm-btn + .edpm-btn,
.set-editor-bar .edpm form + form .edpm-btn{ border-left:1px solid var(--kant); }
/* Bjælkens tal er nu DISPLAY (span), ikke input — spejler den aktive celle.
   Samme fontstørrelse som cellerne i kortet (16px). */
.set-editor-bar .ed-val{
  width:50px; flex:0 0 50px; padding:0 2px;
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid var(--kant); border-right:1px solid var(--kant);
  text-align:center; font-size:16px; font-weight:800; font-family:inherit; color:var(--brand-mork);
}

/* Logging-editor (body.sticky-head): topbar + navbar er allerede fastgjort
   globalt; her pinnes editor-bjælken lige under dem, og container'ens top-
   offset udvides med bjælkens højde så set-kortene ikke gemmer sig bag den.
   (Fixed, ikke sticky — sticky flex-børn renderer ujævnt på iOS.) */
body.sticky-head .container{ padding-top:calc(var(--topbar-h,52px) + var(--navbar-h,46px) + var(--bar-h,84px) + 6px); }
/* Editor-bjælken er en FAST linje (ikke sticky) — altid lige under navbar,
   over set-kortene; indhold scroller under den. Fuld bredde som navbar. */
body.sticky-head .set-editor-bar{
  position:fixed; top:calc(var(--topbar-h,52px) + var(--navbar-h,46px));
  left:0; right:0; z-index:9;
  /* Centrér til samme bredde som container (980) så indholdet flugter med
     kortene — fuld bredde på mobil, centreret på pc. */
  max-width:980px; margin:0 auto;
  border-radius:0; border-left:none; border-right:none; border-top:none;
  padding:8px 18px;
}
/* Når en celle får fokus scroller iOS den til toppen af layout-viewporten
   uden at vide at de tre fixed bjælker dækker det område — så cellen ender
   skjult bag dem. scroll-margin-top reserverer bjælkernes højde, så cellen
   (og dermed kortet) lander LIGE UNDER dem i stedet. */
body.sticky-head .setcell{
  scroll-margin-top:calc(var(--topbar-h,52px) + var(--navbar-h,46px) + var(--bar-h,84px) + 12px);
}

/* Exercise card */
.ex-card{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  padding:16px 18px;
  /* Hold kort-toppen fri af den sticky nav-strimmel når man scroller/springer hen. */
  scroll-margin-top:72px;
}

/* One set row inside a card. Saved rows tones pale grøn; alt andet
   står uden tint. Italic-styling på stepperværdier på prefilled rækker
   er det eksisterende "ikke-committed"-cue. */
.set-row{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 12px;
  padding:6px 8px;
  margin:0 -8px;
  border-radius:10px;
  transition:background .15s;
}
/* Gemt sæt-række: 20% brand blandet på bg → en lys, tema-tonet tint
   der tydeligt læses som "completed" og skifter med farveskemaet. */
.set-row[data-saved="1"]{
  background:color-mix(in srgb, var(--brand) 20%, var(--bg));
}
.set-row.set-row-prefill .stepper-mini-val{ color:var(--svag); font-style:italic; }
.set-row.set-row-error{ background:#FFC7CE; }

/* Lille ✓ til venstre for set-pill'en når rækken er gemt.
   Klikbar når synlig — tap = åbn sættet igen (DELETE fra tl_sets,
   rækken tilbage til ingen tint, intet ✓). Pladsen reserveres altid
   så layoutet ikke jiggler ved state-skift. Farven følger temaet:
   --brand-mork giver mørk kontrast på sage bg uanset palette. */
.set-row-mark{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:none; padding:0;
  flex:0 0 18px;
  width:18px; height:28px;
  visibility:hidden;
  color:var(--brand-mork);
  font-size:16px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px;
  cursor:default;
  transition:background .12s;
}
.set-row[data-saved="1"] .set-row-mark{
  visibility:visible;
  cursor:pointer;
}
.set-row[data-saved="1"] .set-row-mark:hover{
  background:color-mix(in srgb, var(--brand) 14%, transparent);
}
.set-row[data-saved="1"] .set-row-mark:focus{ outline:none; }
.set-row[data-saved="1"] .set-row-mark:focus-visible{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}
/* Forudfyldt række: ✓-marken er synlig men svag — ét tap bekræfter
   værdierne som de står (samme som sidst). Den lyser op på hover/fokus. */
.set-row.set-row-prefill .set-row-mark{
  visibility:visible;
  cursor:pointer;
  color:var(--svag);
  opacity:.45;
}
.set-row.set-row-prefill .set-row-mark:hover{
  opacity:1;
  background:color-mix(in srgb, var(--brand) 14%, transparent);
}
.set-row.set-row-prefill .set-row-mark:focus{ outline:none; }
.set-row.set-row-prefill .set-row-mark:focus-visible{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}
.set-row-mark::before{ content:'\2713'; }

.set-num{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 8px;
  background:var(--brand); color:#fff;
  font-size:13px; font-weight:800;
  border-radius:999px;
}
.cell-pair{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap;
}
.set-x{ color:var(--svag); font-weight:700; }
.set-unit{
  font-size:12px; font-weight:700; color:var(--svag);
  text-transform:uppercase; letter-spacing:.3px;
  margin-left:2px;
}
.set-hint{
  flex:1 1 100%;
  text-align:right;
  margin-left:0;
}

/* Compact stepper (mini): [- N +] inline */
/* Mobil: drop browserens dobbelt-tap-zoom på logging-kontrollerne, så et
   hurtigt andet tap registrerer som et klik i stedet for at zoome. Rører
   IKKE knib-zoom på siden (viewport beholder user-scalable). */
.stepper-mini-btn,
.stepper-mini-val,
.set-row-mark,
.ex-nav-btn{ touch-action:manipulation; }

.stepper-mini{
  display:inline-flex; align-items:stretch;
  border:1.5px solid #ccc; border-radius:10px;
  background:#fff; overflow:hidden;
}
.stepper-mini-btn{
  -webkit-appearance:none; appearance:none;
  width:38px; min-height:42px;
  background:#fafafa; color:var(--tekst);
  border:none;
  font-family:inherit; font-size:20px; font-weight:800; line-height:1;
  cursor:pointer;
  transition:background .12s, color .12s, transform .06s;
}
.stepper-mini-btn:hover{ background:#e8eef8; color:var(--brand); }
.stepper-mini-btn:active{ transform:scale(.95); }
.stepper-mini-btn:focus{ outline:none; }
.stepper-mini-btn:focus-visible{ box-shadow:inset 0 0 0 3px rgba(21,48,126,.22); }
.stepper-mini-val{
  width:64px;
  padding:8px 6px;
  font-family:inherit; font-size:18px; font-weight:700; text-align:center;
  border:none; border-left:1px solid var(--kant); border-right:1px solid var(--kant);
  background:#fff; color:var(--tekst);
  -moz-appearance:textfield;
}
.stepper-mini-val::-webkit-outer-spin-button,
.stepper-mini-val::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.stepper-mini-val:focus{ outline:none; background:#f4f7fc; }

/* In-form stepper: sized like a real form input so it doesn't look
   smaller than its neighbour fields (e.g. Navn beside Mål in a grid-2). */
.field .stepper-mini{ align-self:flex-start; }
.field .stepper-mini-btn{
  width:48px; min-height:48px; font-size:22px;
}
.field input.stepper-mini-val{
  width:140px; padding:11px 12px; font-size:18px;
  border:none; border-radius:0;
  border-left:1px solid var(--kant); border-right:1px solid var(--kant);
}
.field input.stepper-mini-val:focus{
  outline:none; background:#f4f7fc;
}

/* Per-klient-steppere i øvelses-formen (Mål + Standard vægt×reps): kompakte
   i stedet for den brede in-form-variant, så Mål og Standard står ens og
   vægt×reps-parret får plads på én linje. */
.ex-stepfield .stepper-mini-btn{ width:40px; min-height:44px; font-size:20px; }
.ex-stepfield input.stepper-mini-val{ width:64px; padding:9px 6px; font-size:17px; }
.ex-stepfield .ex-default-pair{ flex-wrap:wrap; gap:8px 10px; }

.ex-actions{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--kant);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.ex-set-label{ font-weight:600; }
.stepper-form{ display:contents; }
/* Fjern-øvelse: diskret tekst-knap skubbet til højre, så den ikke
   konkurrerer visuelt med +/- men er ét tap væk når man vil af med
   øvelsen helt. Touch-target holdt på 40px på mobil. */
.ex-drop-btn{
  margin-left:auto;
  -webkit-appearance:none; appearance:none;
  background:none; border:none; padding:6px 8px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--svag); cursor:pointer; border-radius:8px;
  touch-action:manipulation;
}
.ex-drop-btn:hover{ color:var(--fejl, #b00); background:rgba(176,0,0,.06); }
.ex-drop-btn:focus{ outline:none; }
.ex-drop-btn:focus-visible{ box-shadow:0 0 0 3px rgba(176,0,0,.2); }
.ex-set-stepper .stepper-form + .stepper-form .stepper-mini-btn{
  border-left:1px solid var(--kant);
}

/* Per-client warmup + notes for the active exercise */
/* Opvarmning/noter foldes sammen (altid foldet som standard) — chevron-toggle. */
/* Trænings-timer + save-plet i topbaren (kun under en aktiv session). */
.topbar-timer-wrap{ display:inline-flex; align-items:center; gap:6px; }
.topbar-timer{ font-size:13px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.save-dot{ width:10px; height:10px; border-radius:50%; background:var(--groen); display:inline-block; }
.save-dot[data-state="saving"]{ background:#E8A800; }
.save-dot[data-state="err"]{ background:#C0392B; }

/* Opvarmnings-fold med sæt − + altid synlig på samme linje (absolut top-højre). */
.ex-fold-wrap{ position:relative; margin-top:14px; border-top:1px solid var(--kant); padding-top:8px; }
.setpm{ position:absolute; top:6px; right:0; display:inline-flex; align-items:center; gap:6px; }
.setpm-label{ font-size:11px; font-weight:700; color:var(--svag); text-transform:uppercase; letter-spacing:.04em; }
.setpm form{ display:inline; margin:0; }
.setpm-btn{
  width:32px; height:26px; padding:0; line-height:1;
  font-size:16px; font-weight:700;
  background:#fafafa; color:var(--tekst);
  border:1px solid var(--kort-kant); border-radius:6px; cursor:pointer;
}
.setpm-btn:hover{ border-color:var(--brand); color:var(--brand); }
.ex-meta-fold{ margin-top:0; }
.ex-meta-fold > summary{
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  font-size:13px; font-weight:700; color:var(--svag);
  display:flex; align-items:center; gap:6px; padding:2px 0;
}
.ex-meta-fold > summary::-webkit-details-marker{ display:none; }
.ex-meta-fold > summary::before{ content:'\203A'; font-size:16px; line-height:1; display:inline-block; transition:transform .15s; }
.ex-meta-fold[open] > summary::before{ transform:rotate(90deg); }
.ex-meta-fold > summary:hover{ color:var(--brand); }
.ex-meta{
  margin-top:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.ex-meta-block{ display:flex; flex-direction:column; gap:4px; min-width:0; }
@media (max-width: 640px){
  .ex-meta{ grid-template-columns:1fr; }
}
.ex-meta-label{
  margin:0; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--svag);
}
.ex-meta-view{
  cursor:text;
  padding:6px 10px;
  border:1.5px dashed transparent;
  border-radius:8px;
  transition:border-color .12s, background .12s;
}
.ex-meta-view:hover{ border-color:#ddd; background:#fafafa; }
.ex-meta-bullets{
  margin:0; padding-left:22px;
}
.ex-meta-bullets li{
  margin:2px 0; line-height:1.4;
}
.ex-meta-empty{
  margin:0; color:var(--svag); font-style:italic;
}
.ex-meta-text{
  width:100%;
  padding:10px 12px;
  font-family:inherit; font-size:15px;
  border:1.5px solid #ccc; border-radius:8px; background:#fff;
  resize:vertical; min-height:120px; max-height:240px;
}
.ex-meta-text:focus{
  outline:none; border-color:var(--brand); background:#f4f7fc;
}
.ex-meta-text::placeholder{
  color:var(--svag); font-style:italic;
}
.ex-meta-view.is-hidden, .ex-meta-text.is-hidden{ display:none; }

/* Session bottom actions */
.session-bottom{
  display:flex; flex-direction:column; gap:10px;
  margin-top:8px; margin-bottom:14px;
}
/* Slut-zone: primær "Afslut træning" i fuld bredde; "Kassér" som afdæmpet
   tekst-link under (sjælden + destruktiv → nedtonet, ingen rød). */
.session-bottom > .btn{ width:100%; }
.session-bottom > form{ display:block; }
.session-bottom > form .btn{ width:100%; }
.session-discard-link{
  -webkit-appearance:none; appearance:none; background:none; border:none;
  display:block; margin:2px auto 0; padding:8px; cursor:pointer; touch-action:manipulation;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--svag);
  text-decoration:underline; text-underline-offset:2px;
}
.session-discard-link:hover{ color:var(--tekst); }

/* "+ Tilføj øvelse" hører ved øvelses-listen (under kortene), ikke i slut-zonen. */
.add-exercise-row{ margin:4px 0 14px; }
.add-exercise-row .btn{ width:100%; }

/* Add-exercise inline form — vertical stack: name input → unit pick
   (+ optional library-opt-in for guest sessions) → action buttons. */
.add-exercise-form{
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:14px; padding:14px;
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:12px;
}
.add-exercise-field{
  display:flex; flex-direction:column; gap:4px;
}
.add-exercise-form input[type=text]{
  width:100%;
  padding:11px 12px; font-size:15px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:10px; background:#fff;
}
.add-exercise-form input[type=text]:focus{
  outline:none; border-color:var(--brand); background:#f4f7fc;
}
/* Søge-vælger: tappbar liste af bibliotek-øvelser der live-filtreres mens
   man skriver — erstatter den native <datalist> (klodset på mobil). */
.add-exercise-results{
  display:flex; flex-wrap:wrap; gap:8px;
  max-height:240px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.add-exercise-results:empty{ display:none; }
.lib-result, .lib-create{
  -webkit-appearance:none; appearance:none;
  padding:9px 13px; min-height:40px;
  font-family:inherit; font-size:14px; font-weight:600;
  border-radius:999px; cursor:pointer;
  touch-action:manipulation;
  transition:background .12s, border-color .12s, color .12s;
}
.lib-result{
  background:#fff; color:var(--tekst);
  border:1.5px solid var(--kort-kant);
}
.lib-result:hover{ border-color:var(--brand); color:var(--brand); }
.lib-create{
  background:color-mix(in srgb, var(--brand) 12%, #fff);
  border:1.5px dashed color-mix(in srgb, var(--brand) 45%, #fff);
  color:var(--brand-mork);
}
.lib-create:hover{ background:color-mix(in srgb, var(--brand) 20%, #fff); border-color:var(--brand); }
.lib-result:focus, .lib-create:focus{ outline:none; }
.lib-result:focus-visible, .lib-create:focus-visible{ box-shadow:0 0 0 3px rgba(21,48,126,.22); }
.lib-result.is-hidden, .lib-create.is-hidden{ display:none; }

.add-exercise-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.add-exercise-newopts{
  display:flex; flex-direction:column; gap:12px;
}
.add-exercise-unit{
  display:inline-flex; align-items:center; gap:8px;
}
.add-exercise-libcheck{ margin:0; }
.add-exercise-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}

/* Tilføj-øvelse top-sheet modal: panel ligger i TOPPEN (så tastaturet ikke
   dækker søgefeltet), dæmpet baggrund; biblioteket vises som en lodret LISTE
   af rækker (ikke chips). */
.modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
}
.modal-backdrop[hidden]{ display:none; }
.modal-sheet{
  background:#fff; width:100%; max-width:560px;
  border-radius:0 0 16px 16px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 22px;
  max-height:85vh; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; }
.modal-title{ font-size:16px; font-weight:800; }
.modal-close{
  -webkit-appearance:none; appearance:none; background:none; border:none;
  font-size:20px; line-height:1; color:var(--svag); cursor:pointer; padding:4px 6px;
  touch-action:manipulation;
}
.modal-close:hover{ color:var(--tekst); }
.lib-search{
  width:100%; box-sizing:border-box; padding:11px 12px; font-size:16px; font-family:inherit;
  border:1.5px solid #ccc; border-radius:10px; background:#fff;
}
.lib-search:focus{ outline:none; border-color:var(--brand); background:#f4f7fc; }
.lib-list{
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--kant); border-radius:10px;
}
.lib-row{
  -webkit-appearance:none; appearance:none; background:#fff; border:none;
  border-bottom:1px solid var(--kant); width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; font-family:inherit; font-size:15px; font-weight:600; color:var(--tekst);
  cursor:pointer; touch-action:manipulation;
}
.lib-row:last-child{ border-bottom:none; }
.lib-row:hover{ background:#f4f7fc; }
.lib-row .lib-chev{ color:var(--svag); font-size:18px; }
.lib-row.lib-create{ color:var(--brand-mork); font-weight:700; }
.lib-row.is-hidden{ display:none; }

/* Same-day prompt card */
.same-day-prompt p{ margin-bottom:10px; }
.same-day-prompt .form-actions{ margin-top:18px; }

/* Phone tweaks */
@media (max-width:480px){
  .ex-card{ padding:14px; }
  .stepper-mini-btn{ width:34px; min-height:40px; font-size:18px; }
  .stepper-mini-val{ width:54px; font-size:17px; }
  .set-num{ min-width:26px; height:26px; font-size:12px; padding:0 7px; }
}

/* ============================================================
   Klienter — printable export page
   ============================================================ */
.export-page{ background:#fff; color:#000; max-width:880px; margin:0 auto; padding:24px; }
.export-controls{
  display:flex; gap:10px; justify-content:flex-end;
  margin-bottom:10px;
}
.export-tip{
  margin:0 0 14px; padding:8px 12px; font-size:12px;
  background:#f5f5f5; color:var(--svag); border-radius:8px;
}

.export-header{
  display:flex; align-items:center; gap:16px;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:2px solid var(--brand);
}
.export-gen{ margin:2px 0 0; }
.export-main h1{ margin:0; font-size:22px; }
.export-main h2{ margin:24px 0 8px; font-size:18px; border-bottom:1px solid #ddd; padding-bottom:4px; }
.export-main h3.mini{ margin:14px 0 6px; font-size:14px; font-weight:700; }
.export-table{
  width:100%; border-collapse:collapse; margin:6px 0 12px; font-size:13px;
}
.export-table th, .export-table td{
  border:1px solid #ddd; padding:5px 8px; text-align:left; vertical-align:top;
}
.export-table th{ background:#f4f4f4; font-weight:700; }
.export-list{ margin:4px 0 10px 22px; padding:0; }
.export-list li{ margin:1px 0; }

@page{
  size:A4; margin:18mm 12mm 18mm;
  @bottom-center{
    content: "Side " counter(page) " af " counter(pages);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 10pt; color:#666;
  }
}
.export-main h2{ break-before:page; break-after:avoid; }
.export-main h2:first-of-type{ break-before:auto; }
.export-table{ break-inside:avoid; }

@media print{
  .export-page{ background:#fff; max-width:none; padding:0; margin:0; }
  .export-controls, .export-tip{ display:none !important; }
}

/* --- Indstillinger (settings.php) ----------------------------------- */
.settings-section{
  margin-bottom:26px;
}
.settings-section h2{
  font-size:18px; font-weight:800; margin-bottom:12px;
}
.settings-form{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:14px;
  padding:20px 22px; max-width:480px;
}
.settings-row{
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}
.settings-label{ font-weight:700; font-size:14px; }
.settings-hint{
  color:var(--svag); font-size:12px; line-height:1.4;
  margin-top:-2px;
}
.settings-form select,
.settings-form input[type=text]{
  font:inherit; padding:8px 10px; border:1.5px solid var(--kort-kant);
  border-radius:8px; background:#fff; max-width:300px;
}
.settings-form input[type=color]{
  width:60px; height:36px; padding:0; border:1.5px solid var(--kort-kant);
  border-radius:8px; background:#fff; cursor:pointer;
}
.color-picker-pair{
  display:inline-flex; align-items:center; gap:8px;
}
.color-picker-pair .hex-input{
  font:inherit; padding:8px 10px; border:1.5px solid var(--kort-kant);
  border-radius:8px; background:#fff;
  width:100px; font-family:monospace; font-size:13px;
  text-transform:uppercase;
}
.color-picker-pair .hex-input:invalid{
  border-color:#9C0006;
}

/* Theme list */
.theme-list{
  list-style:none; padding:0; margin:0 0 14px;
  display:flex; flex-direction:column; gap:10px;
  max-width:480px;
}
.theme-row{
  background:#fff; border:1.5px solid var(--kort-kant); border-radius:12px;
  overflow:hidden;
}
.theme-row-aktiv{ border-color:var(--brand); }
.theme-row > details > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.theme-row > details > summary::-webkit-details-marker{ display:none; }
.theme-row > details > summary::before{
  content:'›';
  display:inline-block; flex:0 0 auto;
  width:14px; font-size:20px; font-weight:700;
  color:var(--svag); line-height:1; text-align:center;
  transition:transform .15s ease;
}
.theme-row > details[open] > summary::before{
  transform:rotate(90deg);
}
.theme-row > details > .settings-form{
  margin:0;
  border:none; border-top:1.5px solid var(--kort-kant);
  border-radius:0;
  padding:14px 16px 18px;
  max-width:none;
}
.theme-head{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
}
.theme-name{ font-weight:700; font-size:15px; }
.theme-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:11px; font-weight:700;
}
.theme-swatches{
  display:flex; gap:6px; flex:0 0 auto;
}
.theme-swatch{
  display:inline-block; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--kort-kant);
}
.theme-actions{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
  flex:0 0 auto;
}
.theme-actions .inline-form{ display:inline; }
.theme-form h3{ font-size:16px; font-weight:800; margin-bottom:12px; }
.theme-form-actions{
  display:flex; align-items:center; gap:14px; margin-top:6px;
}
.btn-link{
  color:var(--svag); text-decoration:underline; font-size:14px;
}
.btn-link:hover{ color:var(--brand); }

@media (max-width:480px){
  .theme-row > details > summary{
    flex-wrap:wrap;
  }
  .theme-actions{
    width:100%; justify-content:flex-start;
  }
}

/* Dato-rapport-panel på Aftaler (klient → træner). Chevron-first som
   theme-row, men selvstændigt så det kan åbnes/lukkes uafhængigt. */
.report-panel{ padding:0; }
.report-panel > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:14px 16px; font-weight:700; color:var(--brand);
  display:flex; align-items:center; gap:12px;
}
.report-panel > summary::-webkit-details-marker{ display:none; }
.report-panel > summary::before{
  content:'›'; display:inline-block; flex:0 0 auto;
  width:14px; font-size:20px; font-weight:700; color:var(--svag);
  line-height:1; text-align:center; transition:transform .15s ease;
}
.report-panel[open] > summary::before{ transform:rotate(90deg); }
.report-panel > p,
.report-panel > .report-form{ padding:0 16px; }
.report-panel > p{ margin-top:0; }
.report-panel > .report-form{ padding-bottom:16px; }
.report-range{ display:flex; flex-wrap:wrap; gap:16px; }
.report-range .field{ flex:1 1 160px; margin-bottom:10px; }
.report-counts{ margin:0 0 12px; font-weight:700; color:var(--brand); }
.report-sendsto{ margin:0 0 14px; }

/* Palette-bundknapper: "+ Nyt tema" + "Genskab system-paletter" side om side. */
.palette-bottom-actions{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.palette-bottom-actions .inline-form{ display:inline; margin:0; }

/* --- Aktivitet (login-audit) --- */
.status-ok{ color:var(--groen); font-weight:600; }
.status-failed{ color:#9C0006; font-weight:600; }
.status-reason{ display:block; color:var(--svag); font-size:12px; margin-top:1px; }
tr.row-rejected td{ background:#fff5f5; }