/* ═══════════════════════════════════════════════════════════
   Koadic Portal — portal.css  v1.0
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --primary:        #4361EE;
  --primary-hover:  #3651D4;
  --primary-light:  #eef1fe;
  --accent:         #7B2FBE;
  --gradient:       linear-gradient(135deg,#4361EE,#7B2FBE);
  --gradient-soft:  linear-gradient(135deg,#5b75f0,#9152d6);
  --success:        #0EA47A;
  --success-light:  #d8f5ec;
  --warning:        #E08600;
  --warning-light:  #fdf0d8;
  --danger:         #E5484D;
  --danger-light:   #fde7e8;
  --info:           #0B8BC2;
  --info-light:     #d8f1fb;
  --muted:          #6b7484;
  --muted-light:    #f3f4f8;

  --sidebar-bg:     #14172a;
  --sidebar-hover:  #1e2238;
  --sidebar-active: #283056;
  --sidebar-text:   #c9cee0;
  --sidebar-icon:   #8b93b5;
  --sidebar-width:  264px;

  --header-h:       66px;
  --bg:             #f6f7fb;
  --surface:        #ffffff;
  --surface-2:      #f1f3f9;
  --border:         #e7e9f1;
  --border-2:       #d8dce8;
  --text:           #14181f;
  --text-2:         #3a4250;
  --text-muted:     #6b7484;

  --radius:         12px;
  --radius-lg:      18px;
  --radius-sm:      8px;
  --shadow:         0 1px 2px rgba(16,22,40,.04), 0 2px 6px rgba(16,22,40,.06);
  --shadow-md:      0 6px 18px rgba(16,22,40,.10);
  --shadow-lg:      0 18px 50px rgba(16,22,40,.16);
  --transition:     .2s cubic-bezier(.2,.8,.2,1);

  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:         #0c0e17;
  --surface:    #161a2b;
  --surface-2:  #1d2238;
  --border:     #272d45;
  --border-2:   #353c5c;
  --text:       #eaecf3;
  --text-2:     #aeb6ce;
  --text-muted: #7c85a6;
  --primary-light: #232a52;
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:  0 20px 56px rgba(0,0,0,.55);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font); font-size: inherit; }
ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ── Layout ──────────────────────────────────────────────── */
.portal-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────── */
.portal-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--transition);
}
.portal-sidebar::-webkit-scrollbar { width: 4px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-active); border-radius: 2px; }

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .4px;
}
.sidebar-logo img { width: 34px; height: 34px; border-radius: 8px; }
.sidebar-logo span { font-size: .7rem; color: var(--sidebar-icon); display: block; font-weight: 400; }

.sidebar-client-info {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-client-info .client-name {
  font-size: .82rem;
  font-weight: 600;
  color: #e0e4f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-client-info .client-company {
  font-size: .72rem;
  color: var(--sidebar-icon);
  margin-top: 1px;
}

.sidebar-nav { flex: 1; padding: 10px 0; }
.sidebar-section {
  padding: 14px 20px 4px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sidebar-icon);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--sidebar-text);
  font-size: .84rem;
  border-radius: 0;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
}
.sidebar-link:hover svg { opacity: 1; }
.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}
.sidebar-link.active svg { opacity: 1; }
.sidebar-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .76rem;
  color: var(--sidebar-icon);
}
.sidebar-footer a { color: var(--sidebar-icon); }
.sidebar-footer a:hover { color: #fff; }

/* ── Main area ───────────────────────────────────────────── */
.portal-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────── */
.portal-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.portal-header-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.portal-header-title small {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-muted);
}

.header-search {
  position: relative;
}
.header-search input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px 6px 34px;
  font-size: .82rem;
  width: 220px;
  color: var(--text);
  transition: border var(--transition), width var(--transition);
}
.header-search input:focus {
  outline: none;
  border-color: var(--primary);
  width: 280px;
}
.header-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
}

.header-icon-btn {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
}
.header-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.header-icon-btn svg { width: 18px; height: 18px; }
.header-icon-btn .notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.header-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Content ─────────────────────────────────────────────── */
.portal-content {
  flex: 1;
  padding: 28px 28px 40px;
}

.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.card-body { padding: 20px; }
.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-card-icon svg { width: 20px; height: 20px; }
.stat-card-icon.blue   { background: var(--primary-light); color: var(--primary); }
.stat-card-icon.green  { background: var(--success-light); color: var(--success); }
.stat-card-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-card-icon.red    { background: var(--danger-light);  color: var(--danger); }
.stat-card-icon.purple { background: #ede9fe; color: var(--accent); }
.stat-card-value { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.stat-card-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ── Grid layouts ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* auto-fill holder tomme kolonner åbne. Med ét projekt gav det ét kort på
   260px og resten af bredden hvid — kortet så ud til at være tabt. auto-fit
   lader de tomme spor falde sammen, så få kort deler pladsen. Loftet på
   400px forhindrer at ét enkelt kort bliver latterligt bredt. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 400px)); gap: 16px; }
