/* ===================== CSS Variables ===================== */
:root {
  --primary: #3498db;
  --primary-hover: #2980b9;
  --success: #27ae60;
  --danger: #e74c3c;
  --warning: #f39c12;
  --secondary: #95a5a6;
  --orange: rgb(243, 97, 23);
  --nav-bg: #2c3e50;
  --nav-sub-bg: #34495e;
  --nav-text: #ecf0f1;
  --text: #2c3e50;
  --text-muted: #666;
  --text-light: #888;
  --border: #ddd;
  --border-light: #eee;
  --bg: #f5f5f5;
  --bg-light: #f8f9fa;
  --bg-card: #fff;
  --focus-color: #3498db;
  --nav-hover-color: #3498db;
  --bg-success: #d4edda;
  --text-success-bg: #155724;
  --bg-error: #f8d7da;
  --text-error-bg: #721c24;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size: 16px;
  --btn-font-size: 16px;
  --btn-font-weight: 400;
  --radius: 4px;
  --radius-card: 8px;
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.3);
}

/* ===================== Reset ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--font-size); line-height: 1.6; background: var(--bg); }

/* ===================== Layout ===================== */
.container { max-width: none; margin: 2rem; padding: 0; }

/* ===================== Header / Nav ===================== */
.header { background: var(--nav-bg); color: white; padding: 1rem 2rem; text-align: center; position: relative; }
.header h1 { font-size: 1.5rem; margin: 0; }
.user-info { position: absolute; left: 2rem; top: 1rem; color: var(--orange); font-size: 0.9rem; }
.nav { background: var(--nav-sub-bg); padding: 0.5rem 2rem; display: flex; gap: 1.5rem; }
.nav a { color: var(--nav-text); text-decoration: none; }
.nav a:hover, .nav a.active { color: var(--nav-hover-color); }
.nav-sub { background: var(--nav-bg); padding: 0.5rem 2rem; }
.nav-spacer { flex: 1; }

/* ===================== Gear Menu ===================== */
.gear-menu { position: absolute; right: 2rem; top: 0.5rem; }
.gear-icon { font-size: 1.5rem; cursor: pointer; padding: 0.25rem; }
.gear-icon:hover { background: rgba(255,255,255,0.1); border-radius: var(--radius); }
.gear-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--nav-sub-bg); min-width: 180px; z-index: 1000; padding: 0.25rem 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.gear-menu.active .gear-dropdown { display: block; }
.gear-dropdown a { color: var(--nav-text); text-decoration: none; display: block; padding: 0.4rem 1rem; white-space: nowrap; font-size: 0.9rem; }
.gear-dropdown a:hover { background: var(--nav-bg); color: var(--nav-hover-color); }

/* ===================== Nav Groups ===================== */
.nav-group { position: relative; display: inline-block; }
.nav-group-label { cursor: pointer; color: var(--nav-text); text-decoration: none; padding: 0.25rem 0; }
.nav-group-label:hover, .nav-group-label.active { color: var(--nav-hover-color); }
.nav-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--nav-sub-bg); min-width: 200px; z-index: 1000; padding: 0.25rem 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.nav-group:hover .nav-dropdown { display: block; }
.nav-dropdown a { color: var(--nav-text); text-decoration: none; display: block; padding: 0.4rem 1rem; white-space: nowrap; font-size: 0.9rem; }
.nav-dropdown a:hover { background: var(--nav-bg); color: var(--nav-hover-color); }

