:root{
  /* VMFK look & feel (matcher hvem.php / admin-login.php) */
  --bg:#6E8CB5;
  --text:#333;
  --box-bg:#fff;
  --accent:#6E8CB5;
  --nav-bg:#fff;
  --border:#ddd;
  --muted:#64748b;

  --radius:12px;
  --shadow:0 0 12px rgba(0,0,0,.18);
  --shadow-soft:0 6px 18px rgba(0,0,0,.12);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background-color:var(--bg);
  background-image:url("/media/background.jpg");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ===== Global typography rhythm ===== */
body{line-height:1.45}
h1,h2,h3{line-height:1.2}

a{color:inherit}

/* Layout */
.app{min-height:100%}
.main{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 28px;
}

/* =========================
   Header / Nav (som hvem.php)
   ========================= */

/* iFrame embedding: transparent background so the host page shows through */
.in-iframe body{
  background:transparent !important;
  background-image:none !important;
}
.in-iframe header{
  width:min(1100px, calc(100% - 28px));
  margin:14px auto 0;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 6px rgba(0,0,0,.06) !important;
  border-radius:16px;
  overflow:hidden;
}
.in-iframe .header-inner{
  max-width:none;
  padding:0 14px;
}
.in-iframe header img.logo,
.in-iframe .club-title,
.in-iframe .header-right{
  display:none !important;
}
.in-iframe .header-left{
  display:none !important;
}
.in-iframe .header-nav{
  width:100%;
  justify-content:center;
}

header{
  background-color:var(--nav-bg);
  padding:0;
  display:flex;
  align-items:stretch;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  min-height:64px;
}

/* Inner wrapper: constrains header content to same max-width as .main */
.header-inner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

header img.logo{
  height:40px;
  width:auto;
  border-radius:50%;
  display:block;
}

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.header-left a.header-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
}

.club-title{
  font-weight:bold;
  color:var(--accent);
  font-size:16px;
  line-height:1.1;
}

/* Navlinks centered between logo and logout */
.header-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap;
}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Navlink: white background inactive, accent pill active */
.navlink{
  text-decoration:none;
  color:#374151;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.navlink:hover{
  background:rgba(110,140,181,.12);
  border-color:rgba(110,140,181,.25);
  color:var(--accent);
}

.navlink.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  font-weight:700;
  box-shadow:0 2px 8px rgba(110,140,181,.35);
}

/* Legacy .nav element: hidden (navlinks now live in header) */
.nav{display:none}

/* =========================
   Cards ("kort look")
   ========================= */
