:root{
  --bg:#eef3f1;
  --bg-strong:#e3ebe7;
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f7faf8;
  --ink:#102026;
  --ink-soft:#2d3c43;
  --muted:#667780;
  --line:#cbd6d9;
  --line2:#e2e8e8;
  --accent:#007a3d;
  --accent-strong:#005f31;
  --accent-soft:#e6f4eb;
  --brand-blue:#194f78;
  --brand-blue-soft:#e8f1f6;
  --brand-gold:#f2c94c;
  --mark-blue:#2563eb;
  --mark-reserved:#f59e0b;
  --mark-red:#ef4444;
  --mark-scan:#22c55e;
  --auth-plant-image:url("https://images.unsplash.com/photo-1513828170880-00eeeac21306?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=80&w=1800");
  --shadow-sm:0 8px 24px rgba(16,32,38,.08);
  --shadow-md:0 18px 54px rgba(16,32,38,.13);
  --layout-gap:16px;

  --pid-0:#7c3aed;
  --pid-1:#f97316;
  --pid-2:#0891b2;
  --pid-3:#e11d48;
}

*{box-sizing:border-box}

html{
  min-width:320px;
  background:var(--bg);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 240px),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:9px 16px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line2);
  position:sticky;
  top:0;
  z-index:10;
  min-height:64px;
  box-shadow:0 1px 0 rgba(16,32,38,.03);
  backdrop-filter: blur(12px);
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:250px;
}

.topbar__mark{
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(0,122,61,.95), rgba(25,79,120,.92));
  color:#fff;
  font-weight:950;
  letter-spacing:0;
  box-shadow:0 8px 20px rgba(16,32,38,.12);
}

.topbar__brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1;
  min-width:0;
}

.topbar__brand strong{
  font-size:15px;
  letter-spacing:0;
  white-space:nowrap;
}

.topbar__eyebrow,
.topbar__site{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar__site{
  color:var(--brand-blue);
  text-transform:none;
}

.environmentBadge{
  align-self:center;
  padding:6px 8px;
  border:1px solid #a85a00;
  border-radius:6px;
  background:#fff4d6;
  color:#7a3f00;
  font-size:11px;
  font-weight:950;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}

.environmentBadge[hidden]{display:none}

html[data-environment="staging"] .topbar{
  border-top:4px solid #d97706;
}

.topbar__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.topbar__group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  padding:4px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface-soft);
}

.topbar__group[hidden],
.btn[hidden]{
  display:none !important;
}

.topbar__group--session{
  background:#fff;
}

.topbar__groupLabel{
  padding:0 4px 0 2px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.topbar__sync{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(0,122,61,.2);
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-weight:900;
  white-space:nowrap;
}

.topbar__syncDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(0,122,61,.12);
}

.muted{color:var(--muted); font-weight:600}

.btn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  min-height:34px;
  padding:7px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 1px 0 rgba(16,32,38,.03);
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn--sm{
  padding:6px 8px;
  border-radius:8px;
  font-size:12px;
  min-height:30px;
}
.btn:hover{
  border-color:#aebec3;
  background:#fbfdfc;
  box-shadow:0 4px 12px rgba(16,32,38,.08);
}
.btn:active{
  transform:translateY(1px);
}
.btn:focus-visible,
.input:focus-visible,
.field:focus-visible,
.suffixInput:focus-visible{
  outline:3px solid rgba(0,122,61,.18);
  outline-offset:2px;
  border-color:var(--accent);
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn--primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn--primary:hover{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:#fff;
}

.authGate{
  min-height:calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(22px, 5vw, 72px) 18px;
  background:
    repeating-linear-gradient(90deg, rgba(25,79,120,.045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(25,79,120,.035) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, rgba(0,122,61,.1), rgba(242,201,76,.08) 38%, rgba(25,79,120,.08));
}

.authShell{
  width:min(920px, 100%);
  min-height:500px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .9fr);
  background:var(--surface);
  border:1px solid rgba(203,214,217,.9);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}

.authVisual{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  padding:38px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(8,46,47,.18), rgba(8,46,47,.72)),
    linear-gradient(90deg, rgba(8,46,47,.52), rgba(8,46,47,.08)),
    var(--auth-plant-image) center / cover no-repeat,
    #123c3d;
  overflow:hidden;
}

.authVisual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.38)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 58px);
  opacity:.78;
}

.authVisual > *{
  position:relative;
  z-index:1;
}

.authVisual__brand{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}

.authVisual__brand span{
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:0;
}

.authVisual__brand strong{
  font-size:34px;
  line-height:1.05;
  letter-spacing:0;
}

.authCard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px;
  background:
    linear-gradient(180deg, #fff 0%, #f8fbf9 100%);
}