/* ===================== Card ===================== */
.card { background: var(--bg-card); border-radius: var(--radius-card); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.card h2 { margin-bottom: 1rem; color: var(--text); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

/* ===================== Table ===================== */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-light); }
th { background: var(--bg-light); font-weight: 600; }
th a { color: inherit; text-decoration: none; display: block; }
th.sortable { color: inherit; }
th a:hover, th.sortable:hover { color: var(--primary); background: #e9ecef; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable.sorted-asc::after { content: ' \25B2'; font-size: 0.7em; }
th.sortable.sorted-desc::after { content: ' \25BC'; font-size: 0.7em; }
th.sorted-asc::after, th.sorted-desc::after { font-size: 0.7em; }

/* ===================== Buttons ===================== */
.btn { display: inline-block; padding: 0.5rem 1rem; background: var(--primary); color: white; border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; line-height: 1.2; font-family: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); }
.btn:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--secondary); }
.btn-secondary:hover { background: #7f8c8d; }
.btn-success { background: var(--success); }
.btn-success:hover { background: #219a52; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #c0392b; }
.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #d68910; }
.btn-orange { background: #e67e22; color: white; }
.btn-orange:hover { background: #d35400; }
.btn-icon { padding: var(--icon-btn-padding, 0.25rem 0.5rem); font-size: var(--icon-btn-font-size, 0.8rem); white-space: nowrap; border: none; border-radius: var(--radius); cursor: pointer; color: white; line-height: 1.2; font-family: inherit; font-weight: var(--btn-font-weight); }
.btn-icon:has(.fa-trash) { background: var(--color-delete, var(--danger)); }
.btn-icon:has(.fa-edit), .btn-icon:has(.fa-pencil) { background: var(--color-edit, var(--primary)); }
.btn-icon:has(.fa-eye) { background: var(--color-view, var(--primary)); }
.btn-icon:has(.fa-user-shield) { background: var(--color-anonymize, var(--primary)); }
.btn-icon:has(.fa-file-pdf) { background: var(--color-pdf, var(--danger)); }
.btn-icon:has(.fa-search) { background: var(--color-search, var(--primary)); }
.btn-icon:has(.fa-download) { background: var(--color-download, var(--primary)); }
.btn-icon:has(.fa-undo) { background: var(--color-restore, var(--success)); }
.btn-icon:has(.fa-trash):hover,
.btn-icon:has(.fa-edit):hover,
.btn-icon:has(.fa-pencil):hover,
.btn-icon:has(.fa-eye):hover,
.btn-icon:has(.fa-user-shield):hover,
.btn-icon:has(.fa-file-pdf):hover,
.btn-icon:has(.fa-search):hover,
.btn-icon:has(.fa-download):hover,
.btn-icon:has(.fa-undo):hover { filter: brightness(0.85); }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.btn-group { display: flex; gap: 0.5rem; }

/* ===================== Forms ===================== */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--focus-color); box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--focus-color) 25%, transparent); }
.form-inline { display: flex; gap: 1rem; align-items: center; }
.form-inline.compact { gap: 0.5rem; }
.form-row { display: flex; gap: 1rem; }
.form-row > * { flex: 1; }
.input-small { padding: 0.25rem 0.5rem; font-size: 0.85rem; }

/* ===================== Flash Messages ===================== */
.flash { margin-bottom: 1rem; }
.flash-msg { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; }
.flash-success { background: var(--bg-success); color: var(--text-success-bg); }
.flash-error, .flash-danger { background: var(--bg-error); color: var(--text-error-bg); }

/* ===================== Pagination ===================== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.25rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-block; padding: 0.35rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--primary); font-size: 0.85rem; }
.pagination a:hover { background: var(--primary); color: white; }
.pagination .current { background: var(--primary); color: white; border-color: var(--primary); }
.pagination .disabled { color: #ccc; cursor: default; }
.pagination-info { text-align: center; color: var(--text-light); font-size: 0.8rem; margin-top: 0.25rem; }

/* ===================== Legend / Status Bar ===================== */
.legend { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; display: flex; gap: 2rem; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ===================== Filter Bar ===================== */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.filter-form { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* ===================== Status colors ===================== */
.status-anmodning { color: var(--warning); }
.status-bekraeftet { color: var(--success); }
.status-afsluttet { color: var(--secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-secondary { color: var(--secondary); }
.text-orange { color: var(--orange); }

/* ===================== Background Colors ===================== */
.bg-white { background: white; }
.bg-light { background: var(--bg-light); }

/* ===================== Spacing ===================== */
.mt-0 { margin-top: 0; }
.mt-05 { margin-top: 0.5rem; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.ml-05 { margin-left: 0.5rem; }
.mr-05 { margin-right: 0.5rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-05 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* ===================== Layout Utilities ===================== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-05 { gap: 0.5rem; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.flex-1 { flex: 1; }
.float-right { float: right; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.w-auto { width: auto; }

/* ===================== Font ===================== */
.fs-small { font-size: 0.85rem; }
.fs-smaller { font-size: 0.8rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-bold { font-weight: bold; }

/* ===================== Border ===================== */
.radius { border-radius: var(--radius); }
.border { border: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border-light); }
.border-bottom { border-bottom: 1px solid var(--border-light); }

/* ===================== Modal ===================== */
.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background: white; margin: 5% auto; padding: 2rem; border-radius: var(--radius-card); max-width: 500px; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; right: 1rem; top: 0.5rem; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.modal-close:hover { color: var(--danger); }
.modal-title { margin-bottom: 1rem; color: var(--text); }

/* ===================== Delete Modal ===================== */
.delete-modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.delete-modal-box { background: white; padding: 2rem; border-radius: var(--radius-card); max-width: 450px; text-align: center; }
.delete-modal-box h3 { margin-bottom: 0.5rem; }
.delete-modal-box p { margin: 1rem 0; color: #555; }
.delete-modal-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ===================== Actions Cell ===================== */
.actions { display: flex; gap: 0.5rem; }

/* ===================== Misc ===================== */
code { background: #f4f4f4; padding: 0.1rem 0.3rem; border-radius: 2px; font-size: 0.85em; }
hr { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
tr.anonymized { opacity: 0.6; }
tr.anonymized td { font-style: italic; }
.lock-icon { font-size: 0.7rem; color: #f1c40f; }