/* Digital JobHelp Forløbsplanlægger — fælles styling for alle versioner. */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --brand-dark: #003D4E;
    --brand-darker: #002834;
    --brand-light: #79AAB3;
    --brand-lighter: #B8CDD2;
    --brand-bg: #EEF4F5;
    /* Katalog-gridet */
    --kort-min: 220px;
    --kort-gap: 18px;
    --kort-maks-kolonner: 6;
    --bg: #F4F6F7;
    --surface: #ffffff;
    --border: #DDE5E7;
    --text: #1a2530;
    --text-muted: #6b7a82;
    --accent: #003D4E;
    --accent-dark: #002834;
    --success: #003D4E;
    --shadow: 0 1px 3px rgba(0, 61, 78, 0.08), 0 1px 2px rgba(0, 61, 78, 0.04);
    --shadow-lg: 0 10px 30px rgba(0, 61, 78, 0.15);
    --radius: 6px;
  }
  html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
  }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input, textarea { font: inherit; color: inherit; }

  /* Top bar */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .topbar-inner {
    max-width: 1720px; margin: 0 auto;
    padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
  }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
  .brand-divider {
    width: 1px; height: 24px; background: var(--border); flex-shrink: 0;
  }
  .brand-tagline {
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .brand-tagline small {
    display: block;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
    margin-top: 2px;
  }
  .version-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
  }
  .version-badge[hidden] { display: none; }
  .topbar-actions { display: flex; align-items: center; gap: 14px; }
  .count-pill {
    background: var(--brand-bg); padding: 6px 12px; border-radius: 100px;
    font-size: 13px; color: var(--brand-dark);
  }
  .count-pill strong { color: var(--brand-darker); }
  .btn {
    padding: 10px 18px; border-radius: var(--radius);
    font-weight: 500; font-size: 14px;
    transition: background-color 0.15s, transform 0.05s, color 0.15s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--brand-dark); color: white; }
  .btn-primary:hover { background: var(--brand-darker); }
  .btn-primary:disabled { background: #c8d0d3; color: #fff; cursor: not-allowed; }
  .btn-secondary {
    background: var(--brand-bg); color: var(--brand-dark);
    border: 1px solid var(--brand-lighter);
  }
  .btn-secondary:hover { background: var(--brand-lighter); }
  .btn-ghost { color: var(--text-muted); padding: 8px 12px; }
  .btn-ghost:hover { color: var(--brand-dark); background: var(--brand-bg); }
  .btn-reset {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 13px;
  }
  .btn-reset:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }
  .btn-reset svg { width: 14px; height: 14px; }

  /* Notits når et forløb er genskabt fra sessionStorage */
  /* Båndet har samme ydre geometri som main, så notitsen flugter med kortene */
  .genskabt-baand { max-width: 1720px; margin: 0 auto; padding: 24px 32px 0; }
  .genskabt-baand.hidden { display: none; }
  .genskabt-notits {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-lighter);
    border-left: 3px solid var(--brand-dark);
    border-radius: 6px;
    color: var(--brand-darker);
    font-size: 13px;
    line-height: 1.45;
  }
  .genskabt-notits svg { width: 17px; height: 17px; flex: none; color: var(--brand-dark); }
  .genskabt-notits span { flex: 1; }
  .genskabt-notits button {
    flex: none;
    border: 0; background: none;
    color: var(--text-muted);
    font-size: 20px; line-height: 1;
    padding: 0 4px; cursor: pointer;
    border-radius: 4px;
  }
  .genskabt-notits button:hover { background: var(--brand-lighter); color: var(--brand-darker); }

  /* Main layout */
  /* Bred nok til 6 kort i bredden på en stor skærm (kræver ca. 1475 px
     vindue). Under det falder gridet selv ned i kolonneantal. */
  main { max-width: 1720px; margin: 0 auto; padding: 32px; }

  /* Section */
  .section { margin-bottom: 40px; }
  .section-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 14px;
    font-weight: 700; font-size: 16px;
    color: var(--brand-darker);
  }
  .section-header::after {
    content: "›"; color: var(--brand-light); font-size: 18px; line-height: 1;
  }
  .section-sub { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 4px; }

  /* Grid */
  .grid {
    display: grid;
    gap: var(--kort-gap);
    /* Højst 6 kort i bredden — også på ultrabrede skærme, hvor flere ville
       gøre thumbnails og titler for små til at genkende modulerne på.
       Gulvet på 220 px overtager på smallere skærme, så kolonneantallet
       falder af sig selv til 5, 4, 3 ... */
    grid-template-columns: repeat(auto-fill, minmax(
      max(var(--kort-min),
          (100% - (var(--kort-maks-kolonner) - 1) * var(--kort-gap)) / var(--kort-maks-kolonner)),
      1fr));
  }

  /* Card */
  .card {
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
  }
  .card:hover { transform: translateY(-2px); }
  .card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #2a3a40;
    box-shadow: var(--shadow);
  }
  .card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .card-badge {
    position: absolute; top: 10px; right: 10px;
    background: var(--brand-dark); color: white;
    font-size: 11px; font-weight: 600;
    padding: 4px 9px; border-radius: 100px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    display: flex; align-items: center; gap: 4px;
  }
  .card-badge svg { width: 12px; height: 12px; }
  .card.selected .card-thumb {
    outline: 3px solid var(--brand-dark);
    outline-offset: 2px;
  }
  .card-label {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text);
  }

  /* Modal */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    animation: fadeIn 0.15s ease;
  }
  .modal-backdrop.open { display: flex; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .modal {
    background: white; border-radius: 10px;
    width: 100%; max-width: 600px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.2s ease;
  }
  .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
  }
  .modal-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--brand-darker); }
  .modal-subtitle { font-size: 13px; color: var(--text-muted); }
  .modal-body { flex: 1; overflow-y: auto; padding: 8px 0; }

  /* Aftaletekst modal */
  #text-modal .modal { max-width: 660px; }
  .text-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 16px 24px;
    display: flex;
  }
  .text-modal-preview {
    width: 100%;
    min-height: 380px;
    max-height: 58vh;
    padding: 22px 26px;
    border: 1px solid var(--brand-lighter);
    border-radius: 8px;
    background: white;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.6;
    overflow-y: auto;
    user-select: text;
  }
  .text-modal-preview:focus {
    outline: none;
    border-color: var(--brand-lighter);
  }
  .text-modal-preview p {
    margin: 0 0 8px;
  }
  .text-modal-preview p strong {
    color: var(--brand-darker);
    font-size: 14px;
  }
  .text-modal-preview ul {
    margin: 0 0 14px 4px;
    padding-left: 22px;
    list-style: disc;
  }
  .text-modal-preview li {
    margin: 5px 0;
    padding-left: 2px;
  }
  .text-modal-preview li::marker {
    color: var(--brand-light);
  }
  .text-modal-preview a {
    color: var(--brand-dark);
    text-decoration: underline;
    font-weight: 600;
    text-underline-offset: 2px;
    margin-left: 4px;
    white-space: nowrap;
  }
  .text-modal-preview a:hover {
    color: var(--brand-darker);
    background: var(--brand-bg);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 1px;
  }
  .text-modal-preview .empty-state {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 60px 20px;
    margin: 0;
  }
  #text-modal-copy.copied {
    background: var(--brand-light);
  }
  #text-modal-copy.copied:hover {
    background: var(--brand-light);
  }
  .modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
  }
  .video-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color 0.1s;
  }
  .video-row:hover { background: #fafafa; }
  .video-row input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
  }
  .video-row-text { flex: 1; font-size: 14px; }
  .video-row-id { color: var(--text-muted); font-size: 12px; margin-right: 6px; }

  /* Review page */
  .review { max-width: 1000px; margin: 0 auto; padding: 32px; }
  .review-header { margin-bottom: 24px; }
  .review-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; color: var(--brand-darker); }
  .review-sub { color: var(--text-muted); }

  .form-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .form-field label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 6px;
  }
  .form-field input, .form-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border); border-radius: 5px;
    background: white;
    font-size: 14px;
  }
  .form-field input:focus, .form-field textarea:focus {
    outline: none; border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(121, 170, 179, 0.25);
  }

  .review-empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border); border-radius: 8px;
  }

  .video-item {
    /* Holder rækken fri af den klæbende topbar når tastatur-flytning
       scroller den ind i billedet. */
    scroll-margin-top: 88px;
    scroll-margin-bottom: 16px;
    display: grid;
    grid-template-columns: 26px 44px 130px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  /* Træk-håndtag — erstatter de tidligere op/ned-pile. */
  .drag-handle {
    width: 26px; height: 32px;
    display: grid; place-items: center;
    background: none;
    border: 0;
    border-radius: 5px;
    color: var(--text-muted);
    cursor: grab;
    touch-action: none;          /* så touch trækker i stedet for at scrolle */
    -webkit-tap-highlight-color: transparent;
  }
  .drag-handle svg { width: 18px; height: 18px; pointer-events: none; }
  .drag-handle:hover { background: var(--brand-bg); color: var(--brand-dark); }
  .drag-handle:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 1px;
    color: var(--brand-dark);
  }
  .video-item.dragging {
    opacity: 0.6;
    border-color: var(--brand-dark);
    box-shadow: 0 8px 22px rgba(0, 61, 78, 0.18);
    cursor: grabbing;
  }
  .video-item.dragging .drag-handle { cursor: grabbing; color: var(--brand-dark); }
  body.is-dragging { cursor: grabbing; user-select: none; }
  body.is-dragging .video-item-note { pointer-events: none; }
  .drag-placeholder {
    border: 2px dashed var(--brand-lighter);
    background: var(--brand-bg);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .review-hint {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 12px;
    padding: 9px 12px;
    background: var(--brand-bg);
    border: 1px solid var(--brand-lighter);
    border-radius: 6px;
    color: var(--brand-dark);
    font-size: 12.5px;
  }
  .review-hint svg { width: 15px; height: 15px; flex: none; }
  .video-number {
    width: 32px; height: 32px;
    background: var(--brand-dark); color: white;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
  }
  .video-num-tag {
    display: inline-block;
    background: var(--brand-bg);
    color: var(--brand-dark);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    vertical-align: middle;
    border: 1px solid var(--brand-lighter);
  }
  .video-item-thumb {
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: #333;
  }
  .video-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .video-item-info { min-width: 0; }
  .video-item-title { font-weight: 600; margin-bottom: 4px; }
  .video-item-cat { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
  .video-item-note {
    width: 100%; min-height: 60px;
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 5px;
    resize: vertical;
    font-size: 13px;
    background: #fafafa;
  }
  .video-item-actions {
    display: flex; flex-direction: column; gap: 4px;
  }
  .icon-btn {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 5px;
    color: var(--text-muted);
    transition: background-color 0.1s, color 0.1s;
  }
  .icon-btn:hover { background: #f0f0ed; color: var(--text); }
  .icon-btn:disabled { color: #ccc; cursor: not-allowed; }
  .icon-btn.danger:hover { color: #dc2626; background: #fef2f2; }
  .icon-btn svg { width: 16px; height: 16px; }

  /* Bulk actions */
  .bulk-actions {
    display: flex; gap: 8px; align-items: center;
    padding: 10px 24px;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .bulk-count { margin-left: auto; color: var(--text-muted); }
  .count-pill-flush { margin: 0; }
  .bulk-link {
    color: var(--brand-dark); font-weight: 500;
    background: none; padding: 4px 8px; border-radius: 4px;
  }
  .bulk-link:hover { background: var(--brand-bg); }

  /* Floating action button on catalog */
  .fab-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    padding: 14px 32px;
    z-index: 40;
    display: none;
    justify-content: space-between; align-items: center;
    transform: translateY(100%);
    transition: transform 0.2s;
  }
  .fab-bar.visible { display: flex; transform: translateY(0); }

  /* Hidden state */
  .hidden { display: none !important; }

  @media print {
    .topbar, .fab-bar { display: none !important; }
  }  /* Loading overlay shown during PDF generation */
  .pdf-loading {
    position: fixed;
    inset: 0;
    background: var(--brand-bg);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }
  .pdf-loading.active { display: flex; }
  .pdf-loading-spinner {
    width: 44px; height: 44px;
    border: 4px solid var(--brand-bg);
    border-top-color: var(--brand-dark);
    border-radius: 50%;
    animation: pdfspin 0.9s linear infinite;
  }
  @keyframes pdfspin { to { transform: rotate(360deg); } }
  .pdf-loading-text {
    color: var(--brand-darker);
    font-weight: 600;
    font-size: 15px;
  }
  .pdf-loading-sub {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 360px;
    text-align: center;
  }