/* Global styles for EDUfigure
   ────────────────────────────────────────────────────────────────────────
   Ét system, hentet fra Sans Science-paletten. Rammen skal træde tilbage,
   elevernes arbejde skal træde frem. Newsreader = menneskets stemme,
   DM Sans = systemets. Tre radier, én handlingsfarve. */

:root {
    /* Farver */
    --blaek: #0A0F3C;
    /* overskrifter og titler — brand-navy */
    --handling: #0B4F9E;
    /* den ene blå: alt hvad man kan klikke på */
    --handling-moerk: #093F7E;
    --varm: #D4763C;
    /* sparsomt: accenter og menneskelige øjeblikke */
    --cyan: #63DAD6;
    --papir: #FDFCFA;
    /* kort og flader — ikke rent hvidt */
    --grund: #F5F4F1;
    /* sidens bund — varmt neutral, ikke sandfarvet */
    --broed: #3E4356;
    --daemp: #6E7288;
    --streg: #E2DFD8;
    --streg-kraftig: #CFCBC2;

    /* Semantik — ikke accenter */
    --god: #16794A;
    --god-flade: #F0FAF4;
    --advar: #8A5A12;
    --advar-flade: #FEF6E7;
    --fejl: #A93226;
    --fejl-flade: #FDF1EF;

    /* Form */
    --r-kontrol: 8px;
    --r-kort: 14px;
    --r-pille: 999px;

    /* Skrift */
    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: clip; /* ikke hidden: hidden gør body til scroll-beholder og slår position:sticky fra (sidepanelet) */
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--sans);
    background-color: var(--grund);
    color: var(--broed);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: pan-y pinch-zoom;
    margin: 0;
    padding: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.geoseis-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
}

/* Header - GEOmapper style */
.header {
    background: linear-gradient(135deg, var(--handling) 0%, #357abd 50%, #2c5aa0 100%);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    color: white;
    padding: 25px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(74, 144, 226, 0.2);
    z-index: 1000;
}

.version-corner {
    position: absolute;
    top: 10px;
    left: 15px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    z-index: 100;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: shimmer 8s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 1;
    position: relative;
}

.globe-logo {
    font-size: 3.5em;
    line-height: 1;
    flex-shrink: 0;
}

.text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 4em;
}