.grid-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border var(--transition), color var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary   { background: var(--primary);  color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-success   { background: var(--success);  color: #fff; }
.btn-success:hover { background: #047857; color: #fff; }
.btn-danger    { background: var(--danger);   color: #fff; }
.btn-danger:hover  { background: #b91c1c; color: #fff; }
.btn-warning   { background: var(--warning);  color: #fff; }
.btn-outline   { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-outline:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: .77rem; }
.btn-lg { padding: 10px 22px; font-size: .9rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  color: var(--text);
  transition: border var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled { background: var(--surface-2); opacity: .7; cursor: not-allowed; }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { cursor: pointer; }
.form-hint { font-size: .74rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: .74rem; color: var(--danger); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  font-size: .83rem;
}
.table th {
  padding: 10px 14px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .text-right { text-align: right; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-info    { background: var(--info-light);    color: var(--info); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-muted   { background: var(--muted-light);   color: var(--muted); }
.badge-primary { background: var(--primary-light); color: var(--primary); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-info    { background: var(--info-light);    color: var(--info); }
.alert-success { background: var(--success-light); color: var(--success); }
.alert-warning { background: var(--warning-light); color: var(--warning); }
.alert-danger  { background: var(--danger-light);  color: var(--danger); }
.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  padding: 0;
}

/* ── Modals ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  transform: scale(.95);
  transition: transform .2s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-size: .95rem; font-weight: 700; }
.modal-close {
  width: 28px; height: 28px;
  border: none; background: transparent;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.modal-close:hover { background: var(--surface-2); }
.modal-close svg { width: 16px; height: 16px; }
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Notifications dropdown ──────────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(var(--header-h) + 8px);
  right: 20px;
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}
.notif-panel.open { display: block; }
.notif-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  font-weight: 600;
}
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  transition: background var(--transition);
  cursor: pointer;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--primary-light); }
.notif-item:last-child { border-bottom: none; }
.notif-dot-type {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.notif-info .n-title { font-size: .82rem; font-weight: 600; color: var(--text); }
.notif-info .n-msg   { font-size: .77rem; color: var(--text-muted); margin-top: 1px; }
.notif-info .n-time  { font-size: .7rem;  color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: .83rem; }

/* ── Timeline ────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  margin-bottom: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}
.timeline-item.completed::before { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-item.pending::before   { background: var(--muted-light); border-color: var(--border-2); box-shadow: none; }
.timeline-date { font-size: .72rem; color: var(--text-muted); margin-bottom: 2px; }
.timeline-title { font-size: .87rem; font-weight: 600; color: var(--text); }
.timeline-desc  { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }

/* ── Milestone list ──────────────────────────────────────── */
.milestone-list { display: flex; flex-direction: column; gap: 10px; }
.milestone-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.milestone-item.approved { border-left: 3px solid var(--success); }
.milestone-item.in_progress { border-left: 3px solid var(--info); }
.milestone-item.completed { border-left: 3px solid var(--warning); }
.milestone-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.milestone-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.milestone-check svg { width: 12px; height: 12px; }
.milestone-info { flex: 1; }
.milestone-info h4 { font-size: .87rem; font-weight: 600; }
.milestone-info p  { font-size: .77rem; color: var(--text-muted); margin-top: 2px; }
.milestone-actions { display: flex; gap: 6px; }

/* ── Ticket thread ───────────────────────────────────────── */
.ticket-thread { display: flex; flex-direction: column; gap: 14px; }
.ticket-message {
  display: flex;
  gap: 12px;
}
.ticket-message.from-admin { flex-direction: row-reverse; }
.message-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.message-avatar.admin-av { background: var(--accent); }
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-bubble {
  max-width: 70%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.ticket-message.from-admin .message-bubble {
  background: var(--primary-light);
  border-color: rgba(79,70,229,.2);
}
.message-header { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; }
.message-sender { font-size: .78rem; font-weight: 700; color: var(--text); }
.message-time   { font-size: .7rem;  color: var(--text-muted); }
.message-text   { font-size: .84rem; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }
.message-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .74rem;
  color: var(--text-2);
}
.msg-attachment svg { width: 12px; height: 12px; }

/* ── Document grid ───────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--transition), border var(--transition);
  cursor: pointer;
}
.doc-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.doc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-icon svg { width: 22px; height: 22px; }
.doc-icon.pdf    { background: #fef2f2; color: #ef4444; }
.doc-icon.image  { background: #ecfdf5; color: #10b981; }
.doc-icon.zip    { background: #fff7ed; color: #f97316; }
.doc-icon.doc    { background: #eff6ff; color: #3b82f6; }
.doc-icon.xls    { background: #f0fdf4; color: #22c55e; }
.doc-icon.other  { background: var(--muted-light); color: var(--muted); }
.doc-name { font-size: .82rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: .73rem; color: var(--text-muted); }
.doc-actions { display: flex; gap: 6px; margin-top: auto; }

/* ── Server status ───────────────────────────────────────── */
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.up     { background: var(--success); box-shadow: 0 0 0 3px var(--success-light); }
.status-dot.down   { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-light); }
.status-dot.warn   { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: .83rem;
}
.status-row:last-child { border-bottom: none; }
.status-row-label { flex: 1; color: var(--text-2); }
.status-row-value { color: var(--text); font-weight: 600; }

.ssl-countdown {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.ssl-countdown.warn  { color: var(--warning); }
.ssl-countdown.danger{ color: var(--danger); }

.uptime-bar {
  display: flex;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
}
.uptime-seg {
  flex: 1;
  cursor: default;
  transition: opacity .1s;
}
.uptime-seg:hover { opacity: .8; }
.uptime-seg.up   { background: var(--success); }
.uptime-seg.down { background: var(--danger); }

/* ── Progress bars ───────────────────────────────────────── */
.progress-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 20px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 20px;
  background: var(--primary);
  transition: width .6s ease;
}
.progress-fill.green  { background: var(--success); }
.progress-fill.yellow { background: var(--warning); }
.progress-fill.red    { background: var(--danger); }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  padding: 9px 16px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}
.empty-state svg {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  opacity: .35;
}
.empty-state h3 { font-size: .95rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.empty-state p  { font-size: .82rem; }

/* ── Login page ──────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.15) 0%, transparent 70%);
  top: -200px; right: -200px;
}
.login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.login-logo img { width: 40px; height: 40px; border-radius: 10px; }
.login-logo-text { font-size: 1.1rem; font-weight: 800; color: #1a1d2e; }
.login-logo-text span { display: block; font-size: .72rem; font-weight: 400; color: #6b7280; }
.login-title { font-size: 1.3rem; font-weight: 800; color: #111827; margin-bottom: 5px; }
.login-subtitle { font-size: .83rem; color: #6b7280; margin-bottom: 26px; }
.login-form .btn-primary {
  width: 100%;
  padding: 11px;
  font-size: .9rem;
  justify-content: center;
  border-radius: 8px;
}
.login-links {
  margin-top: 18px;
  font-size: .78rem;
  color: #6b7280;
  text-align: center;
}
.login-links a { color: var(--primary); }

/* ── Panic button ────────────────────────────────────────── */
.panic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: background var(--transition);
  animation: pulse-danger 2s infinite;
}
.panic-btn:hover { background: #b91c1c; animation: none; }
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* ── Announcement banner ──────────────────────────────────── */
.announcement-banner {
  padding: 10px 24px;
  font-size: .83rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.announcement-banner.info    { background: var(--info-light);    color: var(--info); }
.announcement-banner.warning { background: var(--warning-light); color: var(--warning); }
.announcement-banner.error   { background: var(--danger-light);  color: var(--danger); }
.announcement-banner.success { background: var(--success-light); color: var(--success); }
.announcement-banner-close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; }

/* ── Toasts ──────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  font-size: .83rem;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in .2s ease;
}
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ── Confetti (payment success) ──────────────────────────── */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ── Session warning bar ─────────────────────────────────── */
.session-warning {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--warning);
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  z-index: 9990;
  display: none;
}

/* ── Dropdown menu ───────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 200;
  padding: 4px 0;
  display: none;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  padding: 9px 14px;
  font-size: .82rem;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background var(--transition);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item svg { width: 14px; height: 14px; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Search box ──────────────────────────────────────────── */
.search-box {
  position: relative;
  margin-bottom: 16px;
}
.search-box input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  color: var(--text);
}
.search-box input:focus { outline: none; border-color: var(--primary); }
.search-box svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-muted);
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ── Mobile toggle ───────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text);
}
.sidebar-toggle svg { width: 22px; height: 22px; }

/* ── Utilities ───────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-end     { display: flex; justify-content: flex-end; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mb-8   { margin-bottom: 8px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.w-full { width: 100%; }
.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-sm  { font-size: .78rem; }
.text-xs  { font-size: .72rem; }
.fw-600   { font-weight: 600; }
.fw-700   { font-weight: 700; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.d-none { display: none !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .portal-sidebar {
    transform: translateX(-100%);
  }
  .portal-sidebar.open {
    transform: translateX(0);
  }
  .portal-main { margin-left: 0; }
  .portal-content { padding: 16px; }
  .sidebar-toggle { display: flex; }
  .header-search { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .login-card { padding: 28px 20px; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .doc-grid  { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Premium redesign — polish layer v2 (Koadic brand, additivt)
   ═══════════════════════════════════════════════════════════ */
*{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text)}
::selection{background:rgba(67,97,238,.18)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* Buttons */
.btn{border-radius:var(--radius-sm);font-weight:600;letter-spacing:.01em;transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--gradient);border:none;box-shadow:0 4px 14px rgba(67,97,238,.32)}
.btn-primary:hover{background:var(--gradient-soft);box-shadow:0 8px 22px rgba(67,97,238,.42);transform:translateY(-1px)}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:var(--radius)}

/* Cards */
.card{border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow);transition:box-shadow var(--transition)}
.card:hover{box-shadow:var(--shadow-md)}
.card-title{letter-spacing:-.01em}

/* Badges → pills */
.badge{border-radius:99px;font-weight:600;font-size:11.5px;letter-spacing:.02em;padding:4px 11px}

/* Forms */
.form-control{border-radius:var(--radius-sm);border:1px solid var(--border-2);transition:border-color var(--transition),box-shadow var(--transition)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.16);outline:none}
.form-label{font-weight:600;font-size:13px}