.authCard__form{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

.authKicker{
  margin:0 0 10px;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

.authCard__title{
  margin:12px 0 0;
  font-size:34px;
  line-height:1;
  letter-spacing:0;
}

.authCard__text{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:700;
  line-height:1.4;
}

.authCard__fields{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.authPasswordRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}

.authPasswordToggle{
  min-width:72px;
  justify-content:center;
  min-height:40px;
}

.authCard__submit{
  width:100%;
  justify-content:center;
  min-height:40px;
}

.authCard__help{
  font-size:12px;
  line-height:1.4;
  text-align:center;
}

.authCard__links,
.modal__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  font-size:12px;
  font-weight:800;
  line-height:1.4;
}

.authCard__links a,
.modal__links a{
  color:var(--accent-strong);
  text-decoration:none;
}

.authCard__links a:hover,
.modal__links a:hover{
  text-decoration:underline;
}

.authError{
  display:none;
  border:1px solid rgba(239,68,68,.35);
  border-radius:8px;
  color:#991b1b;
  background:#fef2f2;
  padding:9px 10px;
  font-weight:700;
  font-size:13px;
}

.authError:not(:empty){
  display:block;
}

.authError[data-tone="success"]{
  border-color:rgba(0,122,61,.28);
  color:var(--accent-strong);
  background:#ecfdf3;
}

.authError[data-tone="info"]{
  border-color:rgba(25,79,120,.25);
  color:#194f78;
  background:#eff6ff;
}

body:not(.is-authenticated) .workspace,
body:not(.is-authenticated) .topbar__actions{
  display:none;
}

body.is-authenticated .authGate{
  display:none;
}

/* --- Layout --- */
.workspace{
  display:grid;
  grid-template-columns: minmax(380px, 500px) minmax(0, 1fr);
  gap:var(--layout-gap);
  padding:16px;
  background:
    linear-gradient(90deg, rgba(0,122,61,.05), transparent 440px),
    var(--bg);
}

.sidebar{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line2);
  border-radius:8px;
  padding:14px;
  height:calc(100vh - 96px);
  overflow:auto;
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:80px;
}
.sidebar__title{
  font-weight:900;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.05;
}
.sidebar__section{display:flex; flex-direction:column; gap:12px}
.searchPanel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:
    linear-gradient(135deg, rgba(0,122,61,.07), rgba(25,79,120,.045)),
    var(--surface-soft);
}
.searchPanel__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.searchPanel__sub{
  margin-top:4px;
  font-size:12px;
}
.searchPanel__box{
  position:relative;
}
.searchInput{
  min-height:44px;
  padding-left:14px;
  padding-right:14px;
  font-size:14px;
  box-shadow:0 1px 0 rgba(16,32,38,.04);
}
.searchPanel__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.searchPanel__meta span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 8px;
  background:#fff;
}
.input{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 11px;
  min-height:38px;
  background:#fff;
  color:var(--ink);
  font-weight:650;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder,
.field::placeholder{
  color:#8a9aa2;
}
.recordList{display:flex; flex-direction:column; gap:8px; min-width:0}
.recordFilters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.recordFilters label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.recordFilters .input{min-height:32px;padding:5px 8px;font-size:13px}
.recordPagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px}
.recordPagination span{margin-right:auto}
@media screen and (min-width:1000px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .workspace .sidebar{height:auto;max-height:none;position:static;overflow:visible;box-shadow:none}
  .sidebar__section{display:grid;grid-template-columns:minmax(300px,1fr) auto;gap:12px}
  .searchPanel{border:0;background:none;padding:0;gap:8px}
  .searchPanel__sub{display:none}
  .searchPanel__meta{margin-top:4px}
  .listTools{border:0;background:none;padding:0;align-self:center;min-width:280px}
  .listTools .btn{white-space:nowrap}
  .recordFilters,.recordList,.recordPagination{grid-column:1/-1}
  .recordFilters{grid-template-columns:1.2fr 1.5fr 1fr 1fr .8fr .7fr 1fr auto}
  .recordList{max-height:330px;overflow:auto;border-top:1px solid var(--line2)}
  .paperWrap{align-items:center}
  .workspace .paperRow{justify-content:center}
}
@media screen and (min-width:1000px) and (max-width:1350px){
  .recordFilters{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.recordStatus{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;font-variant-numeric:tabular-nums}
.recordStatus__count{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.recordStatus__count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--status-color)}
.recordStatus__count--blue{--status-color:#2464ed}
.recordStatus__count--reserved{--status-color:#e89100}
.recordStatus__count--red{--status-color:#e94350}
.recordStatus__count--scan{--status-color:#23b773}
.recordAdminActions{margin-bottom:12px;font-size:12px;color:var(--muted)}
.recordAdminActions summary{cursor:pointer;text-align:right}
.recordAdminActions .btn{margin-top:8px;color:#a92536}
.recordsTable{border-collapse:collapse;width:100%;table-layout:fixed;font-size:13px}
.recordsTable th,.recordsTable td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;overflow-wrap:anywhere;vertical-align:middle}
.recordsTable th{position:sticky;top:0;background:#f1f6f5;z-index:1;font-size:12px;font-weight:750}
.recordsTable th:first-child{width:46px}
.recordsTable th:nth-child(2){width:16%}
.recordsTable th:nth-child(3){width:23%}
.recordsTable th:nth-child(4){width:15%}
.recordsTable th:nth-child(5){width:13%}
.recordsTable th:nth-child(6){width:150px}
.recordsTable th:nth-child(7){width:8%}
.recordsTable th:last-child{width:110px}
.recordsTable .record{border:0;border-radius:0;padding:0;box-shadow:none;transform:none}
.recordsTable .record:nth-child(even){background:#fafcfc}
.recordsTable .record:hover{background:#edf4f7;box-shadow:none;transform:none}
.recordsTable .record--active{background:#e7f4ed!important;box-shadow:inset 3px 0 var(--accent)}
.recordsTable .record:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.recordsTable__hovedkomponentnr{font-weight:750}
.record{
  border:1px solid var(--line2);
  border-radius:8px;
  padding:10px;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.record__top{display:flex; justify-content:space-between; gap:8px; align-items:center}
.record__left{display:flex; align-items:center; gap:10px; min-width:0}
.record__select{
  width:16px;
  height:16px;
  cursor:pointer;
}
.record__title{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.record:hover{
  border-color:#adbdc2;
  box-shadow:0 8px 18px rgba(16,32,38,.08);
  transform:translateY(-1px);
}
.badge{
  font-size:12px;
  padding:2px 8px;
  border:1px solid var(--line2);
  border-radius:999px;
  color:var(--muted);
}
.record__meta{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.4}
.record__actions{display:flex; gap:8px; margin-top:8px}
.record--active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,122,61,.14);
}
.hint{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.listTools{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface-soft);
}
.listTools__row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.listTools__row--actions .btn{
  flex:1 1 0;
  justify-content:center;
}
.listTools__countRow{
  min-height:16px;
}
.listTools__count{font-size:12px}

.paperWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  width:100%;
  max-width:none;
  align-self:start;
  min-width:0;
}

.paperRow{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:var(--layout-gap);
  width:100%;
  max-width:100%;
  min-width:0;
}

@media (min-width: 1920px){
  .paperRow{
    justify-content:flex-start;
  }
}

.workColumn{
  width:860px;
  flex:0 0 860px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.supportArea{
  width:440px;
  flex:0 0 440px;
  display:flex;
  flex-direction:column;
  gap:var(--layout-gap);
  min-width:340px;
  position:sticky;
  top:80px;
  max-height:calc(100vh - 102px);
  overflow:auto;
}

.rightRail{
  width:100%;
  flex:none;
  min-width:0;
}

@media (min-width: 2200px){
  .supportArea{
    width:876px;
    flex:0 0 876px;
    flex-direction:row;
    align-items:flex-start;
    position:static;
    max-height:none;
    overflow:visible;
  }

  .rightRail{
    width:440px;
    flex:0 0 440px;
    position:sticky;
    top:80px;
    max-height:calc(100vh - 102px);
    overflow:auto;
  }
}

/* Revisions side panel (outside the paper) */
.revisionsDock{
  flex: 0 1 420px;
  min-width: 320px;
  max-width:420px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line2);
  border-radius:8px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  position:sticky;
  top:80px;
  max-height: calc(100vh - 102px);
  overflow:auto;
}

.revisionsDock__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.revisionsDock__title{
  font-weight:900;
  margin-bottom:4px;
  color:var(--ink-soft);
}

.revisionsDock__sub{
  font-size:12.5px;
  margin-bottom:10px;
}

.revisionsDock__last{
  border:1px solid var(--line2);
  border-radius:8px;
  padding:12px;
  background:var(--surface-soft);
  margin-bottom:12px;
}

.revLastSummary{
  font-weight:800;
  margin-top:2px;
}

.revLastChanges{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  line-height:1.35;
}

.revLastChanges .revCard__plain{
  margin-top:0;
}

.revisionsDock__timeline{
  max-height: 380px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.revisionsDock__hint{
  margin-top:10px;
  font-size:12.5px;
}

.revisionsDock.is-compact{
  flex-basis:340px;
  max-width:340px;
}

.supportArea > .revisionsDock{
  width:100%;
  max-width:none;
  min-width:0;
  flex:none;
  position:static;
  top:auto;
  max-height:none;
}

.supportArea > .revisionsDock.is-compact{
  flex-basis:auto;
  max-width:none;
}

@media (min-width: 2200px){
  .supportArea > .revisionsDock{
    width:420px;
    flex:0 0 420px;
    position:sticky;
    top:80px;
    max-height:calc(100vh - 102px);
    overflow:auto;
  }

  .supportArea > .revisionsDock.is-compact{
    flex-basis:420px;
    max-width:420px;
  }
}

.revisionsDock.is-compact .revisionsDock__timeline,
.revisionsDock.is-compact .revisionsDock__hint{
  display:none;
}

.revCard{
  border:1px solid var(--line2);
  border-radius:8px;
  padding:11px;
  background:#fff;
  box-shadow:0 1px 0 rgba(16,32,38,.03);
}
.revCard__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.revCard__by{
  color:var(--accent-strong);
  background:var(--accent-soft);
  border:1px solid rgba(0,122,61,.18);
  border-radius:999px;
  padding:2px 7px;
}
.revCard__desc{
  margin-top:7px;
  font-weight:900;
  line-height:1.25;
}
.revCard__changes{
  margin-top:9px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.revChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:3px 8px;
  border:1px solid var(--line2);
  border-radius:999px;
  background:var(--surface-soft);
  font-size:12px;
  font-weight:900;
}
.revChip::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--line);
}
.revChip[data-mark="blue"]::before{ background:var(--mark-blue); }
.revChip[data-mark="reserved"]::before{ background:var(--mark-reserved); }
.revChip[data-mark="red"]::before{ background:var(--mark-red); }
.revCard__plain{
  margin-top:8px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
  white-space:pre-wrap;
}

.revTable th:nth-child(4),
.revTable td:nth-child(4){
  width: 48%;
}

.revTable td:nth-child(4){
  font-size:12.5px;
  line-height:1.3;
  white-space:pre-wrap;
}


.paper{
  width: 860px;
  flex: 0 0 860px;
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line2);
  border-radius:8px;
  padding:32px 44px 28px;
  box-shadow:var(--shadow-md);
}


/* --- Paper body: venstre (felter) + højre (revisions) --- */
.paperBody{
  display:block;
}

.sectionsWrap{min-width:0}

.revisionsPanel{
  border-left: 1px solid var(--line2);
  padding-left: 16px;
}
.revisionsPanel__title{
  font-weight:800;
  text-decoration: underline;
  margin-top: 2px;
}
.revisionsPanel__sub{font-size:12px; margin-top:4px}
.revisionsPanel__hint{font-size:12px; margin-top:10px; line-height:1.35}

.revisionsPanel__tableWrap{
  margin-top:10px;
  max-height: 540px;
  overflow:auto;
  border:1px solid var(--line2);
  border-radius:10px;
  background:#fff;
}
.revTable{
  width:100%;
  border-collapse: collapse;
  font-size:12px;
}
.revTable th, .revTable td{
  padding:8px 8px;
  border-bottom:1px solid var(--line2);
  vertical-align:top;
}
.revTable th{
  position: sticky;
  top:0;
  background:#fff;
  text-align:left;
  font-weight:800;
  border-bottom:1px solid var(--line);
  z-index:2;
}
.revTable td:nth-child(1){white-space:nowrap; width:92px}
.revTable td:nth-child(2){white-space:nowrap; width:52px; font-weight:800}


/* --- Header fields --- */
.headerFields{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:18px;
}
.fieldRow{
  display:grid;
  grid-template-columns: 190px 1fr;
  align-items:center;
  gap:12px;
}
.label{
  font-size:14px;
  color:var(--ink-soft);
  font-weight:700;
}
.field{
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  height:34px;
  background:#fff;
  color:var(--ink);
  font-weight:650;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.fieldStack{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fieldStack .field{
  width:100%;
}
.fieldHelp{
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  line-height:1.3;
}
.field--small{width:220px; justify-self:start}
.signature{display:flex; gap:14px}
.signatureField{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.signatureField span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}
.field--sig{width:240px}
.field--year{width:140px}
.fieldRow--series{
  align-items:start;
}
.toolgroup--inline{
  min-width:0;
}
.fieldRow--series .seg{
  flex-wrap:wrap;
  overflow:visible;
}

/* --- Sections --- */
.section{margin-top:16px}
.section__title{
  font-weight:900;
  text-decoration: underline;
  margin-bottom:8px;
  color:var(--ink);
}
.section__subtitle{
  font-weight:800;
  margin:4px 0 8px;
  color:var(--ink-soft);
}
.secRange{
  margin-right:8px;
  color:var(--accent-strong);
}

/* --- GRID: matcher original (checkbox til venstre for tal) --- */
.grid{
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: 26px;
  column-gap: 26px;
  row-gap: 12px;

  /* mimic indent from scan */
  margin-left:34px;
  margin-top:10px;
  align-items:center;
}

/* Spacer til at indrykke 01-09 én celle */
.gridSpacer{
  width:1px;
  height:1px;
}

/* Checkbox + tal side om side */
.grid .item{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  user-select:none;
}

/* Checkbox styling (som "papir") */
.cb{
  appearance:none;
  position:relative;
  width:14px;
  height:14px;
  border:1.5px solid #75848b;
  border-radius:2px;
  display:inline-block;
  margin:0;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cb:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,122,61,.1);
}
.cb:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.cb:checked::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%, -50%);
  background:#111;
  border-radius:1px;
}

/* Tal */
.code{
  font-size:14px;
  line-height:1;
}

.footerNote{
  margin-top:26px;
  color:var(--muted);
  font-size:13px;
}

/* --- Statusbar --- */
.statusbar{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line2);
  border-radius:8px;
  align-items:flex-start;
  box-shadow:var(--shadow-sm);
}

.rightRail .statusbar{
  flex-direction:column;
  align-items:stretch;
  padding:16px;
  gap:12px;
}

.statusbar__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.statusbar__title{
  font-weight:900;
  color:var(--ink-soft);
  margin-bottom:4px;
}

.statusbar__sub{
  font-size:12.5px;
}

.statusbar__selected{
  width:100%;
}

.statusbar__left{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.rightRail .statusbar__left{
  align-items:stretch;
  width:100%;
}

.statusbar__left > .legend,
.statusbar__left > .controlBox,
.statusbar__left > .statusbar__overview{
  width:100%;
  max-width:720px;
}

.rightRail .statusbar__left > .legend,
.rightRail .statusbar__left > .controlBox,
.rightRail .statusbar__left > .statusbar__overview{
  max-width:none;
}

.toolbar{ justify-content:center; }

.statusbar__right{
  flex:0 0 240px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

.rightRail .statusbar__right{
  flex:none;
  width:100%;
}

.statusbar__overview{
  width:100%;
}

.statusbar__right .codePills{ justify-content:flex-end; }

/* --- Statusbar: boxed controls + boxed selected list --- */
.controlBox{
  width:100%;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:10px;
  background:var(--surface-soft);
}

.controlBox .toolbar{
  justify-content:flex-start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.selectedBox{
  width:100%;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:10px;
  background:var(--surface-soft);
}

.selectedBox #statusLeft{ text-align:left; }

.selectedBox .codePills{ justify-content:flex-start !important; }

.availBox{
  width:100%;
  max-width:720px;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:10px;
  background:var(--surface-soft);
}

.rightRail .availBox{
  max-width:none;
}

.rightRail .availPills{
  max-height:none;
}

.availTitle{ font-weight:700; }

.availPills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:none;
  overflow:visible;
  padding-top:6px;
}

.availPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 8px;
  font-weight:800;
  font-size:12px;
  background:#fff;
  cursor:default;
  user-select:none;
}

.availPill[data-state="taken"]{
  opacity:.55;
  cursor:default;
}

.availPill[data-state="free"]{
  border-style:dashed;
}

/* Availability pills are informational only (no click handler in JS) */

.matrixBox,
.suffixBox{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--line2);
}
.suffixTitle{ font-weight:700; margin-bottom:6px; }
.matrixCandidates{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:28px;
}
.matrixPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  border:1px dashed rgba(16,185,129,.55);
  border-radius:999px;
  padding:3px 9px;
  background:#fff;
  color:var(--ink-soft);
  font-weight:900;
  cursor:pointer;
}
.matrixPill span{
  color:var(--accent-strong);
  font-size:11px;
}
.matrixPill[data-state="mixed"]{
  border-style:solid;
  border-color:rgba(245,158,11,.55);
  background:#fffaf0;
}
.matrixPill:hover{
  border-color:var(--accent);
  box-shadow:0 4px 10px rgba(16,32,38,.08);
}
.suffixRow{ display:flex; gap:8px; align-items:center; }
.suffixInput{
  width:56px;
  height:30px;
  padding:4px 8px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#fff;
  font-weight:800;
  text-align:center;
}
.suffixSeries{ display:flex; flex-wrap:wrap; gap:6px; min-height:26px; }
.sxPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 8px;
  font-weight:800;
  font-size:12px;
  background:#fff;
  user-select:none;
}
.sxPillDot{ width:10px; height:10px; border-radius:999px; display:inline-block; background:#d1d5db; }
.sxPill[data-state="free"] .sxPillDot{ background: rgba(16,185,129,.85); }
.sxPill[data-state="free"]{ border-style:dashed; box-shadow: inset 0 0 0 1px rgba(16,185,129,.25); }
.sxPill[data-state="taken"]{ opacity:.55; }
.sxPill[data-state="reserved"]{ background:#fff7ed; border-color:rgba(245,158,11,.55); }
.sxPill[data-state="reserved"] .sxPillDot{ background:var(--mark-reserved); }
.sxPill[data-state="selected"][data-mark="blue"] .sxPillDot{ background:var(--mark-blue); }
.sxPill[data-state="selected"][data-mark="reserved"] .sxPillDot{ background:var(--mark-reserved); }
.sxPill[data-state="selected"][data-mark="red"] .sxPillDot{ background:var(--mark-red); }
.sxPill[data-state="selected"][data-mark="scan"] .sxPillDot{ background:var(--mark-scan); }
.suffixLegend{ margin-top:6px; font-size:12px; }

/* Keep checkboxes/labels readable on 1xx..9xx by giving columns a bit more room */
html:not([data-series="0"]) .grid{
  column-gap: 18px;
}

html:not([data-series="0"]) .grid .item{
  gap: 6px;
}

.availPillDot{ width:10px; height:10px; border-radius:999px; display:inline-block; background:#d1d5db; }

.availPill[data-state="free"] .availPillDot{ background: rgba(16,185,129,.85); }

.availPill[data-state="selected"][data-mark="blue"] .availPillDot{ background:var(--mark-blue); }
.availPill[data-state="selected"][data-mark="reserved"] .availPillDot{ background:var(--mark-reserved); }
.availPill[data-state="selected"][data-mark="red"] .availPillDot{ background:var(--mark-red); }
.availPill[data-state="selected"][data-mark="scan"] .availPillDot{ background:var(--mark-scan); }

/* PID outline på "selected" i oversigten */
.availPill[data-state="selected"][data-pid="0"]{ box-shadow: inset 0 0 0 2px var(--pid-0); }
.availPill[data-state="selected"][data-pid="1"]{ box-shadow: inset 0 0 0 2px var(--pid-1); }
.availPill[data-state="selected"][data-pid="2"]{ box-shadow: inset 0 0 0 2px var(--pid-2); }
.availPill[data-state="selected"][data-pid="3"]{ box-shadow: inset 0 0 0 2px var(--pid-3); }


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

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

.toolLabel{
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}

.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.segBtn{
  border:0;
  background:transparent;
  padding:7px 10px;
  font-weight:800;
  cursor:pointer;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  color:var(--ink-soft);
}

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

.segBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.segBtn--active{
  background:var(--accent);
  color:#fff;
}

#markSeg .segBtn[data-mark="blue"].segBtn--active{
  background:var(--mark-blue);
}

#markSeg .segBtn[data-mark="reserved"].segBtn--active{
  background:var(--mark-reserved);
}

#markSeg .segBtn[data-mark="red"].segBtn--active{
  background:var(--mark-red);
}

.codePills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 8px;
  font-weight:800;
  font-size:13px;
  background:#fff;
}

.pillDot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}

