/* =========================================================
   DSF PORTAL – MODERN LIGHT THEME (CLEAN + CONSOLIDATED)
   Works with legacy + dsf-* classes
   ========================================================= */

/* -------------------------
   DESIGN TOKENS
   ------------------------- */
:root{
  --bg:#ffffff;
  --bg2:#fbfbfc;
  --panel:#ffffff;
  --panelSoft:#f3f5f7;
  --panel2:#eef1f4;

  --text:#0b0b0b;
  --muted:#4b5563;
  --muted2:#6b7280;

  --line: rgba(0,0,0,.16);
  --line2: rgba(0,0,0,.10);

  --header1:#232323;
  --header2:#151515;

  --red1:#c4161c;
  --red2:#a51217;

  --okBg:#ecfdf5;
  --warnBg:#fff7ed;
  --badBg:#fef2f2;

  --radius:18px;
  --radius2:12px;

  --shadow: 0 18px 46px rgba(0,0,0,.10);
  --shadow2:0 12px 26px rgba(0,0,0,.08);
  --shadow3:0 10px 18px rgba(0,0,0,.06);

  --max:1240px;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* -------------------------
   BASE / RESET
   ------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background: radial-gradient(900px 700px at 20% -10%, #ffffff 0%, var(--bg2) 55%, #f7f8fa 100%);
  font-size:14px;
  line-height:1.65;
  letter-spacing:.15px;
  font-weight:400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color:inherit; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; }

/* Prevent huge images (logo fix) */
.dsf-topbar img,
.topbar img,
.brand img{
  max-height:52px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* -------------------------
   LAYOUT SHELL
   ------------------------- */
.dsf-shell,
.container{
  max-width: var(--max);
  margin: 0 auto;          /* fjerner top/bund margin */
  padding: 22px 18px 44px; /* flytter luft ind i container */
}


/* -------------------------
   HEADER / TOPBAR
   ------------------------- */
.dsf-topbar,
.topbar{
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--header1), var(--header2));
  color:#fff;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.dsf-topbar *, .topbar *{ color:#fff; }

/* If header contains an inner wrapper (e.g., <div class="dsf-wrap">), make it flex too */
.dsf-topbar > .dsf-wrap,
.topbar > .dsf-wrap{
  display:flex;
  align-items:center;
  width:100%;
}


.dsf-brand,
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.dsf-title b,
.brand .title strong{
  display:block;
  font-size:18px;
  letter-spacing:.25px;
  font-weight:750;
}
.dsf-title span,
.brand .title span{
  display:block;
  font-size:12.5px;
  color: rgba(255,255,255,.78);
  margin-top:2px;
}

/* Actions helt til højre */

.actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
@media (max-width: 560px){
  .actions{ flex-wrap:wrap; }
}

.dsf-topbar .actions,
.topbar .actions{ padding-right:6px; }
/* -------------------------
   TABS NAV
   ------------------------- */
.dsf-tabs,
.tabs{
  margin: 14px 0 18px;
  padding: 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: #f6f7f9;
  box-shadow: var(--shadow3);

  display:flex;
  flex-wrap:wrap;
  gap:8px;

  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.dsf-tab,
.tab{
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.22);
  background:#fff;
  color:#000;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  user-select:none;

  transition: transform .12s ease, background .12s ease, filter .12s ease, box-shadow .12s ease;
}
.dsf-tab:hover,
.tab:hover{
  transform: translateY(-1px);
  background:#fafafa;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.dsf-tab.active,
.tab.active{
  background: linear-gradient(180deg, var(--red1), var(--red2));
  color:#fff;
  border-color: rgba(0,0,0,.22);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 22px rgba(196,22,28,.22);
}
.dsf-tab.active *, .tab.active *{ color:#fff; }

/* -------------------------
   PANELS / SECTIONS
   ------------------------- */
.dsf-panel,
.section{ display:none; }
.dsf-panel.active,
.section.active{ display:block; }

/* -------------------------
   CARDS
   ------------------------- */
.dsf-card,
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panelSoft));
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 18px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.dsf-card:hover,
.card:hover{
  transform: translateY(-1px);
  transition: transform .12s ease;
}

/* legacy card head/body */
.card .head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);

  /* match rounded top */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card .body{ padding: 16px 18px; }