.card{
  background:var(--box-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:0 0 16px;
}

/* Cards that should match height in a grid row */
.card.stretch{display:flex;flex-direction:column}
.card.stretch > .form{flex:1 1 auto}
.card.stretch .actions{margin-top:auto}

.card h1{font-size:22px;margin:0 0 10px;color:var(--accent)}
.card h2{font-size:20px;margin:0 0 10px;color:var(--accent)}
.card h3{font-size:18px;margin:0 0 8px;color:#111}

.card p{margin:0 0 10px;line-height:1.45}
.card p:last-child{margin-bottom:0}

.muted{color:var(--muted)}

/* KPI (dashboard) */
.kpi{display:grid;grid-template-columns:1fr;gap:6px 14px}
.kpi .num{font-size:34px;font-weight:bold;color:#111;line-height:1.05}
.kpi .label{font-weight:bold;color:var(--accent)}
@media (min-width:700px){
  .kpi{grid-template-columns:90px 1fr;align-items:center}
  .kpi .num{text-align:right}
}

/* Members → Status (3 kolonner, maks 4 rækker, ingen overskrifter) */
.status-grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(4, auto);
  /* Fordel 3 kolonner ligeligt indenfor rammen */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px 24px;
  align-items:start;
}

/* Indstillinger → Roller: dropdowns 20% smallere men stadig højrestillet */
.roles-form select{
  width:90%;
  justify-self:end;
}
.status-item{
  display:grid;
  /* fast bredde til tal-kolonnen giver pæn højrestilling på tværs */
  grid-template-columns:60px 1fr;
  gap:10px;
  align-items:baseline;
}
.status-item .value{
  font-size:28px;
  font-weight:700;
  color:#111;
  line-height:1.05;
  text-align:right;
  justify-self:end;
}
.status-item .label{
  font-weight:700;
  color:var(--accent);
  white-space:nowrap;
}

/* =========================
   Buttons (samme stilretning)
   ========================= */
.start-btn,
.btn,
button{
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.start-btn,
.btn{
  background-color:var(--accent);
  color:#fff;
  padding:10px 18px;
  min-height:44px;
  border-radius:8px;
  font-weight:bold;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.btn.secondary{
  background:#fff;
  color:var(--accent);
  border:1px solid rgba(0,0,0,.10);
}

/* Utility: ensure two actions can be made equal width (e.g. Filtrér / Opret) */
.btn.wide{min-width:200px}
.btn.compact{min-width:auto !important;width:auto !important;padding-left:14px;padding-right:14px}

/* =========================
   Tabs (Indstillinger undersider) — pill segment style matching Kontingent feeTypeSwitch
   ========================= */
.settings-tabs{
  margin-bottom:14px;
}
.settings-segment{
  display:inline-flex;
  align-items:center;
  background:rgba(110,140,181,.10);
  border:1px solid rgba(110,140,181,.18);
  border-radius:999px;
  padding:3px;
  gap:2px;
  flex-wrap:wrap;
}
.settings-seg-opt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  color:#0f172a;
  white-space:nowrap;
  transition:background .17s ease, color .17s ease, box-shadow .17s ease;
}
.settings-seg-opt:hover{
  background:rgba(110,140,181,.15);
}
.settings-seg-opt.active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* Legacy .tabbtn — keep for any remaining usage outside settings */
.tabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tabbtn{
  text-decoration:none;
  color:var(--accent);
  font-weight:bold;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  min-height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}
.tabbtn:hover{background:#fff}
.tabbtn.active{background:var(--accent);color:#fff;border-color:rgba(0,0,0,.08)}

.btn.danger{
  background:#b91c1c;
}

.btn.success{
  background:#16a34a;
}

.start-btn:hover,
.btn:hover{filter:brightness(.97)}
.start-btn:active,
.btn:active{transform:translateY(1px)}

.btn:disabled,
button:disabled{
  cursor:not-allowed;
  opacity:.6;
  filter:none;
  transform:none;
}

/* =========================
   Forms
   ========================= */
label{font-weight:bold;color:#111;font-size:14px}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
select,
textarea{
  width:100%;
  max-width:520px;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:16px;
  background:#fff;
  box-sizing:border-box;
}

textarea{min-height:110px;resize:vertical}

.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px;min-width:220px}

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

/* Two fields on the same logical row */
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-row input{max-width:620px}



/* =========================
   Utility layout (grid / form / div-tables)
   ========================= */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:900px){
  .grid{grid-template-columns:1fr 1fr; align-items:stretch}
}

/* Forms used across admin pages */
.form{display:flex;flex-direction:column;gap:12px}
.form .row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:10px;
  align-items:center;
}
.form .row input,
.form .row select,
.form .row textarea{max-width:100%}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;justify-content:flex-end;align-items:flex-end}
.right{text-align:right}


/* Div-based tables (.table/.thead/.trow) */
.table{
  width:100%;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.thead, .trow{
  display:flex;
  gap:12px;
  padding:10px 12px;
  align-items:center;
}
.thead{
  background:rgba(110,140,181,.10);
  font-weight:bold;
}
.trow{border-top:1px solid rgba(0,0,0,.06)}
.thead > div, .trow > div{flex:1; min-width:0}
.thead > div:last-child, .trow > div:last-child{flex:0 0 auto}

/* =========================
   Tables
   ========================= */
.tablewrap{overflow:auto;border-radius:12px;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,.08)}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
th,td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;vertical-align:top}
th{background:rgba(110,140,181,.10);color:#111;font-weight:bold}
tr:last-child td{border-bottom:0}

/* Resizable columns (tables with class="resizable") */
/* table-layout:fixed is REQUIRED: prevents the browser from recalculating
   column widths based on content, which causes "jumpy" resize behaviour. */
table.resizable{table-layout:fixed}
table.resizable th{position:relative}
table.resizable .col-resize{
  position:absolute;
  right:0;
  top:15%;
  width:5px;
  height:70%;
  cursor:col-resize;
  user-select:none;
  /* Permanent visible separator line */
  border-right:2px solid rgba(110,140,181,.35);
  border-radius:1px;
}
table.resizable .col-resize:hover{background:rgba(110,140,181,.30);border-right-color:transparent;top:0;height:100%;border-radius:0}
/* Clip td content to the column width set by the resize handle */
table.resizable td{overflow:hidden}

/* ── feesTable: Betalt column ─────────────────────────────────────────
   Make the paid-date form fill the full td width so the column resize
   handle moves both the header divider AND the content edge together,
   exactly like all other columns in the table.                        */
#feesTable td .paid-date-form{
  display:block;
  width:100%;
  margin:0;
}
#feesTable td .paid-date{
  width:100%;
  max-width:none;
  padding:6px 8px;
  font-size:13px;
}

/* ── feesTable: Kontingent column ────────────────────────────────────
   The flex container fills the full td width so the right edge of the
   controls tracks the column divider when resized.                    */
#feesTable td .fees-pay-cell{
  width:100%;
}

/* Members page: keep member tables clipped to the wrapper width.
   Prevents a horizontal scrollbar when the fixed/resizable columns would
   otherwise overflow by a few pixels due to widths, borders and padding. */
body.page-members .tablewrap{overflow-x:hidden;}

/* Fees page: never show horizontal scrollbar on either overview table.
   The resize system keeps sum(col widths) <= table width, so a horizontal
   scrollbar should never appear; this ensures it even on first load before
   JS has locked the widths. Matches the body.page-members pattern. */
body.page-fees .tablewrap{overflow-x:hidden;}

/* =========================
   Login (som hvem.php)
   ========================= */
.login-box{
  max-width:420px;
  width:90%;
  margin:60px auto 0;
  background:var(--box-bg);
  padding:35px 25px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 0 12px rgba(0,0,0,.18);
}

.login-box h2{
  margin:0;
  font-size:22px;
  color:var(--accent);
}

.login-box input[type=email],
.login-box input[type=password]{
  width:100%;
  max-width:350px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  margin-top:20px;
  font-size:16px;
  box-sizing:border-box;
}

