/* Built from css/ files by build-css.ps1. Do not edit this file directly. */

/* Source: css/base.css */
:root {
  --primary-blue: #009ee0;
  --dark-blue: #008cd2;
  --success-green: #28a745;
  --body-bg: #f8fafc;
  --input-bg: #edf2f9;
  --card-bg: #ffffff;
  --text-dark: #333333;
  --text-muted: #666666;
  --border-color: #d1dbe5;
  --main-font: arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body, h1, h2, p, ul, li, form, input, button, label, textarea {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--main-font);
  background-color: var(--body-bg);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

.layout-container {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  flex: 1;
}


/* Source: css/header.css */
.site-header {
  width: 1200px;
  margin: 0 auto;
  background-color: var(--primary-blue);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header h1 { margin: 0; }
.site-header-logo { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }


/* Source: css/aside.css */
.sidebar-aside {
  width: 200px;
  background-color: var(--card-bg);
  border-right: 1px solid var(--border-color);
  padding: 20px;
  min-height: calc(100vh - 80px);
}

.aside-navigation ul {
  list-style: none;
}

.aside-navigation li {
  margin-bottom: 12px;
}

.aside-navigation a {
  color: var(--dark-blue);
  text-decoration: none;
  font-size: 15px;
}

.aside-menu-icon {
  display: inline-flex;
  width: 20px;
  justify-content: center;
  margin-right: 5px;
  vertical-align: -3px;
}

.aside-navigation a:hover {
  text-decoration: underline;
}

.aside-admin-overskrift {
  margin-top: 25px;
  margin-bottom: 8px;
  font-weight: bold;
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aside-logout-punkt {
  margin-top: 35px;
}

.aside-logout-punkt a {
  color: #dc3545;
}

/* Den lille streg lige efter log ud */
.aside-skillelinje {
  margin-top: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  list-style: none;
}

/* --- FORSLAGS-SEKTION DESIGN --- */
.forslag-sektion-sidebar {
  padding-top: 5px;
}

.forslag-titel {
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.forslag-tekst {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 15px;
}

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

.forslag-textarea {
  width: 100%;
  height: 80px;
  padding: 8px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: var(--main-font);
  font-size: 13px;
  color: var(--text-dark);
  resize: none;
}

.forslag-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.report-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

.report-btn:hover {
  background-color: var(--dark-blue);
}

.forslag-ikon-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.pwa-os-ikon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.pwa-os-svg {
  width: 100%;
  height: 100%;
  fill: var(--text-muted);
}

.pwa-os-ikon:hover .pwa-os-svg {
  fill: var(--primary-blue);
}

/* --- KOMPAKT PWA-HJÆLP --- */
.pwa-install-card {
  margin-top: 20px;
  padding: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.pwa-install-heading,
.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-install-heading {
  font-size: 13px;
  font-weight: bold;
}

.pwa-install-heading svg {
  width: 18px;
  height: 18px;
  fill: var(--primary-blue);
}

.pwa-install-actions { margin-top: 8px; }

.pwa-btn-install,
.pwa-btn-link {
  border: 0;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}

.pwa-btn-install {
  background: var(--primary-blue);
  color: #fff;
  font-weight: bold;
}

.pwa-btn-install:hover { background: var(--dark-blue); }

.pwa-btn-link {
  background: transparent;
  color: var(--dark-blue);
  text-decoration: underline;
}

.pwa-help-text {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.aside-dept-filter-group {
  margin-top: 15px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aside-dept-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aside-dept-select {
  width: 100%;
  padding: 8px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
  cursor: pointer;
}

.aside-dept-select:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.aside-rapport-sektion {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.aside-rapport-btn,
.aside-rapport-btn-disabled {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 13px;
  color: white;
  cursor: pointer;
}

.aside-rapport-btn {
  background-color: var(--success-green);
}

.aside-rapport-btn:hover {
  background-color: #218838;
}

.aside-rapport-btn-disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.aside-rapport-succes-tekst {
  font-size: 12px;
  color: var(--success-green);
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
}

.aside-rapport-fejl-tekst {
  font-size: 12px;
  color: #dc3545;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
}

/* --- STATUS-BESKEDER TIL INDSEND FORSLAG --- */
.forslag-status-succes,
.forslag-status-fejl {
  font-size: 13px;
  font-weight: bold;
  margin-top: 10px;      /* Giver luft under "Send forslag" knappen */
  text-align: center;
  padding: 10px;         /* Luft inde i boksen */
  border-radius: 4px;    /* Matcher dine andre knapper */
  font-family: var(--main-font);
}

.forslag-status-succes {
  color: var(--success-green);
  background-color: rgba(40, 167, 69, 0.1); /* 10% gennemsigtig grøn baggrund */
  border: 1px solid var(--success-green);
}

.forslag-status-fejl {
  color: #dc3545;        /* Rød farve der matcher dit log-ud punkt */
  background-color: rgba(220, 53, 69, 0.1); /* 10% gennemsigtig rød baggrund */
  border: 1px solid #dc3545;
}


/* Source: css/footer.css */
.site-footer {
  width: 1200px;
  margin: 30px auto 0 auto;
  background-color: var(--text-dark);
  color: white;
  padding: 20px;
  border-radius: 4px 4px 0 0;
}

.footer-indhold-ramme {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-arkiv-titel {
  font-size: 16px;
  color: #ffffff;
  border-bottom: 1px solid #444444;
  padding-bottom: 8px;
}

.footer-tom-besked {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

.footer-opgave-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Modificering af opgavekortene NÃ…R de ligger nede i footeren */
.site-footer .opgaveliste-kort {
  background-color: #2a2a2a;
  border-color: #444444;
  border-left-color: var(--success-green);
  color: #dddddd;
}

.site-footer .opgaveliste-kort-titel {
  color: #cccccc;
  text-decoration: line-through; /* Laver en flot streg over teksten, da den er færdig */
}

/* Source: css/login.css */
.login-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 30px;
  border-radius: 4px;
}

.login-titel {
  margin-bottom: 20px;
  color: var(--text-dark);
  font-size: 24px;
}

.login-fejlbesked {
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.login-formular {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.login-felt {
  width: 100%;
  padding: 12px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
}

.login-felt:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.login-husk-mig {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.login-knap {
  width: 100%;
  padding: 12px;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.login-knap:hover {
  background-color: var(--dark-blue);
}

.login-link-sektion {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.login-link-sektion a {
  color: var(--primary-blue);
  text-decoration: none;
}

.login-enhed-intro {
  color: var(--text-muted);
  line-height: 1.45;
  margin: -8px 0 18px;
}

.login-enhed-liste {
  display: grid;
  gap: 9px;
}

.login-enhed-valg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
}

.login-enhed-valg:has(input:checked) {
  border-color: var(--primary-blue);
  background: var(--input-bg);
}

.login-enhed-valg span {
  display: grid;
  gap: 3px;
}

.login-enhed-valg small {
  color: var(--text-muted);
}


/* Source: css/register.css */
.register-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.register-box {
  width: 100%;
  max-width: 400px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 30px;
  border-radius: 4px;
}

.register-titel {
  margin-bottom: 20px;
  color: var(--text-dark);
  font-size: 24px;
}

.register-fejlbesked {
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.register-succesbesked {
  background-color: #d4edda;
  color: #155724;
  padding: 10px;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.register-formular {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.register-felt {
  width: 100%;
  padding: 12px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
}

.register-felt:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.register-knap {
  width: 100%;
  padding: 12px;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.register-knap:hover {
  background-color: var(--dark-blue);
}

.register-link-sektion {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.register-link-sektion a {
  color: var(--primary-blue);
  text-decoration: none;
}

.register-link-sektion a:hover {
  text-decoration: underline;
}

/* Source: css/indhold.css */
.indhold-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

/* Source: css/brugerliste.css */
.bruger-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

.bruger-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.bruger-overskrift {
  font-size: 24px;
  color: var(--text-dark);
}

.bruger-slet-advarsel, .bruger-slet-hjaelp {
  border: 1px solid #e8a5af;
  border-radius: 6px;
  background: #fde9ec;
  color: #9f2030;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 14px;
  padding: 9px 11px;
}

.bruger-slet-hjaelp { margin: 0 0 7px; }
.bruger-btn-slet:disabled { background: #8b969f; cursor: not-allowed; opacity: .65; }

/* --- FILTRE ØVERST --- */
.bruger-filtre-sektion {
  display: flex;
  gap: 15px;
  background-color: var(--input-bg);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 25px;
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.bruger-filter-gruppe {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 180px;
}

.bruger-filter-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
}

.bruger-filter-select {
  padding: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
}

/* --- BRUGERKORT STARTER --- */
.bruger-liste-panel {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--input-bg);
  overflow: hidden;
}

.bruger-liste-panel-overskrift {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--text-dark);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}

.bruger-liste-panel-overskrift::-webkit-details-marker {
  display: none;
}

.bruger-liste-panel-overskrift::before {
  content: "\25B8";
  transition: transform .15s ease;
}

.bruger-liste-panel[open] .bruger-liste-panel-overskrift::before {
  transform: rotate(90deg);
}

.bruger-liste-antal {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.bruger-liste-panel-hjaelp {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.bruger-liste-lukket {
  display: none;
}

.bruger-liste-panel:not([open]) .bruger-liste-aaben {
  display: none;
}

.bruger-liste-panel:not([open]) .bruger-liste-lukket {
  display: inline;
}

.bruger-liste-sektion {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 16px 16px;
}

.bruger-kort {
  background-color: var(--body-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.bruger-kort-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

/* Generel række indeni kortet */
.bruger-kort-linje {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--border-color);
}

/* Fjern bundstreg på sidste linje */
.bruger-linje-handlinger {
  border-bottom: none;
  padding-bottom: 0;
  justify-content: space-between;
}

/* Element-etiketter indeni kortet */
.bruger-felt-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* Linje 1 specifikt */
.bruger-felt-info {
  flex: 2;
  min-width: 200px;
}

.bruger-felt-navn {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-dark);
  display: block;
}

.bruger-felt-email {
  font-size: 13px;
  color: var(--text-muted);
}

.bruger-tag-dig {
  color: var(--primary-blue);
  font-weight: bold;
}

.bruger-felt-input {
  flex: 1;
  min-width: 180px;
}

.bruger-input-pwd,
.bruger-select-felt {
  width: 100%;
  padding: 8px 10px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
}

.bruger-tekst-laast {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Linje 2 dropdowns */
.bruger-felt-dropdown {
  flex: 1;
  min-width: 150px;
}

.bruger-fast-vaerdi {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: bold;
  display: inline-block;
  padding-top: 4px;
}

/* Linje 3 handlinger */
.bruger-felt-checkboxes {
  min-width: 220px;
}

.bruger-opgaveliste-valg {
  flex: 2;
}

.bruger-vagt-checkboxes {
  flex-wrap: wrap;
  max-width: 620px;
}

.bruger-vagt-checkboxes label {
  min-width: 135px;
}

.task-shift-dept-select {
  max-width: 280px;
  margin-bottom: 8px;
}

.bruger-checkbox-ramme {
  display: flex;
  gap: 15px;
  padding-top: 4px;
}

.bruger-checkbox-ramme label {
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bruger-felt-knapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bruger-btn-gem {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.bruger-btn-gem:hover {
  background-color: var(--dark-blue);
}

.bruger-btn-slet {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
}

.bruger-btn-slet:hover {
  background-color: #bd2130;
}


/* Source: css/profil.css */
.profil-container { flex: 1; padding: 20px; background: var(--card-bg); }
.profil-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
.profil-header h2 { margin: 0 0 5px; color: var(--text-dark); font-size: 24px; }
.profil-header p, .profil-card-indhold > p { margin: 0; color: var(--text-muted); }
.profil-card { margin-bottom: 18px; padding: 18px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--body-bg); }
.profil-card-overskrift { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.profil-card-overskrift::-webkit-details-marker { display: none; }
.profil-card-overskrift::before { content: "\25B8"; color: var(--text-muted); transition: transform .15s ease; }
.profil-card[open] .profil-card-overskrift::before { transform: rotate(90deg); }
.profil-card h3 { margin: 0; color: var(--text-dark); }
.profil-card-handling { margin-left: auto; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.profil-card-lukket { display: none; }
.profil-card:not([open]) .profil-card-aaben { display: none; }
.profil-card:not([open]) .profil-card-lukket { display: inline; }
.profil-card-indhold { padding-top: 15px; }
.profil-notice { padding: 11px 13px; border-radius: 6px; margin: 0 0 16px; }
.profil-notice--success { background: #e8f7ee; color: #17653b; border-left: 4px solid #24975a; }
.profil-notice--error { background: #fff0f1; color: #8d2430; border-left: 4px solid #dc3545; }
.profil-oplysninger { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.profil-oplysninger div { padding: 11px; border-radius: 6px; background: var(--input-bg); }
.profil-oplysninger dt { color: var(--text-muted); font-size: 12px; font-weight: bold; text-transform: uppercase; }
.profil-oplysninger dd { margin: 4px 0 0; color: var(--text-dark); font-weight: 600; overflow-wrap: anywhere; }
.profil-rettigheder { display: flex; flex-wrap: wrap; gap: 8px; }
.profil-rettighed { padding: 8px 10px; border-radius: 999px; background: #f3f5f7; color: #637587; font-size: 14px; }
.profil-rettighed.is-enabled { background: #e3f5eb; color: #17653b; }
.profil-lister { margin-top: 16px; color: var(--text-dark); }
.profil-lister ul { margin: 8px 0 0; padding-left: 20px; }
.profil-lister small { color: var(--text-muted); }
.profil-admin-card .profil-card-indhold > p { margin-bottom: 14px; }
.profil-admin-form { display: grid; gap: 15px; }
.profil-checkboxes, .profil-vagt-valg { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.profil-checkboxes label, .profil-vagt-valg label { color: var(--text-dark); }
.profil-felt-række { display: flex; flex-wrap: wrap; gap: 14px; }
.profil-felt-række label, .profil-lokationsfilter { display: grid; gap: 5px; color: var(--text-muted); font-size: 12px; font-weight: bold; text-transform: uppercase; }
.profil-felt-række select, .profil-lokationsfilter select { min-width: 210px; padding: 9px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--card-bg); color: var(--text-dark); font: inherit; }
.profil-vagt-felt { border: 1px solid var(--border-color); border-radius: 6px; padding: 13px; }
.profil-vagt-felt legend { color: var(--text-dark); font-weight: bold; padding: 0 5px; }
.profil-lokationsfilter { margin-bottom: 12px; }
.profil-gem-btn, .profil-enhed button { border: 0; border-radius: 5px; padding: 10px 14px; background: var(--primary-blue); color: #fff; font: inherit; font-weight: bold; cursor: pointer; }
.profil-password-form { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; align-items: end; }
.profil-password-form label { display: grid; gap: 5px; color: var(--text-muted); font-size: 12px; font-weight: bold; text-transform: uppercase; }
.profil-password-form input { min-width: 0; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--card-bg); color: var(--text-dark); font: inherit; }
.profil-gem-btn { justify-self: start; }
.profil-enheds-liste { display: grid; gap: 9px; }
.profil-enhed { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); }
.profil-enhed strong, .profil-enhed small { display: block; }
.profil-enhed small { margin-top: 3px; color: var(--text-muted); }
.profil-enhed button { background: #dc3545; padding: 8px 12px; }
.profil-visningsvalg { display: grid; gap: 10px; margin-top: 14px; }
.profil-visningsvalg label { align-items: start; color: var(--text-dark); cursor: pointer; display: grid; gap: 3px 8px; grid-template-columns: auto 1fr; }
.profil-visningsvalg input { grid-row: span 2; margin-top: 3px; }
.profil-visningsvalg small { color: var(--text-muted); }
@media (max-width: 640px) { .profil-container { padding: 12px 10px; } .profil-card { padding: 14px; } .profil-card-overskrift { flex-wrap: wrap; } .profil-card-handling { width: 100%; margin-left: 22px; } .profil-oplysninger, .profil-password-form { grid-template-columns: 1fr; } .profil-felt-række { flex-direction: column; } .profil-felt-række select, .profil-lokationsfilter select { width: 100%; min-width: 0; } .profil-checkboxes, .profil-vagt-valg { flex-direction: column; gap: 9px; } .profil-gem-btn { width: 100%; } .profil-enhed { align-items: flex-start; flex-direction: column; } .profil-enhed form, .profil-enhed button { width: 100%; } }


/* Source: css/opgaveliste.css */
/* --- CONTAINER & HEADER --- */
.opgaveliste-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

.opgaveliste-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.opgaveliste-overskrift {
  font-size: 24px;
  color: var(--text-dark);
}


/* --- OPRET NY OGAVESEKTION (ØVERST) --- */
.opgaveliste-opret-sektion {
  margin-bottom: 12px; /* Mindre mellemrum her */
  background-color: var(--input-bg);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* Sørg også for at overskriften i toppen ikke skaber unødvendig luft */
.opgaveliste-header {
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

.opgaveliste-opret-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.opgaveliste-input-felt {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
}

.opgaveliste-input-felt:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.opgaveliste-vagtvaelger {
  flex: 0 1 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opgaveliste-vagtvaelger .opgaveliste-input-felt {
  width: 100%;
}

.opgaveliste-vagt-label {
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.opgaveliste-btn-opret {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.opgaveliste-btn-opret:hover {
  background-color: var(--dark-blue);
}


/* --- GOOGLE KEEP-INSPIRERET ARBEJDSOMRÃ…DE --- */
.opgaveliste-arbejdsomraade {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.opgaveliste-arbejdsomraade--enkelt {
  grid-template-columns: minmax(0, 1fr);
}

.opgaveliste-listepanel {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
}

.opgaveliste-listepanel h3 {
  margin: 0 0 7px;
  color: var(--text-dark);
  font-size: 15px;
}

.opgaveliste-listepanel-hjaelp {
  margin: 12px 2px 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.opgaveliste-indholdspanel {
  min-width: 0;
}

/* --- OPPAVESEKTION & TABEL --- */
.opgaveliste-sektion {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.opgaveliste-subtitel {
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.opgaveliste-tom-besked {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}


/* --- OPGAVEKORT --- */
.opgaveliste-kort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  border-left: 4px solid var(--primary-blue);
  padding: 4px 10px;
  background-color: var(--body-bg);
  border-radius: 2px;
  transition: transform 0.2s;
}

.opgaveliste-kort-completed {
  border-left-color: var(--success-green);
  opacity: 0.7;
}

.opgaveliste-tekst-sektion {
  flex: 1;
  margin-right: 10px;
}

.opgaveliste-kort-titel {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: normal;
  line-height: 1.15;
  margin: 0;
}


/* --- INLINE FORMULAR (NÃ…R DER REDIGERES) --- */
.opgaveliste-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.opgaveliste-inline-input {
  flex: 1;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
}

.opgaveliste-inline-input:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 1px;
  background: var(--input-bg);
}

.opgaveliste-inline-input.is-saving { opacity: .6; }


/* --- KNAP-GRUPPERING OG REGLER --- */
.opgaveliste-knap-gruppe {
  display: flex;
  align-items: center;
  gap: 8px; /* Afstand mellem 'Ret' og '✓ Udfør' */
}

/* Fælles base-styling for inline-knapperne, så de flugter perfekt */
.opgaveliste-btn-gem,
.opgaveliste-btn-complete {
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main-font);
}

/* RET-KNAP (Gjort en smule mindre og mere kompakt) */
.opgaveliste-btn-gem {
  background-color: var(--success-green);
  color: white;
  padding: 5px 9px;
  font-size: 12px;
}

.opgaveliste-btn-gem:hover {
  background-color: #218838;
}

/* UDFØR-KNAP (Bevarer sin oprindelige, fine størrelse) */
.opgaveliste-btn-complete {
  background-color: var(--primary-blue);
  color: white;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}

.opgaveliste-btn-complete:hover {
  background-color: var(--dark-blue);
}


/* --- STATUS-SEKTION (NÃ…R KORTET IKKE REDIGERES) --- */
.opgaveliste-status-sektion {
  display: flex;
  align-items: center;
}

.opgaveliste-status-tekst {
  color: var(--success-green);
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
}

.opgaveliste-tidspunkt {
  display: block;
  margin-top: 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.opgaveliste-opret-hjaelp {
    flex-basis: 100%;
    margin: 0;
    color: #536579;
    font-size: 0.9rem;
}

/* Separate lists for users assigned to more than one shift. */
.opgaveliste-vagt-liste {
  margin-bottom: 6px;
}

.opgaveliste-vagt-liste[draggable="true"] .opgaveliste-vagt-overskrift,
.opgaveliste-fane[draggable="true"] {
  cursor: grab;
  /* På tablet skal et tryk-og-hold på en liste blive til flytning og
     ikke blive overtaget af browserens scroll-bevægelse. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.opgaveliste-vagt-liste.is-being-dragged,
.opgaveliste-fane.is-being-dragged {
  opacity: .45;
}

.opgaveliste-vagt-liste.is-drag-over .opgaveliste-vagt-overskrift,
.opgaveliste-fane.is-drag-over {
  box-shadow: 0 0 0 2px var(--primary-blue);
}

.opgaveliste-vagt-overskrift {
  margin: 0 0 6px;
  padding: 7px 10px;
  color: var(--dark-blue);
  background: var(--input-bg);
  border-left: 4px solid var(--primary-blue);
  border-radius: 4px;
  font-size: 16px;
}

.opgaveliste-viser-en-vagt .opgaveliste-vagt-overskrift {
  display: none;
}

.opgaveliste-vagt-overskrift span {
  color: var(--text-muted);
  font-size: 13px;
}

/* Opgavelisterne ligger som en lodret, hurtig menu på store skærme. */
.opgaveliste-faner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: visible;
  padding: 0;
  margin: 0;
  scrollbar-width: thin;
}

.opgaveliste-fane {
  width: 100%;
  flex: 0 0 auto;
  display: block;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.opgaveliste-fane:hover,
.opgaveliste-fane:focus-visible {
  border-color: var(--primary-blue);
  outline: none;
}

.opgaveliste-fane.is-active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}

.opgaveliste-fane-linje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.opgaveliste-fane-antal {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
  text-align: center;
  opacity: .85;
}

.opgaveliste-fane.is-active .opgaveliste-fane-antal {
  background: rgba(255, 255, 255, .2);
}

.opgaveliste-fane-forhaandsvisning {
  display: none;
  gap: 2px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

.opgaveliste-fane-forhaandsvisning-række {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.opgaveliste-fane-forhaandsvisning-række > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opgaveliste-fane-forhaandsvisning-række small {
  flex: 0 0 auto;
  color: inherit;
  font-size: 10px;
  opacity: .78;
}

.opgaveliste-fane.is-active .opgaveliste-fane-forhaandsvisning {
  color: rgba(255, 255, 255, .9);
}

/* Små mobiler: behold den velkendte vandrette menu over indholdet. */
@media screen and (max-width: 700px) {
  .opgaveliste-arbejdsomraade {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .opgaveliste-listepanel {
    position: static;
    max-height: none;
    padding: 11px;
  }

  .opgaveliste-listepanel h3,
  .opgaveliste-listepanel-hjaelp {
    display: none;
  }

  .opgaveliste-faner {
    flex-direction: row;
    overflow-x: auto;
    padding: 1px 0;
  }

  .opgaveliste-fane {
    width: auto;
    min-width: max-content;
    /* På små telefoner bruges fanerne vandret, så der må stadig
       kunne scrolles sidelæns mellem dem. */
    touch-action: pan-x;
  }

  .opgaveliste-fane-forhaandsvisning {
    display: none;
  }
}

.opgaveliste-filter-status {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Standardvisningen bevarer den oprindelige, mere luftige arbejdsflade.
   Kompakt er et frivilligt enhedsvalg i Min profil. */
html[data-task-density="standard"] .opgaveliste-arbejdsomraade { grid-template-columns: minmax(190px, 270px) minmax(0, 1fr); gap: 18px; }
html[data-task-density="standard"] .opgaveliste-listepanel { padding: 13px; }
html[data-task-density="standard"] .opgaveliste-listepanel h3 { margin-bottom: 10px; }
html[data-task-density="standard"] .opgaveliste-faner { gap: 8px; }
html[data-task-density="standard"] .opgaveliste-fane { padding: 9px 13px; }
html[data-task-density="standard"] .opgaveliste-fane-forhaandsvisning { display: grid; }
html[data-task-density="standard"] .opgaveliste-sektion { gap: 12px; }
html[data-task-density="standard"] .opgaveliste-vagt-liste { margin-bottom: 24px; }
html[data-task-density="standard"] .opgaveliste-vagt-overskrift { display: block; margin-bottom: 10px; padding: 9px 12px; }
html[data-task-density="standard"] .opgaveliste-kort { border: 1px solid var(--border-color); border-left: 4px solid var(--primary-blue); border-radius: 4px; padding: 15px; }
html[data-task-density="standard"] .opgaveliste-kort-completed { border-left-color: var(--success-green); }
html[data-task-density="standard"] .opgaveliste-kort-titel { font-size: 16px; line-height: 1.4; }
html[data-task-density="standard"] .opgaveliste-inline-input { border: 1px solid var(--border-color); border-radius: 4px; padding: 6px 10px; }
html[data-task-density="standard"] .opgaveliste-btn-complete { min-height: 0; padding: 8px 16px; font-size: 13px; }
html[data-task-density="standard"] .opgaveliste-tidspunkt { margin-top: 6px; font-size: 12px; }
html[data-task-density="standard"] .opgaveliste-fane-forhaandsvisning-række:nth-child(n+4) { display: none; }

/* Keep: lille listekort-oversigt til venstre og rolig arbejdsliste til højre. */
html[data-task-density="keep"] .opgaveliste-arbejdsomraade { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 16px; }
html[data-task-density="keep"] .opgaveliste-listepanel { background: transparent; border: 0; padding: 0; }
html[data-task-density="keep"] .opgaveliste-listepanel h3,
html[data-task-density="keep"] .opgaveliste-listepanel-hjaelp { display: none; }
html[data-task-density="keep"] .opgaveliste-faner { gap: 10px; }
html[data-task-density="keep"] .opgaveliste-fane { background: var(--body-bg); border-radius: 8px; padding: 10px 11px; }
html[data-task-density="keep"] .opgaveliste-fane.is-active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
html[data-theme="dark"][data-task-density="keep"] .opgaveliste-fane.is-active { background: var(--card-bg); border-color: var(--primary-blue); color: var(--text-dark); }
html[data-theme="dark"][data-task-density="keep"] .opgaveliste-fane.is-active .opgaveliste-fane-forhaandsvisning { color: var(--text-muted); }
html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning { display: grid; font-size: 11px; gap: 3px; margin-top: 8px; }
/* Bevidst uden æ i selector: det virker også på webhoteller, som sender CSS
   uden UTF-8-tegnsæt i responsen. */
html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning > span { display: block !important; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; }
html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning > span > span { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning > span > small { display: none !important; }
html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning .opgaveliste-fane-tom { display: none !important; }
html[data-task-density="keep"] .opgaveliste-viser-en-vagt .opgaveliste-vagt-overskrift { display: none; }
html[data-task-density="keep"] .opgaveliste-vagt-liste { margin-bottom: 4px; }
html[data-task-density="keep"] .opgaveliste-vagt-liste .opgaveliste-tom-besked { display: none; }
html[data-task-density="keep"] .opgaveliste-kort { background: transparent; border: 0; border-left: 0; border-radius: 0; padding: 6px 126px 6px 4px; position: relative; }
html[data-task-density="keep"] .opgaveliste-kort-completed { border-left: 0; }
html[data-task-density="keep"] .opgaveliste-tekst-sektion { margin-right: 0; min-width: 0; }
html[data-task-density="keep"] .opgaveliste-kort-titel { margin: 0; }
html[data-task-density="keep"] .opgaveliste-inline-input { background: transparent; border: 0; border-radius: 0; padding: 2px 0; }
html[data-task-density="keep"] .opgaveliste-inline-input:focus { background: var(--input-bg); outline: 1px solid var(--primary-blue); }
html[data-task-density="keep"] .opgaveliste-inline-form { gap: 7px; }
html[data-task-density="keep"] .opgaveliste-tidspunkt { margin: 0; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); white-space: nowrap; }
html[data-task-density="keep"] .opgaveliste-inline-form .opgaveliste-knap-gruppe,
html[data-task-density="keep"] .opgaveliste-status-sektion { flex: 0 0 22px; order: -1; width: 22px; }
html[data-task-density="keep"] .opgaveliste-btn-complete { border-radius: 3px; font-size: 0 !important; height: 22px; min-height: 22px; max-width: 22px; overflow: hidden; padding: 0; width: 22px; }
html[data-task-density="keep"] .opgaveliste-komplet-ikon { display: block; font-size: 14px; line-height: 1; }
html[data-task-density="keep"] .opgaveliste-komplet-tekst { display: none; }


/* Source: css/kontrolpanel.css */
.kontrolpanel-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}
.kontrolpanel-header {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}
.kontrolpanel-overskrift {
  font-size: 24px;
  color: var(--text-dark);
}
.kontrolpanel-alert {
  padding: 12px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}
.kontrolpanel-alert-fejl {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.kontrolpanel-alert-succes {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.kontrolpanel-section {
  margin-bottom: 30px;
}
.kontrolpanel-subtitel {
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 15px;
}
.kontrolpanel-scroll {
  width: 100%;
  overflow-x: auto;
}
.kontrolpanel-tabel {
  width: 100%;
  border-collapse: collapse;
}
.kontrolpanel-tabel th,
.kontrolpanel-tabel td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
.kontrolpanel-tabel th {
  background-color: var(--input-bg);
  color: var(--text-dark);
  font-weight: bold;
}
.kontrolpanel-btn-approve {
  background-color: var(--success-green);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
}
.kontrolpanel-btn-approve:hover {
  background-color: #218838;
}
.kontrolpanel-tom-tekst {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}

/* Source: css/opret_manuelt.css */
.manuel-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

.manuel-header {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.manuel-overskrift {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.manuel-beskrivelse {
  font-size: 14px;
  color: var(--text-muted);
}

.manuel-section {
  margin-top: 10px;
}

.manuel-formular {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

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

.manuel-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
}

.manuel-input,
.manuel-select {
  width: 100%;
  padding: 10px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
  font-family: var(--main-font);
}

.manuel-input:focus,
.manuel-select:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.manuel-knap {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}

.manuel-knap:hover {
  background-color: var(--dark-blue);
}

/* Source: css/logfiler.css */
.logfiler-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

.logfiler-header {
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.logfiler-overskrift {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.logfiler-beskrivelse {
  font-size: 14px;
  color: var(--text-muted);
}

.logfiler-super-banner {
  background-color: var(--input-bg);
  color: var(--text-dark);
  padding: 10px 15px;
  border-left: 4px solid var(--primary-blue);
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.logfiler-section {
  margin-top: 10px;
}

.logfiler-scroll {
  width: 100%;
  overflow-x: auto;
}

.logfiler-tabel {
  width: 100%;
  border-collapse: collapse;
}

.logfiler-tabel th,
.logfiler-tabel td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.logfiler-tabel th {
  background-color: var(--input-bg);
  color: var(--text-dark);
  font-weight: bold;
}

.logfiler-tag {
  background-color: #e2e8f0;
  color: var(--text-dark);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.logfiler-btn-download {
  display: inline-block;
  background-color: var(--primary-blue);
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
}

.logfiler-btn-download:hover {
  background-color: var(--dark-blue);
}

.logfiler-btn-delete {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
}

.logfiler-btn-delete:hover {
  background-color: #bd2130;
}

.logfiler-tom-besked {
  color: var(--text-muted);
  font-style: italic;
  font-size: 14px;
}

/* Source: css/tilbagemelding.css */
.excel-main-container {
  flex: 1;
  padding: 20px;
  background-color: var(--card-bg);
}

.excel-header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.excel-top-handlinger {
  display: flex;
  align-items: center;
  gap: 15px;
}

.excel-dato-form label {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-dark);
  margin-right: 5px;
}

.excel-dato-form input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.excel-status-badge {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  background-color: #d4edda;
  color: #155724;
  transition: all 0.2s ease;
}
.status-gemmer { background-color: #fff3cd; color: #856404; }
.status-gemt { background-color: #d4edda; color: #155724; }
.status-fejl { background-color: #f8d7da; color: #721c24; }

.excel-scroll-ramme {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #cccccc;
}

.excel-ark-tabel {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}

.excel-ark-tabel th,
.excel-ark-tabel td {
  border: 1px solid #cccccc;
  padding: 0;
  height: 30px;
  text-align: center;
  vertical-align: middle;
}

.excel-ark-tabel th {
  background-color: #f0f0f0;
  font-weight: normal;
  font-size: 13px;
  color: #333333;
  height: 25px;
}

.excel-ark-tabel input {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 5px;
  box-sizing: border-box;
  font-size: 13px;
  text-align: center;
  background: transparent;
  color: #000000;
}

.excel-ark-tabel input:focus {
  outline: 2px solid var(--primary-blue);
  background-color: #ffffff;
  position: relative;
  z-index: 10;
}

/* --- FASTE KOLONNEBREDDER --- */
.col-port { width: 50px; }
.col-til-type { width: 35px; }
.col-til { width: 120px; text-align: left !important; padding-left: 5px !important; }
.col-tur { width: 70px; }
.col-afgang { width: 80px; }
.col-v { width: 35px; }
.col-trailer { width: 160px; }
.col-link { width: 120px; }
.col-noter { width: 220px; text-align: left !important; padding-left: 5px !important; }

.cell-destination input,
.cell-noter input {
  text-align: left;
}

.laast-celle {
  cursor: not-allowed;
  user-select: none;
}

/* --- RENE CELLERELATEREDE FARVER (MÃ¥lrettet specifikt for at vinde over mobil-filer) --- */
.excel-ark-tabel td[data-aktuel-farve="grøn"],
.excel-ark-tabel td[data-aktuel-farve="grøn"] input {
  background-color: #c6efce;
  color: #006100;
}

.excel-ark-tabel td[data-aktuel-farve="gul"],
.excel-ark-tabel td[data-aktuel-farve="gul"] input {
  background-color: #ffeb9c;
  color: #9c6500;
}

.excel-ark-tabel td[data-aktuel-farve="grå"],
.excel-ark-tabel td[data-aktuel-farve="grå"] input {
  background-color: #e0e0e0;
  color: #333333;
}

.excel-ark-tabel td[data-aktuel-farve="orange"],
.excel-ark-tabel td[data-aktuel-farve="orange"] input {
  background-color: #ffc000;
  color: #000000;
}

.excel-ark-tabel td[data-aktuel-farve="hvid"],
.excel-ark-tabel td[data-aktuel-farve="hvid"] input {
  background-color: transparent;
}

/* PRÆCIS REGLER TIL FED SKRIFT STYRING */
.excel-ark-tabel td[data-skrift-fed="ja"] input {
  font-weight: bold;
}
.excel-ark-tabel td[data-skrift-fed="nej"] input {
  font-weight: normal;
}

.excel-ark-tabel td.cell-bruger-input[data-aktuel-farve="hvid"] input {
  background-color: #ffffff;
}

/* --- HØJREKLIKS MENU DESIGN (KUN ADMIN) --- */
.custom-context-menu {
  position: absolute;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 6px 0;
  z-index: 99999;
  display: none;
  min-width: 170px;
}

.context-menu-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--main-font);
}

.context-menu-item:hover {
  background-color: var(--input-bg);
}

.menu-skillelinje {
  border-bottom: 1px solid var(--border-color);
  margin: 5px 0;
}

.menu-farve-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  display: inline-block;
}

.excel-ark-info-footer { margin-top: 25px; }
.excel-prio-tabel { border-collapse: collapse; font-size: 12px; font-weight: bold; }
.excel-prio-tabel td { border: 1px solid #ccc; padding: 6px 12px; }
.prio-gul { background-color: #ffff00; }
.prio-hvid { background-color: #ffffff; }
.prio-orange { background-color: #ffc000; }

/* Source: css/tilbakning-skabelon.css */
.template-builder {
    flex: 1;
    min-width: 0;
    padding: 24px;
    background: #f7f9fc;
}

.template-builder__card {
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border: 1px solid #d6e0ec;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(29, 62, 97, 0.08);
}

.template-builder__intro {
    margin: 0 0 20px;
    color: #526577;
}

.template-builder__notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 4px solid #079bd3;
    border-radius: 5px;
    background: #e8f6fc;
    color: #135b78;
}

.template-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #d6e0ec;
    border-radius: 8px;
    background: #edf3f9;
}

.template-toolbar button,
.template-toolbar label {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #c4d2df;
    border-radius: 5px;
    background: #fff;
    color: #17324a;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.template-toolbar button:hover,
.template-toolbar button.is-active {
    border-color: #079bd3;
    background: #dff4fd;
}

.template-toolbar input[type="color"] {
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.template-toolbar input[type="number"] {
    width: 62px;
    margin-left: 5px;
    padding: 5px;
    border: 1px solid #c4d2df;
    border-radius: 4px;
    font: inherit;
}

.template-toolbar__dimensions {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 8px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid #c4d2df;
    border-radius: 6px;
    background: #e4edf6;
}

.template-toolbar__dimensions strong {
    grid-column: 1 / -1;
    color: #486174;
    font-size: 12px;
}

.template-toolbar__dimensions label,
.template-toolbar__dimensions button {
    min-height: 32px;
    padding: 5px 7px;
}

.template-grid-help {
    margin: 8px 0 0;
    color: #617486;
    font-size: 13px;
}

.template-grid-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    max-height: none;
    border: 1px solid #b8c8d7;
    border-radius: 8px;
    background: #fff;
}

.template-grid {
    width: max-content;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Calibri, Arial, sans-serif;
}

.template-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 7px 8px;
    border: 1px solid #b8c8d7;
    background: #e7edf4;
    color: #486174;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.template-grid .row-number {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 40px;
    min-width: 40px;
    background: #e7edf4;
}

.template-grid td {
    position: relative;
    width: 100px;
    min-width: 1px;
    height: 20px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #d2dbe4;
    outline: 1px solid #d2dbe4;
    outline-offset: -1px;
    box-sizing: border-box;
    color: #172d40;
    /* Matcher Excel bedre: tekst holdes på én linje, medmindre admin
       bevidst har indsat et linjeskift i cellen. */
    white-space: pre;
    font-size: 13px;
    line-height: 1.1;
    vertical-align: middle;
    outline: none;
}

.template-grid td.is-selected {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px #009fdb;
}

.template-grid td.is-editable {
    box-shadow: inset 0 0 0 1px rgba(21, 158, 88, 0.7);
}

.template-grid td.is-locked {
    box-shadow: inset 0 0 0 1px rgba(111, 130, 145, 0.45);
}

.template-grid td.is-editable::after,
.template-grid td.is-locked::after {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: grid;
    width: 30px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    place-items: center;
    pointer-events: none;
}

.template-grid tr.template-row-collapsed td,
.template-grid tr.template-row-collapsed th {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.template-grid tr.template-row-collapsed td::after {
    display: none;
}

.template-grid td.is-editable::after {
    content: "EDIT";
    background: #087f5b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.template-grid td.is-locked::after {
    content: "LOCK";
    background: #4e6578;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.template-grid.template-grid--badges-hidden td.is-editable::after,
.template-grid.template-grid--badges-hidden td.is-locked::after {
    display: none;
}

.template-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 20px;
    color: #526577;
    font-size: 13px;
}

.template-legend span::before {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1px solid #98aab9;
    border-radius: 2px;
    content: "";
    vertical-align: -1px;
}

.template-legend .editable::before { background: #087f5b; }
.template-legend .locked::before { background: #4e6578; }

.template-save-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.template-save-bar--split {
    gap: 10px;
}

.template-publish-btn {
    background: #087f5b;
}

.template-publish-btn:hover {
    background: #056b4d;
}

.template-reset-draft-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.template-reset-draft-btn {
    padding: 7px 10px;
    border: 1px solid #d69aa0;
    border-radius: 5px;
    background: #fff5f5;
    color: #a32a34;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.template-reset-draft-btn:hover {
    background: #ffe6e8;
}

.template-daily-header {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
    margin: 0 0 16px;
    padding: 13px;
    border: 1px solid #dfd5c6;
    border-radius: 6px;
    background: #fdfaf3;
    color: #333;
    font-weight: 700;
}

.template-daily-header input {
    width: 100%;
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-sizing: border-box;
    font: inherit;
}

.template-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.template-action-row form { margin: 0; }
.template-reset-btn { background: #6c757d; }

.template-save-btn {
    padding: 11px 18px;
    border: 0;
    border-radius: 6px;
    background: #079bd3;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.template-user-editable {
    outline: none;
    cursor: text;
}


.template-context-menu {
    position: fixed;
    z-index: 1000;
    display: none;
    min-width: 190px;
    padding: 5px;
    border: 1px solid #b9c8d5;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 56, 78, 0.22);
}

.template-context-menu button {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1b3346;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.template-context-menu button:hover { background: #e8f6fc; }


/* Source: css/lokationer-vagter.css */
.lokationer-container {
  flex: 1;
  padding: 20px;
  background: var(--card-bg);
}

.lokationer-header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.lokationer-header h1 { font-size: 24px; margin-bottom: 6px; }
.lokationer-header p, .lokationer-tom { color: var(--text-muted); }
.lokationer-besked { background: #e4f7ea; border: 1px solid #9bd5ac; border-radius: 6px; color: #176332; margin-bottom: 16px; padding: 11px 13px; }
.lokationer-besked--error { background: #fde9ec; border-color: #e8a5af; color: #9f2030; }
.lokationer-opret-kort, .lokation-kort { border: 1px solid var(--border-color); border-radius: 7px; background: var(--body-bg); }
.lokationer-opret-kort { margin-bottom: 16px; padding: 16px; }
.lokationer-opret-kort h2, .lokation-vagter h3 { font-size: 18px; margin-bottom: 12px; }
.lokationer-liste { display: grid; gap: 12px; }
.lokation-kort summary { align-items: center; cursor: pointer; display: flex; font-size: 18px; font-weight: bold; justify-content: space-between; list-style: none; padding: 16px; }
.lokation-kort summary::-webkit-details-marker { display: none; }
.lokation-kort summary::before { content: ''; flex: 0 0 auto; width: 0; height: 0; margin-right: 10px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; }
.lokation-kort[open] summary::before { border-top: 7px solid currentColor; border-right: 5px solid transparent; border-bottom: 0; border-left: 5px solid transparent; }
.lokation-kort summary span { margin-right: auto; }
.lokation-kort summary small { color: var(--text-muted); font-size: 13px; font-weight: normal; margin-left: 12px; text-align: right; }
.lokation-kort-indhold { border-top: 1px solid var(--border-color); padding: 16px; }
.lokationer-inline-form, .lokationer-vagt-række { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; }
.lokationer-inline-form label { font-weight: bold; }
.lokationer-inline-form input, .lokationer-vagt-række input { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-dark); font: inherit; min-height: 42px; padding: 9px 10px; }
.lokationer-inline-form input { flex: 1 1 260px; }
.lokationer-vagt-række input { flex: 1; }
.lokationer-inline-form button, .lokationer-vagt-række button { background: var(--primary-blue); border: 0; border-radius: 5px; color: #fff; cursor: pointer; font: inherit; font-weight: bold; min-height: 42px; padding: 9px 14px; }
.lokationer-secondary-btn { background: #5f7180 !important; }
.lokation-vagter { margin-top: 20px; max-width: 620px; }
.lokationer-vagt-række { margin-top: 8px; }
.lokationer-vagt-række--new { border-top: 1px dashed var(--border-color); margin-top: 15px; padding-top: 15px; }
.lokationer-slet-sektion { border-top: 1px dashed var(--border-color); margin-top: 20px; max-width: 620px; padding-top: 16px; }
.lokationer-slet-sektion h3 { font-size: 16px; margin-bottom: 7px; }
.lokationer-slet-advarsel, .lokationer-vagt-slet p { color: var(--text-muted); font-size: 13px; line-height: 1.4; margin: 0 0 8px; }
.lokationer-slet-advarsel strong, .lokationer-vagt-slet strong { color: #c63a4b; }
.lokationer-slet-form { display: inline-block; }
.lokationer-delete-btn { background: #dc3545; border: 0; border-radius: 5px; color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: bold; min-height: 36px; padding: 7px 11px; }
.lokationer-delete-btn:hover { background: #bc2938; }
.lokationer-delete-btn:disabled { background: #8b969f; cursor: not-allowed; opacity: .65; }
.lokationer-vagt-slet { border-left: 3px solid #d95b67; margin: 6px 0 13px; padding: 4px 0 4px 10px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

@media screen and (max-width: 640px) {
  .lokationer-container { padding: 14px 10px; }
  .lokationer-header h1 { font-size: 21px; }
  .lokation-kort summary { align-items: flex-start; font-size: 16px; }
  .lokation-kort summary small { display: block; font-size: 12px; max-width: 115px; }
  .lokationer-inline-form, .lokationer-vagt-række { align-items: stretch; flex-direction: column; }
  .lokationer-inline-form input, .lokationer-vagt-række input, .lokationer-inline-form button, .lokationer-vagt-række button { flex: none; width: 100%; }
  .lokationer-slet-form, .lokationer-delete-btn { width: 100%; }
}


/* Source: css/hjaelp.css */
.help-page {
    flex: 1;
    min-width: 0;
    padding: 24px;
    background: #f7f9fc;
}

.help-page__card {
    max-width: 900px;
    margin: 0 auto 18px;
    padding: 24px;
    border: 1px solid #d6e0ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(29, 62, 97, 0.06);
}

.help-page h1, .help-page h2 { margin-top: 0; color: #17324a; }
.help-page__intro { color: #526577; }
.help-page__faq { display: grid; gap: 9px; }

.help-page__topic {
    padding: 16px;
    border: 1px solid #d6e0ec;
    border-radius: 9px;
    background: #f9fbfd;
}

.help-page__topic + .help-page__topic { margin-top: 6px; }
.help-page__topic h2 { margin: 0 0 11px; font-size: 18px; }
.help-page__topic--admin { border-left: 4px solid #079bd3; background: #f3f9fc; }

.help-page details {
    border: 1px solid #d6e0ec;
    border-radius: 7px;
    background: #fbfdff;
}

.help-page summary {
    padding: 13px 15px;
    color: #17324a;
    font-weight: 700;
    cursor: pointer;
}

.help-page details p { margin: 0; padding: 0 15px 14px; color: #526577; line-height: 1.5; }
.help-list { margin: 0; padding: 0 20px 14px 34px; color: #526577; line-height: 1.55; }
.help-list li + li { margin-top: 3px; }
.help-tool-table-wrap { overflow-x: auto; padding: 0 15px 15px; }
.help-tool-table { width: 100%; border-collapse: collapse; color: #526577; font-size: 13px; text-align: left; }
.help-tool-table th, .help-tool-table td { padding: 8px; border: 1px solid #d6e0ec; vertical-align: top; }
.help-tool-table th { background: #e7edf4; color: #17324a; }
.help-tool-table td:first-child { width: 210px; background: #fbfdff; }
.help-tool { display: inline-block; padding: 5px 7px; border: 1px solid #c4d2df; border-radius: 4px; background: #fff; color: #17324a; font-size: 12px; font-weight: 600; white-space: nowrap; }
.help-page__question textarea { display: block; width: 100%; min-height: 130px; margin: 12px 0; padding: 11px; border: 1px solid #b9c8d5; border-radius: 6px; box-sizing: border-box; font: inherit; resize: vertical; }
.help-page__image-upload { display: block; margin: 0 0 12px; color: #17324a; font-weight: 700; }
.help-page__image-upload small { color: #617486; font-weight: 400; }
.help-page__image-upload input { display: block; margin-top: 6px; font: inherit; }
.help-page__question button { padding: 10px 16px; border: 0; border-radius: 6px; background: #079bd3; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.help-page__message { padding: 10px 12px; border-left: 4px solid #079bd3; background: #e8f6fc; color: #135b78; }


/* Source: css/theme.css */
/* Nattilstand - valget gemmes lokalt på den enkelte enhed. */
.aside-theme-punkt {
  margin: 10px 0 4px;
}

.aside-theme-btn {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--input-bg);
  color: var(--text-dark);
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.aside-theme-btn:hover {
  border-color: var(--primary-blue);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary-blue: #16a9e2;
  --dark-blue: #058bc2;
  --success-green: #36ba7e;
  --body-bg: #111820;
  --input-bg: #202c37;
  --card-bg: #18232d;
  --text-dark: #edf4f8;
  --text-muted: #b9c7d1;
  --border-color: #40515e;
}

html[data-theme="dark"] .template-builder,
html[data-theme="dark"] .help-page {
  background: #111820;
}

html[data-theme="dark"] .template-builder__card,
html[data-theme="dark"] .help-page__card,
html[data-theme="dark"] .template-grid-wrap,
html[data-theme="dark"] .template-toolbar button,
html[data-theme="dark"] .template-toolbar label,
html[data-theme="dark"] .help-page details,
html[data-theme="dark"] .help-tool,
html[data-theme="dark"] .help-page__question input,
html[data-theme="dark"] .help-page__question textarea {
  background: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-dark);
}

html[data-theme="dark"] .template-toolbar,
html[data-theme="dark"] .template-toolbar__dimensions,
html[data-theme="dark"] .template-grid th,
html[data-theme="dark"] .template-grid .row-number,
html[data-theme="dark"] .help-tool-table th,
html[data-theme="dark"] .help-tool-table td:first-child {
  background: #25333f;
  border-color: var(--border-color);
  color: var(--text-dark);
}

html[data-theme="dark"] .template-grid td {
  border-color: #425461;
  color: var(--text-dark);
}

html[data-theme="dark"] .template-builder__intro,
html[data-theme="dark"] .template-grid-help,
html[data-theme="dark"] .template-legend,
html[data-theme="dark"] .help-page__intro,
html[data-theme="dark"] .help-page details p,
html[data-theme="dark"] .help-list,
html[data-theme="dark"] .help-tool-table,
html[data-theme="dark"] .help-page__image-upload small {
  color: var(--text-muted);
}

html[data-theme="dark"] .help-page h1,
html[data-theme="dark"] .help-page h2,
html[data-theme="dark"] .help-page details summary,
html[data-theme="dark"] .help-page__image-upload {
  color: var(--text-dark);
}

html[data-theme="dark"] .template-builder__notice,
html[data-theme="dark"] .help-page__message {
  background: #173848;
  color: #d8f2ff;
}

html[data-theme="dark"] .aside-theme-btn[aria-pressed="true"] {
  background: #263a49;
  border-color: #5a8299;
}


/* Source: css/responsive/layout-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1400px) {

  .layout-container {
    width: 100%;            /* Fyld skærmen */
    max-width: 100%;        /* Hård begrænsning: Må IKKE blive bredere end skærmen */
    box-sizing: border-box; /* Sørger for at padding tælles MED i bredden, ikke oveni */
    padding: 0;             /* Fjern padding herfra, da indholdet indeni har sin egen padding */
    flex-direction: column; /* Stabler elementerne lodret */
  }

  /* Vi bruger flex-order til at vende rækkefølgen */
  main {
    order: 1;               /* Vis opgavestyringen øverst */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  aside {
    order: 2;               /* Skub menuen ned under main */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
  }

  footer {
    order: 3;               /* Sørg for at de udførte opgaver altid ligger helt i bunden */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* Source: css/responsive/aside-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .sidebar-aside {
    width: 100%;             /* Fyld hele skærmens bredde i bunden */
    box-sizing: border-box;
    min-height: auto;        /* Fjern den høje computer-højde */
    border-right: none;      /* Fjern kanten i højre side */
    border-top: 1px solid var(--border-color); /* Læg kanten i toppen som adskillelse */
    padding: 20px 15px;      /* Juster luften */
  }

  /* Gør menupunkterne til store, nemme knapper på tablets/mobiler */
  .aside-navigation li {
    margin-bottom: 0;        /* Nulstil computerspacing */
  }

  .aside-navigation a {
    display: block;
    padding: 12px 10px;      /* Gør linket stort, så det er nemt at ramme i en lastbil */
    background-color: var(--input-bg); /* Giv dem en svag baggrundsfarve som en knap */
    border-radius: 4px;
    margin-bottom: 8px;      /* Luft mellem knapperne */
    font-size: 16px;         /* Gør teksten en smule større og mere læsbar */
  }

  .aside-logout-punkt {
    margin-top: 20px;        /* Mindre luft op til log ud på mobilen */
  }

  /* Skjul eventuelt forslagsboksen på mobilen, hvis den fylder for meget i bunden */
  /* .forslag-sektion-sidebar { display: none; } */
}

  /* Gør afdelingsvælgeren (Select) større og nemmere at trykke på */
  .aside-dept-select {
    padding: 12px;           /* Mere højde på boksen */
    font-size: 16px;         /* Forhindrer iOS/Android i at zoome automatisk ind */
  }

  /* Gør rapport-knapperne højere */
  .aside-rapport-btn,
  .aside-rapport-btn-disabled {
    padding: 14px;           /* Større trykflade */
    font-size: 15px;         /* Tydeligere tekst */
  }

  /* Gør PWA-knapperne nemme at ramme på touch-skærme. */
  .pwa-btn-install,
  .pwa-btn-link {
    padding: 12px;           /* Større knapper til fingre */
    font-size: 14px;
  }
}


/* Source: css/responsive/header-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .site-header {
    width: 100%;
    /* padding-top tager højde for tablettens ur/statusbar + 15px ekstra luft */
    padding: calc(15px + env(safe-area-inset-top, 0px)) 15px 15px 15px;
    border-radius: 0;
    max-width: 100%;
	box-sizing: border-box;
  }

  .site-header-logo { width: 30px; height: 30px; flex-basis: 30px; }
}


/* Source: css/responsive/footer-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .site-footer {
    width: 100%;           /* Fyld hele skærmens bredde */
    margin: 20px 0 0 0;    /* Fjern 'auto' margin i siderne og juster top-luft */
    border-radius: 0;      /* Fjern de runde hjørner, så den flugter med skærmkanten */
    padding: 15px;         /* Lidt mindre padding så der er plads til indholdet */
    max-width: 100%;
	box-sizing: border-box;
  }

  .footer-arkiv-titel {
    font-size: 15px;       /* Juster titlen en smule på mindre skærme */
  }

  /* Sørg for at de færdige opgaver nede i footeren får maksimal plads */
  .site-footer .opgaveliste-kort {
    padding: 12px;         /* Juster indvendig luft på de færdige opgavekort */
    font-size: 14px;       /* Gør teksten nem at overskue */
  }
}

/* Source: css/responsive/indhold-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .indhold-container {
    padding: 15px 10px;    /* Mindre luft i siderne (10px) for at give maksimal plads til opgaverne */
    border-radius: 0;      /* Sikrer at den flugter flot, hvis der er rammer på computeren */
  }

}

/* Source: css/responsive/brugerliste-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .bruger-container {
    padding: 15px 10px;      /* Mindre luft i siderne for at udnytte pladsen */
  }

  .bruger-overskrift {
    font-size: 20px;         /* Lidt mindre overskrift på mobilen */
  }

  /* --- FILTRE ØVERST --- */
  .bruger-filtre-sektion {
    gap: 12px;
    padding: 12px;           /* Gør filterboksen lidt mere kompakt */
  }

  .bruger-filter-gruppe {
    min-width: 100%;         /* Lad hvert filter fylde hele bredden på mobilen, så de er nemme at overskue */
  }

  .bruger-filter-select {
    padding: 12px;           /* Gør dropdown-menuerne højere og nemmere at trykke på */
    font-size: 16px;         /* Forhindrer at mobilen zoomer ind automatisk ved klik */
  }

  /* Hele brugerlisten kan foldes sammen uden at gemme filtrene. */
  .bruger-liste-panel-overskrift {
    flex-wrap: wrap;
    padding: 13px 12px;
    font-size: 17px;
  }

  .bruger-liste-panel-hjaelp {
    width: 100%;
    margin-left: 22px;
  }

  .bruger-liste-sektion {
    padding: 0 10px 10px;
    gap: 12px;
  }

  /* --- BRUGERKORT --- */
  .bruger-kort {
    padding: 15px;           /* Lidt mindre indvendig luft i kortene */
    min-width: 0;
    overflow: hidden;
  }

  .bruger-kort-linje {
    gap: 15px;
    flex-direction: column;  /* Stabel elementerne lodret i stedet for vandret */
    align-items: flex-start; /* Venstrestil indholdet */
  }

  .bruger-felt-info,
  .bruger-felt-input,
  .bruger-felt-checkboxes {
    width: 100%;             /* Lad felterne strække sig over hele kortets bredde */
    min-width: 0;
  }

  .bruger-input-pwd,
  .bruger-select-felt {
    padding: 12px;           /* Gør input- og select-felter nemmere at ramme på farten */
    font-size: 16px;         /* Sikrer god læsbarhed og forhindrer auto-zoom */
  }

  .bruger-felt-dropdown {
    width: 100%;             /* Lad dropdowns fylde hele bredden på mobilen */
  }

  /* --- CHECKBOXES --- */
  .bruger-checkbox-ramme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px 14px;
    padding: 8px 0;          /* Mere højde til trykfladen */
    width: 100%;
  }

  .bruger-checkbox-ramme label {
    font-size: 16px;         /* Større tekst ved siden af tjekboksen */
    padding: 5px 0;          /* Gør hele labelen nemmere at ramme */
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .bruger-vagt-checkboxes {
    max-width: none;
  }

  .bruger-vagt-checkboxes label {
    min-width: 0;
  }

  /* --- KNAPPER OG HANDLINGER --- */
  .bruger-linje-handlinger {
    flex-direction: column;  /* Stabel tjekbokse og knapper lodret */
    align-items: stretch;    /* Lad knapperne strække sig helt ud */
    gap: 15px;
  }

  .bruger-felt-knapper {
    flex-direction: column;  /* Læg Gem og Slet under hinanden */
    align-items: stretch;    /* Lad knapperne fylde 100% i bredden */
    width: 100%;
    gap: 10px;
  }

  .bruger-btn-gem,
  .bruger-btn-slet {
    width: 100%;             /* Knapperne fylder hele kortets bredde */
    padding: 14px;           /* Stor, sikker trykflade til touch-skærm */
    font-size: 16px;         /* Tydeligere tekst */
    text-align: center;
    margin-top: 0;           /* Nulstil computerspacing så de flugter perfekt */
  }
}


/* Source: css/responsive/opgaveliste-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .opgaveliste-container {
    padding: 15px 10px;      /* Maksimer pladsen på skærmen */
  }

  .opgaveliste-overskrift {
    font-size: 20px;         /* Juster overskriften til mindre skærme */
  }

  /* --- OPRET NY OPGAVE --- */
  .opgaveliste-opret-form {
    flex-direction: column;  /* Stabel inputfelt og opret-knap lodret */
    align-items: stretch;
    gap: 12px;
  }

  /* Desktop-vælgeren har en flex-bredde. På en lodret formular må den ikke
     blive tolket som en stor højde og skabe et tomt felt mellem elementerne. */
  .opgaveliste-vagtvaelger {
    flex: none;
    width: 100%;
  }

  .opgaveliste-input-felt {
    width: 100%;
    padding: 14px 12px;      /* Gør inputfeltet højere og nemmere at trykke i */
    font-size: 16px;         /* Forhindrer auto-zoom på mobiler */
  }

  .opgaveliste-btn-opret {
    width: 100%;             /* Lad knappen fylde hele bredden */
    padding: 14px;           /* Stor, solid trykflade */
    font-size: 16px;
    text-align: center;
  }

  /* --- OPGAVEKORT --- */
  .opgaveliste-kort {
    flex-direction: column;  /* Stabel tekst og handlinger lodret */
    align-items: stretch;    /* Lad indholdet strække sig fuldt ud */
    gap: 15px;               /* Luft mellem opgavetekst og knapper */
    padding: 15px;
  }

  .opgaveliste-tekst-sektion {
    margin-right: 0;         /* Fjern computerspacing i siden */
    width: 100%;
  }

  .opgaveliste-kort-titel {
    font-size: 16px;         /* Bevar en god, læsbar tekststørrelse */
    line-height: 1.4;
  }

  /* --- INLINE FORMULAR (NÃ…R DER REDIGERES) --- */
  .opgaveliste-inline-form {
    flex-direction: column;  /* Stabel inputfeltet over Gem-knappen under redigering */
    align-items: stretch;
    gap: 12px;
  }

  .opgaveliste-inline-input {
    width: 100%;
    padding: 12px;           /* Gør redigeringsfeltet touch-venligt */
    font-size: 16px;
  }

  /* --- KNAPPER OG HANDLINGER --- */
  .opgaveliste-knap-gruppe {
    width: 100%;
    gap: 10px;               /* God luft mellem knapperne, så man ikke trykker forkert */
  }

  /* Gør begge knapper store og ligeværdige på touch-skærmen */
  .opgaveliste-btn-gem,
  .opgaveliste-btn-complete {
    flex: 1;                 /* Lad dem dele pladsen 50/50 ved siden af hinanden */
    padding: 14px 10px;      /* Kraftig højde, perfekt til fingre */
    font-size: 15px;         /* Tydelig skriftstørrelse */
  }

  /* Hvis kortet er redigeret og der kun er én knap (f.eks. Gem), fylder den 100% */
  .opgaveliste-inline-form .opgaveliste-btn-gem {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  .opgaveliste-status-sektion {
    justify-content: center; /* Centrer "Udført" status-teksten på mobilen */
    padding-top: 5px;
  }
}

/* Tablet i landskab: chaufførerne skal kunne få et hurtigt overblik uden at
   kortene bliver så høje som på en telefon. Knapperne bevarer mindst 40 px
   højde, så de stadig er nemme at ramme, når køretøjet holder stille. */
@media screen and (min-width: 701px) and (max-width: 1200px) and (orientation: landscape) {
  .opgaveliste-container { padding: 8px 10px; }

  .opgaveliste-header {
    margin-bottom: 7px;
    padding-bottom: 6px;
  }

  .opgaveliste-overskrift { font-size: 19px; }

  .opgaveliste-opret-sektion {
    margin-bottom: 8px;
    padding: 8px;
  }

  .opgaveliste-opret-form {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 7px;
  }

  .opgaveliste-vagtvaelger { flex: 0 1 150px; width: auto; }
  .opgaveliste-vagt-label { display: none; }

  .opgaveliste-input-felt {
    padding: 8px 10px;
    font-size: 14px;
  }

  .opgaveliste-btn-opret {
    padding: 10px 13px;
    font-size: 14px;
    width: auto;
  }

  .opgaveliste-opret-hjaelp {
    display: none;
  }

  .opgaveliste-sektion { gap: 6px; }
  .opgaveliste-vagt-liste { margin-bottom: 8px; }

  .opgaveliste-vagt-overskrift {
    font-size: 14px;
    margin-bottom: 4px;
    padding: 6px 9px;
  }

  .opgaveliste-kort {
    align-items: center;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px;
  }

  .opgaveliste-tekst-sektion { margin-right: 0; }

  .opgaveliste-inline-form {
    align-items: center;
    flex-direction: row;
    gap: 6px;
  }

  .opgaveliste-inline-input {
    min-height: 40px;
    padding: 7px 9px;
    font-size: 14px;
  }

  .opgaveliste-knap-gruppe {
    flex: 0 0 auto;
    gap: 6px;
    width: auto;
  }

  .opgaveliste-btn-gem,
  .opgaveliste-btn-complete,
  .opgaveliste-inline-form .opgaveliste-btn-gem {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 9px;
    width: auto;
    font-size: 13px;
  }

  .opgaveliste-tidspunkt {
    margin-top: 2px;
    font-size: 9px;
  }

  .opgaveliste-listepanel { padding: 8px; }
  .opgaveliste-fane { padding: 7px 9px; }
  .opgaveliste-fane-forhaandsvisning { display: none; }
}

/* Små telefoner: behold funktionerne, men gør opgavelisten tættere og roligere.
   Tablet-layoutet ovenfor er med vilje uændret. */
@media screen and (max-width: 560px) {
  .opgaveliste-container {
    padding: 10px 8px;
  }

  .opgaveliste-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .opgaveliste-overskrift {
    font-size: 18px;
    margin: 0;
  }

  .opgaveliste-opret-sektion {
    padding: 10px;
    margin-bottom: 8px;
  }

  .opgaveliste-opret-form {
    gap: 8px;
  }

  .opgaveliste-input-felt {
    padding: 11px 10px;
  }

  .opgaveliste-btn-opret {
    padding: 11px;
    font-size: 15px;
  }

  .opgaveliste-opret-hjaelp {
    font-size: 12px;
  }

  .opgaveliste-sektion {
    gap: 8px;
  }

  .opgaveliste-faner {
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 0;
  }

  .opgaveliste-fane {
    padding: 7px 10px;
    font-size: 13px;
  }

  .opgaveliste-vagt-liste {
    margin-bottom: 14px;
  }

  .opgaveliste-vagt-overskrift {
    padding: 7px 9px;
    margin-bottom: 6px;
    font-size: 14px;
  }

  .opgaveliste-kort {
    gap: 8px;
    padding: 9px 10px;
    border-left-width: 3px;
    border-radius: 7px;
  }

  .opgaveliste-kort-titel {
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
  }

  .opgaveliste-inline-form {
    gap: 7px;
  }

  .opgaveliste-inline-input {
    padding: 9px 10px;
    font-size: 16px;
  }

  .opgaveliste-knap-gruppe {
    gap: 7px;
  }

  .opgaveliste-btn-gem,
  .opgaveliste-btn-complete,
  .opgaveliste-inline-form .opgaveliste-btn-gem {
    min-height: 40px;
    padding: 9px 8px;
    font-size: 14px;
  }

  .opgaveliste-status-sektion {
    padding-top: 0;
  }

  .opgaveliste-tom-besked {
    margin: 3px 0;
    font-size: 13px;
  }
}

/* Meget smalle telefoner: samme kortdesign, blot endnu mere kompakt. */
@media screen and (max-width: 480px) {
  .opgaveliste-container {
    padding: 7px 6px;
  }

  .opgaveliste-header {
    margin-bottom: 7px;
    padding-bottom: 6px;
  }

  .opgaveliste-overskrift {
    font-size: 17px;
  }

  .opgaveliste-opret-sektion {
    padding: 8px;
    margin-bottom: 6px;
  }

  .opgaveliste-opret-form {
    gap: 6px;
  }

  .opgaveliste-input-felt,
  .opgaveliste-inline-input {
    padding: 8px 9px;
  }

  .opgaveliste-btn-opret {
    padding: 9px;
    font-size: 14px;
  }

  .opgaveliste-fane {
    padding: 6px 9px;
    font-size: 12px;
  }

  .opgaveliste-vagt-liste {
    margin-bottom: 10px;
  }

  .opgaveliste-vagt-overskrift {
    padding: 6px 8px;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .opgaveliste-kort {
    gap: 5px;
    padding: 7px 8px;
    border-left-width: 3px;
  }

  .opgaveliste-kort-titel {
    font-size: 14px;
    line-height: 1.25;
  }

  .opgaveliste-inline-form,
  .opgaveliste-knap-gruppe {
    gap: 5px;
  }

  .opgaveliste-btn-gem,
  .opgaveliste-btn-complete,
  .opgaveliste-inline-form .opgaveliste-btn-gem {
    min-height: 34px;
    width: auto;
    padding: 7px;
    font-size: 12px;
  }

  .opgaveliste-tom-besked {
    font-size: 12px;
  }
}

/* PÃ¥ rene touch-enheder er arbejdsfladen vigtigere end overskrifter.
   Pc-visningen beholder altid topbjælken og sidens titel. */
@media (hover: none) and (pointer: coarse) {
  .site-header--opgaveliste,
  .opgaveliste-header {
    display: none;
  }

  .opgaveliste-container { padding-top: 7px; }

  .opgaveliste-arbejdsomraade {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 7px;
    width: 100%;
  }

  .opgaveliste-listepanel,
  .opgaveliste-indholdspanel {
    min-width: 0;
  }

  .opgaveliste-listepanel { overflow: hidden; }
  .opgaveliste-fane-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .opgaveliste-opret-sektion {
    background: transparent;
    border: 0;
    margin-bottom: 5px;
    padding: 3px 0;
  }

  .opgaveliste-opret-form {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .opgaveliste-vagtvaelger {
    flex: 0 1 118px;
    width: auto;
  }

  .opgaveliste-vagt-label,
  .opgaveliste-opret-hjaelp { display: none; }

  .opgaveliste-input-felt {
    min-width: 0;
    padding: 7px 8px;
    font-size: 14px;
  }

  .opgaveliste-btn-opret {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 13px;
    width: auto;
  }

  .opgaveliste-listepanel { padding: 6px; }
  .opgaveliste-listepanel h3 { display: none; }
  .opgaveliste-fane { padding: 6px 8px; font-size: 13px; }
}

/* Standard på tablet/mobil: behold top og den oprindelige opret-rude. */
@media (hover: none) and (pointer: coarse) {
  html[data-task-density="standard"] .site-header--opgaveliste,
  html[data-task-density="standard"] .opgaveliste-header { display: block; }
  html[data-task-density="standard"] .opgaveliste-container { padding-top: 15px; }
  html[data-task-density="standard"] .opgaveliste-arbejdsomraade { grid-template-columns: minmax(190px, 270px) minmax(0, 1fr); gap: 18px; }
  html[data-task-density="standard"] .opgaveliste-listepanel { overflow: visible; padding: 13px; }
  html[data-task-density="standard"] .opgaveliste-listepanel h3 { display: block; }
  html[data-task-density="standard"] .opgaveliste-opret-sektion { background: var(--input-bg); border: 1px solid var(--border-color); margin-bottom: 12px; padding: 15px; }
  html[data-task-density="standard"] .opgaveliste-opret-form { align-items: stretch; flex-direction: column; flex-wrap: wrap; gap: 12px; }
  html[data-task-density="standard"] .opgaveliste-vagtvaelger { flex: none; width: 100%; }
  html[data-task-density="standard"] .opgaveliste-vagt-label,
  html[data-task-density="standard"] .opgaveliste-opret-hjaelp { display: block; }
  html[data-task-density="standard"] .opgaveliste-input-felt { padding: 14px 12px; font-size: 16px; }
  html[data-task-density="standard"] .opgaveliste-btn-opret { padding: 14px; font-size: 16px; width: 100%; }
}

/* Standard er luftigt på tablet, men må aldrig blive presset i to kolonner
   på en telefon i portræt. */
@media screen and (max-width: 700px),
       (hover: none) and (pointer: coarse) and (max-aspect-ratio: 2/3) {
  html[data-task-density="standard"] .opgaveliste-arbejdsomraade {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (hover: none) and (pointer: coarse) {
  html[data-task-density="keep"] .site-header--opgaveliste,
  html[data-task-density="keep"] .opgaveliste-header { display: none; }
  html[data-task-density="keep"] .opgaveliste-arbejdsomraade { grid-template-columns: 145px minmax(0, 1fr); gap: 8px; }
  html[data-task-density="keep"] .opgaveliste-listepanel { display: block; overflow: visible; padding: 0; }
  html[data-task-density="keep"] .opgaveliste-faner { flex-direction: column; overflow: visible; }
  html[data-task-density="keep"] .opgaveliste-fane { min-width: 0; padding: 8px; width: 100%; }
  html[data-task-density="keep"] .opgaveliste-fane-forhaandsvisning { display: grid; font-size: 10px; }
  html[data-task-density="keep"] .opgaveliste-opret-sektion { background: transparent; border: 0; margin-bottom: 5px; padding: 3px 0; }
  html[data-task-density="keep"] .opgaveliste-opret-form { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 5px; }
  html[data-task-density="keep"] .opgaveliste-vagtvaelger { flex: 0 1 88px; width: auto; }
  html[data-task-density="keep"] .opgaveliste-vagt-label,
  html[data-task-density="keep"] .opgaveliste-opret-hjaelp { display: none; }
  html[data-task-density="keep"] .opgaveliste-input-felt { min-width: 0; padding: 7px 8px; font-size: 14px; }
  html[data-task-density="keep"] .opgaveliste-btn-opret { flex: 0 0 auto; font-size: 0; height: 32px; padding: 0; width: 32px; }
  html[data-task-density="keep"] .opgaveliste-btn-opret::after { content: '+'; font-size: 22px; line-height: 1; }
  html[data-task-density="keep"] .opgaveliste-kort { align-items: flex-start; flex-direction: row; gap: 7px; padding: 5px 2px; }
  html[data-task-density="keep"] .opgaveliste-tekst-sektion { margin-right: 0; min-width: 0; }
  html[data-task-density="keep"] .opgaveliste-inline-form { align-items: center; flex-direction: row; gap: 7px; }
  html[data-task-density="keep"] .opgaveliste-inline-form .opgaveliste-knap-gruppe,
  html[data-task-density="keep"] .opgaveliste-status-sektion { flex: 0 0 22px; order: -1; padding: 0; width: 22px; }
  html[data-task-density="keep"] .opgaveliste-btn-complete { flex: 0 0 22px; height: 22px; min-height: 22px; width: 22px; }
}

/* Standard og Kompakt skal aldrig arve desktop-opdelingen på en touch-skærm.
   Listevalget ligger derfor øverst, og opgaverne får altid hele bredden nedenunder.
   Keep har sin egen, bevidste to-kolonneopsætning ovenfor. */
@media (hover: none) and (pointer: coarse) {
  html[data-task-density="standard"] .opgaveliste-arbejdsomraade,
  html[data-task-density="compact"] .opgaveliste-arbejdsomraade {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html[data-task-density="standard"] .opgaveliste-listepanel,
  html[data-task-density="compact"] .opgaveliste-listepanel {
    overflow: visible;
  }

  html[data-task-density="standard"] .opgaveliste-faner,
  html[data-task-density="compact"] .opgaveliste-faner {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1px 0;
  }

  html[data-task-density="standard"] .opgaveliste-fane,
  html[data-task-density="compact"] .opgaveliste-fane {
    flex: 0 0 auto;
    min-width: max-content;
    width: auto;
    touch-action: pan-x;
  }

  html[data-task-density="standard"] .opgaveliste-fane-forhaandsvisning,
  html[data-task-density="compact"] .opgaveliste-fane-forhaandsvisning {
    display: none;
  }
}


/* Source: css/responsive/kontrolpanel-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .kontrolpanel-container {
    padding: 15px 10px;      /* Tilpas luften til mindre skærme */
  }

  .kontrolpanel-overskrift {
    font-size: 20px;         /* Juster overskriften */
  }

  /* Gør status- og fejlbeskeder mere tydelige og touch-venlige */
  .kontrolpanel-alert {
    padding: 14px;
    font-size: 15px;
    line-height: 1.4;
  }

  /* --- TABEL OPTIMERING --- */
  .kontrolpanel-scroll {
    -webkit-overflow-scrolling: touch; /* Sørger for at scroll kører dejligt blødt på iPhones/iPads */
    margin-bottom: 15px;
  }

  .kontrolpanel-tabel th,
  .kontrolpanel-tabel td {
    padding: 14px 10px;      /* Mere højde på rækkerne, så de er nemmere at klikke på */
    font-size: 15px;         /* Lidt større tekst til nemmere læsning under kørsel/transport */
    white-space: nowrap;     /* Forhindrer at ordene knækker midt over i de smalle kolonner */
  }

  /* --- GODKEND-KNAP --- */
  .kontrolpanel-btn-approve {
    padding: 12px 18px;      /* Markant større trykflade, så den er sikker at ramme på en tablet */
    font-size: 14px;         /* Gør teksten mere tydelig */
    display: inline-block;
  }
}

/* Source: css/responsive/logfiler-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .logfiler-container {
    padding: 15px 10px;      /* Tilpas luften til mindre skærme */
  }

  .logfiler-overskrift {
    font-size: 20px;         /* Lidt mindre overskrift på mobil/tablet */
  }

  .logfiler-super-banner {
    padding: 12px;           /* Lidt mere luft i banneret */
    font-size: 14px;
    line-height: 1.4;
  }

  /* --- TABEL OPTIMERING --- */
  .logfiler-scroll {
    -webkit-overflow-scrolling: touch; /* Gør scroll flydende på iOS-enheder */
    margin-bottom: 15px;
  }

  .logfiler-tabel th,
  .logfiler-tabel td {
    padding: 14px 10px;      /* Højere rækker, så de er nemmere at aflæse og trykke på */
    font-size: 15px;         /* Gør teksten mere læsbar */
    white-space: nowrap;     /* Forhindrer ordene i at knække akavet */
  }

  .logfiler-tag {
    padding: 5px 10px;       /* Gør de små badges en smule større og tydeligere */
    font-size: 13px;
  }

  /* --- KNAPPER --- */
  /* Gør download- og sletknapperne væsentligt større, så de er sikre at betjene */
  .logfiler-btn-download,
  .logfiler-btn-delete {
    padding: 10px 16px;      /* Meget bedre højde til touch-fingre */
    font-size: 14px;         /* Tydeligere tekst */
    display: inline-block;
    vertical-align: middle;
  }

  /* Giv dem en lille smule afstand, hvis de ligger i samme celle */
  .logfiler-btn-download {
    margin-right: 8px;
  }
}

/* Source: css/responsive/login-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .login-main {
    padding: 20px 10px;      /* Mindre luft omkring boksen på farten */
  }

  .login-box {
    padding: 20px;           /* Lidt mindre indvendig luft for at spare plads */
  }

  .login-titel {
    font-size: 22px;         /* Juster overskriften en smule */
    margin-bottom: 15px;
  }

  /* --- INPUT-FELTER OG BESKEDER --- */
  .login-felt {
    padding: 14px 12px;      /* Højere felter, der er nemmere at trykke i */
    font-size: 16px;         /* Tvinger mobilen til IKKE at auto-zoome ved klik */
  }

  .login-fejlbesked {
    padding: 12px;
    font-size: 15px;         /* Tydeligere fejlbesked */
  }

  /* --- HUSK MIG & KNAP --- */
  .login-husk-mig {
    padding: 8px 0;          /* Mere trykhøjde omkring tjekboksen */
    font-size: 16px;         /* Større tekst ved tjekboksen */
  }

  .login-husk-mig input[type="checkbox"] {
    width: 18px;             /* Gør selve tjekboksen en smule større på touch */
    height: 18px;
  }

  .login-knap {
    padding: 14px;           /* Stor, solid og sikker log-ind knap */
    font-size: 17px;
  }

  /* --- LINKS I BUNDEN --- */
  .login-link-sektion {
    font-size: 15px;         /* Større tekst */
    padding: 10px 0;         /* Mere luft, så linket er nemt at ramme */
  }
}

/* Source: css/responsive/content-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .content-main {
    padding: 15px 10px;    /* Mindre luft i siderne (10px) for at give maksimal plads på touch-skærmen */
    border-radius: 0;      /* Sikrer at den flugter pænt med skærmkanten */
  }

}

/* Source: css/responsive/opret_manuelt-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .manuel-container {
    padding: 15px 10px;      /* Tilpas luften til mindre skærme */
  }

  .manuel-overskrift {
    font-size: 20px;         /* Lidt mindre overskrift på mobil/tablet */
  }

  /* --- FORMULAR ELEMENTER --- */
  .manuel-formular {
    max-width: 100%;         /* Lad formularen strække sig fuldt ud på mobilen */
  }

  .manuel-label {
    font-size: 15px;         /* Tydeligere etiketter */
  }

  .manuel-input,
  .manuel-select {
    padding: 14px 12px;      /* Højere felter med god plads til touch */
    font-size: 16px;         /* Sikrer god læsbarhed og forhindrer automatisk browser-zoom */
  }

  /* --- OPRET-KNAP --- */
  .manuel-knap {
    padding: 14px;           /* Gør knappen stor, solid og sikker at trykke på */
    font-size: 16px;         /* Tydeligere tekst på knappen */
    margin-top: 5px;         /* Juster computerspacing */
    width: 100%;             /* Sørg for at den fylder 100% af bunden af formularen */
  }
}

/* Source: css/responsive/register-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .register-main {
    padding: 20px 10px;      /* Mindre luft omkring boksen på farten */
  }

  .register-box {
    padding: 20px;           /* Spar på pladsen med en smule mindre indvendig luft */
  }

  .register-titel {
    font-size: 22px;         /* Juster overskriften */
    margin-bottom: 15px;
  }

  /* --- INPUT-FELTER OG BESKEDER --- */
  .register-felt {
    padding: 14px 12px;      /* Højere og mere touch-venlige felter */
    font-size: 16px;         /* Forhindrer at mobilen auto-zoomer ved klik */
  }

  .register-fejlbesked,
  .register-succesbesked {
    padding: 12px;
    font-size: 15px;         /* Gør status- og fejlmeddelelser tydeligere */
  }

  /* --- OPRET-KNAP --- */
  .register-knap {
    padding: 14px;           /* Stor, solid og sikker trykflade */
    font-size: 17px;
  }

  /* --- LINKS I BUNDEN --- */
  .register-link-sektion {
    font-size: 15px;         /* Større tekst til links */
    padding: 10px 0;         /* Gør det nemt at ramme linket tilbage til login */
  }
}

/* Source: css/responsive/tilbagemelding-mobil.css */
/* Gælder for alle skærme under 1200px (Tablets og mindre mobiler) */
@media screen and (max-width: 1200px) {

  .excel-main-container {
    padding: 15px 10px;
  }

  .excel-header-area {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .excel-top-handlinger {
    justify-content: space-between;
  }

  .excel-dato-form input[type="date"] {
    padding: 12px;
    font-size: 16px;
  }

  .excel-scroll-ramme {
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    margin-bottom: 15px;
  }

  .excel-ark-tabel th {
    height: 35px;
    font-size: 14px;
    font-weight: bold;
  }

.excel-ark-tabel td {
    height: 48px;
  }

  .excel-ark-tabel input {
    font-size: 16px;
  }

  .cell-bruger-input input {
    background-color: #ffffff !important;
    font-weight: bold;
    color: var(--dark-blue);
  }

  /* Gør tekstjusteringen på Noter pæn på mobilen også */
  .cell-noter input {
    padding-left: 8px;
  }

  .excel-prio-tabel {
    width: 100%;
    font-size: 13px;
  }

  .excel-prio-tabel td {
    padding: 12px 8px;
  }
}

/* Source: css/responsive/tilbakning-skabelon-mobil.css */
@media (max-width: 700px) {
    .template-builder { padding: 12px; }
    .template-builder__card { padding: 16px; }
    .template-toolbar { gap: 6px; }
    .template-toolbar button, .template-toolbar label { font-size: 13px; }
    .template-toolbar__dimensions { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .template-toolbar__dimensions label, .template-toolbar__dimensions button { justify-content: center; }
    /* Arket skal altid vise alle rækker. Kun vandret scroll er nødvendig. */
    .template-grid-wrap { max-height: none; }
    .template-save-bar { justify-content: stretch; }
    .template-save-btn { width: 100%; }
    .template-action-row { justify-content: stretch; }
    .template-action-row .template-archive-form { width: 100%; }
    .help-page { padding: 12px; }
    .help-page__card { padding: 16px; }
    .help-tool-table { min-width: 480px; }
}