.pillPidDot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background:#d1d5db;
}

.pill[data-mark="blue"] .pillDot{ background:var(--mark-blue); }
.pill[data-mark="reserved"] .pillDot{ background:var(--mark-reserved); }
.pill[data-mark="red"] .pillDot{ background:var(--mark-red); }
.pill[data-mark="scan"] .pillDot{ background:var(--mark-scan); }

.pillSourceDot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
  background:var(--mark-scan);
  box-shadow:0 0 0 2px rgba(34,197,94,.12);
}

.pill[data-pid="0"] .pillPidDot{ background:var(--pid-0); }
.pill[data-pid="1"] .pillPidDot{ background:var(--pid-1); }
.pill[data-pid="2"] .pillPidDot{ background:var(--pid-2); }
.pill[data-pid="3"] .pillPidDot{ background:var(--pid-3); }

.pidDot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; }
.pidDot[data-pid="0"]{ background:var(--pid-0); }
.pidDot[data-pid="1"]{ background:var(--pid-1); }
.pidDot[data-pid="2"]{ background:var(--pid-2); }
.pidDot[data-pid="3"]{ background:var(--pid-3); }

.userBadge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(0,122,61,.2);
  border-radius:8px;
  background:var(--accent-soft);
  font-weight:900;
  color:var(--accent-strong);
}