/* Headings / labels */
h1,h2,h3,h4{
  letter-spacing:.2px;
  font-weight:750;
}
h1{ font-size:22px; }
h2{ font-size:20px; }
h3{ margin:0 0 10px; font-size:18px; }
h4{ font-size:16px; }

label{
  display:block;
  font-size:12px;
  color: var(--muted2);
  margin:0 0 6px;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:none;
}

/* -------------------------
   GRIDS
   ------------------------- */
.dsf-grid,
.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
@media (max-width: 980px){
  .dsf-grid, .grid{ grid-template-columns: 1fr; }
}

.dsf-row,
.form,
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 720px){
  .dsf-row, .form, .split{ grid-template-columns: 1fr; }
}

/* -------------------------
   INPUTS
   ------------------------- */
.dsf-input, .dsf-select, .dsf-textarea,
input, select, textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0,.32);
  background:#fff;
  color: var(--text);
  outline:none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
input::placeholder,
textarea::placeholder{ color:#9aa1ac; }

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

.dsf-input:focus, .dsf-select:focus, .dsf-textarea:focus,
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,0,0,.65);
  box-shadow: 0 0 0 4px rgba(196,22,28,.16);
}

/* -------------------------
   BUTTONS – UNIFIED (ENS)
   ------------------------- */
.dsf-btn,
.btn{
  min-height:40px;
  padding: 0 18px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.22);

  background:#111;
  color:#fff;

  font-weight:750;
  font-size:13px;
  letter-spacing:.25px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;

  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.dsf-btn:hover,
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 20px rgba(0,0,0,.12);
}
.dsf-btn:active,
.btn:active{
  transform: translateY(0);
  box-shadow:none;
}

/* Primary / Danger */
.dsf-btn.primary,
.btn.primary,
.btn.bad,
.btn.danger{
  background: linear-gradient(180deg, var(--red1), var(--red2));
  color:#fff;
  border-color: rgba(0,0,0,.22);
}
.dsf-btn.primary:hover,
.btn.primary:hover{ filter: brightness(1.05); }

/* FIX: luft mellem login-knapper og linjen */
.form-actions + hr.sep{
  margin-top: 24px;
}

/* Optional: OK / WARN */
.btn.ok{ background:#0f6b2a; border-color: rgba(0,0,0,.22); color:#fff; }
.btn.warn{ background:#b45309; border-color: rgba(0,0,0,.22); color:#fff; }

/* -------------------------
   LOGIN ACTIONS (SPACING + ALIGN)
   ------------------------- */
.full.form-actions,
.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom: 20px; /* ✅ luft direkte under knapperne */
}

.left-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.reset-inline{
  margin-left:auto;
  display:flex;
  align-items:center;
}

/* separator */
hr.sep{
  margin: 0 0 22px; /* top=0 fordi padding-bottom står for luft */
  border:none;
  border-top:1px solid rgba(0,0,0,.12);
}

/* mobile: reset knap ned på egen linje */
@media (max-width: 520px){
  .full.form-actions, .form-actions{ flex-wrap:wrap; }
  .reset-inline{ margin-left:0; width:100%; }
  .reset-inline .btn{ width:100%; }
}

/* -------------------------
   PILLS / STATUS
   ------------------------- */
.dsf-pill,
.pill,
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-size:12px;
  font-weight:400;
  color:#000;
}
.dsf-pill.wait, .badge.warn{ background: var(--warnBg); }
.dsf-pill.ok,   
.badge.soft{
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(15,23,42,.12);
  color: var(--text);
}
.badge.ok  { background: var(--okBg); }
.dsf-pill.no,   .badge.bad { background: var(--badBg); }

