/* ============================================================
   IT34 designsystem — uddrag genbrugt fra Handbook/Frontend/design.md
   og it34-demo.html. Kun det undersæt der bruges i dette testkoncept
   er taget med. Bootstrap 5 bruges til grid/layout; disse klasser
   styrer IT34-specifikt udseende ovenpå.
   ============================================================ */

:root{
  --it34-bg:#f1f1f1;
  --it34-surface:#ffffff;
  --it34-primary:#0073a9;
  --it34-on-primary:#ffffff;
  --it34-secondary:#e6e6e6;
  --it34-ink:#222222;
  --it34-muted:#666666;
  --it34-faint:#9f9f9f;
  --it34-error:#b30000;
  --it34-success:#429946;
  --it34-tooltip:#545454;
  --it34-line:#e6e6e6;
  --it34-affix-bg:#f5f5f5;
  --it34-track:#dedede;
  --it34-topbar-shadow:#cccccc;

  --it34-radius:4px;
  --it34-radius-dialog:8px;
  --it34-radius-card:10px;

  --it34-topbar-h:60px;
  --it34-gutter:34px;
  /* Logoets afstand fra venstre kant: 34px, 16px på mobil (design.md "Topbar"). */
  --it34-topbar-logo-inset:34px;
}

[class^="it34-"],[class*=" it34-"],[class^="it34-"] *,[class*=" it34-"] *{
  box-sizing:border-box;
}

body{
  font-family:"Gotham A","Gotham B",Gotham,"Montserrat","Helvetica Neue",Arial,sans-serif;
  background:var(--it34-bg);
  color:rgba(0,0,0,.87);
}

/* Ikoner: MDI-erstatninger som maske, arver currentColor. Kun det
   undersæt der reelt bruges i dette testkoncept. */