.legend{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.legend__item{display:inline-flex; gap:6px; align-items:center}
.swatch{
  width:10px; height:10px; border-radius:2px; display:inline-block;
  border:1px solid var(--line2);
}
.swatch--blue{background:var(--mark-blue)}
.swatch--reserved{background:var(--mark-reserved)}
.swatch--red{background:var(--mark-red)}
.swatch--scan{background:var(--mark-scan)}

/* Check mark colors */
.cb:checked::after{
  background:var(--mark-blue);
}
.cb[data-mark="blue"]:checked::after{ background:var(--mark-blue); }
.cb[data-mark="reserved"]:checked::after{ background:var(--mark-reserved); }
.cb[data-mark="red"]:checked::after{ background:var(--mark-red); }
.cb[data-mark="scan"]:checked::after{ background:var(--mark-scan); }
.cb[data-source="scan"]{
  box-shadow:0 0 0 2px rgba(34,197,94,.18);
}

/* PID outline (hvis flere PID-numre) */
.cb:checked[data-pid="0"]{ outline:2px solid var(--pid-0); outline-offset:1px; }
.cb:checked[data-pid="1"]{ outline:2px solid var(--pid-1); outline-offset:1px; }
.cb:checked[data-pid="2"]{ outline:2px solid var(--pid-2); outline-offset:1px; }
.cb:checked[data-pid="3"]{ outline:2px solid var(--pid-3); outline-offset:1px; }

/* Filter: dim selected items that don't match current filter */
.cb[data-dim="1"]{
  opacity:.22;
}
.cb[data-dim="1"] + .code{
  opacity:.35;
}



/* --- Responsive layout --- */
@media (max-width: 1600px){
  .paperRow{
    display:contents;
  }

  .workColumn{
    order:1;
  }

  .supportArea{
    order:2;
    width:min(860px, calc(100vw - 28px));
    min-width:0;
    max-height:none;
    overflow:visible;
    position:static;
    flex:0 1 auto;
  }

  .rightRail{
    width:100%;
  }

  .paper{
    order:1;
  }

  .statusbar{
    order:2;
  }

  .revisionsDock{
    order:3;
    position:static;
    width:860px;
    max-width:100%;
    min-width:0;
    flex:none;
  }
}

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

  .sidebar{
    height:auto;
    max-height:320px;
    position:static;
  }

  .paperWrap{
    max-width:none;
    align-items:center;
  }

  .workColumn{
    width:min(860px, calc(100vw - 28px));
    flex:0 1 auto;
  }

  .supportArea{
    width:min(860px, calc(100vw - 28px));
    flex:0 1 auto;
  }

  .rightRail{
    width:100%;
  }

  .paperRow{
    width:100%;
    align-items:center;
  }

  .paper,
  .statusbar,
  .revisionsDock{
    width:min(860px, calc(100vw - 28px));
    flex:0 1 auto;
  }

  .paper{
    padding:24px 18px 18px;
  }

  .paperBody{ display:block; }
  .grid{ column-gap:18px; row-gap:10px; margin-left:18px; }
  .statusbar{ flex-direction:column; }
  .rightRail .statusbar{ width:100%; }
  .statusbar__right{ flex:0 0 auto; align-items:stretch; width:100%; }
  .statusbar__right .codePills{ justify-content:flex-start; }
  .availBox{ max-width:none; }
}