/* Alerts + empty states */
.alert{border-radius:var(--radius)}
.empty-state{border-radius:var(--radius-lg)}

/* Stat/KPI cards (hvis de findes) */
.stat-card,.kpi-card,.dash-stat{border-radius:var(--radius-lg);transition:transform var(--transition),box-shadow var(--transition)}
.stat-card:hover,.kpi-card:hover,.dash-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Login-side */
.login-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.login-logo-text{letter-spacing:-.01em}

/* Koadic logo-mark (gradient K — erstatter manglende logo.png) */
.koa-logo-mark{width:36px;height:36px;border-radius:9px;background:var(--gradient);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px rgba(67,97,238,.35);font-family:var(--font)}
.login-logo .koa-logo-mark{width:50px;height:50px;font-size:27px;border-radius:13px;margin:0 auto}
.sidebar-logo .koa-logo-mark{width:36px;height:36px;font-size:19px;border-radius:9px;display:grid !important;place-items:center;color:#fff !important;font-weight:800 !important;line-height:1}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v3 — bold (forrige var for subtil)
   ═══════════════════════════════════════════════════════════════════ */
body{background:
  radial-gradient(1200px 600px at 100% -10%, rgba(123,47,190,.05), transparent 60%),
  radial-gradient(1000px 500px at -10% 0%, rgba(67,97,238,.06), transparent 55%),
  var(--bg)}
[data-theme="dark"] body{background:
  radial-gradient(1200px 600px at 100% -10%, rgba(123,47,190,.10), transparent 60%),
  radial-gradient(1000px 500px at -10% 0%, rgba(67,97,238,.12), transparent 55%),
  var(--bg)}
*{-webkit-font-smoothing:antialiased}

/* Indholdsbredde + rytme */
.portal-content{padding:26px 30px}
h1,h2,h3,.card-title,.page-title{letter-spacing:-.02em}

/* Kort — markant dybde + løft */
.card{border-radius:18px;border:1px solid var(--border);box-shadow:0 1px 2px rgba(16,22,40,.04),0 8px 24px rgba(16,22,40,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,22,40,.05),0 18px 44px rgba(16,22,40,.12)}

/* Knapper — gradient + tydeligt løft */
.btn{border-radius:10px;font-weight:600;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(135deg,#4361EE,#7B2FBE);border:0;color:#fff;box-shadow:0 4px 16px rgba(67,97,238,.35)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 9px 26px rgba(67,97,238,.45);transform:translateY(-2px)}

/* Felter — stor fokus-ring */
.form-control,input,select,textarea{border-radius:10px;transition:border-color .18s ease,box-shadow .18s ease}
.form-control:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(67,97,238,.15)}

/* Badges → store pille */
.badge{border-radius:99px;font-weight:600;letter-spacing:.02em;padding:5px 12px}

/* Sidebar — premium aktiv-tilstand */
.portal-sidebar{box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.sidebar-link{border-radius:10px;margin:2px 12px;padding-left:14px;transition:background .16s ease,color .16s ease}
.sidebar-link.active{background:linear-gradient(135deg,rgba(67,97,238,.22),rgba(123,47,190,.22));color:#fff;font-weight:600}
.sidebar-link.active::before{display:none}

/* Header — glas-effekt */
.portal-header{background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(16px)}
[data-theme="dark"] .portal-header{background:rgba(22,26,43,.78)}

/* Stat/KPI-kort — gradient-tal + løft */
.stat-card,.kpi-card,.dash-stat,.metric{border-radius:18px;transition:transform .25s ease,box-shadow .25s ease}
.stat-card:hover,.kpi-card:hover,.dash-stat:hover,.metric:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(16,22,40,.13)}

/* Scrollbar */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:#cdd3e3;border-radius:99px;border:3px solid var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2c3346;border-color:var(--bg)}

/* ── Møder ──────────────────────────────────────────────────────────────────
   Siden havde ét kort med en liste i. Det næste møde — det eneste man
   egentlig kom for — så præcis ud som et møde om tre uger. Nu ligger det
   øverst i sit eget kort, og resten står på en kalenderstribe.            */

.moede-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.moede-naeste {
  position: relative;
  overflow: hidden;
  background: var(--gradient);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}
/* Et roligt lysskær, så kortet ikke er en flad firkant farve. */
.moede-naeste::after {
  content: "";
  position: absolute;
  top: -140px; right: -90px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  pointer-events: none;
}
.moede-naeste-maerke {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .82;
}
.moede-naeste-titel {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
}
.moede-naeste-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 14px;
  opacity: .92;
}
.moede-naeste-fakta span + span { position: relative; padding-left: 18px; }
.moede-naeste-fakta span + span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.moede-naeste-tekst {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}
.moede-naeste-knapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 20px;
  position: relative;
}
/* Hvid knap på farvet bund — den blå primærknap forsvinder i gradienten. */
.moede-deltag {
  background: #fff;
  color: var(--primary);
  border: none;
  font-weight: 600;
}
.moede-deltag:hover:not([disabled]) { background: #f3f5ff; color: var(--primary-hover); }
.moede-deltag[disabled] { background: rgba(255,255,255,.28); color: rgba(255,255,255,.72); cursor: not-allowed; }
.moede-kalender {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
}
.moede-kalender:hover { background: rgba(255,255,255,.26); color: #fff; }
.moede-vent    { font-size: 13px; opacity: .86; }
.moede-naeste-om {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 5px 12px;
}

.moede-raekke {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.moede-raekke:last-child { border-bottom: none; }
.moede-raekke-daempet    { opacity: .6; }

/* Kalenderstriben. Dato som tal gør en liste skimmebar på en måde en
   dato-streng aldrig bliver. */
.moede-dato {
  flex: 0 0 52px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
}
.moede-dato-dag { font-size: 20px; font-weight: 700; line-height: 1; }
.moede-dato-mdr { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

.moede-krop { flex: 1 1 auto; min-width: 0; }
.moede-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-muted);
}
.moede-note {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
}
.moede-handlinger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
}
.moede-handlinger:empty { display: none; }

.moede-trin {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-2);
}
.moede-trin li + li { margin-top: 8px; }

@media (max-width: 700px) {
  .moede-naeste        { padding: 22px 20px; }
  .moede-naeste-titel  { font-size: 21px; }
  .moede-naeste-om     { margin-left: 0; }
  .moede-dato          { flex-basis: 44px; height: 48px; }
  .moede-dato-dag      { font-size: 17px; }
}

/* ── Vidensbase ─────────────────────────────────────────────────────────────
   Den gamle side var en søgefelt-stribe og en liste med grå linjer. Alt
   layout lå i style-attributter, og musen blev styret af onmouseover i HTML.
   Her ligger det i CSS, hvor det kan læses og ændres ét sted.            */

.kb-hero {
  background: var(--gradient);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 32px 34px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Et roligt lysskær, så feltet ikke er en flad firkant farve. */
.kb-hero::after {
  content: "";
  position: absolute;
  top: -160px; right: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}
.kb-hero h1 { font-size: 27px; font-weight: 700; line-height: 1.2; }
.kb-hero p  {
  margin: 10px auto 0;
  max-width: 54ch;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: .9;
}

.kb-soeg {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 620px;
  margin: 24px auto 0;
}
.kb-soeg svg {
  position: absolute;
  left: 15px;
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.kb-soeg input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px 12px 42px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}
.kb-soeg input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.kb-soeg .btn { flex: 0 0 auto; }

/* På kategori- og søgesiden står feltet alene uden den farvede bund, så
   det skal have en kant for ikke at flyde ud i baggrunden. */
.kb-smal { margin-bottom: 20px; }
.kb-soeg-smal { margin: 0; max-width: none; }
.kb-soeg-smal input { border-color: var(--border-2); }

.kb-kategorier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.kb-kat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.kb-kat:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kb-kat-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
}
.kb-kat-ikon svg { width: 20px; height: 20px; }
.kb-kat-navn  { font-weight: 600; font-size: 14.5px; }
.kb-kat-antal { font-size: 12.5px; color: var(--text-muted); }
/* En tom kategori bliver stående — den fortæller at emnet findes. Men den
   skal ikke se ud som om der er noget at klikke ind til. */
.kb-kat-tom { opacity: .62; }

.kb-kategorier-smal { margin-top: 20px; }
.kb-kategorier-smal .kb-kat { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.kb-kategorier-smal .kb-kat-ikon { width: 30px; height: 30px; margin: 0; }
.kb-kategorier-smal .kb-kat-ikon svg { width: 16px; height: 16px; }

.kb-linje {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}
.kb-linje:last-child { border-bottom: none; }
.kb-linje:hover { background: var(--surface-2); }
.kb-linje-ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--primary-light);
  color: var(--primary);
}
.kb-linje-ikon svg { width: 17px; height: 17px; }
.kb-linje-tekst  { flex: 1 1 auto; min-width: 0; }
.kb-linje-titel  { display: block; font-weight: 600; font-size: 14.5px; }
.kb-linje-uddrag {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.kb-linje-kat {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text-muted);
}
.kb-linje-pil {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 8px;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.kb-linje:hover .kb-linje-pil { transform: translateX(3px); }

.kb-sidelink {
  display: block;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition);
}
.kb-sidelink:last-child { border-bottom: none; }
.kb-sidelink:hover { background: var(--surface-2); }
.kb-sidelink small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }

.kb-hjaelp .card-body { text-align: center; }
.kb-hjaelp strong { display: block; font-size: 14.5px; }
.kb-hjaelp p {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.kb-intet { padding: 40px 24px; }
.kb-intet h3 { font-size: 16px; }
.kb-intet p  { margin: 8px auto 0; max-width: 46ch; line-height: 1.6; }
.kb-intet-knapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ── Selve artiklen ──────────────────────────────────────────────────────── */

.kb-artikel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kb-artikel-hoved { padding: 24px 28px 20px; border-bottom: 1px solid var(--border); }
.kb-artikel-hoved h1 { margin-top: 10px; font-size: 23px; font-weight: 700; line-height: 1.3; }
.kb-mrk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.kb-mrk svg { width: 14px; height: 14px; }
.kb-artikel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.kb-video { padding: 20px 28px 0; }
.kb-video > iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}

.kb-tekst { padding: 24px 28px; font-size: 14.5px; line-height: 1.75; color: var(--text-2); }

.kb-emneord {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 28px 22px;
}
.kb-emneord-en {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.kb-emneord-en:hover { background: var(--primary-light); color: var(--primary); }

.kb-nyttig {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.kb-nyttig-sp      { font-size: 13.5px; color: var(--text-2); }
.kb-nyttig-knapper { display: flex; gap: 8px; }
.kb-nyttig-tak     { font-size: 13.5px; color: var(--success); font-weight: 600; }

/* ── Det Markdown-oversætteren laver ─────────────────────────────────────── */

.kb-tekst > :first-child { margin-top: 0; }
.kb-tekst p { margin: 0 0 14px; }
.kb-tekst .md-h {
  margin: 26px 0 10px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
}
.kb-tekst h3.md-h { font-size: 17px; }
.kb-tekst h4.md-h { font-size: 15px; }
.kb-tekst h5.md-h,
.kb-tekst h6.md-h { font-size: 14px; }

/* list-style sættes udtrykkeligt: nulstillingen øverst i filen fjerner
   punkttegn på ALLE lister, så en punktopstilling i en artikel stod som
   indrykket tekst uden prikker. */
.kb-tekst ul.md-liste { list-style: disc;    margin: 0 0 14px; padding-left: 22px; }
.kb-tekst ol.md-liste { list-style: decimal; margin: 0 0 14px; padding-left: 22px; }
.kb-tekst .md-liste li { margin-bottom: 6px; }
.kb-tekst .md-liste li::marker { color: var(--primary); }

.kb-tekst .md-citat {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--primary);
  background: var(--primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.kb-tekst .md-streg { margin: 24px 0; border: none; border-top: 1px solid var(--border); }

.kb-tekst .md-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.kb-tekst .md-link:hover { color: var(--primary-hover); }

.kb-tekst .md-kode-inline {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
}
.kb-tekst .md-kode {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--sidebar-bg);
  color: #e5e9f5;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* Tabellen ruller i sin egen ramme. Uden det skubber en IMAP-opsætning hele
   siden vandret på en telefon. */
.kb-tekst .md-tabel-ramme { margin: 0 0 16px; overflow-x: auto; }
.kb-tekst .md-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.kb-tekst .md-tabel th,
.kb-tekst .md-tabel td {
  padding: 9px 13px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.kb-tekst .md-tabel th { background: var(--surface-2); font-weight: 600; color: var(--text); }
.kb-tekst .md-tabel tbody tr:nth-child(even) { background: rgba(0,0,0,.015); }

@media (max-width: 700px) {
  .kb-hero { padding: 28px 20px 26px; }
  .kb-hero h1 { font-size: 21px; }
  .kb-soeg { flex-wrap: wrap; }
  .kb-soeg input { flex-basis: 100%; }
  .kb-soeg .btn { flex: 1 1 auto; justify-content: center; }
  /* Ikonet lå centreret i beholderen. Når knappen bryder til anden linje,
     bliver midten mellem de to rækker — så svævede forstørrelsesglasset
     under søgefeltet i stedet for inde i det. Det bindes til feltets egen
     linje i stedet. */
  .kb-soeg svg { top: 15px; }
  .kb-artikel-hoved,
  .kb-tekst,
  .kb-nyttig { padding-left: 18px; padding-right: 18px; }
  .kb-artikel-hoved h1 { font-size: 19px; }
}

/* ── Tomme tilstande ────────────────────────────────────────────────────────
   Portalen er tom det meste af tiden, og det er den tilstand siderne skal se
   ordentlige ud i. Før stod der én grå sætning midt i et højt hvidt kort:
   "Ingen milepæle endnu." Punktum. Nu fortæller den også hvad der kommer til
   at stå her, og hvorfor der ikke gør det endnu.                          */

.tomt {
  max-width: 46ch;
  margin: 0 auto;
  padding: 44px 24px 40px;
  text-align: center;
}
.tomt-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: var(--primary-light);
  color: var(--primary);
}
.tomt-titel { font-size: 16px; font-weight: 700; color: var(--text); }
.tomt-tekst {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
}
/* Punkterne står venstrestillet inde i et centreret kort. Centreret tekst i
   flere linjer er svær at læse — øjet mister startpunktet for hver linje. */
.tomt-punkter {
  list-style: none;
  margin: 18px auto 0;
  padding: 16px 18px;
  width: max-content;
  max-width: 100%;
  text-align: left;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.tomt-punkter li { position: relative; padding-left: 22px; }
.tomt-punkter li + li { margin-top: 9px; }
.tomt-punkter li::before {
  content: "";
  position: absolute;
  left: 4px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .55;
}
.tomt-knapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* ── Faner på projektsiden ──────────────────────────────────────────────────
   Var knapper med onclick, der skiftede display på fire skjulte blokke.
   Adressen ændrede sig ikke, så man kunne ikke sende et link til en fane, og
   en genindlæsning kastede én tilbage til den første. Nu er de links.     */

.faner {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.fane {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.fane:hover { color: var(--text-2); }
.fane-aktiv { color: var(--primary); border-bottom-color: var(--primary); }

.fane-tal {
  min-width: 21px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
.fane-aktiv .fane-tal { background: var(--primary-light); color: var(--primary); }
/* En nul-tæller skal kunne ses, men ikke råbe. Den fortæller at fanen er tom,
   så man ikke behøver klikke ind for at finde ud af det. */
.fane-tal-nul { opacity: .5; }

.udkast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
}
.udkast:last-child { border-bottom: none; }
.udkast-navn { font-weight: 600; font-size: 14px; }

.feedback { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.feedback:last-child { border-bottom: none; }

@media (max-width: 700px) {
  .tomt { padding: 34px 16px 30px; }
  .tomt-punkter { width: auto; }
}

/* ── Aftaler ────────────────────────────────────────────────────────────────
   Kunden skrev under på noget hun bagefter kun havde i sin indbakke. Her kan
   hun læse aftalen, se hvem der skrev under hvornår, og gemme en udskrift. */

.ktr-linje {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}
.ktr-linje:last-child { border-bottom: none; }
.ktr-linje:hover { background: var(--surface-2); }
.ktr-linje-tekst  { flex: 1 1 auto; min-width: 0; }
.ktr-linje-titel  { display: block; font-weight: 600; font-size: 14.5px; }
.ktr-linje-meta   { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }

.ktr-ark {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ktr-ark-hoved { padding: 24px 28px 20px; border-bottom: 1px solid var(--border); }
.ktr-ark-hoved h1 { margin: 6px 0 10px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.ktr-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
}

/* Aftaleteksten sættes som et dokument, ikke som en webside: smallere
   linjelængde og mere luft, så en lang paragraf kan læses. */
.ktr-tekst {
  padding: 26px 28px;
  max-width: 74ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-2);
}
.ktr-tekst h1, .ktr-tekst h2, .ktr-tekst h3 {
  margin: 26px 0 10px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
}
.ktr-tekst h1 { font-size: 18px; }
.ktr-tekst h2 { font-size: 16px; }
.ktr-tekst h3 { font-size: 14.5px; }
.ktr-tekst > :first-child { margin-top: 0; }
.ktr-tekst p  { margin: 0 0 14px; }
.ktr-tekst ul, .ktr-tekst ol { margin: 0 0 14px; padding-left: 22px; list-style: revert; }
.ktr-tekst li { margin-bottom: 6px; }
.ktr-tekst table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px; }
.ktr-tekst th, .ktr-tekst td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; }
.ktr-tekst th { background: var(--surface-2); font-weight: 600; }

.ktr-sig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ktr-sig:last-child { border-bottom: none; }
.ktr-sig-hvem { font-weight: 600; font-size: 13.5px; }
.ktr-sig-hvem small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.ktr-sig-hvornaar { flex: 0 0 auto; font-size: 12.5px; color: var(--text-muted); }

/* Udskrift: kun selve aftalen på papiret. */
@media print {
  .portal-sidebar, .portal-header, .breadcrumb, .grid-sidebar > div:last-child { display: none !important; }
  .portal-main, .portal-content { margin: 0 !important; padding: 0 !important; }
  .ktr-ark { border: none; box-shadow: none; }
  .ktr-tekst { max-width: none; }
}

/* ── Notifikationssiden ─────────────────────────────────────────────────────
   Rækken var en div med onclick. Den kunne ikke åbnes i et nyt faneblad, ikke
   nås med tastaturet og ikke findes af en skærmlæser — og musemarkøren var
   det eneste der antydede at der var noget at trykke på.                  */

.notif-page-link {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
a.notif-page-link:hover .notif-page-titel { color: var(--primary); }

.notif-afvis {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  line-height: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.notif-afvis:hover { background: var(--surface-2); color: var(--text); }

/* Søgeresultater i topbarens hurtigsøgning.
   Stod før som onmouseover/onmouseout inde i en JS-skabelonstreng, der byggede
   hvert <a> — en hover-effekt hører til i CSS, og som attributter virkede den
   heller ikke ved tastaturnavigation. :focus-visible er med af netop den grund. */
.soegetraef {
  display: block;
  padding: 10px 14px;
  font-size: .82rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.soegetraef:last-child { border-bottom: 0; }
.soegetraef:hover,
.soegetraef:focus-visible { background: var(--surface-2); }

/* ── Klasser der blev brugt uden nogensinde at være skrevet ──────────────────
   Fundet af tools/tjek-css-klasser.php. De stod i opmærkningen og så rigtige
   ud; browseren så bare et ord uden regel. Fejlen kunne ikke ses ved at læse
   PHP-filen, kun ved at holde de to filer op mod hinanden. */

/* documents.php: knapperne over dokumentlisten. Uden wrap løb de ud over
   kanten på en telefon i stedet for at falde ned på næste linje. */
.flex-wrap { flex-wrap: wrap; }

/* Sekunderne i sessionsadvarslen. Tabulære tal, så feltet ikke hopper i
   bredden, mens der tælles ned fra 120 til 99 til 9. */
.countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Et mindre inputfelt — bruges hvor feltet står inde i en sætning. */
.form-control-sm {
  padding: 6px 10px;
  font-size: .8rem;
}

/* Afstandsskalaen manglede to trin, der allerede blev brugt. */
.mt-4  { margin-top: 4px; }
.mb-12 { margin-bottom: 12px; }

/* ── To-faktor: opsætning ────────────────────────────────────────────────── */
.fa-trin { margin: 0; padding: 0 0 0 22px; display: grid; gap: 24px; }
.fa-trin > li { padding-left: 6px; }
.fa-trin > li::marker { font-weight: 700; color: var(--primary); }
.fa-trin strong { display: block; margin-bottom: 4px; font-size: 14.5px; }
.fa-trin p { margin: 0; line-height: 1.6; }

/* Nøglen skal kunne tastes af fra skærmen. Fast bredde pr. tegn, så grupperne
   står lige under hinanden, og stor nok til at 0 og O kan skelnes. */
.fa-noegle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.fa-noegle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
  color: var(--text); word-break: break-all;
}

.fa-bekraeft { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fa-kodefelt {
  width: 150px; flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: .22em; text-align: center;
}

/* ── To-faktor: genoprettelseskoder ─────────────────────────────────────── */
.fa-koder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 16px; border: 1px dashed var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.fa-koder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: var(--text); text-align: center;
}
.fa-knapper { display: flex; gap: 10px; flex-wrap: wrap; }

/* Ved udskrift skal koderne med — og intet andet. Folk trykker Print for at
   lægge dem i en skuffe. */
@media print {
  .portal-sidebar, .portal-header, .fa-knapper, .kb-hjaelp { display: none !important; }
  .card { box-shadow: none; border: 0; }
}