.mdi{
  display:inline-block; width:1em; height:1em; vertical-align:-.145em;
  background-color:currentColor; flex:0 0 auto;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.mdi-close         { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.mdi-check         { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E"); }
.mdi-chevron-right { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.mdi-chevron-left  { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.mdi-plus          { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.mdi-delete        { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.mdi-calendar      { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.mdi-refresh       { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
.mdi-tray-arrow-up { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M12 16V3'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3C/svg%3E"); }
.mdi-magnify       { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.mdi-camera        { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.mdi-image         { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
.mdi-arrow-up      { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.mdi-arrow-down    { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E"); }
.mdi-table-edit    { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.mdi-playlist-edit { --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h13M3 12h9M3 18h5'/%3E%3Cpath d='M18.5 10.5a1.77 1.77 0 0 1 2.5 2.5L14.5 19.5 11 20.5l1-3.5z'/%3E%3C/svg%3E"); }
.mdi[class*="mdi-"]{ -webkit-mask-image:var(--i); mask-image:var(--i); }

/* Afkrydsningsfelter og radioknapper i systemets primære blå, ikke browserens. */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--it34-primary); }
.form-check-label{ font-size:14px; color:var(--it34-ink); }

/* Skjules med en klasse, ikke [hidden] — ikonskrifttypens egen display-regel
   kunne ellers overtrumfe [hidden]. */
.is-gone{ display:none !important; }

/* ============================================================
   Topbar
   ============================================================ */
.it34-topbar{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  height:var(--it34-topbar-h);
  background:var(--it34-surface);
  box-shadow:0 0 6px 0 var(--it34-topbar-shadow);
  border-bottom:0;
  padding:0 var(--it34-gutter);
  padding-left:var(--it34-topbar-logo-inset);
  display:flex; align-items:center; gap:0;
}
/* Logoet er billedfilen (img/it34-logo.png) og er altid lige så højt og bredt som topbaren — også på mobil. */
.it34-logo{
  width:var(--it34-topbar-h); height:var(--it34-topbar-h); border-radius:0; flex:0 0 var(--it34-topbar-h);
  display:block; object-fit:contain;
}
@media (max-width: 991.98px){
  :root{ --it34-gutter:16px; --it34-topbar-logo-inset:16px; }
}
.it34-solution{ margin-left:20px; min-width:0; }
.it34-solution-name{
  font-size:18px; line-height:21px; font-weight:500; color:var(--it34-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.it34-customer{
  font-size:16px; line-height:24px; font-weight:400; color:var(--it34-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.it34-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; position:relative; }
.it34-avatar{
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:var(--it34-primary); color:#fff; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; cursor:pointer;
}
/* Profilbillede fra URM (design.md "Avatar"); uden billede vises initialerne. */
.it34-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.it34-content{ padding-top:calc(var(--it34-topbar-h) + 16px); padding-left:16px; padding-right:16px; padding-bottom:16px; }

/* ============================================================
   Avatarmenu
   ============================================================ */
.it34-pop{ position:absolute; top:calc(100% + 4px); right:0; display:none; z-index:1040; }
.it34-pop.is-open{ display:block; }
.it34-menu{
  width:280px; max-width:calc(100vw - 24px); background:var(--it34-surface);
  border-radius:0; box-shadow:0 0 6px 0 rgba(0,0,0,.16); overflow:hidden;
}
.it34-menu-identity{ height:50px; padding:0 10px; display:flex; flex-direction:column; justify-content:center; }
.it34-menu-identity .name{ font-size:13px; line-height:16px; font-weight:500; color:var(--it34-muted); }
.it34-menu-identity .org { font-size:13px; line-height:16px; font-weight:400; color:rgba(0,0,0,.6); }
.it34-menu-item{
  height:40px; padding:0 10px; display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:400; color:rgba(0,0,0,.87); cursor:pointer;
  background:none; border:0; width:100%; text-align:left;
}
a.it34-menu-item{ text-decoration:none; }
a.it34-menu-item:hover{ color:rgba(0,0,0,.87); }
.it34-menu-item .mdi{ margin-left:auto; font-size:18px; color:rgba(0,0,0,.87); }
.it34-menu-item .mdi-check{ color:var(--it34-ink); }
.it34-menu-back{
  height:35px; padding:0 10px; display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--it34-muted); cursor:pointer;
  background:none; border:0; width:100%; text-align:left;
}
.it34-menu-back .mdi{ font-size:16px; }

/* ============================================================
   Knapper
   ============================================================ */
.it34-button{
  border:0; border-radius:var(--it34-radius); box-shadow:none;
  font-weight:500; text-transform:none; letter-spacing:normal;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 24px; cursor:pointer; white-space:nowrap;
}
.it34-button:disabled{ cursor:default; }
.it34-button-medium{ height:32px; font-size:14px; line-height:14px; }
.it34-button-small { height:24px; font-size:12px; line-height:12px; }
.it34-button-primary{ background:var(--it34-primary); color:var(--it34-on-primary); }
.it34-button-secondary{ background:var(--it34-secondary); color:var(--it34-ink); }
.it34-button-disabled,
.it34-button:disabled{ color:var(--it34-faint) !important; }
.it34-button .mdi{ font-size:inherit; }
.it34-button-medium .mdi{ font-size:20px; }
.it34-button-small .mdi{ font-size:16px; }

.it34-text-action{
  background:none; border:0; padding:0;
  font-size:12px; font-weight:500; color:var(--it34-primary);
  text-decoration:none; cursor:pointer; line-height:1;
}

.it34-button-icon{
  background:transparent; border:0; border-radius:var(--it34-radius);
  position:relative; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--it34-ink);
}
.it34-button-icon-small { width:32px; height:32px; }
.it34-button-icon-small  .mdi{ font-size:24px; }
.it34-button-icon-disabled{ color:var(--it34-faint); cursor:default; }

/* ============================================================
   Statusmærke — dæmpet: tekst med en farvet prik foran, ingen farvet flade.
   Kun status bærer farve i listerne; opgavetypen er neutral (se .it34-type).
   Ny (ikke accepteret) er den eneste der kræver handling og står i rav.
   Farven står aldrig alene — teksten siger altid status.
   ============================================================ */
:root{
  --it34-status-ny:#a35f00;
  --it34-status-aktiv:#0073a9;
  --it34-status-afsluttet:#666666;
  --it34-status-godkendt:#2e6b31;
}
.it34-status{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0;
  font-size:12px; font-weight:500; color:var(--it34-ink); white-space:nowrap;
}
.it34-status::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 8px;
  background:var(--it34-status-afsluttet);
}
.it34-status-ny{ color:var(--it34-status-ny); font-weight:600; }
.it34-status-ny::before{ background:var(--it34-status-ny); }
.it34-status-accepteret::before,
.it34-status-undervejs::before{ background:var(--it34-status-aktiv); }
.it34-status-afsluttet::before{ background:var(--it34-status-afsluttet); }
.it34-status-godkendt::before{ background:var(--it34-status-godkendt); }

/* ============================================================
   Inputfelt — size small
   ============================================================ */
.it34-field{ display:flex; align-items:center;
  height:32px; border:1px solid var(--it34-muted); border-radius:var(--it34-radius);
  background:transparent; padding:0; overflow:hidden;
  color:var(--it34-muted);
}
.it34-field input, .it34-field select, .it34-field textarea{
  border:0; outline:0; background:transparent; width:100%;
  font-size:14px; line-height:20px; color:rgba(0,0,0,.87); padding:0 8px;
}
.it34-field textarea{ padding:6px 8px; }
.it34-field.it34-field-multiline{ height:auto; align-items:flex-start; }
.it34-field input::placeholder, .it34-field textarea::placeholder{ color:rgba(0,0,0,.38); }
.it34-field-readonly{ border-color:var(--it34-faint); color:var(--it34-faint); }
.it34-field-error{ border-color:var(--it34-error); }

.it34-input{ display:flex; flex-direction:column; margin-bottom:16px; }
.it34-input > label{
  font-size:12px; line-height:12px; font-weight:500; color:var(--it34-ink);
  margin:0 0 8px;
}
.it34-input-helper-text{
  font-size:14px; line-height:14px; font-weight:400; color:var(--it34-muted);
  margin-top:4px; min-height:14px;
}
.it34-input-error-text{
  font-size:14px; line-height:14px; font-weight:400; color:var(--it34-error);
  margin-top:4px; min-height:14px;
}

/* ============================================================
   Dialog
   ============================================================ */
.it34-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1050;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.it34-overlay.is-open{ display:flex; }
.it34-dialog{
  background:var(--it34-surface); width:480px; max-width:100%;
  border:1px solid var(--it34-line); border-radius:var(--it34-radius-dialog);
  box-shadow:0 16px 32px 0 rgba(0,0,0,.08);
  padding:0 16px; max-height:calc(100vh - 32px); overflow:auto;
}
.it34-dialog.is-wide{ width:560px; }
/* Arbejdsdialogen (design.md, Dialog → Indhold): 716px bred og fast høj, så den ikke hopper når fanebladet skiftes.
   Titel, faste oplysninger, faneblade og knapper står stille; kun .it34-dialog-scroll ruller. */
.it34-dialog.is-work{ width:716px; height:min(860px, calc(100vh - 32px)); display:flex; flex-direction:column; overflow:hidden; }
.it34-dialog.is-work > form{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.it34-dialog.is-work .it34-tabs{ flex:0 0 auto; margin-bottom:0; }
.it34-dialog-scroll{ flex:1 1 auto; min-height:0; overflow:auto; margin:0 -16px; padding:16px 16px 0; }
.it34-dialog.is-work .it34-dialog-actions{ flex:0 0 auto; border-top:1px solid var(--it34-line); margin:0 -16px; padding:16px; }
/* Visning af en værdi under en label (samme tekst som i et felt: 14/20). */
.it34-value{ font-size:14px; line-height:20px; color:var(--it34-ink); white-space:pre-line; overflow-wrap:anywhere; }
/* Opgavefelterne to og to i arbejdsdialogen; lange tekster og flervalg i fuld bredde. */
.it34-dialog.is-work .it34-felt-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:16px; }
.it34-dialog.is-work .it34-felt-grid > .it34-input:has(.it34-field-multiline, .it34-felt-flervalg){ grid-column:1 / -1; }
@media (max-width: 767px){ .it34-dialog.is-work .it34-felt-grid{ grid-template-columns:minmax(0, 1fr); } }
.it34-dialog-title{ display:flex; align-items:center; gap:16px; padding:16px 0; }
.it34-dialog-heading{ font-size:24px; font-weight:600; color:var(--it34-ink); flex:1 1 auto; }
.it34-dialog-text{ font-size:15px; line-height:22px; font-weight:400; color:var(--it34-ink); margin-bottom:16px; }
.it34-dialog-actions{ display:flex; padding:16px 0; justify-content:space-between; }

/* ============================================================
   Tabel
   ============================================================ */
.it34-table-wrap{
  background:var(--it34-surface); border-radius:0;
  border:0; box-shadow:none; overflow:auto;
}
.it34-table{ width:100%; min-width:560px; margin:0; border-collapse:separate; border-spacing:0; }
.it34-table > thead > tr > th{
  height:48px; padding:0 16px; text-align:left; vertical-align:middle;
  font-size:12px; line-height:18px; font-weight:600; color:var(--it34-ink);
  background:var(--it34-surface); border:0; white-space:nowrap;
  position:sticky; top:0; z-index:2;
  box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.12);
}
.it34-table > tbody > tr > td{
  height:40px; padding:0 16px; text-align:left; vertical-align:middle;
  font-size:13px; line-height:19.5px; font-weight:400; color:rgba(0,0,0,.87);
  background:transparent; border:0;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.it34-table > tbody > tr:hover > td{ background:#eeeeee; cursor:pointer; }
.it34-table-actions{
  display:flex; justify-content:flex-end; align-items:center;
  gap:16px; margin-bottom:8px;
}
/* Ikonhandlinger over tabellen (slet/tilføj). Deaktiveret = gennemsigtig. */
.it34-tool-btn{
  width:32px; height:32px; padding:0; border:0; border-radius:0;
  background:transparent; color:rgba(0,0,0,.54); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.it34-tool-btn .mdi{ font-size:24px; }
.it34-tool-btn:disabled{ opacity:.5; pointer-events:none; }
.it34-table .it34-col-select{ width:64px; }
.it34-table input[type=checkbox]{
  width:18px; height:18px; accent-color:var(--it34-primary);
  vertical-align:middle; cursor:pointer; margin:0;
}
.it34-table > thead > tr > th + th{ border-right:1px solid var(--it34-line); }
.it34-table > thead > tr > th:last-child{ border-right:0; }
.it34-text-faint{ color:var(--it34-faint); }
.it34-table-empty{ padding:48px 16px; text-align:center; color:var(--it34-muted); font-size:14px; }

/* ============================================================
   Tooltip
   ============================================================ */
.it34-tt{ position:relative; }
.it34-tt::after{
  content:attr(data-tt);
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--it34-tooltip); opacity:0; color:#fff;
  font-size:12px; line-height:19px; font-weight:400;
  border-radius:0; padding:7px 13px; white-space:nowrap;
  pointer-events:none; transition:opacity .15s; z-index:1080;
}
.it34-tt:hover::after,.it34-tt:focus-visible::after{ opacity:.9; }

/* ============================================================
   Login-side (offentlig, ikke en del af selve designsystemet)
   ============================================================ */
.it34-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.it34-login-card{
  background:var(--it34-surface); border-radius:var(--it34-radius-card);
  box-shadow:0 16px 32px 0 rgba(0,0,0,.08); border:1px solid var(--it34-line);
  width:400px; max-width:100%; padding:32px;
}
.it34-login-logo{
  width:60px; height:60px; border-radius:0; display:block; object-fit:contain; margin-bottom:16px;
}

/* ============================================================
   Faneblade (primær navigation og under-registre) — egen tilføjelse,
   følger samme radius-/farvetoken-logik som resten af systemet.
   ============================================================ */
/* Faneblade efter design.md / it34-demo.html: 15px, bredde følger teksten,
   2px gråt spor under hele rækken og en 4px blå markør der glider. Ingen hover. */
.it34-tabs{ padding:0 0 8px; height:42px; overflow-x:auto; margin-bottom:16px; }
.it34-tabs-inner{
  position:relative; display:flex; align-items:flex-start;
  height:34px; min-width:max-content;
  box-shadow:inset 0 -2px 0 0 var(--it34-line);
}
.it34-tab{
  height:28px; padding:0 5px; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:4px;
  background:none; border:0; cursor:pointer; white-space:nowrap;
  font-size:15px; font-weight:400; color:var(--it34-muted);
  text-transform:none; letter-spacing:normal;
}
.it34-tab + .it34-tab{ margin-left:8px; }
.it34-tab.is-active{ color:var(--it34-ink); font-weight:500; }
.it34-tabs-slider{
  position:absolute; bottom:0; left:0; width:0; height:4px;
  background:var(--it34-primary);
  transition:.3s cubic-bezier(.25,.8,.5,1);
}

.it34-subtabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.it34-subtab{
  appearance:none; cursor:pointer; height:32px; padding:0 14px;
  font-size:13px; font-weight:500; border-radius:16px;
  border:1px solid var(--it34-line); background:var(--it34-surface); color:var(--it34-ink);
}
.it34-subtab.is-active{ background:var(--it34-primary); color:var(--it34-on-primary); border-color:var(--it34-primary); }

/* ============================================================
   Opgavetype-mærke — neutral grå for alle tolv typer (aftalt 2026-10-09:
   de farvede typemærker var for spraglede). Typen læses af teksten.
   ============================================================ */
.it34-type{
  display:inline-flex; align-items:center; height:24px; padding:0 8px;
  border-radius:var(--it34-radius); font-size:12px; font-weight:500;
  background:var(--it34-affix-bg); color:var(--it34-ink); white-space:nowrap;
}

/* ============================================================
   Afkrydsningsliste (personale-valg mv.)
   ============================================================ */
.it34-checklist{
  border:1px solid var(--it34-muted); border-radius:var(--it34-radius);
  max-height:240px; overflow:auto; padding:0;
}
.it34-checklist-item{
  display:flex; align-items:center; gap:12px; height:40px; padding:0 12px;
  font-size:13px; line-height:19.5px; color:rgba(0,0,0,.87); cursor:pointer; margin:0;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.it34-checklist-item:last-child{ border-bottom:0; }
.it34-checklist-item:hover{ background:#eeeeee; }
.it34-checklist-item input{ width:18px; height:18px; margin:0; flex:0 0 18px; accent-color:var(--it34-primary); }
.it34-checklist-item .name{ flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it34-checklist-item .meta{ color:var(--it34-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it34-checklist-item .duty{ margin-left:auto; color:var(--it34-faint); white-space:nowrap; }
.it34-checklist-empty{ padding:12px; color:var(--it34-muted); font-size:13px; }

/* Label med en teksthandling yderst til højre (fx "Vis alt personale").
   Labelen er ikke direkte barn af .it34-input, så stilen gentages her. */
.it34-label-row{ display:flex; justify-content:space-between; align-items:center; margin:0 0 8px; }
.it34-label-row > label{ font-size:12px; line-height:12px; font-weight:500; color:var(--it34-ink); margin:0; }

/* ============================================================
   Vagtplan — datofelt (size small) og statuslinje over en IT34-tabel.
   ============================================================ */
.it34-vagtplan-dato{ margin-bottom:16px; }
.it34-vagtplan-dato-row{ display:flex; align-items:center; gap:16px; }

/* Ikoner i feltet (design.md "Ikon i felt"): 20px, #222, 8px luft til venstre
   og 4px til højre. Her er de klikbare — 24px klikflade, ingen ramme/flade. */
.it34-date-field{ width:256px; position:relative; }
.it34-date-field input{ cursor:pointer; padding:0 4px; }
.it34-field-icon{
  width:24px; height:24px; flex:0 0 24px; padding:0; border:0; border-radius:var(--it34-radius);
  background:transparent; color:var(--it34-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.it34-field-icon .mdi{ font-size:20px; }
.it34-field-icon:focus-visible{ outline:2px solid var(--it34-primary); outline-offset:-2px; }
.it34-date-field > .it34-field-icon:first-child{ margin-left:4px; }
.it34-date-field > .it34-field-icon:last-of-type{ margin-right:4px; }
/* Det native datofelt bruges kun til browserens datovælger — det vises ikke. */
.it34-date-native{ position:absolute; left:0; bottom:0; width:100%; height:0; padding:0; border:0; opacity:0; pointer-events:none; }

/* Statuslinjen står til venstre i handlingsrækken; knapperne til højre.
   Typografi som hjælpe-/fejltekst (14px, #666 / #b30000). */
.it34-vagtplan-actions{ justify-content:flex-start; flex-wrap:wrap; }
.it34-vagtplan-status{ flex:1 1 auto; font-size:14px; line-height:20px; color:var(--it34-muted); }
.it34-vagtplan-status.is-error{ color:var(--it34-error); }

/* ============================================================
   Søg-og-vælg (typeahead) til at finde borger/ejendom/rute ved oprettelse
   ============================================================ */
.it34-typeahead{ position:relative; }
.it34-typeahead-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:1060;
  background:var(--it34-surface); border:1px solid var(--it34-line);
  border-radius:var(--it34-radius); box-shadow:0 8px 20px rgba(0,0,0,.12);
  max-height:220px; overflow:auto; display:none;
}
.it34-typeahead-results.is-open{ display:block; }
.it34-typeahead-result{ padding:8px 12px; cursor:pointer; font-size:14px; }
.it34-typeahead-result:hover, .it34-typeahead-result.is-active{ background:#f0f0f0; }
.it34-typeahead-result .sub{ font-size:12px; color:var(--it34-muted); }
.it34-typeahead-selected{
  display:flex; align-items:center; gap:8px; height:32px;
  border:1px solid var(--it34-muted); border-radius:var(--it34-radius);
  padding:0 8px; font-size:14px; background:#f5f5f5;
}
.it34-typeahead-selected .change{ margin-left:auto; }

/* ============================================================
   Vagtcentralens driftsoverblik: nøgletal (= filtre), listen og ved
   siden af den kort, valgt udkald og køretøjer. Flader er hvide på den
   grå indholdsflade uden ramme (design.md "Indholdsfladen").
   ============================================================ */
.it34-kpis{ display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; align-items:flex-end; }
.it34-kpi-row{ display:flex; gap:16px; flex-wrap:wrap; flex:1 1 640px; }
.it34-kpi-create{ margin-left:auto; }
.it34-kpi{
  flex:1 1 180px; max-width:260px; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px 16px; border:0; border-radius:var(--it34-radius); background:var(--it34-surface);
  text-align:left; cursor:pointer; font:inherit; color:var(--it34-ink);
}
.it34-kpi[aria-pressed="true"]{ box-shadow:inset 0 -4px 0 0 var(--it34-primary); }
.it34-kpi:focus-visible{ outline:2px solid var(--it34-primary); outline-offset:2px; }
.it34-kpi .label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--it34-muted); }
.it34-kpi .dot{ width:8px; height:8px; border-radius:50%; background:var(--it34-ink); }
.it34-kpi-ny .dot{ background:var(--it34-status-ny); }
.it34-kpi-undervejs .dot{ background:var(--it34-status-aktiv); }
.it34-kpi-afsluttet .dot{ background:var(--it34-status-afsluttet); }
.it34-kpi .num{ font-size:28px; line-height:34px; font-weight:600; font-variant-numeric:tabular-nums; }
.it34-kpi .hint{ font-size:12px; color:var(--it34-muted); }
.it34-kpi.is-alert .num, .it34-kpi.is-alert .hint{ color:var(--it34-status-ny); }

.it34-ops-mapnote{ padding:8px 16px; margin:0; }
.it34-ops-heading{ margin:0 0 12px; font-size:16px; font-weight:600; color:var(--it34-ink); }
.it34-ops-empty{ font-size:14px; color:var(--it34-muted); list-style:none; }
.it34-ops-nr{ margin-left:auto; font-size:13px; font-weight:600; color:var(--it34-ink); font-variant-numeric:tabular-nums; }
.it34-ops-ref{ margin-top:12px; font-size:18px; font-weight:600; color:var(--it34-ink); }
.it34-ops-sub{ font-size:14px; color:var(--it34-muted); }

.it34-cell-main{ font-weight:500; color:var(--it34-ink); }
.it34-cell-sub{ font-size:12px; line-height:16px; color:var(--it34-muted); }
.it34-elapsed.is-warning{ color:var(--it34-status-ny); font-weight:600; }

/* Forløb: seks segmenter (accept, afgang, ankomst, fri, hjemme, godkendt) i statusfarven */
.it34-forloeb{ display:flex; gap:2px; width:120px; margin-top:4px; }
.it34-forloeb > span{ flex:1 1 0; height:4px; background:var(--it34-line); }
.it34-forloeb > span.is-done,
.it34-trin li.is-done .bar{ background:var(--it34-status-aktiv); }
.it34-forloeb-ny > span.is-done, .it34-forloeb-ny li.is-done .bar{ background:var(--it34-status-ny); }
.it34-forloeb-afsluttet > span.is-done, .it34-forloeb-afsluttet li.is-done .bar{ background:var(--it34-status-afsluttet); }
.it34-forloeb-godkendt > span.is-done, .it34-forloeb-godkendt li.is-done .bar{ background:var(--it34-status-godkendt); }

/* Forløbet for det valgte udkald: syv trin med tidspunkt */
.it34-trin{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 6px; }
.it34-trin li{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.it34-trin .bar{ display:block; height:6px; background:var(--it34-line); }
.it34-trin .label{ font-size:12px; color:var(--it34-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.it34-trin li.is-done .label{ font-weight:600; color:var(--it34-ink); }
.it34-trin .tid{ font-size:12px; color:var(--it34-ink); font-variant-numeric:tabular-nums; }

/* Markører på oversigtskortet (PSP_KORT.createOverview) */
.it34-pin{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:50%; border:2px solid #fff; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.35);
  background:var(--it34-status-aktiv); color:#fff; font-size:11px; font-weight:700; line-height:1;
}
.it34-pin-ny{ background:var(--it34-status-ny); }
.it34-pin-afsluttet{ background:var(--it34-status-afsluttet); }
.it34-pin.is-selected{ outline:3px solid rgba(0,115,169,.35); font-size:12px; }

/* ============================================================
   Uploadkort — fra it34-demo.html / design.md "Uploadkort".
   Kompakt (56px) er førstevalget, fuld (82px) viser statustekst.
   ============================================================ */
.it34-upload-state{
  background:var(--it34-surface); border:0; border-radius:var(--it34-radius);
  padding:8px; display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.it34-upload-state > .mdi{ font-size:24px; color:var(--it34-ink); flex:0 0 24px; }
.it34-upload-body{ flex:1 1 auto; min-width:0; }
.it34-upload-name{ font-size:12px; line-height:32px; font-weight:500; color:var(--it34-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it34-upload-bar{ height:6px; border-radius:var(--it34-radius); background:var(--it34-track); overflow:hidden; }
.it34-upload-bar > span{ display:block; height:100%; width:0;
  background:var(--it34-primary); transition:all .2s; }
.it34-upload-meta{ display:flex; justify-content:space-between; gap:8px; }
.it34-upload-status{ font-size:12px; line-height:18px; font-weight:400; color:rgba(0,0,0,.87); }
.it34-upload-pct   { font-size:12px; line-height:18px; font-weight:500; color:rgba(0,0,0,.87); }
.it34-upload-actions{ display:flex; gap:4px; flex:0 0 auto; }
.it34-upload-actions .mdi{ font-size:18px; color:var(--it34-ink); cursor:pointer; }
.it34-upload-state.is-done    .it34-upload-bar > span{ background:var(--it34-success); }
.it34-upload-state.is-failed  .it34-upload-bar > span{ background:var(--it34-error); width:100%; }

/* ============================================================
   Fotos og tidslinje på et udkald (desktop-detalje og PWA).
   ============================================================ */
.it34-foto-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; }
.it34-foto-grid:empty{ display:none; }
.it34-foto-thumb{
  display:block; aspect-ratio:1; border:0; padding:0; cursor:pointer;
  border-radius:var(--it34-radius); overflow:hidden; background:var(--it34-affix-bg);
}
.it34-foto-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.it34-foto-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

.it34-timeline{ list-style:none; margin:0; padding:0; }
.it34-timeline > li{
  display:flex; gap:12px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,.12);
  font-size:13px; line-height:19.5px; color:rgba(0,0,0,.87);
}
.it34-timeline > li:last-child{ border-bottom:0; }
.it34-timeline .time{ flex:0 0 44px; font-weight:500; color:var(--it34-ink); }
.it34-timeline .body{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.it34-timeline .by{ display:block; font-size:12px; line-height:18px; color:var(--it34-faint); }
.it34-timeline .it34-foto-thumb{ width:64px; margin-top:4px; }

/* Fotovisning i fuld størrelse */
.it34-foto-viewer{ background:rgba(0,0,0,.85); }
.it34-foto-viewer img{ max-width:100%; max-height:calc(100vh - 96px); display:block; }
.it34-foto-viewer .it34-button-icon{ position:absolute; top:12px; right:12px; color:#fff; }

/* ============================================================
   Kort i registerdialogen: felter til venstre, kort til højre.
   Kortet ligger ikke i designsystemet endnu — panelet følger feltets
   regler (label 12px/500 over, 1px #666 ramme, 4px runding, hjælpetekst under).
   ============================================================ */
.it34-dialog.has-map{ width:1000px; }
.it34-dialog-split{ display:block; }
.it34-dialog.has-map .it34-dialog-split{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:start; }
@media (max-width: 991px){ .it34-dialog.has-map .it34-dialog-split{ grid-template-columns:1fr; } }
.it34-map-panel{ display:flex; flex-direction:column; margin-bottom:16px; }
.it34-map{
  height:380px; border:1px solid var(--it34-muted); border-radius:var(--it34-radius);
  overflow:hidden; background:var(--it34-affix-bg); z-index:0;
}
.it34-map-small{ height:200px; }
.leaflet-container{ font-family:inherit; }
/* Ikonhandlinger yderst til højre over tabellen: tooltip'en højrestilles, så den ikke stikker ud af siden. */
.it34-table-actions .it34-tt:last-child::after{ left:auto; right:0; transform:none; }

/* ============================================================
   Sortering og kolonnefiltre i tabellen (udkald).
   design.md: kolonner kan sorteres, men sorteringsikonet er ikke aflæst —
   her en pil (16px, #222) efter teksten på den sorterede kolonne, som i
   Vuetify-komponentbiblioteket IT34 bygger på. Filterrækken bruger
   felter i size small (32px, 1px #666, 4px runding).
   ============================================================ */
.it34-sort{
  display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:inherit; text-align:left; white-space:nowrap;
}
.it34-sort .mdi{ font-size:16px; visibility:hidden; }
.it34-sort:hover .mdi{ visibility:visible; opacity:.4; }
th[aria-sort="ascending"] .it34-sort .mdi, th[aria-sort="descending"] .it34-sort .mdi{ visibility:visible; opacity:1; }
.it34-sort:focus-visible{ outline:2px solid var(--it34-primary); outline-offset:2px; }

.it34-table.it34-table-filterable{ min-width:980px; }
/* Første hovedrække: ingen linje — linjen ligger under filterrækken. */
.it34-table-filterable > thead > tr:first-child > th{ box-shadow:none; }
.it34-table > thead > tr.it34-filter-row > th{
  height:auto; padding:0 16px 8px; top:48px; font-weight:400;
  box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.12);
}
.it34-filter-row .it34-field{ width:100%; }
.it34-filter-row .it34-field select, .it34-filter-row .it34-field input{ font-size:13px; }
.it34-table-tall{ max-height:calc(100vh - 300px); }

.it34-opgaver-actions{ justify-content:flex-start; }
.it34-opgaver-count{ font-size:14px; line-height:20px; color:var(--it34-muted); }
.it34-opgaver-actions #btn-add-opgave{ margin-left:auto; }
/* Faste kolonnebredder, så tabellen ikke hopper når filtrene ændrer indholdet. */
.it34-table.it34-table-filterable{ table-layout:fixed; }
/* Udkaldsnr. | Type | Vedrører | Status + forløb | Modtaget | Køretøj */
.it34-table-filterable > thead > tr > th:nth-child(1){ width:13%; }
.it34-table-filterable > thead > tr > th:nth-child(2){ width:16%; }
.it34-table-filterable > thead > tr > th:nth-child(3){ width:31%; }
.it34-table-filterable > thead > tr > th:nth-child(4){ width:16%; }
.it34-table-filterable > thead > tr > th:nth-child(5){ width:12%; }
.it34-table-filterable > thead > tr > th:nth-child(6){ width:12%; }
.it34-table-filterable > tbody > tr > td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Timeafregning: periodefelter på række (label over, size small) + talkolonner højrestillet. */
.it34-timer-filter{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.it34-timer-filter .it34-input{ margin-bottom:0; width:200px; }
.it34-timer-filter #timer-export, .it34-timer-filter .it34-export{ margin-left:auto; }
.it34-table-numbers th.num, .it34-table-numbers td.num{ text-align:right; }
.it34-table-numbers tfoot td{ height:40px; padding:0 16px; font-size:13px; font-weight:600; color:var(--it34-ink);
  border-top:1px solid rgba(0,0,0,.12); background:var(--it34-surface); }
.it34-table-numbers tfoot td.num{ text-align:right; }
.it34-timer-help{ margin-top:8px; }

/* Låst (afregnet) udkald: besked over felterne i opgavedetaljen. */
.it34-locked-note{ margin:0 0 12px; }

/* Udkaldsnummer (2026-0017): tal i fast bredde og aldrig ombrudt */
.it34-udkaldsnr{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Opgavernes formularer (opgavefelter.js) */
.it34-optional{ font-weight:400; color:var(--it34-muted); }
.it34-felt-flervalg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 16px; padding:4px 0; }
@media (max-width:575px){ .it34-felt-flervalg{ grid-template-columns:1fr; } }
/* Afsnitsoverskrift i en lang dialog — samme tekst som en label, blot med luft og en skillelinje over */
.it34-form-section{ font-size:14px; font-weight:500; color:var(--it34-ink); margin:20px 0 12px; padding-top:16px; border-top:1px solid var(--it34-line); }
/* Sektionsoverskrift med en teksthandling i højre side (fx "Ret"). */
.it34-form-section-action{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
/* Første sektion i et faneblad i en dialog: fanebjælken er allerede skillelinjen. */
.it34-dialog-fane > .it34-form-section:first-child{ border-top:0; padding-top:0; margin-top:0; }
.it34-section-help{ margin:-4px 0 12px; }
/* Godkendelse i udkaldets detalje: tekst til venstre, handlinger til højre (samme grå flade som prefix-blokken) */
.it34-approval{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; background:var(--it34-affix-bg);
  border-radius:var(--it34-radius); padding:12px 16px; margin:4px 0 16px; font-size:14px; }
.it34-approval-text{ flex:1 1 240px; }
.it34-approval-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.it34-detail-tags{ display:flex; flex-direction:row; justify-content:flex-start; gap:8px; align-items:center; }
/* Afsluttet udkald har tre handlinger til højre (rapport, slet, gem) — de må bryde om frem for at give vandret rulning */
#opgave-detail-form .it34-dialog-actions{ flex-wrap:wrap; gap:8px; }
#opgave-detail-form .it34-dialog-actions > div{ flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }

/* Redigering i tabellen og masseredigering af registre */
.it34-cell-field{ width:100%; min-width:80px; }
.it34-table-editing td{ padding-top:4px; padding-bottom:4px; }
.it34-tool-btn.is-active{ color:var(--it34-primary); }
#register-edit-status{ margin-right:auto; }
#register-edit-status.is-error{ color:var(--it34-error); }

/* ============================================================
   Valg som knapper (opret udkald): opgavetype og køretøj er radioknapper,
   personale er afkrydsning — vist som knapper/kort/"chips" i stedet for
   valglister, så alle muligheder ses på én gang. Valgt = primær blå.
   ============================================================ */
.it34-choice-set{ border:0; padding:0; margin:0 0 16px; min-width:0; }
.it34-choice-set > legend{ font-size:12px; line-height:12px; font-weight:500; color:var(--it34-ink); margin:0 0 8px; padding:0; float:none; width:auto; }
.it34-choice-grid{ display:grid; gap:6px; }
.it34-choice-types{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.it34-choice-biler{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.it34-choice{ position:relative; margin:0; cursor:pointer; }
.it34-choice > input{ position:absolute; opacity:0; width:1px; height:1px; }
.it34-choice > span:first-of-type{
  display:flex; align-items:center; justify-content:center; text-align:center; height:36px; padding:0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:1px solid var(--it34-faint); border-radius:var(--it34-radius); background:var(--it34-surface);
  font-size:13px; color:var(--it34-ink); box-sizing:border-box;
}
.it34-choice > input:checked + span{ background:var(--it34-primary); border-color:var(--it34-primary); color:var(--it34-on-primary); font-weight:600; }
.it34-choice > input:focus-visible + span{ outline:2px solid var(--it34-primary); outline-offset:2px; }

/* Køretøjskort: navn + hvad bilen laver */
.it34-choice-card{
  display:flex; flex-direction:column; gap:2px; padding:8px 10px; min-height:52px; box-sizing:border-box;
  border:1px solid var(--it34-faint); border-radius:var(--it34-radius); background:var(--it34-surface);
}
.it34-choice-card > span:first-of-type{ all:unset; font-size:14px; font-weight:600; color:var(--it34-ink); }
.it34-choice-card .sub{ font-size:12px; color:var(--it34-muted); }
.it34-choice-card.is-busy .sub{ color:var(--it34-muted); }
/* Ledige køretøjer: grøn ramme og prik — det vagtcentralen leder efter */
.it34-choice-card.is-ledig{ border-color:var(--it34-success); }
.it34-choice-card.is-ledig .navn::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px;
  background:var(--it34-success); vertical-align:1px;
}
.it34-bilvalg + .it34-bilvalg{ margin-top:10px; }
.it34-bilvalg-label{ font-size:12px; font-weight:600; color:var(--it34-status-godkendt); margin-bottom:6px; }
.it34-bilvalg-ingen{ font-size:13px; font-weight:600; color:var(--it34-status-ny); grid-column:1 / -1; }
.it34-bilvalg-optaget > .it34-text-action{ margin-bottom:6px; }
.it34-choice-card:has(input:checked){ border:2px solid var(--it34-primary); background:#e6f2f7; padding:7px 9px; }
.it34-choice-card:has(input:focus-visible){ outline:2px solid var(--it34-primary); outline-offset:2px; }
.it34-choice-card:has(input:disabled){ cursor:default; background:var(--it34-affix-bg); border-color:var(--it34-line); }
.it34-choice-card:has(input:disabled) .navn, .it34-choice-card:has(input:disabled) .sub{ color:var(--it34-faint); }

/* Personalevælger: valgte som kort med ×, søg og tilføj nedenunder */
.it34-personvaelger{ display:flex; flex-direction:column; gap:8px; }
.it34-person-valgte{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.it34-person-valgte:empty{ display:none; }
.it34-person-chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 12px; box-sizing:border-box;
  background:#e6f2f7; border:1px solid var(--it34-primary); border-radius:16px; font-size:13px; color:var(--it34-ink);
}
.it34-person-chip .navn{ font-weight:600; }
.it34-person-chip .meta{ color:var(--it34-muted); font-size:12px; }
.it34-person-chip .meta:empty{ display:none; }
.it34-person-fjern{
  width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--it34-ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.it34-person-fjern:hover{ background:rgba(0,0,0,.08); }
.it34-person-fjern:focus-visible{ outline:2px solid var(--it34-primary); outline-offset:1px; }
.it34-person-fjern .mdi{ font-size:16px; }
.it34-person-optaget{ font-size:12px; color:var(--it34-status-ny); }
.it34-person-seneste{ align-self:flex-start; text-align:left; line-height:16px; }
#opgave-create-personale-help.is-ok, #opgave-detail-personale-help.is-ok{ color:var(--it34-status-godkendt); }


/* ============================================================
   Delt visning (som i geonote): listen til venstre, kort og udkaldets
   data til højre. Begge sider fylder resten af skærmhøjden og ruller
   hver for sig. Under 992px stables de (listen øverst).
   ============================================================ */
.it34-split{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 420px); gap:16px;
  flex:1 1 auto; min-height:0;
}
.it34-split-list, .it34-split-content{ background:var(--it34-surface); min-height:0; display:flex; flex-direction:column; }
.it34-split-list, .it34-split-detail{ container-type:inline-size; }
.it34-split-content{ overflow:hidden; }

/* Filtre over listen */
.it34-listfilter{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px 12px 0; }
.it34-listfilter .it34-field{ width:100%; }
.it34-listfilter .it34-field select, .it34-listfilter .it34-field input{ font-size:13px; }
.it34-listfilter-search{ grid-column:1 / -1; padding-left:8px; }
.it34-listfilter-search .mdi{ font-size:20px; color:var(--it34-ink); }
.it34-listfilter-foot{ display:flex; align-items:center; gap:12px; padding:8px 12px; box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.12); }
.it34-listfilter-foot .it34-text-action{ margin-left:auto; }

/* Listen: et punkt pr. udkald, tre linjer + forløbsbjælke */
.it34-udkaldsliste{ list-style:none; margin:0; padding:0; overflow:auto; flex:1 1 auto; min-height:0; }
.it34-udkald{
  padding:10px 12px 10px 16px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.12);
  display:flex; flex-direction:column; gap:3px; position:relative;
}
.it34-udkald:hover{ background:#f5f5f5; }
.it34-udkald:focus-visible{ outline:2px solid var(--it34-primary); outline-offset:-2px; }
.it34-udkald.is-selected{ background:#e6f2f7; box-shadow:inset 4px 0 0 0 var(--it34-primary); }
.it34-udkald-top{ display:flex; align-items:center; gap:8px; }
.it34-udkald-top .it34-status{ margin-left:auto; height:auto; }
.it34-udkald-top .it34-type{ height:20px; font-size:11px; }
.it34-udkald-nr{ font-size:13px; font-weight:600; color:var(--it34-ink); font-variant-numeric:tabular-nums; }
.it34-udkald-ref{ font-size:14px; font-weight:500; color:var(--it34-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it34-udkald-meta{ display:flex; gap:12px; font-size:12px; color:var(--it34-muted); }
.it34-udkald-meta .sted{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it34-udkald-meta .tid{ flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.it34-udkald .it34-forloeb{ width:100%; margin-top:4px; }
.it34-udkaldsliste + .it34-table-empty{ flex:1 1 auto; }

/* Højre side: kort øverst, derunder udkaldets data */
/* Kortet står fast øverst; kun udkaldets data under det ruller */
.it34-split-map{ height:clamp(150px, 30vh, 260px); flex:0 0 auto; border:0; border-radius:0; }
.it34-split-detail{ padding:16px 16px 24px; flex:1 1 auto; min-height:0; overflow:auto; }
.it34-split-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.it34-split-head .it34-detail-tags{ flex:1 1 auto; }
.it34-split-actions{ display:flex; gap:8px; }
.it34-split-detail .it34-ops-ref{ margin:12px 0 0; }
.it34-split-sections{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px 24px; margin-top:20px; }
/* Trinene: syv på én række, når detaljen er bred nok — ellers to rækker (4 + 3) */
.it34-trin.it34-trin-bred{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@container (min-width: 560px){ .it34-trin.it34-trin-bred{ grid-template-columns:repeat(7,minmax(0,1fr)); } }
.it34-split-h{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--it34-ink); padding-bottom:6px; box-shadow:inset 0 -1px 0 0 var(--it34-line); }
.it34-split-facts{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; font-size:13px; line-height:19px; }
.it34-split-facts dt{ font-weight:500; color:var(--it34-muted); }
.it34-split-facts dd{ margin:0; color:rgba(0,0,0,.87); overflow-wrap:anywhere; white-space:pre-line; }

@media (max-width: 991px){
  .it34-split{ grid-template-columns:1fr; }
  .it34-udkaldsliste{ max-height:60vh; }
}

/* Smal liste: køretøjet efter adressen og tiden siden efter klokkeslættet (punktum-adskilt). */
.it34-udkald-meta .bil{ display:none; }
.it34-udkald-meta .sted[data-bil]:not([data-bil=""])::after{ content:" · " attr(data-bil); }
.it34-udkald-meta .sted:empty::after{ content:attr(data-bil); }
.it34-udkald-meta .tid .it34-elapsed:not(:empty)::before{ content:" · "; }

/* Bred liste (container query på listen): filtrene på én række, og hvert udkald som én række
   med kolonner — nr. | type | vedrører + adresse | køretøj | status + forløb | modtaget + tid siden.
   Samme markup som den smalle liste; grupperne opløses med display:contents. */
@container (min-width: 760px){
  .it34-listfilter{ grid-template-columns:minmax(220px, 2fr) repeat(5, minmax(0, 1fr)); padding:12px 16px 0; }
  .it34-listfilter-search{ grid-column:auto; }
  .it34-listfilter-foot{ padding:8px 16px; }
  .it34-udkald{
    display:grid; align-items:center; gap:2px 16px; padding:10px 16px 10px 20px;
    grid-template-columns:92px 132px minmax(0, 1fr) 110px 150px 120px;
    grid-template-areas:"nr type ref bil status tid" "nr type sted bil bar tid";
  }
  .it34-udkald-top, .it34-udkald-meta{ display:contents; }
  .it34-udkald-nr{ grid-area:nr; }
  .it34-udkald-top .it34-type{ grid-area:type; justify-self:start; height:24px; font-size:12px; }
  .it34-udkald-top .it34-status{ grid-area:status; margin-left:0; }
  .it34-udkald-ref{ grid-area:ref; }
  .it34-udkald-meta .sted{ grid-area:sted; }
  .it34-udkald-meta .bil{ display:block; grid-area:bil; font-size:13px; color:var(--it34-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .it34-udkald-meta .tid{ grid-area:tid; text-align:right; font-size:13px; color:var(--it34-ink); display:flex; flex-direction:column; }
  .it34-udkald-meta .tid .it34-elapsed{ font-size:12px; color:var(--it34-muted); }
  .it34-udkald-meta .tid .it34-elapsed.is-warning{ color:var(--it34-status-ny); }
  .it34-udkald .it34-forloeb{ grid-area:bar; margin-top:2px; }
  .it34-udkald-meta .sted::after, .it34-udkald-meta .sted:empty::after{ content:none; }
  .it34-udkald-meta .tid .it34-elapsed::before{ content:none; }
}

/* ============================================================
   Opret udkald — arbejdsdialogen (716px, design.md) i fire nummererede
   afsnit. Indholdet ruller; titel og knaprække står fast.
   ============================================================ */
.it34-dialog.it34-dialog-work{ width:716px; padding:0; display:flex; flex-direction:column; overflow:hidden; }
.it34-dialog-work > .it34-dialog-title{ padding:16px 16px 8px; flex:0 0 auto; }
.it34-dialog-work > form{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.it34-opret-body{ overflow:auto; min-height:0; flex:1 1 auto; }
.it34-opret-afsnit{ border:0; margin:0; padding:16px; min-width:0; }
.it34-opret-afsnit + .it34-opret-afsnit{ box-shadow:inset 0 1px 0 0 var(--it34-line); }
.it34-opret-h{
  display:flex; align-items:center; gap:10px; float:none; width:100%; padding:0; margin:0 0 12px;
  font-size:15px; line-height:20px; font-weight:600; color:var(--it34-ink);
}
.it34-opret-h .nr{
  width:22px; height:22px; border-radius:50%; flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--it34-primary); color:var(--it34-on-primary); font-size:12px; font-weight:600;
}
.it34-opret-h label{ margin:0; font:inherit; color:inherit; }
.it34-opret-h .it34-optional{ font-weight:400; }
.it34-opret-info{ margin-top:10px; font-size:13px; line-height:18px; color:var(--it34-muted); }
.it34-opret-info:empty{ display:none; }

/* Hent fra register: grå flade, så "hent" skiller sig ud fra felterne der udfyldes */
.it34-opret-hent{ background:var(--it34-affix-bg); border-radius:var(--it34-radius); padding:12px; margin-bottom:16px; }
.it34-opret-hent > label{ display:block; font-size:12px; line-height:12px; font-weight:500; color:var(--it34-ink); margin:0 0 8px; }
.it34-opret-hent .it34-field{ background:var(--it34-surface); }
.it34-opret-hent .it34-input-helper-text{ margin-top:6px; font-size:12px; line-height:16px; }
.it34-field-search{ padding-left:8px; }
.it34-field-search .mdi{ font-size:20px; color:var(--it34-ink); flex:0 0 auto; }
.it34-opret-hent .it34-typeahead-selected{ background:var(--it34-surface); border-color:var(--it34-success); }
.it34-opret-hent .it34-typeahead-selected .mdi-check{ color:var(--it34-success); font-size:18px; }

/* Typens felter i to kolonner; lange tekstfelter og afkrydsningsgrupper i fuld bredde */
.it34-opret-felter{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
.it34-opret-felter > .it34-input{ margin-bottom:12px; min-width:0; }
.it34-opret-felter > .it34-input:has(textarea), .it34-opret-felter > .it34-input:has(.it34-felt-flervalg){ grid-column:1 / -1; }
.it34-opret-felter .it34-input-error-text:empty{ min-height:0; margin:0; }

.it34-opret .it34-choice-set{ margin-bottom:12px; }
.it34-opret-afsnit > .it34-input:last-child{ margin-bottom:0; }

/* Fast knaprække i bunden */
.it34-opret-actions{ flex:0 0 auto; padding:12px 16px; box-shadow:0 -1px 0 0 var(--it34-line); background:var(--it34-surface); }
@media (max-width: 740px){
  .it34-choice-types{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .it34-opret-felter{ grid-template-columns:1fr; }
}

/* ============================================================
   Udkaldsfanen som fast app-skal: siden ruller ikke — topbar, faneblade,
   nøgletal og den delte visning fylder præcis skærmhøjden, og kun listen
   og udkaldets data ruller hver for sig. Under 992px (stablet) ruller
   siden som normalt.
   ============================================================ */
@media (min-width: 992px){
  .it34-content:has(> #view-opgaver:not([hidden])){
    height:100vh; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;
  }
  .it34-content:has(> #view-opgaver:not([hidden])) > .it34-tabs{ flex:0 0 auto; }
  #view-opgaver:not([hidden]){ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  #view-opgaver > .it34-kpis{ flex:0 0 auto; }
}

/* Lav skærm: kompakte nøgletal og mindre luft, så listen får pladsen */
@media (max-height: 820px){
  .it34-kpis{ margin-bottom:12px; gap:12px; }
  .it34-kpi-row{ gap:12px; }
  .it34-kpi{ flex-direction:row; align-items:baseline; gap:8px; padding:8px 12px; }
  .it34-kpi .num{ font-size:20px; line-height:24px; order:-1; }
  .it34-kpi .hint{ display:none; }
  .it34-tabs{ margin-bottom:8px; }
  .it34-split{ gap:12px; }
  .it34-split-detail{ padding:12px 14px 16px; }
  .it34-trin{ margin-top:10px; }
  .it34-split-sections{ margin-top:12px; gap:12px; }
}