/* Basic Reset & Font */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #212529; line-height: 1.6; margin: 0; padding: 20px; }
.container { max-width: 900px; margin: 30px auto; padding: 30px; background-color: #fff; border: 1px solid #dee2e6; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); }

/* Headings */
h1, h2, h3 { color: #D95B00; margin-bottom: 18px; font-weight: 600; }
.top-bar h1 { text-align: left; margin: 0; padding-right: 15px; font-size: 1.6em; white-space: nowrap; flex-shrink: 0; color: #343a40; }

/* Top Bar */
.top-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dee2e6; margin-bottom: 25px; padding-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.top-bar-controls { display: flex; align-items: center; gap: 8px; flex-grow: 1; justify-content: flex-end; flex-wrap: wrap; }

/* Ikon Knapper (Font Awesome) */
.icon-button { background-color: #f8f9fa; color: #495057 !important; border: 1px solid #dee2e6; padding: 0; font-size: 1em; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; margin: 0; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
.icon-button:hover { background-color: #e9ecef; border-color: #adb5bd; color: #212529 !important; }
.icon-button i { line-height: 1; font-size: 1.1em; vertical-align: middle; color: inherit; }

/* Søgefelt */
.search-input { padding: 6px 12px; font-size: 0.9em; border-radius: 6px; border: 1px solid #ced4da; margin-right: 6px; transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, border 0.3s ease; width: 0; opacity: 0; border-width: 0; padding-left: 0; padding-right: 0; vertical-align: middle; height: 36px; box-sizing: border-box; }
.search-input:not(.hidden) { width: 160px; opacity: 1; border-width: 1px; padding-left: 12px; padding-right: 12px;}
.search-input:focus { border-color: #FD6B00; outline: none; box-shadow: 0 0 0 2px rgba(253, 107, 0, 0.2); }

/* Filter Knapper Styling */
.status-filter-buttons { display: flex; gap: 6px; align-items: center; }
.status-filter-buttons button { background-color: #f8f9fa; color: #495057 !important; border: 1px solid #dee2e6; padding: 5px 12px; font-size: 0.85em; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; margin: 0; line-height: 1.3; font-weight: 500; white-space: nowrap; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.status-filter-buttons button:hover { background-color: #e9ecef; border-color: #adb5bd; color: #212529 !important; }
.status-filter-buttons button.active { background-color: #FD6B00; color: white !important; border-color: #E45F00; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); font-weight: 600; }

/* Language Switcher (Tekst-knapper) */
.lang-switcher { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.lang-switcher button { background-color: #f8f9fa; color: #495057 !important; border: 1px solid #dee2e6; padding: 0 10px; font-size: 0.85em; font-weight: 600; margin: 0; cursor: pointer; border-radius: 6px; line-height: 1; width: auto; box-shadow: none; transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
.lang-switcher button:hover { background-color: #e9ecef; border-color: #adb5bd; color: #212529 !important; }
.lang-switcher button.active { background-color: #FD6B00; border-color: #E45F00; color: white !important; transform: scale(1.0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); font-weight: 700; }

/* Labels & Inputs generelt */
label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 600; color: #495057; }
input[type="text"], input[type="password"], input[type="date"], select { width: 100%; padding: 10px 15px; margin-top: 5px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 1em; color: #212529; background-color: #fff; }
input[type="file"] { width: 100%; padding: 8px 15px; margin-top: 5px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 1em; color: #212529; }
input[type="radio"] { width: auto; margin-right: 5px; vertical-align: middle; }
input[type="file"]::file-selector-button { padding: 8px 15px; border: none; background-color: #6c757d; color: white; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; margin-right: 10px; }
input[type="file"]::file-selector-button:hover { background-color: #5a6268; }
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, select:focus { border-color: #FD6B00; outline: none; box-shadow: 0 0 0 3px rgba(253, 107, 0, 0.25); }

/* Knapper generelt */
button, .button-link { background-color: #FD6B00; color: white !important; cursor: pointer; font-size: 1em; font-weight: 600; border: none; transition: background-color 0.2s ease, box-shadow 0.2s ease; text-align: center; display: inline-block; text-decoration: none; padding: 10px 18px; margin-top: 10px; border-radius: 6px; width: auto; }
button:disabled { background-color: #cccccc !important; color: #666666 !important; cursor: not-allowed; box-shadow: none !important; filter: grayscale(50%); }
button:not(:disabled):hover, .button-link:hover { background-color: #E45F00; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); color: white !important; }
#loginButton { width: 100%; margin-top: 20px;}
#submitUploadButton { width: 100%; margin-top: 20px;}
#statusUpdateButton { width: 100%; margin-top: 10px;}

/* Hide/Error/Info/Success */
.hidden { display: none !important; }
.error { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; margin-top: 10px; padding: 12px 15px; border: 1px solid transparent; border-radius: 6px; font-weight: 500; }
.info-text { font-size: 0.85em; color: #6c757d; margin-top: 5px; margin-bottom: 10px; }
p.success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; margin-top: 10px; padding: 12px 15px; border: 1px solid transparent; border-radius: 6px; font-weight: 500; }

/* Tabel Styling */
.data-table { width: 100%; border-collapse: separate; margin-top: 25px; font-size: 0.95em; border-spacing: 0; }
.data-table th, .data-table td { border: 0; border-bottom: 1px solid #dee2e6; padding: 12px 15px; text-align: left; vertical-align: middle; word-break: break-word; color: #212529; }
.data-table th { background-color: #f8f9fa; font-weight: 600; color: #495057; border-bottom-width: 2px; }
.data-table tbody tr.project-row { cursor: pointer; transition: filter 0.15s ease, box-shadow 0.15s ease; border-top: 1px solid #dee2e6; }
.data-table tbody tr.project-row:first-child { border-top: none; }
.data-table tbody tr.project-row:hover:not(.active-row) { filter: brightness(97%); box-shadow: inset 3px 0 0 0 #FD6B00; }
.data-table tbody tr.active-row { background-color: #fff3e0 !important; font-weight: normal; filter: none !important; box-shadow: inset 3px 0 0 0 #FD6B00; border-color: #ffe8c1; }

/* Admin redigerbar status celle */
.data-table td.status-cell.admin-editable { cursor: pointer; position: relative; transition: background-color 0.2s ease; }
.data-table td.status-cell.admin-editable:hover { background-color: rgba(253, 107, 0, 0.08); }

/* Udvid/Skjul række */
.expanded-content-row td { padding: 0 !important; border: 0; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
.expanded-content-row:hover { cursor: default; }
/* Container for filliste og knap */
.file-list-in-table { margin: 0; padding: 20px 25px; background-color: rgba(255, 255, 255, 0.5); border-bottom: none; backdrop-filter: blur(2px); }
.file-list-in-table ul { list-style: none; padding: 0; margin: 0; }
.file-list-in-table li { padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; /* Fjernet gap, bruger margin på ikon */ }
.file-list-in-table li:last-child { border-bottom: none; }

/* --- START IKON STYLING I FILLISTE --- */
.file-list-in-table .file-icon {
    font-size: 1.2em; /* Størrelse på ikonet */
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    margin-right: 10px; /* Afstand til højre for ikonet */
    vertical-align: middle;
    display: inline-block;
    width: 1.25em; /* Giver lidt plads og sikrer alignment */
}
/* Farve for mappe-ikoner */
.file-list-in-table .file-icon.folder-color { /* Matcher klassen tilføjet i JS */
    color: #fdab40; /* Varm gul/orange */
}
/* Farve for fil-ikoner */
.file-list-in-table .file-icon.file-color { /* Matcher klassen tilføjet i JS */
    color: #adb5bd; /* Neutral grå */
}
/* --- SLUT IKON STYLING I FILLISTE --- */

/* Links */
.file-list-in-table a { color: #0d6efd; text-decoration: none; font-weight: 500; }
.file-list-in-table a:hover { text-decoration: underline; color: #0a58ca; }
.file-list-in-table .file-name { flex-grow: 1; word-break: break-all; font-size: 0.98em; }
/* "Up" link */
.file-list-in-table .up-link span { margin-right: 6px; font-size: 1.1em; display: inline-block; vertical-align: middle;}
.file-list-in-table .up-link { display: inline-block; vertical-align: middle; font-weight: 600; color: #343a40; }
/* Knap i filliste */
.file-list-in-table .button-link { margin-top: 25px; margin-bottom: 10px; display: block; width: fit-content; min-width: 160px; margin-left: auto; margin-right: auto; text-align: center; }

/* Workflow Status Indikator (Tabel & Modal) */
.status-indicator { display: inline-block; padding: 4px 10px; font-size: 0.75em; border-radius: 12px; margin-right: 8px; font-weight: 600; vertical-align: middle; border: none; line-height: 1.2; }
.status-new { background-color: #6c757d; color: white; }
.status-ready_for_step2 { background-color: #ffc107; color: #343a40; }
.status-ready_for_step3 { background-color: #0dcaf0; color: #343a40; }
.status-done { background-color: #198754; color: white; }

/* Workflow Steps i Upload Modal */
.modal-content .workflow-steps { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
.modal-content .workflow-steps .workflow-label { display: block; margin-bottom: 10px !important; font-weight: 600; color: #495057;}
.modal-content .workflow-steps div { margin-bottom: 8px; }
.modal-content .workflow-steps label[for^="modal_step"] { display: inline-block !important; margin-top: 0 !important; font-weight: normal !important; vertical-align: middle; margin-left: 4px; color: #212529; }

/* Loader Style */
.loader { display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 0.9em; color: #6c757d; min-height: 30px; }
.spinner { border: 4px solid #e9ecef; border-top: 4px solid #FD6B00; border-radius: 50%; width: 22px; height: 22px; animation: spin 1s linear infinite; margin-right: 12px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Modal/Popup Styles */
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(33, 37, 41, 0.6); backdrop-filter: blur(4px); }
.modal-content { background-color: #fff; margin: 10% auto; padding: 35px; border: none; width: 90%; max-width: 600px; border-radius: 10px; position: relative; box-shadow: 0 8px 25px rgba(0,0,0,0.15); animation-name: animatetop; animation-duration: 0.4s }
#statusUpdateModal .modal-content { max-width: 450px; margin-top: 12%;}
@keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} }
.close-button { color: #adb5bd; position: absolute; top: 15px; right: 20px; font-size: 32px; font-weight: bold; line-height: 1; cursor: pointer; transition: color 0.2s ease; }
.close-button:hover, .close-button:focus { color: #495057; text-decoration: none; }

/* Fjernet Admin Table & Icon Styling */

/* Media Query for mobil */
@media (max-width: 768px) {
    .container { padding: 15px; }
    .top-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .top-bar-controls { justify-content: flex-start; width: 100%; gap: 8px; }
    .search-input:not(.hidden) { width: 120px; height: 32px;}
    .status-filter-buttons button { font-size: 0.75em; padding: 4px 6px; height: 32px; }
    .lang-switcher button { font-size: 0.8em; padding: 0 6px; height: 32px; min-width: 32px; }
    .icon-button { width: 32px; height: 32px; }
    .icon-button i { font-size: 1em; }
    .data-table td, .data-table th { padding: 8px 10px; }
    .file-list-in-table { padding: 15px; }
}

@media (max-width: 480px) {
    .top-bar h1 { font-size: 1.3em; }
    .search-input:not(.hidden) { width: 100px; height: 30px; }
    .status-filter-buttons { gap: 4px; }
    .status-filter-buttons button { font-size: 0.75em; padding: 4px 8px; height: 30px; }
    .lang-switcher { gap: 4px; }
    .lang-switcher button { font-size: 0.8em; padding: 0 8px; min-width: 34px; height: 30px;}
    .icon-button { width: 30px; height: 30px; }
    .icon-button i { font-size: 0.9em; }
    .top-bar-controls { gap: 5px; }
    .modal-content { padding: 20px; }
    #statusUpdateModal .modal-content { margin-top: 20%; padding: 25px; }
}