/* -------------------------
   TABLES
   ------------------------- */
table,
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.18);
}
th, td,
.table th, .table td{
  padding: 11px 10px;
  border-bottom:1px solid rgba(0,0,0,.10);
  text-align:left;
  vertical-align: middle;
  font-size:14px;
  font-weight:450;
  color:#111827;
}
th,
.table th{
  background: var(--panel2);
  color:#374151;
  font-size:12px;
  font-weight:700;
  letter-spacing:.35px;
  text-transform:none;
}
tr:last-child td{ border-bottom:none; }
tr:hover td{ background: rgba(0,0,0,.02); }
tr:nth-child(even) td{ background: rgba(0,0,0,.012); }

/* -------------------------
   FLASH / NOTICES
   ------------------------- */
.flash,
.notice{
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius2);
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  box-shadow: var(--shadow3);
  font-weight:550;
  line-height:1.6;
}
.flash.ok{ background: var(--okBg); }
.flash.err{ background: var(--badBg); }

/* -------------------------
   MODALS / IFRAME (admin doc viewer)
   ------------------------- */
.modal-backdrop,
.modalWrap{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background: rgba(0,0,0,.55) !important;
  z-index:9999 !important;
}
.modal-backdrop.show,
.modalWrap.show{ display:flex !important; }

.modal{
  width: min(920px, 100%) !important;
  background: linear-gradient(180deg, #ffffff, #f3f4f6) !important;
  border:1px solid rgba(0,0,0,.22) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.25) !important;
  padding: 14px !important;
}

.modal-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

iframe,
#docFrame{
  width:100% !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:14px !important;
}
#docFrame{ height:520px !important; }

/* -------------------------
   PRINT
   ------------------------- */
.print-header{ display:none !important; }
.print-header img{
  height:44px !important;
  width:auto !important;
  max-width:160px !important;
  object-fit:contain !important;
}

@media print{
  body{ background:#fff !important; color:#000 !important; }
  .dsf-topbar,.dsf-tabs,.no-print,.flash,.modal-backdrop,.modalWrap{ display:none !important; }

  .print-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:12px !important;
  }

  .dsf-card,.card{
    border:1px solid #ddd !important;
    box-shadow:none !important;
    background:#fff !important;
  }
  table,th,td{ border-color:#ddd !important; }
  .dsf-topbar img, .print-header img{ max-height:46px !important; }
}

/* FIX: luft mellem login-knapper og linjen */
.form-actions + hr.sep{
  margin-top: 24px;
}
/* Luft mellem input-rækken og knapperne */
#loginForm .split{
  margin-bottom: 16px;
}
/* Login: luft mellem rækker inde i selve loginForm */
#loginForm{
  row-gap: 18px;        /* luft mellem input-række og knap-række */
}

/* ekstra sikkerhed: hvis row-gap ikke rammer pga. anden display-regel */
#loginForm .form-actions{
  margin-top: 18px !important;
}
/* Ens top-afstand mellem topbar og indhold (login vs portal) */
.login-grid{
  margin-top: 22px;
}

/* Beskedcenter: textarea + send-knap på samme linje */
.msgRow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end; /* knappen ned ved bunden af textarea */
}

.msgActions{
  display:flex;
  align-items:end;
}

.msgActions .btn{
  height: auto !important;
  padding: 10px 16px;
  line-height: 1.2;
}

.msgRow{
  margin-bottom: 18px;
}


/* Mobil: knappen under textarea */
@media (max-width: 640px){
  .msgRow{ grid-template-columns: 1fr; }
  .msgActions{ justify-content:flex-start; }
}