.login-btn{
  margin-top:25px;
  width:100%;
  max-width:350px;
  padding:16px 20px;
  background-color:var(--accent);
  color:#fff;
  border-radius:8px;
  font-size:18px;
  font-weight:bold;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.login-error{color:#b91c1c;font-weight:bold;margin:12px 0 0}

.login-logo{
  width:90%;
  max-width:420px;
  margin:18px auto 0;
  display:flex;
  justify-content:center;
}
.login-logo img{
  width:70%;
  max-width:260px;
  height:auto;
  display:block;
}

/* Flash messages */
.flash{max-width:1100px;margin:12px auto 0;padding:0px 0px;border-radius:10px;background:#fff;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,.08)}
.flash.info{border-left:6px solid var(--accent)}
.flash.bad{border-left:6px solid #b91c1c}
.flash.ok{border-left:6px solid #15803d}



/* =========================
   Utility layout (grid / form / div-tables)
   ========================= */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.grid{grid-template-columns:1fr 1fr;align-items:start}}

/* Force single-column layout even on wide screens (used for Settings tabs like Mail/Backup/Medlemstyper) */
.grid.onecol{grid-template-columns:1fr}
@media (min-width:900px){.grid.onecol{grid-template-columns:1fr}}

.form{display:flex;flex-direction:column;gap:12px}
.form .row{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center}
.form .row input,.form .row select,.form .row textarea{max-width:100%}

/* Four-column form row (label+field | label+field) */
.form .row.two-up{
  grid-template-columns:200px minmax(220px,1fr) 140px minmax(220px,1fr);
  column-gap:12px;
  row-gap:10px;
  align-items:center;
}

/* Three-column form row (label + field + field) */
.form .row.three-up{
  grid-template-columns:200px minmax(220px,1fr) 160px;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
}
@media (max-width:900px){
  .form .row.two-up{grid-template-columns:200px minmax(180px,1fr) 120px minmax(180px,1fr)}
  .form .row.three-up{grid-template-columns:200px minmax(180px,1fr) 140px}
}


/* Two fields on the same logical row (used in "Redigér medlem") */
.inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.inline-field{display:grid;grid-template-columns:140px 1fr;gap:8px;align-items:center}
@media (max-width:900px){.inline-field{grid-template-columns:120px 1fr}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.right{text-align:right}


/* Settings: checkbox grid (e.g. Sæsoner) */
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:start}
.checkbox-grid label{display:flex;gap:8px;align-items:center;font-weight:normal}
.muted{color:rgba(0,0,0,.65);font-size:12px;font-weight:normal;line-height:1.25}

.table{width:100%;border:1px solid rgba(0,0,0,.08);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.thead,.trow{display:flex;gap:12px;padding:10px 12px;align-items:center}
.thead{background:rgba(110,140,181,.10);font-weight:bold}
.trow{border-top:1px solid rgba(0,0,0,.06)}
.thead>div,.trow>div{flex:1;min-width:0}
.thead>div:last-child,.trow>div:last-child{flex:0 0 auto}

/* Misc UI helpers used across pages */
.container{max-width:1100px;margin:0 auto}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.title{font-weight:800;color:var(--accent);font-size:18px}
.sub{color:var(--muted);font-size:13px}
.hint{color:var(--muted);font-size:13px}
.stack{display:flex;flex-direction:column;gap:8px}
.notice,.alert{padding:10px 12px;border-radius:10px;background:#fff;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,.08);margin:10px 0}
.notice{border-left:6px solid #15803d}
.alert{border-left:6px solid #b91c1c}

/* Notice placed in the page header (between title and year selector) */
.header-notice{margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transition:opacity .45s ease}
.header-notice.fade-out{opacity:0}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(110,140,181,.12);color:#0f172a;white-space:nowrap}
.badge.warn{background:rgba(234,179,8,.18)}
.badge.ok{background:rgba(22,163,74,.18)}
.badge.bad{background:rgba(220,38,38,.18)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.04)}
.pill.mdk-ok{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#166534}
.pill.mdk-bad{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#991b1b}
.pill.mdk-unk{background:rgba(100,116,139,.12);border:1px solid rgba(100,116,139,.25);color:#334155}

/* ==========================================================
   Consistency layer (samme stil på tværs af alle sider)
   ========================================================== */

/* Labels: både <label> og .label (bruges enkelte steder) */
.label{font-weight:bold;color:#111;font-size:14px}

/* Ens formfelter (inkl. fokus/disabled) */
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
select,
textarea{
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(110,140,181,.65);
  box-shadow:0 0 0 4px rgba(110,140,181,.18);
}
input:disabled,
select:disabled,
textarea:disabled{
  background:#f1f5f9;
  color:#475569;
}

/* Ens “select” look (pæn pil) */
select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #475569 50%),
                   linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* Checkbox/radio: ens baseline/spacing */
input[type=checkbox],
input[type=radio]{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

/* Grid utilities (bruges i flere PHP-filer) */
.grid.cols-2{grid-template-columns:1fr;}
@media (min-width:900px){
  .grid.cols-2{grid-template-columns:1fr 1fr;}
}
.grid.cols-3{grid-template-columns:1fr;}
@media (min-width:1100px){
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
}

/* “Stack”-formularer (fx settings.php): label til venstre i desktop */
.stack label{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px;
  align-items:center;
}
.stack label > input,
.stack label > select,
.stack label > textarea{max-width:100%}


/* Knapper i formularer: konsekvent placering */
.stack{gap:10px}
.stack > button.btn{align-self:flex-end;min-width:180px}
.form .actions{justify-content:flex-end}
.actions{justify-content:flex-end}

/* Dashboard: genveje – alle knapper lige brede */
.actions.shortcuts{justify-content:stretch}
.actions.shortcuts .btn{flex:1 1 180px}

/* Ensartede knap-varianter */
.btn.primary{background-color:var(--accent);color:#fff}
.btn.secondary:hover{background:#fff}
.btn.danger{background:#b91c1c;color:#fff}

/* Roles: "Hvem er på valg" marker */
.actions.roles-actions{justify-content:space-between;align-items:flex-end}
.role-heart{display:none;color:#16a34a;margin-left:8px;font-size:14px;line-height:1}
.role-title.is-up-for-election .role-heart{display:inline-block}

/* Header-linjer i kort: alt på samme baseline */
.card-h{align-items:flex-end}

/* =========================
   Filter bars (members etc.)
   ========================= */
.filterbar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.filterbar-form{
  flex:1 1 520px;
  min-width:260px;
  display:grid;
  grid-template-columns: 1fr 220px auto auto;
  gap:12px 14px;
  align-items:end;
}
.filter-item{display:flex;flex-direction:column;gap:6px;min-width:220px}
.filter-item.narrow{min-width:160px}
.filter-item.wide{flex:1;min-width:260px}

/* Search: label + input inline (som screenshot) */
.filter-item.search{flex-direction:row;align-items:center;gap:10px;min-width:320px;flex:1}
.filter-item.search label{margin:0}
.filter-item.search input{max-width:none}

/* Keep controls on the left, even when there's room */
.filter-item.search{min-width:0}
.filter-item.search{grid-column:1 / 2}
.filter-item.narrow{grid-column:2 / 3; min-width:0}
.filter-item.check{grid-column:3 / 4}
.filterbar-form > .filter-item:last-child{grid-column:4 / 5}

/* Checkbox in filterbar */
.filter-item.check{min-width:auto}
.filter-item.check label{display:flex;gap:8px;align-items:center;font-weight:bold}

/* Right side action (e.g. create button) */
.filterbar-actions{display:flex;flex-direction:column;gap:6px}
.filterbar-actions .btn{min-width:200px}
.filterbar-form .btn{min-width:200px}


/* Cards that should stretch to same height in grids (settings) */
.card.stretch{display:flex;flex-direction:column}
.card.stretch .form{flex:1}

/* Header line inside cards where a title and extra info share the same row */
.headline-row{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline}
.headline-row h2{margin:0}


/* Members page */
.filterbar-actions{margin-left:auto}

/* Members: Status + Send mail i samme række */
.members-top{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.members-top .members-status{flex:1 1 520px;min-width:280px}
.members-top .members-mail{flex:0 1 auto;width:fit-content;min-width:300px;max-width:100%;display:flex;flex-direction:column}
.members-mail-grid{display:flex;flex-direction:column;gap:0;width:100%}
.members-mail-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%, 150px),max-content));gap:8px 18px;width:fit-content;max-width:100%}
.members-mail-indoor-grid{display:grid;grid-template-columns:minmax(0,max-content);gap:8px;width:fit-content;max-width:100%}
.members-mail-item{display:flex;align-items:center;gap:8px;margin:0;user-select:none;min-width:0;max-width:100%}
.members-mail-item input[type="checkbox"]{flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px}
.members-mail-item[draggable="true"]{cursor:grab}
.members-mail-item[draggable="true"]:active{cursor:grabbing}
.members-mail-item[draggable="true"]::before{content:"⋮⋮";display:inline-block;line-height:1;opacity:.45;margin-right:2px;transform:translateY(-.5px)}
.members-mail-item.members-mail-indoor::before{content:"⋮⋮";display:inline-block;line-height:1;opacity:0;margin-right:2px;transform:translateY(-.5px)}
.members-mail-item.dragging{opacity:.55}
.members-mail-divider{width:100%;border-top:2px solid rgba(15,23,42,.22);margin:10px 0}
.members-mail #mailtoMembersBtn{width:100%}
.members-mail-actions{margin-top:auto;padding-top:12px}

/* Members: Send mail – collapsible recipient frame */
.members-mail-collapsible{border:1px solid #e2e8f0;border-radius:12px;padding:10px;background:#fff}
.members-mail-collapsible > summary{cursor:pointer;user-select:none;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.members-mail-collapsible > summary::-webkit-details-marker{display:none}
.members-mail-collapsible > summary::after{content:"▾";font-size:14px;line-height:1;transition:transform .15s ease}
.members-mail-collapsible[open] > summary::after{transform:rotate(180deg)}
.members-mail-collapsible-body{padding-top:10px;display:flex;flex-direction:column;gap:0}
.members-mail-toggleall{font-weight:800}
.members-mail-dlist{display:flex;flex-direction:column;gap:6px;font-weight:800;margin:0}
.members-mail-dlist select{min-height:40px}

/* Fees: layout wrapper (replaces outer card) */
.fees-layout{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Fees: segment control (type switch) */
.fees-page-header{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  /* segment left, year-nav right — no title */
}
.fees-page-header .title{
  flex:0 0 auto;
}
.fees-segment{
  display:inline-flex;
  align-items:center;
  background:rgba(110,140,181,.10);
  border:1px solid rgba(110,140,181,.18);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.fees-seg-opt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  color:#0f172a;
  white-space:nowrap;
  transition:background .17s ease, color .17s ease, box-shadow .17s ease;
}
.fees-seg-opt:hover{
  background:rgba(255,255,255,.65);
}
.fees-seg-opt.active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.fees-year-nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.fees-year-input{
  width:92px !important;
  max-width:92px !important;
  font-size:17px !important;
  font-weight:800 !important;
  padding:8px 10px !important;
  text-align:center;
}
.fees-year-season-label{
  font-size:17px;
  font-weight:800;
  color:#fff;
  margin-left:-4px;
  user-select:none;
}
.fees-year-badge{
  display:inline-block;
  background:rgba(110,140,181,.12);
  color:#475569;
  font-size:13px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  vertical-align:middle;
  margin-left:8px;
}

/* =============================================
   FEES – fælles designtokens
   ============================================= */
:root {
  --fees-border:       rgba(110,140,181,.18);
  --fees-separator:    rgba(110,140,181,.15);
  --fees-card-bg:      #fff;
  --fees-card-border:  1px solid rgba(110,140,181,.18);

  /* stat-pills */
  --fees-pill-bg:      rgba(110,140,181,.09);
  --fees-pill-border:  rgba(110,140,181,.20);
  --fees-pill-ok-bg:   rgba(22,163,74,.09);
  --fees-pill-ok-bdr:  rgba(22,163,74,.28);
  --fees-pill-warn-bg: rgba(202,138,4,.11);
  --fees-pill-warn-bdr:rgba(202,138,4,.35);

  /* CTA knapper */
  --fees-cta-bg:       #6E8CB5;
  --fees-cta-hover:    #5a7aa3;
  --fees-cta-text:     #fff;

  /* sekundær knap (Send rykker) */
  --fees-sec-bg:       rgba(110,140,181,.08);
  --fees-sec-border:   rgba(110,140,181,.38);
  --fees-sec-hover-bg: rgba(110,140,181,.15);
  --fees-sec-text:     #3d5a7c;

  /* destruktive knapper */
  --fees-del-text:     #b91c1c;
  --fees-del-border:   rgba(185,28,28,.25);
  --fees-del-hover-bg: rgba(185,28,28,.07);
}

/* =============================================
   Restance-kort
   ============================================= */
.fees-restance-card{
  background:var(--fees-card-bg);
  border:var(--fees-card-border) !important;
}
.fees-restance-row{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;          /* desktop: aldrig brug for wrap */
}
.fees-restance-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;
}
.fees-restance-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
  padding-left:18px;
  border-left:1px solid var(--fees-separator);
}
.fees-restance-stats{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.fees-stat-pill{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  background:var(--fees-pill-bg);
  border:1px solid var(--fees-pill-border);
  border-radius:10px;
  padding:5px 11px;
  white-space:nowrap;
}
.fees-stat-pill.ok{
  background:var(--fees-pill-ok-bg);
  border-color:var(--fees-pill-ok-bdr);
}
.fees-stat-pill.warn{
  background:var(--fees-pill-warn-bg);
  border-color:var(--fees-pill-warn-bdr);
}
.fees-stat-pill .val{
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}
.fees-stat-pill.warn .val{ color:#92400e; }
.fees-stat-pill.ok  .val{ color:#166534; }
.fees-stat-pill .lbl{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.fees-duedate-lbl{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}

/* Send rykker – sekundær CTA */
.btn.ghost{
  background:var(--fees-sec-bg);
  color:var(--fees-sec-text);
  border:1.5px solid var(--fees-sec-border);
  box-shadow:none;
  font-weight:700;
}
.btn.ghost:hover{
  background:var(--fees-sec-hover-bg);
  border-color:rgba(110,140,181,.55);
  filter:none;
}
.btn.ghost:disabled{ opacity:.4; }

/* =============================================
   Kontingent-kort
   ============================================= */
.fees-kontingent-card{
  background:var(--fees-card-bg);
  border:var(--fees-card-border) !important;
}
.fees-kont-row{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;
}
.fees-kont-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;
}
.fees-kont-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
  padding-left:18px;
  border-left:1px solid var(--fees-separator);
}

/* TEST-tilstand pill */
.fees-mail-test-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  cursor:pointer;
}
.fees-mail-test-tilstand{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  transition:color .15s ease;
  white-space:nowrap;
}
.fees-mail-test-tilstand.active{
  color:#92400e;
}

/* Destruktive ghost-knapper */
.btn.danger-ghost{
  background:transparent;
  color:var(--fees-del-text);
  border:1.5px solid var(--fees-del-border);
  box-shadow:none;
  font-size:13px;
  font-weight:700;
  padding:7px 13px;
  min-height:36px;
}
.btn.danger-ghost:hover{
  background:var(--fees-del-hover-bg);
  border-color:rgba(185,28,28,.45);
  filter:none;
}

/* =============================================
   Responsivt: ≤ 860px – højregruppe falder ned
   ============================================= */
@media(max-width:860px){
  .fees-restance-row,
  .fees-kont-row{ flex-wrap:wrap; }
  .fees-restance-left,
  .fees-kont-left{ flex-wrap:wrap; }
  .fees-restance-right,
  .fees-kont-right{
    border-left:0;
    padding-left:0;
    margin-left:0;
    width:100%;
    padding-top:11px;
    border-top:1px solid var(--fees-separator);
    margin-top:10px;
  }
}

/* Member table: Kontingent column – compact paid/unpaid controls */
.fees-pay-cell{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}
.fees-toggle-paid{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  border-radius:999px;
  padding:4px 10px;
  min-height:28px;
  letter-spacing:.3px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:background .15s ease;
}
.fees-toggle-paid.unpaid{
  background:rgba(185,28,28,.1);
  color:#b91c1c;
  border:1.5px solid rgba(185,28,28,.25);
}
.fees-toggle-paid.unpaid:hover{
  background:rgba(185,28,28,.18);
}
.fees-toggle-paid.paid{
  background:rgba(22,163,74,.12);
  color:#15803d;
  border:1.5px solid rgba(22,163,74,.28);
}
.fees-toggle-paid.paid:hover{
  background:rgba(22,163,74,.2);
}
.fees-pm-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0;
  cursor:pointer;
}
.fees-pm-label span{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}


/* Members: Søgning + Handlinger i samme række */
.members-search-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.members-search-row .members-search{flex:1 1 520px;min-width:280px}
.members-search-row .members-actions{flex:0 0 300px;width:fit-content;min-width:260px}
.members-actions-body{display:flex;flex-direction:column;gap:8px;height:100%;margin-top:auto;padding-top:12px}
.members-actions-body .btn{width:100%}
/* Keep the same (fixed) vertical spacing between the action buttons as in the search button column */
/* (Previously margin-top:auto pushed the bottom button to the card bottom, creating a large variable gap.) */
.members-actions-body #createMemberBtn{margin-top:0}

/* Members: make Søgning match Handlinger height and keep controls aligned */
.members-search{display:flex;flex-direction:column}
.members-search form{display:flex;flex-direction:column;flex:1}
.members-search-body{margin-top:auto}

/* Members: Søgning – 2×2 grid
   Left column (input/select) fills all remaining width.
   Right column auto-sizes to button content width.      */
.members-search-bottom{margin-top:auto;padding-top:12px}
.members-search-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  justify-items:stretch;
}
.members-search-input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:40px;
  justify-self:stretch;
}
.members-search-select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:40px;
  justify-self:stretch;
}
.members-search-grid .members-filter-btn{
  white-space:nowrap;
}
/* Legacy selectors — kept for any surviving references */
.members-search-controls{display:contents}
.members-search-btncol{display:contents}
.members-search-label{display:none}
.members-search-fields{display:contents}

@media (max-width:700px){
  /* Members: stack the two cards and make the action card full width */
  .members-search-row{flex-direction:column;}
  .members-search-row .members-search,
  .members-search-row .members-actions{flex:1 1 auto;min-width:0;width:100%}

  /* Members (mobile): show "Handlinger" above "Søgning" */
  .members-search-row .members-actions{order:-1;}
  .members-search-row .members-search{order:0;}

  /* Mobile: grid still works — input/select stretch to full width */
  .members-search-input,
  .members-search-select{
    height:44px;
    min-height:44px;
    padding-top:10px;
    padding-bottom:10px;
  }

  /* Members: action buttons full width */
  .members-actions-body .btn{width:100%;}
}

@media (max-width:700px){
  /* Members: hide Type column in overview for mobile (Status is kept visible) */
  body.page-members #membersTable th:nth-child(2),
  body.page-members #membersTable td:nth-child(2){display:none;}
}

@media (max-width:700px){
  /* Members (mobile): hide Status + Send mail cards */
  body.page-members .members-top{display:none;}

  /* Members (mobile): make search card full width */
  body.page-members .members-search{width:100%;}
  body.page-members .members-search .card-h,
  body.page-members .members-search-body{width:100%;}

  /* Members (mobile): grid goes full width on small screens */
  body.page-members .members-search-grid{width:100%;}
  body.page-members .members-search-btncol{display:contents;}
  body.page-members .members-filter-btn{width:100% !important;min-width:0 !important;max-width:none !important;}

  /* Members (mobile): keep table full width even when editor row is injected */
  body.page-members .tablewrap{width:100% !important;}
  body.page-members #membersTable{
    width:100% !important;
    min-width:100% !important;
    table-layout:fixed; /* prevents reflow when editor row (colspan) appears */
  }
  body.page-members #membersTable th,
  body.page-members #membersTable td{min-width:0;}

  /* Fees (mobile): keep both overview tables full width, no horizontal scrollbar */
  body.page-fees .tablewrap{width:100% !important; overflow-x:hidden;}
  body.page-fees #feesTable{
    width:100% !important;
    min-width:100% !important;
    table-layout:fixed;
  }
  body.page-fees #feesTable th,
  body.page-fees #feesTable td{min-width:0;}


  /* Members (mobile): minimize "Handling" column width in overview table */
  body.page-members #membersTable th:nth-child(4),
  body.page-members #membersTable td:nth-child(4){
    width:1% !important;
    white-space:nowrap !important;
    padding-left:6px;
    padding-right:6px;
    text-align:right;
  }
  body.page-members #membersTable td:nth-child(1){
    width:99% !important;
    overflow:hidden;
  }
  body.page-members #membersTable td:nth-child(1) *{min-width:0;}
  body.page-members #membersTable .row-actions{justify-content:flex-end;}
  body.page-members #membersTable .row-actions .btn{white-space:nowrap;}


  body.page-members .row-actions{gap:6px;}

  body.page-members .row-actions .btn{
    padding:6px 8px;
    min-width:0;
    font-size:12px;
    line-height:1.1;
  }

  /* Member editor (mobile): keep within viewport and stack fields in one column */
  body.page-members #member-editor{max-width:100%;overflow-x:hidden;}
  body.page-members #member-editor .form .row{grid-template-columns:1fr;}
  body.page-members #member-editor .form .row.two-up{grid-template-columns:1fr;}
  body.page-members #member-editor .form .row label{margin-top:4px;}
  body.page-members #member-editor .form input,
  body.page-members #member-editor .form select,
  body.page-members #member-editor .form textarea{width:100%;max-width:none;}
  body.page-members #member-editor .form .row > *{min-width:0;max-width:100%;}
  body.page-members #member-editor .form .row input,
  body.page-members #member-editor .form .row select,
  body.page-members #member-editor .form .row textarea{max-width:100% !important;}

  body.page-members #member-editor .member-status-row{flex-direction:column;align-items:stretch;justify-content:flex-start;}
  body.page-members #member-editor .member-status-row > div{width:100%;justify-content:flex-start !important;}

  /* Member editor (mobile): status toggles */
  body.page-members #member-editor .active-toggle{flex-direction:row-reverse;justify-content:flex-end;}
  body.page-members #member-editor .active-toggle .active-helper{display:none !important;}

  /* Ensure "Aktiv" + "Medlem MDK" checkboxes match size */
  body.page-members #member-editor input[type=checkbox][name="active"],
  body.page-members #member-editor input[type=checkbox][name="mdk_member"]{
    width:18px;height:18px;min-width:18px;min-height:18px;
  }

  /* Date fields: force full width on iOS */
  body.page-members #member-editor input[type="date"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
    display:block;
    padding:12px 14px; /* match standard inputs */
    min-height:44px;
    line-height:1.2;
    font-size:16px;
    -webkit-appearance:none;
  }

  /* Certificates: keep each group on one line, but use the full width */
  body.page-members #member-editor .cert-row{
    display:grid !important;
    width:100%;
    align-items:center;
    font-size:13px;
    column-gap:14px;
    row-gap:0;
  }
  /* Align Under-7kg with Stormodel grid (leave space for J on the right) */
  body.page-members #member-editor .cert-row-u7{grid-template-columns:88px repeat(5, 1fr) !important;}
  body.page-members #member-editor .cert-row-sm{grid-template-columns:88px repeat(5, 1fr) !important;}
  body.page-members #member-editor .cert-row .cert-label{min-width:88px !important;}
  body.page-members #member-editor .cert-row label{
    display:flex;
    justify-content:center;
    gap:2px !important;
    margin:0;
  }
  body.page-members #member-editor .cert-row label span{min-width:12px !important;}

  /* The spacer becomes the empty "J" column for Under-7kg on mobile */
  body.page-members #member-editor .cert-row-u7 .cert-spacer{display:block;}

  /* Hide family section on mobile */
  body.page-members #member-editor .family-section{display:none !important;}

}


.members-list{display:flex;flex-direction:column;gap:3px}
.member-card{padding:12px 14px}
.member-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.member-title{min-width:240px;flex:1 1 420px}
.member-toprow{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.member-name{font-weight:900;font-size:16px;line-height:1.15}
.member-contact-top{margin-left:12px;color:#666;white-space:nowrap}
.member-meta{color:#666;margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.member-type{color:inherit}
.member-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.members-list .pill{padding:2px 8px;font-size:12px}
/* Members table: keep "Redigér" + status button on one line */
.row-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}

/* Native dialog (used for delete confirmation) */
dialog{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
dialog::backdrop{
  background:rgba(15,23,42,.45);
}

/* Slightly smaller buttons inside tables so they fit on one line */
.tablewrap .btn{
  padding:8px 12px;
  min-height:38px;
  font-size:13px;
}



/* Kommunikation */
.tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 14px 0;
}
.tabbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  color:#0f172a;
}
.tabbtn.active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.comm-grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:14px;
  align-items:stretch;
}
.comm-list{
  display:flex;
  flex-direction:column;
  min-height:560px;
}
.comm-list .list{
  flex:1 1 auto;
  overflow:auto;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:8px;
  background:#fff;
}
.comm-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
}
.comm-item:hover{background:#f8fafc}
.comm-item.active{background:#e2e8f0}
.comm-item .name{font-weight:800;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comm-item .meta{font-size:12px;color:#64748b;white-space:nowrap}

/* Kommunikation: skabelonlisten skal kun vise friendly name (ingen filstørrelse/metadata). */
.comm-list .comm-item .meta{display:none}

.comm-editor{
  display:flex;
  flex-direction:column;
  min-height:560px;
}
.comm-editor-top{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.comm-editor-top .left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.comm-editor-top .right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.comm-editor-area{
  flex:1 1 auto;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

/* =============================
   VMFKEditor – custom WYSIWYG
   ============================= */
.vmfke-wrap{
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:inherit;
}
.vmfke-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  padding:6px 8px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
  align-items:center;
}
.vmfke-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 5px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:#374151;
  transition:background .12s,border-color .12s;
  user-select:none;
  line-height:1;
  vertical-align:middle;
}
.vmfke-btn:hover{background:#e2e8f0;border-color:#cbd5e1}
.vmfke-btn.vmfke-active{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.vmfke-sel{
  height:28px;
  padding:0 6px;
  border:1px solid #e2e8f0;
  border-radius:6px;
  background:#fff;
  font-size:12px;
  color:#374151;
  cursor:pointer;
  font-family:inherit;
  width:auto;
  max-width:130px;
}
.vmfke-sel:hover{border-color:#cbd5e1;background:#f1f5f9}
.vmfke-sep{
  display:inline-block;
  width:1px;
  height:20px;
  background:#e2e8f0;
  margin:0 3px;
  vertical-align:middle;
}
.vmfke-colorbtn{
  position:relative;
  overflow:hidden;
}
.vmfke-colorinp{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  top:0;left:0;
  cursor:pointer;
  padding:0;border:0;
}
.vmfke-body{
  flex:1 1 auto;
  min-height:480px;
  padding:16px 20px;
  outline:none;
  font-family:Arial,sans-serif;
  font-size:14px;
  line-height:1.6;
  color:#1e293b;
  overflow-y:auto;
  word-break:break-word;
}
.vmfke-body:focus{outline:none}
.vmfke-body table{border-collapse:collapse;max-width:100%}
.vmfke-body table td,
.vmfke-body table th{border:1px solid #cbd5e1;padding:8px 12px;vertical-align:top}
.vmfke-body table th{background:#f1f5f9;font-weight:700}
.vmfke-body img{max-width:100%;height:auto;border-radius:4px}
.vmfke-body a{color:#2563eb;text-decoration:underline}
.vmfke-body blockquote{
  border-left:4px solid #93c5fd;
  margin:12px 0;
  padding:8px 16px;
  color:#475569;
  background:#f0f9ff;
  border-radius:0 6px 6px 0;
}
.vmfke-body pre{
  background:#1e293b;
  color:#e2e8f0;
  padding:12px 16px;
  border-radius:8px;
  font-family:'Courier New',monospace;
  font-size:13px;
  overflow-x:auto;
}
.vmfke-source{
  display:none;
  flex:1 1 auto;
  min-height:480px;
  padding:14px 16px;
  border:none;
  outline:none;
  font-family:'Courier New',monospace;
  font-size:12px;
  line-height:1.5;
  resize:none;
  color:#1e293b;
  background:#fafafa;
}
.vmfke-statusbar{
  padding:4px 12px;
  font-size:11px;
  color:#94a3b8;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  text-align:right;
}
/* Dialogs */
.vmfke-dialog{
  border:none;
  border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  padding:0;
  max-width:min(560px,96vw);
  width:100%;
}
.vmfke-dialog::backdrop{background:rgba(0,0,0,.35)}
.vmfke-dlg-inner{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.vmfke-dlg-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:#1e293b;
}
.vmfke-dlg-lbl{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#475569;
  margin-bottom:4px;
}
.vmfke-dlg-inp{
  width:100%;
  padding:7px 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  font-size:13px;
  font-family:inherit;
  color:#1e293b;
  background:#fff;
  box-sizing:border-box;
}
.vmfke-dlg-inp:focus{outline:none;border-color:#93c5fd}
.vmfke-dlg-or{
  text-align:center;
  color:#94a3b8;
  font-size:12px;
}
.vmfke-dlg-msg{
  font-size:12px;
  min-height:18px;
  margin-top:4px;
}
.vmfke-dlg-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:6px;
}

/* Kommunikation: inputs matches editor width */
.comm-editor .field{min-width:0}
.comm-editor .field input{width:100%;max-width:none}


.comm-send{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.comm-send .card{height:100%}
.comm-send .field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.comm-send .field input,
.comm-send .field textarea{width:100%}
.comm-send .recipients{display:grid;grid-template-columns:1fr;gap:10px}
.comm-send .recipients .box{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  background:#fff;
  max-height:260px;
  overflow:auto;
}
.comm-send .recipients label{display:flex;gap:8px;align-items:center;padding:6px 4px}
.comm-send-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:12px}

@media (max-width: 700px){
  .comm-grid{grid-template-columns:1fr}
  .comm-send{grid-template-columns:1fr}
  .comm-send .recipients{display:grid;grid-template-columns:1fr;gap:10px}
}


/* === Fixed width for members filter buttons (added) === */
.members-filter-btn,
.clearmembersmembersfilterbtn,
.filtermembersbtn{
  width:120px !important;
  min-width:120px !important;
  max-width:120px !important;
}

/* =========================
   Mobile layout (<=700px)
   - Remove all mobile tweaks except Medlemmer and member_editor.php
   - Apply requested mobile hiding rules
   ========================= */
@media (max-width:700px){
  /* Mobile: collapse header-nav into a hamburger-free minimal layout */
  /* Hide less-used nav items on small screens */
  .header-nav .navlink[href="events.php"],
  .header-nav .navlink[href="communication.php"],
  .header-nav .navlink[href="settings.php"]{display:none !important;}

  /* Kompakt header på mobil */
  .header-inner{padding:0 8px; min-height:52px;}
  .club-title{display:none;}
  header img.logo{height:34px;}
  .header-nav{gap:2px;}
  .navlink{padding:6px 10px;font-size:13px;}


/* ===== MOBIL – Stabil kolonnebredde (table-layout:fixed håndteres af .resizable-reglen) ===== */
/* Denne blok er fjernet: den indeholdt table-layout:auto !important som konfliktede
   med table.resizable{table-layout:fixed} og forårsagede hop under kolonnejustering. */


/* ===== MOBIL – Certifikater: tilbage til normal bogstav/checkbox størrelse (kun størrelser) ===== */
@media (max-width:700px){
  /* Fjern den nedskalerede font-size på certifikat-rækkerne */
  body.page-members #member-editor .cert-row{
    font-size:inherit !important;
  }

  /* Bogstaver (A/S/H/M/J/O) tilbage til normal tekststørrelse */
  body.page-members #member-editor .cert-row label span{
    font-size:16px !important;
    line-height:1 !important;
  }

  /* Checkbokse tilbage til normal størrelse */
  body.page-members #member-editor .cert-row input[type="checkbox"]{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
  }
}


/* Taleboble ved medlemstype / alder-mismatch */
.member-type-bubble{
  position:fixed;
  top:20px;
  right:20px;
  bottom:auto;
  max-width:min(420px,calc(100vw - 40px));
  padding:12px 14px;
  border-radius:12px;
  background:#1e293b;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  line-height:1.4;
  font-size:14px;
  z-index:9999;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.member-type-bubble.show{opacity:1;transform:translateY(0)}
.member-type-bubble strong{display:block;margin:0 0 4px 0;font-size:15px}