@media (max-width: 900px){
  .recordFilters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .authShell{
    grid-template-columns:1fr;
    min-height:0;
  }

  .authVisual{
    min-height:300px;
    padding:28px;
  }

  .authVisual__brand strong{
    font-size:30px;
  }

  .authCard{
    padding:30px 28px 32px;
  }
}

@media (max-width: 700px){
  .topbar{
    position:static;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
  }

  .topbar__left{
    justify-content:flex-start;
    min-width:0;
  }

  .topbar__mark{
    width:38px;
    height:38px;
  }

  .topbar__brand{
    min-width:0;
  }

  .topbar__actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:thin;
  }

  .topbar__group{
    width:auto;
    display:flex;
    flex:0 0 auto;
    flex-wrap:nowrap;
  }

  .topbar__group--session{
    flex:0 0 auto;
  }

  .topbar__actions .btn{
    width:auto;
    min-width:0;
    padding:8px 6px;
    font-size:12px;
    white-space:nowrap;
  }

  .userBadge{
    justify-content:center;
    border-radius:8px;
    white-space:nowrap;
  }

  .authGate{
    min-height:calc(100vh - 82px);
    padding:14px;
    align-items:flex-start;
  }

  .authShell{
    width:100%;
  }

  .authVisual{
    min-height:240px;
    padding:22px;
  }

  .authVisual__brand strong{
    font-size:26px;
  }

  .authCard{
    padding:24px 20px;
  }

  .workspace{
    gap:10px;
    padding:10px;
  }

  .sidebar{
    max-height:none;
    border-radius:8px;
  }

  .paper,
  .statusbar,
  .supportArea,
  .rightRail,
  .revisionsDock{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .paper{
    padding:18px 12px;
    border-radius:8px;
  }

  .fieldRow{
    grid-template-columns:1fr;
    gap:6px;
  }

  .field--small,
  .field--sig{
    width:100%;
  }

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

  .section__title{
    font-size:14px;
    line-height:1.35;
  }

  .section__subtitle{
    font-size:13px;
    line-height:1.35;
  }

  .grid{
    grid-template-columns:repeat(5, minmax(44px, 1fr));
    column-gap:8px;
    row-gap:10px;
    margin-left:0;
  }

  .gridSpacer{
    display:none;
  }

  .statusbar{
    padding:10px;
  }

  .toolgroup{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .seg{
    flex-wrap:wrap;
    overflow:visible;
  }

  .selectedBox,
  .controlBox,
  .availBox{
    border-radius:8px;
  }

  .revisionsDock{
    border-radius:8px;
    padding:12px;
  }

  .revTable{
    min-width:560px;
  }
}

@media (max-width: 360px){
  .topbar__group{
    flex-wrap:nowrap;
  }
}

/* --- Print --- */
@page{
  size: A4 portrait;
  margin: 8mm;
}

@media print{
  body{background:#fff}
  .topbar,.sidebar,.statusbar,.revisionsDock{display:none !important}
  .workspace{display:block; padding:0}
  .paper{
    width: 194mm;            /* 210mm minus margins */
    padding: 10mm 10mm 8mm;
    border:none;
    box-shadow:none;
    border-radius:0;
  }

  .headerFields{
    gap:8px;
    margin-bottom:10px;
  }
  .fieldRow{
    grid-template-columns: 48mm 1fr;
    gap:8mm;
  }
  .label{font-size:12.5px}
  .field{
    height:30px;
    padding:6px 8px;
    border-radius:5px;
  }
  .field--small{width:60mm}
  .field--sig{width:60mm}

  .section{margin-top:10px; page-break-inside: avoid}
  .section__title{font-size:13.5px}
  .section__subtitle{font-size:12.8px; margin:2px 0 6px}

  

.paperBody{display:block}
.revisionsPanel{
  border:none;
  padding-left:0;
  margin-top:10mm;
  page-break-inside: avoid;
}
.revisionsPanel__tableWrap{max-height:none}
.revTable{font-size:12px}

.grid{
    margin-left:18px;
    grid-auto-rows: 22px;
    column-gap: 18px;
    row-gap: 8px;
    margin-top:6px;
  }

  .code{font-size:12.8px}
  .cb{width:13px; height:13px}
  .cb:checked::after{width:7px; height:7px}
  .footerNote{margin-top:14px; font-size:12.5px}
}

/* --- Modal --- */
.modal{position:fixed; inset:0; display:none; z-index:50}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.25);
}
.modal__panel{
  position:relative;
  width:min(520px, calc(100vw - 24px));
  margin:80px auto;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:16px;
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  overflow:hidden;
}
.modal__panel--wide{
  width:min(980px, calc(100vw - 24px));
}
.modal__panel--import{
  width:min(960px, calc(100vw - 24px));
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line2);
}
.modal__title{font-weight:900}
.modal__sub{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.modal__body{padding:14px}
.modal__label{display:block; font-weight:800; margin:10px 0 6px}
.modal__footer{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.modal__note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
.check{display:inline-flex; align-items:center; gap:8px; font-weight:800}

.importChoiceGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.importChoice{
  text-align:left;
  border:1px solid var(--line2);
  border-radius:8px;
  padding:14px;
  background:
    linear-gradient(135deg, rgba(0,122,61,.06), rgba(25,79,120,.04)),
    #fff;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:168px;
  box-shadow:0 1px 0 rgba(16,32,38,.03);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.importChoice:hover{
  border-color:rgba(0,122,61,.32);
  box-shadow:0 12px 28px rgba(16,32,38,.1);
  transform:translateY(-1px);
}

.importChoice strong{
  font-size:17px;
  color:var(--ink-soft);
}

.importChoice span:not(.importChoice__badge){
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.importChoice code{
  align-self:flex-start;
  border:1px solid var(--line2);
  border-radius:6px;
  padding:3px 7px;
  background:#fff;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:900;
}

.importChoice__badge{
  align-self:flex-start;
  border:1px solid rgba(0,122,61,.24);
  border-radius:999px;
  padding:3px 8px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.importDocs{
  margin-top:12px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}

.importDocs summary{
  cursor:pointer;
  padding:10px 12px;
  color:var(--ink-soft);
  font-weight:900;
}

.importDocs[open] summary{
  border-bottom:1px solid var(--line2);
  background:var(--surface-soft);
}

.importDocs__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  padding:12px;
}

.importDocs__grid > div > strong{
  display:block;
  margin-bottom:6px;
  color:var(--accent-strong);
}

.importDocs ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

.importDocs code,
.modal__note code{
  border:1px solid var(--line2);
  border-radius:6px;
  padding:1px 5px;
  background:#fff;
  color:var(--ink-soft);
  font-size:12px;
}

.adminUsersLayout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, .85fr);
  gap:14px;
}

.adminUsersCard,
.adminUserForm{
  border:1px solid var(--line2);
  border-radius:8px;
  background:var(--surface-soft);
  padding:12px;
}

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

.adminUsersCard__header strong,
.adminUserForm strong{
  display:block;
  color:var(--ink-soft);
  font-size:15px;
}

.adminUsersCard__header span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  margin-top:2px;
}

.adminUsersList{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(58vh, 560px);
  overflow:auto;
}

.adminUserRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#fff;
}

.adminUserRow__main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.adminUserRow__main strong{
  font-size:15px;
  color:var(--ink);
}

.adminUserRow__main span,
.adminUserRow__meta span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.adminUserRow__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}

.rolePill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line2);
  border-radius:999px;
  padding:3px 8px;
  background:#fff;
  color:var(--ink-soft) !important;
  text-transform:uppercase;
}

.rolePill[data-role="allocator"]{
  border-color:rgba(245,158,11,.35);
  background:#fff7ed;
  color:#92400e !important;
}

.rolePill[data-role="admin"]{
  border-color:rgba(0,122,61,.28);
  background:#ecfdf3;
  color:var(--accent-strong) !important;
}

.adminUserForm{
  display:flex;
  flex-direction:column;
  gap:2px;
}

@media (max-width: 760px){
  .modal__panel{
    margin:24px auto;
    max-height:calc(100vh - 48px);
    overflow:auto;
  }

  .adminUsersLayout,
  .adminUserRow,
  .importChoiceGrid,
  .importDocs__grid{
    grid-template-columns:1fr;
  }

  .adminUserRow__meta{
    justify-content:flex-start;
  }
}