/* =========================
   LOGIN – CENTRERET + 1 KOLONNE
   ========================= */
}.login-grid{
  margin: 0 !important;
  max-width: 1820px;   /* ← ca. dobbelt bred, perfekt desktop */
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* højre side */
.topbar-right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* venstre side */
.topbar-left{
  display:flex;
  gap:12px;
  align-items:center;
}
/* Topbar: sørg for at wrapperen er flex */
.dsf-topbar > .dsf-wrap,
.topbar > .dsf-wrap{
  display:flex;
  align-items:center;
  width:100%;
}

/* Brand venstre */
.dsf-brand, .brand{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Actions helt til højre */
.actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
}
@media (max-width: 560px){
  .actions{ flex-wrap:wrap; }
}
/* Godkendelses Log toolbar */
.log-toolbar{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:end;
  margin:12px 0 10px;
}

.log-search{
  max-width: 620px;
  margin: 0 auto; /* ✅ centrerer søgefeltet */
}

@media (max-width: 900px){
  .log-toolbar{
    grid-template-columns: 1fr;
  }
  .log-search{
    max-width: 100%;
  }
}

.log-filters{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.log-filters .mini{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  opacity:.8;
}
.log-filters input,
.log-filters select{
  padding:9px 10px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  background:#fff;
}

.log-meta{
  font-size:12px;
  opacity:.75;
  margin:0 0 10px;
}

/* Table polish */
.table-soft{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  background:#fff;
}
.table-soft th{
  text-align:left;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.7;
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
.table-soft td{
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  vertical-align:top;
}
.table-soft tr:last-child td{ border-bottom:none; }
.table-soft tr:hover td{ background: rgba(15,23,42,.02); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.02);
}
.badge.admin{ border-color: rgba(212,0,0,.25); background: rgba(212,0,0,.06); }

/* =========================================================
   LOGIN – OPSÆTNING SOM SKÆRMBILLEDET (CENTRERET KORT + 2 SEKTIONER)
   Bevarer eksisterende farver/knapper (primary mv.)
   ========================================================= */

.login-page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px 44px;
}

/* Brug hele siden til login-kortet */
.login-grid{
  margin: 0 !important;
  max-width: 720px;
}

/* Selve kortet */
.login-card{
  padding: 6px;
}
.login-card .body{
  padding: 22px 22px 26px;
}

/* Logo + titel centreret */
.login-brand{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  margin-bottom: 18px;
}
.login-logo{
  width: 56px;     /* ← mindre og mere balanceret */
  max-width: 56px;
  height: auto;
}
.login-title{
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 20px;
  margin: 0;
}
.login-subtitle{
  margin-top: 2px;
  color: var(--muted2);
  font-weight: 650;
  letter-spacing: .2px;
}

/* Sektionstitler (Log ind / Opret ny profil) */
.login-section-title{
  text-align:center;
  margin: 18px 0 12px;
  font-size: 18px;
}

/* Former */
.login-form,
.register-form{
  display:grid;
  gap: 12px;
}

.login-form input,
.register-form input{
  background: var(--panel2);
  border: 1px solid rgba(0,0,0,.18);
  padding: 12px 14px;
  border-radius: 10px;
}

/* Fuld bredde knap */
.btn.full{
  width:100%;
  justify-content:center;
  border-radius: 10px; /* lidt mere 'kasse' som på billedet */
}

/* Glemt adgangskode? (link-stil) */
.login-forgot{
  text-align:center;
  margin-top: 10px;
}
.linklike{
  background: transparent;
  border: none;
  padding: 0;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.linklike:hover{ filter: brightness(0.9); }

.login-sep{
  margin: 18px 0 16px;
}

/* lille note under opret */
.login-mini-note{
  text-align:center;
  color: var(--muted2);
  margin-top: 6px;
}

/* Screen-reader only labels */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
/* Mere luft mellem felter i login & opret */
.login-form,
.register-form{
  display: grid;
  gap: 16px;       /* ← var 12px */
}

/* Lidt mere luft omkring sektioner */
.login-section-title{
  margin: 22px 0 14px;
}

/* Luft før knapper */
.login-form .btn,
.register-form .btn{
  margin-top: 6px;
}