/* /var/www/smvgrc-dev/static/styles/v5.css */
/* V5 utility-klasser — udvider base.css/components.css for V5-flader.
   Bruger eksisterende tokens (--text, --muted, --line, --shadow, --r). */


/* =========================================================
### V5 — containers
========================================================= */
.container-narrow{ max-width: 700px; margin: 0 auto; padding: 0 16px; }
.container-medium{ max-width: 900px; margin: 0 auto; padding: 0 16px; }
.container-wide{   max-width: 1100px; margin: 0 auto; padding: 0 16px; }


/* =========================================================
### V5 — flex/layout helpers
========================================================= */
.flex-between{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-end{     display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.flex-row{     display: flex; align-items: center; gap: 8px; }
.flex-wrap{    display: flex; flex-wrap: wrap; gap: 8px; }

.stack-y > * + *{ margin-top: 12px; }
.stack-y-sm > * + *{ margin-top: 6px; }

.mt-3{ margin-top: 12px; }
.mb-3{ margin-bottom: 12px; }
.mb-4{ margin-bottom: 18px; }


/* =========================================================
### V5 — card-with-header (matcher Bootstrap-mønstret fra V5)
========================================================= */
.card-v5{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-v5 .card-v5-header{
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-v5 .card-v5-body{ padding: 14px; }
.card-v5 .card-v5-body-tight{ padding: 0; }


/* =========================================================
### V5 — tables
========================================================= */
.table-v5{ width: 100%; border-collapse: collapse; font-size: 13px; }
.table-v5 thead th{
  background: #f8fafc;
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table-v5 tbody td{
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-v5 tbody tr:last-child td{ border-bottom: none; }
.table-v5 .col-narrow{ width: 80px; }
.table-v5 .col-medium{ width: 140px; }
.table-v5 .col-actions{ width: 100px; text-align: right; }


/* =========================================================
### V5 — forms
========================================================= */
.form-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.form-grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px){
  .form-grid-2, .form-grid-3, .form-grid-4{ grid-template-columns: 1fr; }
}

.form-field{ display: flex; flex-direction: column; gap: 4px; }
.form-field-label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.form-field-help{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.form-field textarea,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field select{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  margin-top: 0;
}
.form-field-inline{
  display: flex;
  align-items: center;
  gap: 8px;
}


/* =========================================================
### V5 — buttons (varianter af .btn fra base.css)
========================================================= */
.btn-outline{ background: #fff; }
.btn-outline:hover{ background: #f8fafc; }

.btn-success{ background: #16a34a; color: #fff; border-color: transparent; }
.btn-success:hover{ background: #15803d; }

.btn-warning{ background: #f59e0b; color: #fff; border-color: transparent; }
.btn-warning:hover{ background: #d97706; }

.btn-danger{ background: #dc2626; color: #fff; border-color: transparent; }
.btn-danger:hover{ background: #b91c1c; }

.btn-icon-danger{ color: #ef4444; }
.btn-icon-danger:hover{ background: #fef2f2; }


/* =========================================================
### V5 — badges
========================================================= */
.badge-v5{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* status — generic state-badges */
.badge-draft     { background: #f1f5f9; color: #64748b; }
.badge-in-review { background: #fef3c7; color: #92400e; }
.badge-approved  { background: #dcfce7; color: #166534; }
.badge-rejected  { background: #fee2e2; color: #991b1b; }
.badge-active    { background: #dcfce7; color: #166534; }
.badge-archived  { background: #f1f5f9; color: #64748b; }

/* outcome */
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-muted   { background: #f1f5f9; color: #64748b; }

/* kritikalitet (BCM) */
.badge-criticality-low      { background: #f1f5f9; color: #64748b; }
.badge-criticality-medium   { background: #dbeafe; color: #1e40af; }
.badge-criticality-high     { background: #fef3c7; color: #92400e; }
.badge-criticality-critical { background: #fee2e2; color: #991b1b; }

/* EU AI Act risk-klasser */
.badge-risk-minimal      { background: #dcfce7; color: #166534; }
.badge-risk-limited      { background: #dbeafe; color: #1e40af; }
.badge-risk-high         { background: #fef3c7; color: #92400e; }
.badge-risk-unacceptable { background: #fee2e2; color: #991b1b; }


/* =========================================================
### V5 — flash varianter (eksisterende .flash er base)
========================================================= */
.flash-success{ border-color: #16a34a; background: #f0fdf4; color: #166534; }
.flash-error,
.flash-danger { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.flash-warning{ border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.flash-info   { border-color: #3b82f6; background: #eff6ff; color: #1e40af; }


/* =========================================================
### V5 — page-header (titel + actions)
========================================================= */
.page-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-header h1{ margin: 0 0 4px 0; font-size: 22px; font-weight: 700; }
.page-header .page-header-meta{
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.page-header .page-header-actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}


/* =========================================================
### V5 — code/inline-code
========================================================= */
.inline-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text);
}

.code-block{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  word-break: break-all;
  user-select: all;
  display: block;
}


/* =========================================================
### V5 — branding (settings_v5)
========================================================= */
.branding-color-row{ width: 100%; }
.branding-color-row input[type="text"]{ flex: 1; }
.branding-color-picker{
  width: 50px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
}
.branding-logo-ok{ color: #166534; }


/* =========================================================
### V5 — radio-card pattern (landscape mode select)
========================================================= */
.mode-option{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.mode-option.is-selected{
  border-color: var(--text);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}
.mode-option input[type="radio"]{ margin-top: 4px; }
.mode-option p{ margin: 4px 0 0 0; }


/* =========================================================
### V5 — api-tokens (settings_v5)
========================================================= */
.token-banner{
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: #92400e;
}
.token-banner strong{ display: block; margin-bottom: 6px; font-size: 14px; }

.scope-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
@media (max-width: 700px){
  .scope-list{ grid-template-columns: 1fr 1fr; }
}
.scope-list label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 0;
}

.form-inline{ display: inline; margin: 0; }


/* =========================================================
### V5 — landscape (BAS-151)
========================================================= */
.landscape-svg-wrap{ text-align: center; }
.landscape-svg-wrap svg{ max-width: 100%; height: auto; }

.asset-pill{
  display: inline-block;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}


/* =========================================================
### V5 — empty/muted states
========================================================= */
.empty-state{
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
}
.text-small{ font-size: 12px; }
.text-xs{ font-size: 11px; }


/* =========================================================
### V5 — reports overview (BAS-148)
========================================================= */
.report-email-form{
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.report-email-form.is-open{ display: block; }


/* =========================================================
### V5 — task attachments (BAS-146)
========================================================= */
.attachment-card{ margin-bottom: 18px; }
.attachment-card-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attachment-card-title form{ margin: 0; }

.attachment-required-badge{
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}

.attachment-table{
  width: 100%;
  font-size: 13px;
  margin-bottom: 12px;
}
.attachment-table tr{ border-bottom: 1px solid var(--line); }
.attachment-table td{ padding: 6px 0; }
.attachment-table .attachment-meta{ color: var(--muted); font-size: 11px; }
.attachment-table .attachment-actions{ text-align: right; }

.attachment-empty{
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 12px 0;
}

.attachment-upload-form{ display: flex; gap: 8px; align-items: center; }
.attachment-upload-form input[type="file"]{ flex: 1; }

.btn-icon-delete{ color: #ef4444; }


/* =========================================================
### V5 — score colors (BAS-163: compliance template logic)
### Bruges som inline-class på score-tekst og maturity-niveauer.
========================================================= */
.score-positive  { color: #22c55e; font-weight: 700; }
.score-neutral   { color: #3b82f6; font-weight: 700; }
.score-warning   { color: #eab308; font-weight: 700; }
.score-orange    { color: #f97316; font-weight: 700; }
.score-negative  { color: #ef4444; font-weight: 700; }
.score-unknown   { color: var(--muted); font-weight: 700; }

/* RAG (red/amber/green) — bruges som border-left + tekst-farve */
.rag-green   { color: #22c55e; border-left-color: #22c55e !important; }
.rag-yellow  { color: #eab308; border-left-color: #eab308 !important; }
.rag-red     { color: #ef4444; border-left-color: #ef4444 !important; }
.rag-grey    { color: #94a3b8; border-left-color: #94a3b8 !important; }
.rag-disabled{ color: #cbd5e1; border-left-color: #cbd5e1 !important; }


/* =========================================================
### V5 — BCM (BAS-154)
========================================================= */
.exercise-complete-row{ display: none; background: #f8fafc; }
.exercise-complete-row.is-open{ display: table-row; }
.exercise-complete-row .form-grid-3{ align-items: end; }
@media (min-width: 700px){
  .exercise-complete-notes{ grid-column: 2 / span 1; }
  .exercise-complete-action{ align-self: end; }
}

.bia-section-title{
  font-size: 14px;
  margin: 18px 0 4px 0;
}

.bcp-step-title  { grid-column: span 2; }
.bcp-step-owner  { grid-column: span 1; }
@media (max-width: 700px){
  .bcp-step-title, .bcp-step-owner{ grid-column: span 1; }
}


/* =========================================================
### V5 — AI management (BAS-155)
========================================================= */
.ai-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.ai-toggle input[type="checkbox"]{ margin: 0; }


/* =========================================================
### V5 — Kravsæt-builder (BAS-194 + BAS-195)
========================================================= */

/* Tab-navigation */
.ks-tabbar{
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 16px;
}
.ks-tab{
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.ks-tab:hover{ color: var(--text); }
.ks-tab.is-active{
  color: var(--text);
  font-weight: 600;
  border-bottom-color: #2563eb;
}
.ks-tab-count{
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 6px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 9px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.ks-pane{ display: none; }
.ks-pane.is-active{ display: block; }

/* Generel utility — bruges af kravsæt-builder edit-form picker */
.is-hidden{ display: none; }


/* =========================================================
### V5 — BAS-207 Foundation modenhedsdashboard
========================================================= */
.maturity-page{ max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.maturity-intro{ font-size: 13px; color: var(--muted); margin: 4px 0 18px; }

.maturity-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.maturity-card{
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maturity-card:hover{ box-shadow: var(--shadow); }

.maturity-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.maturity-card-title{ font-weight: 700; font-size: 15px; margin: 0; }
.maturity-card-area{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--line-solid);
  color: var(--muted);
}

.maturity-bar-track{
  height: 8px;
  background: var(--line-solid);
  border-radius: 4px;
  overflow: hidden;
}
.maturity-bar-fill{ height: 100%; border-radius: 4px; transition: width .3s; }
.maturity-bar-fill.rag-green{  background: var(--success); }
.maturity-bar-fill.rag-yellow{ background: var(--warning); }
.maturity-bar-fill.rag-red{    background: var(--danger); }

.maturity-card-stats{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}
.maturity-card-pct{ font-weight: 700; font-size: 14px; color: var(--text); }
.maturity-card-pct.rag-green{  color: var(--success-dark); }
.maturity-card-pct.rag-yellow{ color: var(--warning-dark); }
.maturity-card-pct.rag-red{    color: var(--danger-dark); }

.maturity-card-empty{
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-subtle);
  border-radius: 8px;
  border: 1px dashed var(--line);
}

/* Drilldown */
.maturity-item{
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-solid);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 13px;
}
.maturity-item.maturity-bad{   border-left-color: var(--danger); }
.maturity-item.maturity-warn{  border-left-color: var(--warning); }
.maturity-item.maturity-ok{    border-left-color: var(--success); }

.maturity-item-head{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.maturity-item-code{
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}
.maturity-item-score{
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
}
.maturity-item-score.rag-bad{  background: var(--danger-bg); color: var(--danger-dark); }
.maturity-item-score.rag-warn{ background: var(--warning-bg); color: var(--warning-dark); }
.maturity-item-score.rag-ok{   background: var(--success-bg); color: var(--success-dark); }
.maturity-item-text{ font-size: 13px; margin: 4px 0; }
.maturity-item-conseq{
  font-size: 12px;
  color: var(--danger-dark);
  background: var(--danger-bg);
  border-radius: 5px;
  padding: 6px 10px;
  margin-top: 6px;
}


/* =========================================================
### V5 — BAS-210 Standard/Enterprise risikodashboard
========================================================= */
.risk-page{ max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.risk-section{ margin-bottom: 28px; }
.risk-section-title{ font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.risk-section-intro{ color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.risk-grid-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.risk-grid-2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.risk-card{
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.risk-card.is-link:hover{ box-shadow: var(--shadow); cursor: pointer; }
.risk-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.risk-card-title{ font-weight: 700; margin: 0; }
.risk-card-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--line-solid);
  color: var(--muted);
}
.risk-card-badge.rag-green  { background: var(--success-bg); color: var(--success-dark); }
.risk-card-badge.rag-yellow { background: var(--warning-bg); color: var(--warning-dark); }
.risk-card-badge.rag-orange { background: #ffedd5; color: var(--warning-dark); }
.risk-card-badge.rag-red    { background: var(--danger-bg); color: var(--danger-dark); }
.risk-card-badge.rag-grey   { background: var(--line-solid); color: var(--muted); }

.risk-stat{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}
.risk-stat.rag-green  { color: var(--success-dark); }
.risk-stat.rag-yellow { color: var(--warning-dark); }
.risk-stat.rag-orange { color: var(--warning-dark); }
.risk-stat.rag-red    { color: var(--danger-dark); }
.risk-stat.rag-grey   { color: var(--muted); }
.risk-stat-label{ font-size: 12px; color: var(--muted); }

.risk-distribution{
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.risk-distribution span strong{ color: var(--text); }

.risk-driver-list{
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 12px;
}
.risk-driver-list li{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.risk-driver-list li:last-child{ border-bottom: none; }
.risk-driver-ref{
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  width: 50px;
}
.risk-driver-title{ flex: 1; }
.risk-driver-score{ font-weight: 700; }

/* Hierarki — kapitel → section → krav */
.ks-chapter{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.ks-chapter-title{
  font-weight: 700;
  margin: 0 0 10px;
  font-size: 15px;
}
.ks-section{
  border-left: 3px solid var(--line);
  padding-left: 12px;
  margin: 10px 0;
}
.ks-section-title{
  font-weight: 600;
  margin: 0 0 6px;
  font-size: 14px;
}
.ks-req-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-left: 2px solid var(--line);
  margin: 4px 0;
  font-size: 13px;
}
.ks-req-text{ flex: 1; }
.ks-req-code{
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  color: #475569;
}

/* Inline add/edit forms */
.ks-form{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 6px 0;
}
.ks-form-col-3{  grid-column: span 3; }
.ks-form-col-6{  grid-column: span 6; }
.ks-form-col-7{  grid-column: span 7; }
.ks-form-col-9{  grid-column: span 9; }
.ks-form-col-12{ grid-column: span 12; }
.ks-form input[type="text"],
.ks-form select,
.ks-form textarea{
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.ks-form-label{
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}

/* Mermaid wrapper */
.ks-mermaid{
  background: #fff;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.ks-mermaid-legend{
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Preview-boks i Rediger-formular */
.ks-preview{
  background: #f8fafc;
  border-left: 3px solid #2563eb;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 4px;
}
.ks-preview-warn{ border-left-color: #f59e0b; color: #92400e; }

/* Page-wrapper */
.ks-page{ max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.ks-page-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}


/* =========================================================
### BAS-249 — VSME rapport-formular (smal, læsevenlig)
========================================================= */
.vsme-form{
  max-width: 760px;
  margin: 0 auto;
}

.vsme-form .card{
  /* Mere luft inde i kortene */
  padding: 20px 22px;
}

.vsme-section-header{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}

.vsme-section-header .vsme-section-tag{
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vsme-question{
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.vsme-question:first-of-type{ border-top: none; padding-top: 8px; }

.vsme-question-meta{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}

.vsme-question-code{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.vsme-question-required{
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  margin-left: 2px;
}

.vsme-question-text{
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--text);
}

.vsme-question-help{
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px;
}

.vsme-status-pill{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.vsme-status-pill--na{    background: #f1f5f9; color: var(--muted); }
.vsme-status-pill--nm{    background: #fef3c7; color: #d97706; }
.vsme-status-pill--ans{   background: #dcfce7; color: #16a34a; }

.vsme-answer-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vsme-input{
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
  font-family: inherit;
}
.vsme-input:focus{
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}

.vsme-input--text{    width: 100%; resize: vertical; min-height: 60px; }
.vsme-input--number{  width: 220px; max-width: 100%; }
.vsme-input--date{    width: 220px; max-width: 100%; }
.vsme-input--select{  width: 320px; max-width: 100%; }

.vsme-radio-row, .vsme-checkbox-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
}

.vsme-option-label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  cursor: pointer;
}
.vsme-option-label--muted{ color: var(--muted); }

.vsme-answer-meta{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

.vsme-meta-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
}

.vsme-comment{
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.vsme-save-btn{
  font-size: 13px;
  padding: 6px 16px;
}

/* Page-header må gerne beholde fuld bredde for at give plads til knap-rækken */
.vsme-page-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.vsme-page-actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.vsme-status-badge{
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.vsme-status-badge--final{   background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.vsme-status-badge--review{  background: #fef3c7; color: #d97706; border-color: #fde68a; }

.vsme-progress{
  padding: 14px 16px;
  margin-bottom: 16px;
}
.vsme-progress-row{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.vsme-progress-bar{
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.vsme-progress-fill{
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

@media (max-width: 800px){
  .vsme-form .card{ padding: 16px; }
  .vsme-input--number,
  .vsme-input--date,
  .vsme-input--select{ width: 100%; }
}


/* =========================================================
### V7 BAS-225 — Third-parties masterregister
========================================================= */

/* Page header (full-width, knap-rækken til højre) */
.tp-page-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

/* Filter-bar */
.tp-filter-bar{
  padding: 12px 16px;
  margin-bottom: 16px;
}
.tp-filter-form{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.tp-search{
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.tp-filter-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}
.tp-filter-toggle input{ cursor: pointer; }

/* Regulatory badges */
.tp-badge{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tp-badge--gdpr{ background: #dbeafe; color: #1e40af; }   /* blue */
.tp-badge--dora{ background: #fed7aa; color: #c2410c; }   /* orange */
.tp-badge--nis2{ background: #d1fae5; color: #047857; }   /* green */

/* List-table */
.tp-list-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tp-list-table th{
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tp-list-table td{
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.tp-list-table tbody tr{
  cursor: pointer;
  transition: background 0.1s;
}
.tp-list-table tbody tr:hover{
  background: #f8fafc;
}
.tp-list-table tbody tr:last-child td{ border-bottom: none; }

/* Form */
.tp-form{
  max-width: 800px;
  margin: 0 auto;
}
.tp-form-card{
  padding: 20px 22px;
  margin-bottom: 16px;
}
.tp-form-section-title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
.tp-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tp-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-field--full{
  grid-column: span 2;
}
.tp-field-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tp-required{ color: #dc2626; font-weight: 700; }
.tp-input{
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.tp-input:focus{
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}
textarea.tp-input{
  resize: vertical;
  min-height: 60px;
}

.tp-checkbox-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp-checkbox-row{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
}
.tp-checkbox-row input{ cursor: pointer; }

.tp-form-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Detail page */
.tp-detail{
  max-width: 800px;
  margin: 0 auto;
}
.tp-detail-card{
  padding: 20px 22px;
  margin-bottom: 16px;
}
.tp-dl{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}
.tp-dl dt{
  color: var(--muted);
  font-weight: 600;
}
.tp-dl dd{ margin: 0; }

.tp-scope-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp-scope-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  flex-wrap: wrap;
}
.tp-scope-row--active{
  background: #fff;
  border-color: var(--line);
}
.tp-scope-status{
  font-size: 13px;
  font-weight: 600;
}
.tp-overlay-status{
  margin-left: auto;
}

@media (max-width: 700px){
  .tp-form-grid{ grid-template-columns: 1fr; }
  .tp-field--full{ grid-column: span 1; }
  .tp-dl{ grid-template-columns: 1fr; gap: 4px; }
  .tp-dl dt{ margin-top: 8px; }
}


/* =========================================================
### V7 BAS-226 — 360° tab-navigation
========================================================= */
.tp-detail-badges{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tp-tabs{
  display: flex;
  border-bottom: 2px solid var(--line);
  margin-bottom: 16px;
  gap: 0;
  overflow-x: auto;
}
.tp-tab{
  padding: 10px 16px;
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tp-tab:hover{
  color: var(--text);
}
.tp-tab--active{
  color: var(--text);
  border-bottom-color: #3b82f6;  /* default active = blue */
}
.tp-tab--gdpr.tp-tab--active{ border-bottom-color: #1e40af; color: #1e40af; }
.tp-tab--dora.tp-tab--active{ border-bottom-color: #c2410c; color: #c2410c; }
.tp-tab--nis2.tp-tab--active{ border-bottom-color: #047857; color: #047857; }

.tp-tab-count{
  display: inline-block;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  font-weight: 600;
}

/* Overlay-headers */
.tp-overlay-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tp-overlay-subsection{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Asset-list (tilknyttede aktiver / RoPA) */
.tp-asset-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.tp-asset-list li{
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.tp-asset-list li:last-child{ border-bottom: none; }

/* Checkmark-list (NIS2 art. 21) */
.tp-checkmark-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.tp-checkmark-list li{
  padding: 4px 0;
  font-size: 14px;
  font-family: ui-monospace, monospace;
}

/* Btn-sm (mindre knap til overlay-headers) */
.tp-overlay-header .btn-sm,
.btn-sm{
  font-size: 12px;
  padding: 4px 12px;
}

/* ─── V7 BAS-228: Read-only regulatory portals ─────────────────── */
/* 3 farve-temaer: GDPR=blå, DORA=orange, NIS2=grøn */

.portal{
  margin: -16px -8px 0;     /* trækker portal-strip til bredt layout */
}
.portal-strip{
  border-radius: 0;
  margin: 0 0 16px;
  padding: 14px 24px;
  display: flex;
  color: #fff;
  font-weight: 700;
}
.portal-strip--gdpr  { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.portal-strip--dora  { background: linear-gradient(135deg, #c2410c, #f97316); }
.portal-strip--nis2  { background: linear-gradient(135deg, #166534, #22c55e); }
.portal-strip-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
  flex-wrap: wrap;
}
.portal-strip-title{ font-size: 18px; }
.portal-strip-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  font-size: 13px;
}
.portal-strip-tag{
  background: rgba(255,255,255,0.22);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.portal-strip-tag--alert{
  background: rgba(255,255,255,0.35);
  font-weight: 700;
}
.portal-strip-link{
  color: #fff;
  text-decoration: underline;
  font-size: 13px;
}
.portal-body{ padding: 0 8px; }

.portal-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.portal-toolbar-actions{ display: flex; gap: 8px; }

.portal-table-card{ padding: 0; overflow: hidden; }
.portal-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.portal-table thead th{
  text-align: left;
  background: #f8fafc;
  padding: 10px 12px;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
}
.portal-table tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.portal-table tbody tr:hover{ background: #f8fafc; }
.portal-table a{ color: #1d4ed8; text-decoration: none; }
.portal-table a:hover{ text-decoration: underline; }

.portal-pill{
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #1e293b;
  font-weight: 600;
}
.portal-pill--gdpr{ background: #dbeafe; color: #1e40af; }
.portal-pill--dora{ background: #ffedd5; color: #9a3412; }
.portal-pill--nis2{ background: #dcfce7; color: #166534; }

.portal-badge{
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.portal-badge--red    { background: #fee2e2; color: #b91c1c; }
.portal-badge--orange { background: #ffedd5; color: #9a3412; }
.portal-badge--yellow { background: #fef3c7; color: #92400e; }
.portal-badge--green  { background: #dcfce7; color: #166534; }

.portal-detail{ display: grid; gap: 12px; }
.portal-detail-card{ padding: 14px 18px; }
.portal-section-title{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1e293b;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 6px;
}
.portal-dl{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}
.portal-dl dt{ color: #64748b; font-weight: 500; }
.portal-dl dd{ margin: 0; color: #0f172a; }

.portal-asset-list,
.portal-checkmark-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}
.portal-checkmark-list li{ font-size: 14px; }

/* ─── V9 BAS-250: Portal-cockpit komponenter ───────────────── */
/* RAG-statusbar */
.portal-rag{
  margin: 0 0 16px;
  padding: 0 8px;
}
.portal-rag-zones{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.portal-rag-zone{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal-rag-zone.is-active.portal-rag-zone--critical{ border-color: #fca5a5; background: #fef2f2; }
.portal-rag-zone.is-active.portal-rag-zone--warning { border-color: #fcd34d; background: #fffbeb; }
.portal-rag-zone.is-active.portal-rag-zone--ok      { border-color: #86efac; background: #f0fdf4; }
.portal-rag-zone.is-empty{ opacity: 0.55; }
.portal-rag-icon{ font-size: 22px; }
.portal-rag-count{
  font-size: 22px;
  font-weight: 800;
  min-width: 38px;
  text-align: right;
}
.portal-rag-label{ font-size: 12px; color: #475569; flex: 1; }

/* Næste skridt-widget */
.portal-next-steps{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 8px 16px;
}
.portal-next-steps--ok{ border-color: #86efac; background: #f0fdf4; }
.portal-next-steps-title{
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin: 0 0 10px;
}
.portal-next-steps-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.portal-next-step{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  border-radius: 6px;
}
.portal-next-step--critical{ border-left-color: #b91c1c; background: #fef2f2; }
.portal-next-step--warning { border-left-color: #ca8a04; background: #fffbeb; }
.portal-next-step-content{ flex: 1; }
.portal-next-step-title{ font-weight: 700; font-size: 13px; color: #0f172a; }
.portal-next-step-desc { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Sub-nav (BAS-250 fælles portal-navigation) */
.portal-subnav{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 0 16px;
  padding: 0 8px;
}
.portal-subnav-link{
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.portal-subnav-link:hover{ color: #1d4ed8; }
.portal-subnav-link.is-active{
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.portal-subnav-badge{
  display: inline-block;
  background: #1d4ed8;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Cockpit-cards (BAS-251/254/257 dashboard-blokke) */
.portal-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 0 8px;
}
.portal-cockpit-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
}
.portal-cockpit-card-title{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-cockpit-card-row{
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  border-top: 1px solid #f1f5f9;
}
.portal-cockpit-card-row:first-of-type{ border-top: none; }
.portal-cockpit-card-row .label{ color: #64748b; }
.portal-cockpit-card-row .value{ font-weight: 600; color: #0f172a; }