/* ═══════════════════════════════════════════════════════════
   Kontaktoplysninger (KOED-004) — tabel, matrix og faneblade
   ═══════════════════════════════════════════════════════════ */

.filter-felt.vokser{flex:2;min-width:220px}
.afsnit-navn{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blaek-svag);margin:var(--s5) 0 var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linje-svag)}
.dialog-knapper.venstre{justify-content:flex-start;border-top:none;padding-top:0}

/* ── Tabel ── */
.tabel-panel{padding:0;overflow:hidden}
.tabel-rul{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap}
.tabel thead th{
  position:sticky;top:0;z-index:2;background:var(--creme);text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blaek-svag);padding:11px 12px;border-bottom:1px solid var(--linje)}
.tabel td{padding:10px 12px;border-bottom:1px solid var(--linje-svag);vertical-align:middle}
.tabel tbody tr:last-child td{border-bottom:none}
.tabel-raekke{cursor:pointer;transition:background .18s var(--e-ud)}
.tabel-raekke:hover{background:var(--creme)}
.tabel-raekke.inaktiv{opacity:.5}
.k-navn{min-width:180px}
.k-dato{min-width:108px}
.t-navn{display:block;font-weight:600;font-size:14px}
.t-under{display:block;font-size:11.5px;color:var(--blaek-svag)}
.t-tal{font-variant-numeric:tabular-nums}
.t-mail{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.t-pil{color:var(--blaek-svag);width:28px}
.t-pil svg{width:16px;height:16px}
.privat{color:var(--blaek-svag);font-size:11px}
.tabel .tom{text-align:center;color:var(--blaek-svag);padding:var(--s6)}

.gruppe-maerkat{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;
  border:1px solid var(--linje);background:var(--creme);color:var(--blaek-daemp)}
.gruppe-maerkat.gmedarbejdere{background:#eef3f8;color:#3d6a8c;border-color:#d8e5ef}
.gruppe-maerkat.glrlinge{background:var(--ok-bg);color:var(--ok);border-color:#d5e5d3}
.gruppe-maerkat.gkontor{background:#fdf4e6;color:#96702a;border-color:#f0e2c6}

/* ── Faneblade ── */
.faner{display:flex;gap:2px;border-bottom:1px solid var(--linje);margin:-4px 0 var(--s4)}
.fane{background:none;border:none;padding:10px 16px;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--blaek-daemp);border-bottom:2.5px solid transparent;margin-bottom:-1px;
  transition:color .2s,border-color .2s}
.fane:hover{color:var(--blaek)}
.fane.aktiv{color:var(--blaek);font-weight:600;border-bottom-color:var(--guld)}

/* ── Krydsmatrix i medarbejderkortet ── */
.matrix{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:var(--s3)}
.matrix th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blaek-svag);text-align:left;padding:6px 8px;border-bottom:1px solid var(--linje)}
.matrix td{padding:7px 8px;border-bottom:1px solid var(--linje-svag)}
.matrix tr:last-child td{border-bottom:none}
.m-kryds{width:70px;text-align:center!important}
.m-navn{display:flex;align-items:center;gap:9px}
.m-ikon{width:26px;height:26px;flex:none}
.m-navn .maerkat{font-size:10px;padding:1px 7px}

.kryds{display:inline-flex;cursor:pointer}
.kryds input{position:absolute;opacity:0;width:0;height:0}
.kryds-boks{width:24px;height:24px;border-radius:7px;border:2px solid var(--linje);
  background:var(--papir);display:grid;place-items:center;color:transparent;
  transition:background .18s var(--e-ud),border-color .18s,color .18s}
.kryds-boks svg{width:15px;height:15px;stroke-width:3}
.kryds input:checked ~ .kryds-boks{background:var(--ok);border-color:var(--ok);color:#fff}
.kryds input:disabled ~ .kryds-boks{opacity:.4;cursor:default}
.kryds input:focus-visible ~ .kryds-boks{outline:3px solid var(--guld);outline-offset:2px}

.tjek-lille{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px;
  margin:var(--s3) 0;line-height:1.45}
.tjek-lille input{width:17px;height:17px;accent-color:var(--guld);cursor:pointer;flex:none;margin-top:1px}
.tjek-lille em{font-style:normal;color:var(--blaek-svag)}

.kode-raekke{display:flex;gap:8px}
.kode-raekke input{flex:1}
.kode-raekke .knap{flex:none;white-space:nowrap}

/* ── Bred adgangsoversigt ── */
.matrix-bred th.k-lodret{
  height:132px;vertical-align:bottom;padding:6px 2px;width:44px;min-width:44px;max-width:44px}
.matrix-bred th.k-lodret span{
  display:block;writing-mode:vertical-rl;transform:rotate(180deg);
  text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600;color:var(--blaek);
  max-height:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matrix-bred .fast{position:sticky;left:0;z-index:1;background:var(--papir);
  box-shadow:1px 0 0 var(--linje)}
.matrix-bred thead .fast{z-index:3;background:var(--creme)}
.matrix-bred tbody tr:hover .fast{background:var(--creme)}
.matrix-bred tbody tr:hover{background:var(--creme)}
.k-celle{text-align:center;padding:5px 2px!important;white-space:nowrap}
.mini-kryds{width:21px;height:21px;border-radius:6px;border:1.5px solid var(--linje);
  background:var(--papir);color:var(--blaek-svag);font-size:10.5px;font-weight:700;
  cursor:pointer;padding:0;margin:0 1px;line-height:1;
  transition:background .16s var(--e-ud),color .16s,border-color .16s}
.mini-kryds:hover:not([disabled]){border-color:var(--sand)}
.mini-kryds.paa{background:var(--ok);border-color:var(--ok);color:#fff}
.mini-kryds.paa.admin{background:var(--guld-mork);border-color:var(--guld-mork)}
.mini-kryds.laast{opacity:.45;cursor:default}

@media (max-width:900px){
  .tabel{font-size:12.5px}
  .tabel td,.tabel thead th{padding:9px 9px}
  .t-mail,.k-dato{display:none}
  .faner{overflow-x:auto}
}
@media (max-width:560px){
  .tabel th:nth-child(3),.tabel td:nth-child(3),
  .tabel th:nth-child(6),.tabel td:nth-child(6),
  .tabel th:nth-child(7),.tabel td:nth-child(7){display:none}
  .kode-raekke{flex-direction:column}
}

/* ── Feltmærkater: iOS-synk vs. kun web ── */
.fmaerkat{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  padding:1.5px 7px;border-radius:99px;border:1px solid transparent;vertical-align:middle;
  margin-left:5px;line-height:1.6;white-space:nowrap}
.f-ios{background:#eaf2f8;color:#3d6a8c;border-color:#d3e3ef}
.f-web{background:#f2efe9;color:#7d7365;border-color:var(--linje)}

.forklaring{padding:var(--s4) var(--s5)}
.forklaring-linje{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  color:var(--blaek-daemp);line-height:1.5;padding:5px 0}
.forklaring-linje .fmaerkat{margin-left:0;flex:none;margin-top:2px}
.forklaring-linje.mini{gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;
  padding:0 0 var(--s3);margin:0 0 var(--s3);border-bottom:1px solid var(--linje-svag)}
.forklaring-linje.mini span{color:var(--blaek-svag)}

.t-navn-celle{font-weight:600}
.t-navn-celle .t-under{font-weight:400}
.t-svag{color:var(--blaek-svag)}
.t-fil{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.t-kode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ja-ikon{width:16px;height:16px;color:var(--ok);stroke-width:2.6}

/* ── Fremhævet versionskort ── */
.panel.fremhaevet{background:linear-gradient(160deg,#fffdf7,var(--papir));
  border-color:var(--sand);text-align:center;padding:var(--s6) var(--s5)}
.stor-navn{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blaek-svag);margin:0 0 var(--s2)}
.stor-revision{font-family:var(--f-display);font-size:40px;font-weight:700;margin:0;
  color:var(--guld-mork);line-height:1.1}
.stor-under{font-size:13px;color:var(--blaek-daemp);margin:6px 0 var(--s3)}
.panel.fremhaevet .hjaelp-tekst{margin:0}
.panel-alle svg{width:14px;height:14px}
.f-delt{background:var(--ok-bg);color:var(--ok);border-color:#d5e5d3}
.detalje code,.hjaelp-tekst code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;background:var(--creme);border:1px solid var(--linje);
  border-radius:4px;padding:1px 5px}

.adgang-cyklus{min-width:42px;min-height:42px;font-size:18px}.adgang-cyklus:disabled{opacity:.5}.matrix-bred .fast{position:sticky;left:0;background:#faf8f3;z-index:1}

:root{--program-ikon:26px}.m-ikon{width:var(--program-ikon);height:var(--program-ikon);object-fit:contain;flex:none;vertical-align:middle}.program-label{display:flex;align-items:center;gap:10px}.matrix-program{display:grid;justify-items:center;gap:8px;min-width:95px}.sort-gruppe td{background:#eee5d6!important;padding:14px 18px;border-top:2px solid #BF9C5A;font-size:17px;text-align:left}.profilfoto{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#eee5d6}.profilfoto.stor{width:100px;height:100px}.foto-placeholder{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#eee5d6}.dokument-tal{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer}.telefon-ramme{width:min(100%,440px);height:min(68dvh,650px);margin:12px auto;border:9px solid #252525;border-radius:38px;background:#faf8f4;box-shadow:0 12px 30px #0002;display:flex;flex-direction:column;overflow:hidden}.telefon-kamera{height:12px;min-height:12px;width:80px;background:#252525;border-radius:0 0 10px 10px;margin:0 auto 8px}.telefon-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 18px;overscroll-behavior:contain}.telefon-hjem{height:5px;min-height:5px;width:90px;background:#252525;margin:10px auto;border-radius:4px}.telefon-scroll .detalje-raekke{grid-template-columns:1fr}.telefon-scroll .detalje{padding:0}.dokument-afsnit{padding:20px 0}.dokument-afsnit h3{margin-bottom:12px}.dokument-liste{list-style:none;padding:0}.dokument-liste li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--linje);flex-wrap:wrap}.dokument-liste li>span:first-of-type{flex:1;overflow-wrap:anywhere}.dokument-liste small{display:block;color:var(--blaek-daemp)}.carddav-panel{padding:24px;max-width:700px}.top-hojre #bruger{overflow-wrap:anywhere;max-width:38vw}.footer,.footer-hojre{background:#BF9C5A;color:white}.profilbillede-redigering{margin-bottom:18px}
.foto-placeholder svg{width:26px;height:26px}.tabel th:first-child,.tabel td:first-child{min-width:58px}.telefon-ramme .felt input{max-width:100%}

/* ── Formularfelter ── */
.felt-navn{display:block;font-size:13px;font-weight:600;color:var(--blaek-daemp);margin-bottom:6px}
.felt-navn em,.felt span em{font-style:normal;font-weight:500;color:var(--blaek-svag)}
.felt textarea,.vaelger{width:100%;padding:11px 13px;border:1.5px solid var(--linje);
  border-radius:var(--r-sm);background:#fdfcf9;font-family:inherit;
  transition:border-color .2s,box-shadow .2s}
.felt textarea{resize:vertical;min-height:96px;line-height:1.55}
.felt textarea:focus,.vaelger:focus{outline:none;border-color:var(--guld);
  box-shadow:0 0 0 3px rgba(184,153,92,.16)}
.vaelger{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6357' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px;padding-right:36px}
.tael{font-size:12px;color:var(--blaek-svag);text-align:right;margin:-8px 0 var(--s4)}
.hjaelp-tekst{font-size:12px;color:var(--blaek-svag);margin:-8px 0 var(--s4)}

/* ── Billedupload ── */
.upload{display:flex;align-items:center;justify-content:center;gap:9px;
  border:2px dashed var(--linje);border-radius:var(--r-lg);padding:20px;cursor:pointer;
  color:var(--blaek-daemp);font-size:14px;font-weight:500;background:#fdfcf9;
  transition:border-color .25s,background .25s,color .25s}
.upload:hover{border-color:var(--sand);background:var(--creme);color:var(--blaek)}
.upload svg{width:21px;height:21px;color:var(--guld-mork)}
.miniature{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.mini{position:relative;width:86px;height:86px;border-radius:10px;overflow:hidden;
  border:1px solid var(--linje);background:var(--creme);cursor:pointer}
.mini img{width:100%;height:100%;object-fit:cover}
.mini-fjern{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:50%;
  background:rgba(58,51,42,.78);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.mini-fjern svg{width:12px;height:12px;stroke-width:2.6}

/* ── Liste ── */
.liste{display:flex;flex-direction:column}
.liste-raekke{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--linje-svag);
  padding:13px 6px;cursor:pointer;transition:background .2s var(--e-ud)}
.liste-raekke:last-child{border-bottom:none}
.liste-raekke:hover{background:var(--creme)}
.liste-raekke.fremhaev{background:#fffcf3}
.raekke-nr{font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--guld-mork);
  min-width:52px;flex:none}
.raekke-ikon{width:34px;height:34px;flex:none}
.raekke-ikon img{width:100%;height:100%}
.raekke-emoji{font-size:21px;width:34px;text-align:center;flex:none}
.raekke-midt{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.raekke-titel{font-size:14.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raekke-under{font-size:12px;color:var(--blaek-svag);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raekke-hojre{display:flex;align-items:center;gap:8px;flex:none}
.raekke-bil{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--blaek-svag)}
.raekke-bil svg{width:14px;height:14px}
.raekke-flueben{color:var(--ok);line-height:0}
.raekke-flueben svg{width:17px;height:17px;stroke-width:2.4}
.prik-ny{width:8px;height:8px;border-radius:50%;background:var(--fejl);flex:none;
  box-shadow:0 0 0 3px rgba(180,85,63,.15)}

/* ── Mærkater ── */
.maerkat{font-size:11px;font-weight:600;letter-spacing:.03em;padding:3px 10px;border-radius:99px;
  border:1px solid transparent;white-space:nowrap}
.st-ny{background:#eef3f8;color:#3d6a8c;border-color:#d8e5ef}
.st-gang{background:#fdf4e6;color:#96702a;border-color:#f0e2c6}
.st-loest{background:var(--ok-bg);color:var(--ok);border-color:#d5e5d3}
.st-afvist{background:#f1efec;color:var(--blaek-daemp);border-color:var(--linje)}
.st-hoej{background:var(--fejl-bg);color:var(--fejl);border-color:#eccfc6}

/* ── Dialog ── */
.dialog-bag{position:fixed;inset:0;z-index:80;background:rgba(58,51,42,.44);
  display:grid;place-items:center;padding:var(--s4);opacity:0;
  transition:opacity .26s var(--e-ud);backdrop-filter:blur(3px);overflow-y:auto}
.dialog-bag.vis{opacity:1}
.dialog{background:var(--papir);border-radius:var(--r-xl);width:100%;max-width:620px;
  max-height:88dvh;display:flex;flex-direction:column;box-shadow:var(--sk-4);
  transform:translateY(14px) scale(.98);transition:transform .3s var(--e-blod);overflow:hidden}
.dialog-bag.vis .dialog{transform:none}
.dialog-hoved{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3);
  border-bottom:1px solid var(--linje)}
.dialog-titel{font-family:var(--f-display);font-size:20px;font-weight:700;margin:0;flex:1;
  overflow:hidden;text-overflow:ellipsis}
.dialog-luk{background:none;border:none;cursor:pointer;color:var(--blaek-svag);padding:5px;line-height:0;
  border-radius:8px;transition:background .2s,color .2s}
.dialog-luk svg{width:19px;height:19px;stroke-width:2.2}
.dialog-luk:hover{background:var(--creme);color:var(--blaek)}
.dialog-krop{padding:var(--s5);overflow-y:auto}
.dialog-knapper{display:flex;gap:var(--s3);justify-content:flex-end;margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--linje);flex-wrap:wrap}
.dialog-knapper .knap svg{width:15px;height:15px}

/* ── Detaljer ── */
.detalje-linje{display:flex;gap:var(--s3);padding:7px 0;border-bottom:1px solid var(--linje-svag);
  font-size:13.5px}
.detalje-linje span{color:var(--blaek-svag);min-width:86px;flex:none}
.detalje-blok{margin:var(--s4) 0}
.detalje-blok.svar{background:var(--ok-bg);border:1px solid #d5e5d3;border-radius:var(--r-md);
  padding:13px 15px}
.detalje-navn{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blaek-svag);margin-bottom:6px}
.detalje-tekst{margin:0;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.detalje-raekke{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

/* ── Stort flueben ── */
.tjek-stor{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--creme);border:1.5px solid var(--linje);border-radius:var(--r-lg);
  padding:13px 15px;margin:var(--s4) 0;transition:border-color .25s,background .25s}
.tjek-stor:hover{border-color:var(--sand)}
.tjek-stor input{position:absolute;opacity:0;width:0;height:0}
.tjek-boks{width:26px;height:26px;border-radius:8px;border:2px solid var(--linje);background:var(--papir);
  display:grid;place-items:center;flex:none;color:transparent;
  transition:background .2s var(--e-ud),border-color .2s,color .2s}
.tjek-boks svg{width:16px;height:16px;stroke-width:3}
.tjek-stor input:checked ~ .tjek-boks{background:var(--ok);border-color:var(--ok);color:#fff}
.tjek-stor:has(input:checked){background:var(--ok-bg);border-color:#d5e5d3}
.tjek-stor input:focus-visible ~ .tjek-boks{outline:3px solid var(--guld);outline-offset:2px}
.tjek-tekst{display:flex;flex-direction:column;line-height:1.35}
.tjek-tekst strong{font-size:14px}
.tjek-tekst em{font-size:12px;font-style:normal;color:var(--blaek-svag)}

/* ── Filter ── */
.filter-panel{padding:var(--s4)}
.filter{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap}
.filter-felt{display:flex;flex-direction:column;gap:5px;min-width:172px;flex:1}
.filter-felt span{font-size:12.5px;font-weight:600;color:var(--blaek-daemp)}
.filter-tjek{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;padding-bottom:11px}
.filter-tjek input{width:17px;height:17px;accent-color:var(--guld);cursor:pointer}

/* ── Diverse ── */
.handling-linje{display:flex;justify-content:flex-end;margin-bottom:var(--s4)}
.handling-linje .knap svg{width:16px;height:16px}
.tom-kort{background:var(--papir);border:1px solid var(--linje);border-radius:var(--r-xl);
  padding:var(--s7) var(--s5);text-align:center;color:var(--blaek-daemp);
  display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.advarsel{background:var(--fejl-bg);color:var(--fejl);border:1px solid #eccfc6;
  border-radius:var(--r-md);padding:12px 15px;font-size:14px}
.ikon-forhaand{margin:-8px 0 var(--s4)}
.ikon-forhaand img{width:52px;height:52px}

.kvittering{text-align:center;padding:var(--s7) var(--s4);display:flex;flex-direction:column;
  align-items:center;gap:var(--s2);animation:kvitInd .55s var(--e-back)}
@keyframes kvitInd{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.kvit-ikon{width:74px;height:74px;border-radius:50%;background:var(--ok-bg);color:var(--ok);
  display:grid;place-items:center;margin-bottom:var(--s3)}
.kvit-ikon svg{width:36px;height:36px;stroke-width:2.6}

/* ── Billedvisning ── */
.lupe{position:fixed;inset:0;z-index:95;background:rgba(28,24,20,.9);display:grid;place-items:center;
  padding:var(--s5);opacity:0;transition:opacity .24s var(--e-ud);cursor:zoom-out}
.lupe.vis{opacity:1}
.lupe img{max-width:100%;max-height:92dvh;border-radius:var(--r-md);box-shadow:var(--sk-4)}

.toast-fejl{background:var(--fejl)}