.text-content h1 {
    font-size: 2.5em;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-content p {
    font-size: 1.1em;
    margin: 0;
    opacity: 0.9;
    font-weight: 300;
}

/* GEO Figure logo styling - matching GEOmapper */
.geo-text {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.app-text {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.2px;
    font-size: 0.8em;
}

.nav-buttons {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    z-index: 10000;
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 10001;
}

.dropdown-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.dropdown-toggle::after {
    content: '▼';
    margin-left: 8px;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.dropdown.active .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-content {
    position: fixed !important;
    top: 80px !important;
    right: 30px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    min-width: 220px !important;
    max-height: none !important;
    z-index: 10002 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.2s ease !important;
    display: block !important;
    pointer-events: none !important;
}

.dropdown.active .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    font-size: 14px;
    background: none;
    text-align: left;
    cursor: pointer;
    color: #333;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #f8f9fa;
}

/* Page navigation */
.page {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.nav-btn-primary {
    background: rgba(76, 175, 80, 0.9);
    border-color: rgba(76, 175, 80, 1);
    font-weight: 600;
}

.nav-btn-primary:hover {
    background: rgba(76, 175, 80, 1);
    border-color: rgba(76, 175, 80, 1);
}

.nav-btn-secondary {
    background: rgba(158, 158, 158, 0.9);
    border-color: rgba(158, 158, 158, 1);
}

.nav-btn-secondary:hover {
    background: rgba(158, 158, 158, 1);
    border-color: rgba(158, 158, 158, 1);
}

/* Main content */
.main-content {
    flex: 1;
    padding: 20px;
    background-color: #f5f5f5;
    min-height: calc(100vh - 64px);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Workspace sections */
.workspace-section {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.workspace-section h3 {
    margin-top: 0;
    color: var(--handling);
    border-bottom: 2px solid #e3f2fd;
    padding-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Workspace split layout - Grid with viewer */
.workspace-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    transition: grid-template-columns 0.3s ease;
}

.workspace-split.viewer-hidden {
    grid-template-columns: 1fr;
}

.workspace-split.viewer-hidden .workspace-right {
    display: none;
}

.workspace-left {
    min-width: 0;
    /* Prevent overflow */
    overflow: hidden;
}

.workspace-right {
    min-width: 0;
    /* Prevent overflow */
}

/* Form containers */
.form-container {
    background-color: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
    min-width: 120px;
}

.form-input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: #ffffff;
    min-width: 200px;
}

.form-input:focus {
    outline: none;
    border-color: var(--handling);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* Toggle Switch Styling */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 34px;
    transition: background 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked+.toggle-slider {
    background: #4CAF50;
}

.toggle-switch input[type="checkbox"]:checked+.toggle-slider::before {
    transform: translateX(24px);
}

.toggle-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.toggle-switch:hover .toggle-slider {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 8px rgba(76, 175, 80, 0.3);
}

/* Button styles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 17px;
    border: 1px solid var(--streg-kraftig);
    border-radius: var(--r-kontrol);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    background: var(--papir);
    color: var(--broed);
    margin: 4px;
}

.btn:hover:not(:disabled) {
    background: #fff;
    border-color: var(--handling);
    color: var(--handling);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f9fafb;
    color: #9ca3af;
}

.btn-primary {
    background: var(--handling);
    color: #fff;
    border-color: var(--handling);
    font-weight: 500;
}

.btn-primary:hover:not(:disabled) {
    background: var(--handling-moerk);
    border-color: var(--handling-moerk);
    color: #fff;
}

/* Den stille knap: til side for den primære, ikke i konkurrence med den */
.btn-secondary {
    background: transparent;
    color: var(--broed);
    border-color: var(--streg-kraftig);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--papir);
    border-color: var(--handling);
    color: var(--handling);
}

/* Sletning advarer med farve — ikke med fylde */
.btn-fare {
    background: transparent;
    color: var(--fejl);
    border-color: transparent;
}

.btn-fare:hover:not(:disabled) {
    background: var(--fejl-flade);
    border-color: var(--fejl);
    color: var(--fejl);
}

.btn-info {
    background: #06b6d4;
    color: white;
    border-color: #06b6d4;
}

.btn-info:hover:not(:disabled) {
    background: #0891b2;
    border-color: #0891b2;
    color: white;
}

.btn-warning {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

.btn-warning:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
    color: white;
}

/* Canvas container */
.canvas-container {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    max-height: 600px;
    padding: 10px;
}

.canvas-container img,
.main-display-image,
#display {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Grid container with transparency controls */
.grid-container {
    max-width: 100%;
    margin: 0 auto;
    border: 2px solid #333;
    border-radius: 10px;
    background: #f8f9fa;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-x: auto;

    /* Grid cell transparency controls - change these values to adjust all cells */
    --cell-bg-opacity: 0.4;
    /* Background transparency (0.0 = invisible, 1.0 = solid) */
    --cell-border-opacity: 0.3;
    /* Border transparency (0.0 = invisible, 1.0 = solid) */

    /* Lesson label transparency controls - change these values to adjust all labels */
    --label-bg-opacity: 0.5;
    /* Label background transparency (0.1 less transparent than cells) */
    --label-border-opacity: 0.4;
    /* Label border transparency (0.1 less transparent than cells) */
    --label-text-opacity: 0.8;
    /* Label text transparency */
}

/* Grid styles */
.lesson-labels {
    display: grid;
    /* grid-template-columns set dynamically by JavaScript */
    gap: 8px;
    margin-bottom: 10px;
    padding: 0;
}

/* Single group mode - center and enlarge the label */
.lesson-labels.single-group-mode {
    max-width: 800px;
    margin: 0 auto 20px auto;
}

.lesson-labels.single-group-mode .lesson-label {
    font-size: 18px;
    padding: 15px;
    text-align: center;
    font-weight: 700;
    border-width: 2px;
}

.lesson-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(25, 118, 210, var(--label-text-opacity));
    padding: 8px 4px;
    background: linear-gradient(135deg, rgba(227, 242, 253, var(--label-bg-opacity)) 0%, rgba(248, 249, 250, var(--label-bg-opacity)) 100%);
    border-radius: 6px;
    border: 2px solid rgba(187, 222, 251, var(--label-border-opacity));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 45px;
    justify-content: center;
}

.label-number {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.label-preview {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.3px;
    line-height: 1;
}

.upload-grid {
    display: grid;
    /* grid-template-columns set dynamically by JavaScript */
    gap: 8px;
    align-items: start;
}

/* Hver gruppe er sin egen søjle, der flyder uafhængigt af de andre */
.tf-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tf-skjult {
    display: none !important;
}

/* Single group mode - 2x3 layout for complete overview without scrolling */
.upload-grid.single-group-mode {
    max-width: 800px;
    margin: 0 auto;
    gap: 15px;
    /* 2 columns x 3 rows layout handled by JS */
}

.upload-grid.single-group-mode .grid-cell {
    /* Larger cells for better visibility */
    aspect-ratio: 1;
    min-height: 180px;
    max-height: 250px;
}

.grid-cell {
    /* Højden følger billedet i stedet for at være kvadratisk. Kvadratiske
       felter gjorde tavlen halvtom, selv når den var fuld. */
    min-height: 0;
    border: 1px solid var(--streg);
    background: var(--papir);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    border-radius: var(--r-kort);
    box-shadow: 0 1px 2px rgba(10, 15, 60, 0.05);
}

.grid-cell:hover {
    border-color: var(--streg-kraftig);
    box-shadow: 0 4px 14px rgba(10, 15, 60, 0.09);
}

.grid-cell:not(.has-image) {
    align-items: center;
    justify-content: center;
}

/* Billedbåndet: fast højde, hele figuren synlig */
.grid-cell.has-image>img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    background: var(--grund);
    display: block;
    flex: none;
}

/* Titlen står under figuren — den erstatter den kryptiske "N" */
.cell-tekst {
    padding: 9px 11px 10px;
    border-top: 1px solid var(--streg);
    background: var(--papir);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    cursor: text;
    flex: 1;
}

.cell-titel {
    font-family: var(--sans);
    font-size: 12.5px; /* 5/9-2026: mindre end søjlens overskrift (13 px) */
    font-weight: 600;
    line-height: 1.3;
    color: var(--blaek);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cell-titel.mangler {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 400;
    font-style: italic;
    color: var(--daemp);
}

.cell-af {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--daemp);
}

.cell-tekst:hover .cell-titel.mangler {
    color: var(--handling);
}


.grid-cell:hover {
    border-color: var(--handling);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.grid-cell.has-image {
    /* Keep column colors - don't override background */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.grid-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.grid-cell .delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grid-cell:hover .delete-btn {
    opacity: 1;
}

.grid-cell.has-image {
    cursor: context-menu;
}

.note-indicator {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: var(--handling);
    color: white;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.note-indicator:hover {
    background: #0056b3;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: white;
    border-radius: 15px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--handling) 0%, #357abd 50%, #2c5aa0 100%);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(74, 144, 226, 0.2);
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: shimmer 8s infinite;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.btn-close {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

.presentation-image,
.test-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.presentation-image img,
.test-image img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.presentation-info {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}

.presentation-note h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.presentation-note p {
    color: #666;
    line-height: 1.6;
    font-size: 1.1em;
}

.modal-footer {
    background: #f8f9fa;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e9ecef;
}

#slideCounter {
    font-weight: 600;
    color: #333;
    font-size: 1.1em;
}

.hidden {
    display: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .header {
        padding: 15px 20px;
    }

    .header-content {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .title-section {
        text-align: center;
    }

    .main-title {
        font-size: 1.8em;
    }

    .main-subtitle {
        font-size: 0.9em;
    }

    /* Force single column layout on mobile */
    .workspace-split {
        grid-template-columns: 1fr !important;
    }

    .workspace-split.viewer-hidden {
        grid-template-columns: 1fr !important;
    }

    /* Hide image viewer on mobile by default */
    .workspace-right {
        display: none !important;
    }

    .workspace-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    /* Navigation and buttons */
    .nav-buttons {
        position: static !important;
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .nav-btn {
        min-width: 80px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .dropdown-content {
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Toggle switch on mobile */
    .toggle-switch {
        display: none !important;
    }

    /* Form controls */
    .form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .form-label {
        min-width: auto;
    }

    .form-input,
    .form-select {
        min-width: 100%;
        width: 100%;
    }

    .main-content {
        padding: 12px 8px;
        overflow-x: hidden;
    }

    /* Grid adjustments */
    .grid-container {
        max-width: 100%;
        padding: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .upload-grid {
        gap: 5px;
        padding: 8px;
        min-width: min-content;
    }

    .grid-cell {
        min-height: 70px;
        min-width: 70px;
    }

    .lesson-labels {
        gap: 5px;
        min-width: min-content;
    }

    .lesson-label {
        font-size: 10px;
        padding: 6px 3px;
        min-height: 50px;
    }

    .label-number {
        font-size: 14px;
    }

    .label-preview {
        font-size: 8px;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .modal-body {
        padding: 15px;
    }

    .presentation-image,
    .test-image {
        padding: 15px;
    }

    .presentation-image img,
    .test-image img {
        max-height: 50vh;
    }

    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 10px 15px;
    }

    .nav-btn {
        min-width: 70px;
        padding: 5px 10px;
        font-size: 11px;
    }

    .main-title {
        font-size: 1.5em;
    }

    .main-subtitle {
        font-size: 11px;
    }

    .globe-logo {
        font-size: 1.5em;
    }

    .workspace-section {
        padding: 12px;
    }

    .workspace-section h3 {
        font-size: 1.1em;
    }

    .grid-cell {
        min-height: 60px;
        min-width: 60px;
    }

    .lesson-label {
        font-size: 9px;
        padding: 4px 2px;
        min-height: 45px;
    }

    .label-number {
        font-size: 13px;
    }

    .label-preview {
        font-size: 7px;
        letter-spacing: 0.2px;
    }

    .btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .modal-header h2 {
        font-size: 1.2em;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========== Cell Lock Overlay ========== */
.cell-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    z-index: 10;
    pointer-events: none;
    animation: lockPulse 2s ease-in-out infinite;
}

.cell-lock-overlay .lock-icon {
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.cell-lock-overlay .lock-user {
    font-size: 9px;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

@keyframes lockPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* ========== Toast Notifications ========== */
.gf-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.gf-toast {
    background: #1e293b;
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    animation: toastIn 0.3s ease-out;
    max-width: 340px;
}

.gf-toast.toast-warning {
    background: #92400e;
    border-left: 4px solid #f59e0b;
}

.gf-toast.toast-info {
    background: var(--handling);
    border-left: 4px solid #3b82f6;
}

.gf-toast.toast-out {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

/* ========== Cell Flash Animation (conflict highlight) ========== */
.cell-flash {
    animation: cellFlash 0.6s ease-out 2;
}

@keyframes cellFlash {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ========== Dynamic Row Controls ========== */
.grid-row-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
}

.row-control-btn {
    padding: 6px 16px;
    border: 1px dashed #ccc;
    background: #fafafa;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #666;
    transition: all 0.2s ease;
}

.row-control-btn:hover {
    border-color: #999;
    background: #f0f0f0;
    color: #333;
}

.row-add-btn:hover {
    border-color: #4ade80;
    background: #f0fdf4;
    color: #16a34a;
}

.row-remove-btn:hover {
    border-color: #f87171;
    background: #fef2f2;
    color: #dc2626;
}
/* ═══════════ v1.6.0 design-polish ═══════════ */

/* Grøn primær-handling (Aflever) — var udefineret før */
.btn-success {
    background: #059669;
    color: #fff;
    border-color: #059669;
    font-weight: 600;
}

.btn-success:hover:not(:disabled) {
    background: #047857;
    border-color: #047857;
}

/* Tomme celler inviterer med et plus */
.grid-cell:not(.has-image)::after {
    content: "+";
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    color: #c9d2dd;
    pointer-events: none;
}

.grid-cell:not(.has-image):hover::after {
    color: #7e96ad;
}

/* Mobil: header-knapper under logoet i stedet for ovenpå */
@media (max-width: 768px) {
    .header-actions {
        position: static !important;
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 8px 10px 2px;
    }

    .version-corner {
        display: none;
    }

    .text-content h1 {
        font-size: 1.7rem !important;
    }
}

/* ═══════════ v1.7.0: Vendespil på elevtavlen ═══════════ */
.grid-cell .cell-flipback {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 5;
}

.grid-cell.flipped .cell-flipback {
    display: flex;
}

/* I FLIP dækker bagsiden hele kortet — også titelfeltet */
.flip-mode .cell-tekst {
    visibility: hidden;
}

.cfb-title {
    font-weight: 800;
    color: var(--handling);
    font-size: 13px;
    margin-bottom: 4px;
    text-align: center;
}

.cfb-note {
    font-size: 11px;
    color: #334155;
    white-space: pre-line;
    text-align: left;
    overflow: hidden;
}

.flip-mode .grid-cell.has-image {
    cursor: pointer;
}

/* Skjul redigerings-knapper mens vendespillet kører */
.flip-mode .delete-btn,
.flip-mode .cell-linkbadge,
.flip-mode .note-indicator {
    display: none;
}

/* ═══════════ v2.0 "Tavlen først" — sidebar-layout ═══════════ */
.tf-app {
    display: flex;
    min-height: 100vh;
    background: #eef1f5;
}

.tf-sidebar {
    width: 60px;
    flex: 0 0 60px;
    background: var(--blaek);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 500;
}

.tf-logo {
    font-size: 26px;
    margin-bottom: 6px;
    cursor: default;
}

.tf-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-kontrol);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tf-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.tf-pop-wrap.open .tf-btn[data-tip]:hover::after {
    content: none;
}

.tf-btn[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--blaek);
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--r-kontrol);
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

.tf-toggle:has(input:checked) {
    background: rgba(255, 255, 255, 0.32);
    outline: 2px solid rgba(255, 255, 255, 0.6);
}

/* Fluebenet: omrids indtil man har meldt færdig — så er det fyldt grønt.
   Før var det grønt hele tiden, og ingen kunne gætte at der manglede et klik. */
.tf-submit {
    background: transparent;
    border: 1.5px dashed rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.68);
}

.tf-submit:hover {
    background: rgba(22, 121, 74, 0.35);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

.tf-submit.meldt-faerdig {
    background: var(--god);
    border-color: var(--god);
    border-style: solid;
    color: #fff;
}

.tf-submit.meldt-faerdig:hover {
    background: #12603B;
    border-color: #12603B;
}

/* En lille prik viser at der mangler et klik */
.tf-submit::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--varm);
    box-shadow: 0 0 0 2px var(--blaek);
}

.tf-submit.meldt-faerdig::after {
    display: none;
}

.tf-spacer {
    flex: 1;
}

.tf-version {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    margin-top: 4px;
}

/* Popovers ud fra sidebaren */
.tf-pop-wrap {
    position: relative;
}

.tf-pop {
    display: none;
    position: absolute;
    left: 56px;
    bottom: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 14px;
    min-width: 220px;
    z-index: 900;
}

.tf-pop-wrap.open .tf-pop {
    display: block;
}

.tf-pop-wide {
    min-width: 320px;
    font-size: 13px;
    line-height: 1.6;
    color: #334155;
}

/* Hovedfladen */
.tf-main {
    flex: 1;
    min-width: 0;
    padding: 12px 18px 18px;
    display: flex;
    flex-direction: column;
}

.tf-context {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    min-height: 38px;
}

/* ── Låsetilstand: eleverne skal altid kunne se, om tavlen er åben eller låst ── */
.tf-lockchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* [hidden] skal vinde over display: inline-flex */
.tf-lockchip[hidden] {
    display: none;
}

.tf-lockchip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.tf-lockchip.is-open {
    color: #15803d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.tf-lockchip.is-done {
    color: #15803d;
    background: #f0fdf4;
    border-color: #86efac;
}

.tf-lockchip.is-locked {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.tf-lockbar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
    border: 1px solid #fcd34d;
    color: #78350f;
    font-size: 14px;
    line-height: 1.45;
}

body.board-locked .tf-lockbar {
    display: flex;
}

.tf-lockbar .lb-icon {
    font-size: 20px;
    line-height: 1;
}

.tf-lockbar b {
    color: #7c2d12;
}

/* Låst tavle: tomme felter viser tydeligt at der ikke kan lægges noget op */
body.board-locked .grid-cell:not(.has-image) {
    cursor: not-allowed;
    border-style: dashed;
    background-image: repeating-linear-gradient(135deg,
            rgba(146, 64, 14, 0.07) 0 7px,
            rgba(146, 64, 14, 0) 7px 15px);
}

body.board-locked .grid-cell:not(.has-image) .cell-plus,
body.board-locked .grid-cell:not(.has-image) .upload-placeholder {
    opacity: 0.35;
}

body.board-locked .grid-cell.has-image {
    cursor: zoom-in;
}

.tf-namechip {
    padding: 7px 12px;
    border: 2px solid var(--handling);
    border-radius: 999px;
    font-size: 14px;
    width: 200px;
    background: #fff;
}

.tf-namechip:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.tf-title {
    font-weight: 700;
    color: #1f2937;
    font-size: 15px;
}

#submitStatus.success,
#submitStatus.error {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}

#submitStatus.success {
    background: #d4edda;
    color: #155724;
}

#submitStatus.error {
    background: #f8d7da;
    color: #721c24;
}

.tf-grid {
    flex: 1;
}

/* Lightbox */
.tf-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tf-lightbox.open {
    display: flex;
}

.tf-lb-body {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 18px 18px 14px;
    max-width: min(1100px, 94vw);
    max-height: 92vh;
    overflow: auto;
}

.tf-lb-imgwrap {
    text-align: center;
}

.tf-lb-imgwrap img {
    max-width: 100%;
    max-height: 62vh;
    border-radius: 10px;
}

.tf-lb-note {
    margin: 12px 4px 10px;
    max-width: 900px;
}

.tf-lb-actions {
    display: flex;
    gap: 10px;
}

.tf-lb-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: #e5e7eb;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
}

.tf-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    font-size: 26px;
    cursor: pointer;
    z-index: 2100;
}

.tf-lb-prev {
    left: 22px;
}

.tf-lb-next {
    right: 22px;
}

/* Fuld skærm: sidebar og kontekstlinje væk, kun tavlen + svævende miniknapper */
body.tf-fs .tf-sidebar,
body.tf-fs .tf-context {
    display: none;
}

body.tf-fs .tf-main {
    padding: 10px;
}

.tf-fsbar {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 16px;
    gap: 8px;
    z-index: 1500;
    opacity: 0.35;
    transition: opacity 0.2s;
}

.tf-fsbar:hover {
    opacity: 1;
}

body.tf-fs .tf-fsbar {
    display: flex;
}

.tf-fsbar .tf-btn {
    background: #0f172a;
}

/* v2.0.1: stregikoner i sidebaren */
.tf-btn svg {
    width: 22px;
    height: 22px;
}

.tf-logo svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
}

/* v2.2.1: tavlen skal strække sig i tf-layoutet (auto-margin blokerede flex-stretch) */
.tf-main .grid-container {
    margin: 0;
    width: 100%;
}

/* v2.3: klasseoversigten i tf-layout */
.tf-main .gridwrap {
    margin-top: 0;
}

body.tf-fs .tf-fsbar {
    display: flex;
}

/* v2.5.3: etiket-rækken og celle-gitteret SKAL have samme indre bredde,
   ellers står kolonneoverskrifterne forskudt. Sættes ét sted for begge —
   efter alle media queries, så mobil og desktop opfører sig ens. */
.lesson-labels,
.upload-grid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box;
}

/* v2.7: søjle-overskrifter kan rumme et undersøgelsesspørgsmål */
.lesson-label {
    min-height: 52px !important;
    height: auto !important;
    padding: 6px 8px !important;
}

.lesson-label .label-text {
    display: block;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.25;
    font-size: 13px !important; /* søjlens overskrift er hierarkisk over posternes titler */
    font-weight: 700;
    max-height: 4.4em;
    overflow: hidden;
}

/* Fuld søjle: synlig "+ række"-bjælke i bunden af tavlen */
.grid-addrow-bar {
    grid-column: 1 / -1;
    padding: 10px 14px;
    border: 2px dashed #93c5fd;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--handling);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.grid-addrow-bar:hover {
    background: #dbeafe;
}

/* Navne-gate: eleven giver sig til kende, før tavlen åbner */
.name-gate {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.name-gate[hidden] {
    display: none;
}

.name-gate-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.name-gate-card h2 {
    margin: 10px 0 6px;
    font-size: 1.3rem;
    color: #0f172a;
}

.name-gate-card p {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.name-gate-card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.name-gate-card input {
    padding: 12px 14px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
}

.name-gate-card input:focus {
    outline: none;
    border-color: var(--handling);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* Links i noter — eleverne deler videoer og kilder */
.note-link {
    color: var(--handling);
    text-decoration: underline;
    word-break: break-all;
}

.cell-linkbadge {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 3;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(2px);
}

.cell-linkbadge:hover {
    background: rgba(15, 23, 42, 0.92);
}

.cell-linkbadge.er-video {
    background: rgba(220, 38, 38, 0.88);
    padding-left: 2px;
}

.cell-flipback .note-link {
    color: #93c5fd;
}

/* ── Opsamling: tavlen set som gruppetavler ─────────────────────────────
   En 6x4-matrix er svær at samle op på. Her får hver gruppe sin egen
   flade — først seks plakater, så én gruppe ad gangen. */
body.opsamling-aaben .tf-grid,
body.opsamling-aaben .grid-row-controls,
body.opsamling-aaben .tf-lockbar {
    display: none !important;
}

.ops {
    padding-bottom: 40px;
}

.ops-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0 14px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
}

.ops-bar strong {
    font-size: 15px;
}

.ops-hint {
    color: #64748b;
    font-size: 12.5px;
}

.ops-tilbage,
.ops-pil,
.ops-pil-prik,
.ops-eksport {
    border: 1.5px solid #dbe2ea;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    color: #0f172a;
    font-size: 13px;
    padding: 6px 13px;
}

.ops-tilbage {
    font-weight: 600;
}

.ops-pil {
    width: 32px;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1;
}

.ops-pil-prik {
    width: 32px;
    padding: 6px 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ops-pil-prik.aktiv {
    border-color: var(--gk);
    box-shadow: inset 0 0 0 1.5px var(--gk);
}

.ops-tilbage:hover,
.ops-pil:hover,
.ops-pil-prik:hover,
.ops-eksport:hover {
    border-color: var(--handling);
}

.ops-flip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.ops-eksport {
    margin-left: auto;
    font-weight: 600;
}

.ops-eksport:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Plakat-oversigten */
.ops-plakater {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.ops-plakat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--gk);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.ops-plakat:hover,
.ops-plakat:focus-visible {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
    outline: none;
}

.ops-plakat header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 8px;
}

.ops-prik {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gk);
    flex: none;
}

.ops-plakat h3 {
    font-size: 13.5px;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.ops-antal {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ops-minis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 14px 14px;
}

.ops-minis figure {
    margin: 0;
    background: var(--gl);
    border-radius: 8px;
    overflow: hidden;
}

.ops-minis img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}

.ops-minis figcaption {
    font-size: 10.5px;
    padding: 4px 7px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-tom {
    grid-column: 1 / -1;
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
    padding: 8px 0;
}

/* Én gruppe i stor visning */
.ops-titel {
    font-size: clamp(19px, 3vw, 27px);
    margin: 4px 0 18px;
    text-wrap: balance;
    padding-left: 14px;
    border-left: 5px solid var(--gk);
}

.ops-figurer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.ops-figur {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: zoom-in;
    position: relative;
}

.ops-figur.traekkes {
    opacity: 0.45;
}

.ops-figur.traekmaal {
    outline: 3px solid var(--handling);
    outline-offset: 2px;
}

.ops-billede {
    background: var(--gl, #f1f5f9);
}

.ops-billede img {
    width: 100%;
    height: 225px;
    object-fit: contain;
    display: block;
}

.ops-tekst {
    padding: 12px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ops-tekst h4 {
    margin: 0;
    font-size: 15px;
    color: var(--handling);
}

.ops-tekst h4.ops-utitel {
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}

.ops-tekst p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #333c48;
    max-width: 62ch;
}

.ops-af {
    font-size: 11.5px;
    color: #64748b;
}

/* FLIP inde i opsamlingen: teksten er skjult, indtil kortet vendes */
.ops-figur.flipbar {
    cursor: pointer;
}

.ops-figur.flipbar .ops-tekst {
    display: none;
}

.ops-figur.flipbar.vendt .ops-tekst {
    display: flex;
}

.ops-figur.flipbar.vendt .ops-billede {
    display: none;
}

.ops-figur.flipbar.vendt .ops-vend {
    display: none;
}

.ops-vend {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
}

/* Lærerens "drøftet"-mærke i opsamlingen — lever kun mens visningen er åben */
.ops-hak {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 2px solid rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.92);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ops-hak:hover {
    transform: scale(1.08);
    border-color: var(--god);
    color: var(--god);
}

/* Den drøftede figur dæmpes (kun billede + tekst, så hakket bliver ved fuld styrke) */
.ops-figur.droeftet {
    border-color: var(--god);
}

.ops-figur.droeftet .ops-billede,
.ops-figur.droeftet .ops-tekst {
    opacity: 0.42;
}

.ops-figur.droeftet .ops-hak {
    background: var(--god);
    border-color: var(--god);
    color: #fff;
}

/* "‹ Alle forløb" — vej tilbage til klassens forside fra klasseoversigten */
.tf-hjem {
    display: inline-block;
    margin-right: 12px;
    padding: 4px 10px;
    border-radius: var(--r-pille);
    border: 1px solid var(--streg);
    background: var(--papir);
    color: var(--handling);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.tf-hjem:hover {
    border-color: var(--handling);
}

@media (max-width: 700px) {
    .ops-billede img {
        height: 180px;
    }

    .ops-eksport {
        margin-left: 0;
    }
}

/* ── De to stemmer ───────────────────────────────────────────────────────
   Beslutning 5/9-2026: alt i appen er DM Sans; Newsreader bruges kun på forsiden og i vejledningerne. (Tidligere: serif bar det, et menneske har sagt: figurtitler, gruppernes
   undersøgelsesspørgsmål, sidernes navne. DM Sans bærer systemets tale. */

.tf-title,
.lesson-label,
.cfb-title,
.ops-titel,
.ops-plakat h3,
.ops-tekst h4,
.name-gate-card h2,
.tf-lb-note>div:first-child {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.tf-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--blaek);
}

.lesson-label {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ops-plakat h3 {
    font-size: 15px;
    font-weight: 600;
}

.ops-tekst h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--blaek);
}

.ops-titel {
    font-weight: 600;
    color: var(--blaek);
}

.name-gate-card h2 {
    font-size: 25px;
    font-weight: 600;
    color: var(--blaek);
}


/* Prøveområdet: tydeligt at det ikke er rigtig undervisning */
.tf-demobar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    margin-bottom: 10px;
    border-radius: var(--r-kort);
    background: linear-gradient(180deg, #F4F0FB, #EDE7F8);
    border: 1px solid #D6C9F0;
    color: #4A3A6B;
    font-size: 14px;
    line-height: 1.45;
}

.tf-demobar[hidden] {
    display: none;
}

body.demo-tavle .tf-demobar {
    display: flex;
}

.tf-demobar b {
    color: #382A55;
}

.tf-demobar a {
    color: var(--handling);
    font-weight: 600;
}

/* ── Låsen i sidebjælken ────────────────────────────────────────────────
   Eleverne kan se tilstanden; læreren kan klikke og skifte den. */
.tf-laas {
    width: 44px;
    height: 44px;
    border-radius: var(--r-kontrol);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--god);
    border: none;
    background: rgba(22, 121, 74, 0.18);
}

.tf-laas svg {
    width: 21px;
    height: 21px;
}

/* Åben: bøjlen står op på siden */
.tf-laas .laas-boejle {
    transform-origin: 12px 11px;
    transform: rotate(-22deg) translateX(2.5px);
    transition: transform 0.2s ease;
}

body.board-locked .tf-laas,
.tf-laas.er-laast {
    color: var(--advar);
    background: rgba(138, 90, 18, 0.22);
}

body.board-locked .tf-laas .laas-boejle,
.tf-laas.er-laast .laas-boejle {
    transform: none;
}

button.tf-laas {
    cursor: pointer;
}

button.tf-laas:hover {
    background: rgba(22, 121, 74, 0.32);
}

body.board-locked button.tf-laas:hover,
button.tf-laas.er-laast:hover {
    background: rgba(138, 90, 18, 0.36);
}

/* ── Pakket layout: kompakt "tilføj"-felt i bunden af hver søjle ──
   Erstatter de tomme kasser (66% spildplads) og "Komprimér"-knappen. */
.tf-col .grid-cell:not(.has-image) {
    min-height: 0;
}

.tf-col .grid-cell.tf-add {
    min-height: 58px;
    background: transparent;
    border: 1.5px dashed var(--streg-kraftig);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--daemp);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tf-col .grid-cell.tf-add:hover {
    border-color: var(--handling);
    color: var(--handling);
    background: var(--papir);
}

.tf-col .grid-cell.tf-add .cell-plus,
.tf-col .grid-cell.tf-add .upload-placeholder {
    opacity: 1;
    color: inherit;
}

/* Låst tavle: intet tilføj-felt, søjlen slutter ved sidste figur */
body.board-locked .tf-col .grid-cell:not(.has-image) {
    display: none;
}

/* ── FLIP som fokuseret storvisning ─────────────────────────────────────
   Ét kort ad gangen, stort. Billedet først, gruppens spørgsmål, "Vis svar" —
   og svaret i stor, læsbar skrift, så de bagerste elever kan læse det. */
.tf-lightbox.flip-visning .tf-lb-actions {
    display: none;
}

.tf-lightbox.flip-visning .tf-lb-imgwrap img {
    max-height: 52vh;
}

/* Hele FLIP-visningen skal være inde på skærmen — ingen scroll på projektor */
.tf-lightbox.flip-visning .tf-lb-body {
    max-height: 94vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tf-lightbox.flip-visning .tf-lb-note {
    overflow-y: auto;
    min-height: 0;
}

.tf-lightbox.flip-visning .tf-lb-note {
    text-align: center;
    max-width: none;
    margin: 18px 8px 6px;
}

.flip-spoergsmaal {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 600;
    color: var(--blaek);
    line-height: 1.2;
    text-wrap: balance;
    margin-bottom: 16px;
}

.flip-vis-svar {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    background: var(--handling);
    border: none;
    border-radius: var(--r-kontrol);
    padding: 12px 28px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.flip-vis-svar:hover {
    background: var(--handling-moerk);
    transform: translateY(-1px);
}

.flip-svar {
    animation: flip-ind 0.28s ease;
}

@keyframes flip-ind {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flip-titel {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 600;
    color: var(--handling);
    line-height: 1.2;
    text-wrap: balance;
    margin-bottom: 10px;
}

.flip-titel.flip-utitel {
    color: var(--daemp);
    font-style: italic;
}

.flip-note {
    font-family: var(--sans);
    font-size: clamp(15px, 1.9vw, 20px);
    line-height: 1.5;
    color: var(--broed);
    white-space: pre-line;
    max-width: 46ch;
    margin: 0 auto;
}

.flip-af {
    font-size: 14px;
    color: var(--daemp);
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .flip-svar {
        animation: none;
    }
}

/* Logoet fører til hovedsiden */
a.tf-logo { cursor: pointer; transition: opacity 0.15s; }
a.tf-logo:hover { opacity: 0.75; }

/* ── Lærerens sidebjælke: tre zoner med tekst-labels ────────────────────
   Ikoner alene kan ikke læses på projektor-afstand. Her får de centrale
   knapper et ord under sig, og tynde streger deler i før/i/efter timen. */
.tf-sidebar-laerer {
    width: 82px;
    flex: 0 0 82px;
    gap: 3px;
    padding: 12px 0;
}

.tf-sidebar-laerer .tf-btn {
    width: 68px;
    height: auto;
    min-height: 52px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 0 6px;
    border-radius: 10px;
}

.tf-sidebar-laerer .tf-btn svg {
    width: 21px;
    height: 21px;
}

.tf-sidebar-laerer .tf-label {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    color: inherit;
    text-align: center;
}

.tf-sidebar-laerer .tf-div {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
    margin: 5px 0;
    flex: none;
}

/* Låsens ord skifter med tilstanden er allerede sat via data-tip; labelen
   følger med i tekst. */
.tf-sidebar-laerer .tf-pop-wrap {
    width: 68px;
    display: flex;
    justify-content: center;
}

/* Tilføj-feltet inviterer også til at indsætte fra udklipsholderen */
.tf-col .grid-cell.tf-add {
    flex-direction: column;
    gap: 2px;
}

.tf-col .grid-cell.tf-add::after {
    content: "+";
    font-size: 30px;
    color: var(--daemp);
}

.tf-col .grid-cell.tf-add::before {
    content: "Klik, træk eller indsæt (⌘V)";
    order: 2;
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--daemp);
    opacity: 0.85;
}

body.touch-enhed .tf-col .grid-cell.tf-add::before {
    content: "Tryk for at tilføje";
}

/* ── Topbar: hvor er jeg (klasse › forløb › gruppe). Sidepanelet er kun handlinger ── */
/* Lærerens panel: ét roligt bånd — papir-flade, tynd kant, ingen mærkater */
.tf-topbar {
    gap: 10px; align-items: center; margin-bottom: 12px;
    background: var(--papir); border: 1px solid var(--streg); border-radius: 10px;
    padding: 6px 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.tf-crumbs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.tf-crumb-sep { color: var(--daemp); font-size: 20px; line-height: 1; padding: 0 2px; }
.tf-topbar .tf-btn.tf-crumb-btn {
    display: inline-flex; align-items: baseline; gap: 7px;
    width: auto; height: auto; padding: 5px 10px;
    border-radius: var(--r-kontrol); border: 1px solid transparent; background: transparent;
    color: var(--blaek); font-family: var(--sans); font-size: 17px; font-weight: 700;
    line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.tf-topbar .tf-btn.tf-crumb-btn:hover,
.tf-topbar .tf-pop-wrap.open .tf-btn.tf-crumb-btn { background: var(--papir); border-color: var(--streg); }
.tf-crumb-tag { font-family: "DM Sans", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--daemp); }
.tf-crumb-navn { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.tf-crumb-navn.tom { color: var(--daemp); font-weight: 400; font-style: italic; }
.tf-caret { font-size: 12px; color: var(--daemp); }
.tf-topbar .tf-btn.tf-crumb-btn.tf-sys { font-family: "DM Sans", system-ui, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--blaek); gap: 4px; }
.tf-topbar .tf-pop { left: 0; right: auto; top: calc(100% + 6px); bottom: auto; }
.tf-topbar .tf-topbar-hoejre .tf-pop { left: auto; right: 0; }
.tf-topbar .tf-spacer { flex: 1; }
.tf-liste { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin-bottom: 8px; min-width: 220px; }
.tf-liste .dropdown-item { text-align: left; width: 100%; }
.tf-liste .dropdown-item.aktiv { background: var(--handling); color: #fff; border-radius: 6px; }
.tf-liste .dropdown-item.aktiv:hover { background: var(--handling); }

/* ── Søjlefarver: overskriftens farve følger med ned gennem søjlens tekstfelter ──
   --sk (kant) og --sl (lys) sættes pr. søjle i grid.js fra GridManager.SOEJLEFARVER.
   Teksten forbliver mørk; farven bærer "det her hører sammen" uden at råbe. */
.lesson-label {
    background: var(--sl, #eef1f5);
    border: 2px solid var(--sk, #5A6478);
    border-bottom-width: 4px;
    color: var(--blaek);
}
.lesson-label .label-text { color: var(--blaek); }
.grid-cell.has-image .cell-tekst {
    background: var(--sl, var(--papir));
    border-top: 3px solid var(--sk, var(--streg));
}
.grid-cell.has-image .cell-tekst .cell-titel { color: var(--blaek); }
.tf-col .grid-cell.tf-add::after { color: var(--sk, var(--daemp)); }
.tf-col .grid-cell.tf-add { border-color: color-mix(in srgb, var(--sk, var(--streg)) 45%, transparent); }
.flip-spoergsmaal { color: var(--sk, var(--handling)); }

/* ── Ramme + bundskygge på hver post — som overskriftsboksen, en anelse tyndere ── */
.grid-cell.has-image {
    border: 1.5px solid var(--sk, var(--streg));
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
}
.grid-cell.has-image:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.grid-cell.has-image .cell-tekst {
    border-top-width: 2px;
}

/* ── Palettevælger (Mere → Farvepalette) ── */
.tf-paletter { display: flex; flex-direction: column; gap: 8px; }
.tf-palet {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; padding: 10px 12px; border-radius: var(--r-kontrol);
    border: 1.5px solid var(--streg); background: var(--papir); cursor: pointer; text-align: left;
    font-family: var(--sans); font-size: 14px; color: var(--blaek);
}
.tf-palet:hover { border-color: var(--handling); }
.tf-palet.aktiv { border-color: var(--handling); box-shadow: inset 0 0 0 1px var(--handling); }
.tf-palet.aktiv .tf-palet-navn::after { content: " · valgt"; color: var(--handling); font-weight: 600; }
.tf-palet-proever { display: flex; gap: 5px; }
.tf-palet-proever i { display: inline-block; width: 26px; height: 18px; border-radius: 4px; border-bottom: 4px solid; border-top: 1.5px solid; border-left: 1.5px solid; border-right: 1.5px solid; }


/* ── Skrift for elevernes læsetekst: serif (Newsreader) som standard, sans hvis læreren vælger det.
   Overskrifter, titler, topbar og FLIP-spørgsmål er ALTID DM Sans. Sættes pr. forløb via body[data-tekstskrift]. ── */
body[data-tekstskrift="serif"] .tf-lb-notetekst,
body[data-tekstskrift="serif"] .flip-note,
body[data-tekstskrift="serif"] .ops-tekst p,
body[data-tekstskrift="serif"] .cfb-note {
    font-family: var(--serif);
}
body[data-tekstskrift="serif"] .tf-lb-notetekst { font-size: 16.5px; line-height: 1.55; }
body[data-tekstskrift="serif"] .ops-tekst p { font-size: 14.5px; }

/* vælgeren (Farver og skrift) */
.tf-skrift-proeve { font-size: 15px; color: var(--daemp); }
.tf-palet.tf-skrift .tf-palet-navn { min-width: 60px; }

/* Lærer: "Ret navn" ved forfatteren i lightboxen (v3.29.0) */
.tf-ret-forfatter {
    margin-left: 8px;
    padding: 1px 8px;
    font: 500 11px/1.6 var(--sans);
    color: var(--handling);
    background: transparent;
    border: 1px solid var(--streg);
    border-radius: 999px;
    cursor: pointer;
}
.tf-ret-forfatter:hover { background: var(--grund); }

/* ── Slør: mosaikpen over billedet (v3.30.0) ── */
.tf-sloer { position:fixed; inset:0; z-index:20000; background:rgba(10,15,60,.96); color:var(--papir); display:flex; flex-direction:column; font-family:var(--sans); }
.tf-sloer-top, .tf-sloer-bund { display:flex; align-items:center; gap:12px; padding:10px 16px; flex:none; }
.tf-sloer-top strong { font-size:16px; }
.tf-sloer-hint { color:rgba(253,252,250,.7); font-size:13px; }
.tf-sloer-luk { margin-left:auto; background:none; border:0; color:var(--papir); font-size:26px; line-height:1; cursor:pointer; padding:2px 8px; }
.tf-sloer-flade { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:6px 16px; }
.tf-sloer-canvas { max-width:100%; max-height:100%; touch-action:none; cursor:crosshair; border-radius:4px; box-shadow:0 20px 50px rgba(0,0,0,.5); background:#000; }
.tf-sloer-bund { border-top:1px solid rgba(253,252,250,.14); flex-wrap:wrap; }
.tf-sloer-spacer { flex:1; }
.tf-sloer-pen { display:inline-flex; gap:6px; }
.tf-sloer-pen button { width:38px; height:38px; border-radius:50%; border:1px solid rgba(253,252,250,.3); background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tf-sloer-pen button i { display:block; width:var(--d); height:var(--d); border-radius:50%; background:var(--papir); }
.tf-sloer-pen button.aktiv { border-color:var(--papir); background:rgba(253,252,250,.16); }
.tf-sloer .btn { min-height:38px; }
.tf-sloer .btn-secondary { color:var(--papir); border-color:rgba(253,252,250,.45); background:transparent; }
.tf-sloer .btn-secondary:hover:not(:disabled) { background:rgba(253,252,250,.12); }
.tf-sloer .btn:disabled { opacity:.45; }
@media (max-width:600px) { .tf-sloer-hint { display:none; } .tf-sloer-top, .tf-sloer-bund { padding:8px 10px; } }

/* ── Fang det (v3.31.0): billede + pointe i ét greb ─────────────────────
   Én tydelig knap nederst til højre. På telefonen åbner den kameraet
   direkte; på computeren en filvælger. Skjules, når tavlen er låst, og
   i fuld skærm (projektoren). */
.tf-fang {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1400;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    border: none;
    border-radius: var(--r-pille);
    background: var(--handling);
    color: #fff;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 18px rgba(10, 15, 60, 0.28), 0 2px 4px rgba(10, 15, 60, 0.18);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.tf-fang svg {
    width: 24px;
    height: 24px;
}

.tf-fang:hover {
    background: var(--handling-moerk);
    transform: translateY(-1px);
}

.tf-fang:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

body.board-locked .tf-fang,
body.tf-fs .tf-fang {
    display: none;
}

/* Arket: billede øverst, pointen lige under, søjlevalg, gem */
.tf-fang-ark {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(10, 15, 60, 0.55);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 5vh 16px 16px;
    overflow-y: auto;
}

.tf-fang-kort {
    width: 100%;
    max-width: 460px;
    background: var(--papir);
    border-radius: var(--r-kort);
    box-shadow: 0 18px 50px rgba(10, 15, 60, 0.35);
    padding: 16px;
    font-family: var(--sans);
    color: var(--blaek);
}

.tf-fang-billede {
    position: relative;
    background: var(--grund);
    border-radius: var(--r-kontrol);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tf-fang-billede img {
    display: block;
    max-width: 100%;
    max-height: 34vh;
    object-fit: contain;
}

.tf-fang-status {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--r-pille);
    background: rgba(253, 252, 250, 0.92);
    color: var(--daemp);
}

.tf-fang-status.klar {
    color: var(--god);
}

.tf-fang-status.fejl {
    color: var(--fejl);
}

.tf-fang-label {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin: 14px 0 6px;
}

.tf-fang-pointe {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.4;
    padding: 10px 12px;
    border: 2px solid var(--streg-kraftig);
    border-radius: var(--r-kontrol);
    resize: none;
    background: #fff;
    color: var(--blaek);
}

.tf-fang-pointe:focus {
    outline: none;
    border-color: var(--handling);
}

.tf-fang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tf-fang-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--r-pille);
    border: 2px solid var(--sk, var(--streg-kraftig));
    background: #fff;
    color: var(--blaek);
    cursor: pointer;
}

.tf-fang-chip.valgt {
    background: var(--sl, var(--grund));
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--sk, var(--streg-kraftig));
}

.tf-fang-fejl {
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--r-kontrol);
    background: var(--fejl-flade);
    color: var(--fejl);
    font-size: 14px;
}

.tf-fang-knapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.tf-fang-gem.uden-pointe {
    background: var(--daemp);
}

/* ── Kom igen (v3.31.0): gamle billeder åbner timen ──────────────────── */
.kom-igen-kontekst {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--daemp);
    margin-bottom: 10px;
}

.kom-igen-soejle {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--daemp);
    margin-top: 12px;
}

/* FLIP og Kom igen: billedet må aldrig skubbe spørgsmål og "Vis"-knap ud af
   skærmen. #display { max-height: 100% } (id-selektor) slog før reglen på 52vh. */
.tf-lightbox.flip-visning #display {
    max-height: 52vh;
}

/* Plads under tavlen, så Fang-knappen ikke dækker de nederste knapper */
body.har-fang .tf-main {
    padding-bottom: 96px;
}

.gf-toast.toast-success {
    background: var(--god);
    border-left: 4px solid #6ee7b7;
}