/* ==========================================================================
   TEKA Aftersales Kanban - Stylesheet
   Extrahiert aus Apps Script Stylesheet.html
   Stand: 24. März 2026
   ========================================================================== */

/* ==========================================================================
   1. FARBPALETTE & EINSTELLUNGEN
   ========================================================================== */

:root {
  --bg-body: #e6edf4;
  --text-main: #000000;
  --text-muted: #4b5563;
  --text-white: #ffffff;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #000000;
  --desc-bg: #f8fafc;
  --desc-border: #e5e7eb;
  --desc-text: #334155;
  --header-bg: #1b3a6b;
  --header-text: #ffffff;
  --color-blue: #3b82f6;
  --color-orange: #f59e0b;
  --color-red: #ef4444;
  --color-grey: #6b7280;
  --color-green: #10b981;
  --badge-bg-l: 93%;
  --badge-text-l: 25%;
  --badge-border-l: 85%;
  --btn-prog-bg: #f7e1c6;
  --btn-prog-border: #d6730f;
  --btn-prog-hover-border: #994d00;
  --btn-prog-active-bg: #faa63e;
  --btn-prog-text: #000000;
  --btn-wait-bg: #e5e7eb;
  --btn-wait-border: transparent;
  --btn-wait-hover-border: #4b5563;
  --btn-wait-active-bg: #6b7280;
  --btn-wait-text: #374151;
  --btn-wait-active-text: #ffffff;
  --btn-done-bg: #10b981;
  --btn-done-hover-bg: #047857;
  --btn-done-text: #ffffff;
}

[data-theme="dark"] {
  --bg-body: #374151;
  --text-main: #ffffff;
  --text-muted: #94a3b8;
  --card-bg: #4b5563;
  --card-border: #334155;
  --card-shadow: 0 4px 6px rgba(0,0,0,0.3);
  --modal-bg-alt: #0f172a;
  --input-bg: #1f2937;
  --input-border: #374151;
  --input-text: #f1f5f9;
  --desc-bg: #1f2937;
  --desc-border: #374151;
  --desc-text: #f1f5f9;
  --color-grey: #94a3b8;
  --header-bg: #1b3a6b;
  --badge-bg-l: 15%;
  --badge-text-l: 90%;
  --badge-border-l: 30%;
  --btn-prog-bg: #573103;
  --btn-prog-border: #b45309;
  --btn-prog-hover-bg: #f59b40;
  --btn-prog-hover-border: #fcd34d;
  --btn-prog-text: #fef3c7;
  --btn-prog-glow: rgba(245, 155, 64, 0.5);
  --btn-wait-bg: #573103;
  --btn-wait-border: #334155;
  --btn-wait-hover-bg: #64748b;
  --btn-wait-hover-border: #94a3b8;
  --btn-wait-text: #f1f5f9;
  --btn-wait-active-text: #ffffff;
  --btn-wait-glow: rgba(100, 116, 139, 0.5);
  --btn-done-bg: #065f46;
  --btn-done-border: #064e3b;
  --btn-done-hover-bg: #059669;
  --btn-done-hover-border: #10b981;
  --btn-done-text: #ecfdf5;
  --btn-done-glow: rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   2. BASIS & LAYOUT
   ========================================================================== */

body {
  background-color: var(--bg-body); color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-top: 10px; transition: background-color 0.3s, color 0.3s;
  height: 100vh; overflow-x: auto; overflow-y: hidden;
  display: flex; flex-direction: column;
}

body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, select, textarea, .modal-body {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

.header {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 20px; margin: 10px 24px 0 24px;
  border-radius: 12px; background: var(--header-bg); color: var(--header-text);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1030;
}
[data-theme="dark"] .header { box-shadow: 0 4px 6px rgba(0,0,0,0.3); }

.header-left { display: flex; align-items: center; gap: 25px; height: 100%; }
.title { display: flex; align-items: center; gap: 15px; font-size: 18px; font-weight: 700; white-space: nowrap; height: 100%; }
.title img { height: 32px; width: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); }

/* Umbruch (v1.1.0): mit der Nummernsuche summieren sich die Breiten der
   Bedienelemente ueber die Zeilenbreite hinaus. Ohne flex-wrap wuerde die Zeile
   ueberlaufen statt umzubrechen. row-gap haelt die Zeilen auf Abstand. */
.controls-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 10px; }

.header .form-select {
  border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.1); background-color: #f8fafc; color: #334155;
  font-size: 0.8rem; font-weight: 500; height: 30px; cursor: pointer;
}
.header .form-select:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
#filterResponsible, #filterDept { width: 135px !important; }
#filterActivity { width: 180px !important; }

.search-wrapper { position: relative; width: 250px; }
.search-input {
  width: 100%; height: 30px;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding-left: 35px; font-size: 0.8rem; color: var(--input-text);
}
.search-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; pointer-events: none; }

/* NUMMERNSUCHE (v1.1.0)
   .search-icon bleibt unveraendert (pointer-events: none) — sie gehoert zur
   bestehenden Volltextsuche. Die Lupe der Nummernsuche muss klickbar sein und
   bekommt deshalb eine eigene Klasse. */
.search-wrapper-number { width: 200px; }
.search-icon-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; cursor: pointer; }
.search-icon-btn:hover { color: var(--color-blue); }
.search-spinner { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: none; }
.search-input-clearable { padding-right: 30px; }
.search-clear-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 12px; cursor: pointer; display: none; }
.search-clear-btn:hover { color: #ef4444; }

/* Hinweiszeile zwischen Filterzeile und Board; Raender wie .filter-bar */
#searchInfoBar { display: none; margin: 10px 24px 0 24px; }
.search-info {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-radius: 10px;
  background-color: var(--card-bg); border: 1px solid var(--card-border);
  color: var(--text-main); font-size: 0.85rem; font-weight: 600;
}

.actions { display: flex; align-items: center; gap: 2px; }
.header-right { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: all 0.2s ease; padding: 0; text-decoration: none;
}
.icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
.icon-btn svg { stroke-width: 2; width: 22px; height: 22px; }
.icon-btn i { font-size: 20px; line-height: 1; }
.refresh-icon:hover svg { transform: rotate(15deg); }
.refresh-icon:hover i { transform: rotate(15deg); transition: transform 0.3s ease; }

.help-link {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none !important; color: inherit; transition: transform 0.2s ease, color 0.2s ease;
}
.help-link:hover { transform: scale(1.1); color: inherit !important; }
.help-link i { font-size: 24px; line-height: 1; }
.help-menu-icon { color: var(--color-blue); font-size: 1.3rem; }
[data-theme="dark"] .help-menu-icon { color: #60a5fa !important; }
.help-dropdown .dropdown-item { transition: background-color 0.2s ease, color 0.2s ease; }
.help-dropdown .dropdown-item:hover { background-color: #f1f5f9 !important; }
[data-theme="dark"] .help-dropdown .dropdown-item:hover { background-color: rgba(96, 165, 250, 0.15) !important; color: #ffffff !important; }

[data-theme="dark"] .filter-bar .form-select,
[data-theme="dark"] .search-input {
  background-color: var(--input-bg) !important; color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important; box-shadow: none !important;
}
[data-theme="dark"] .search-input::placeholder { color: var(--text-muted) !important; opacity: 1; }
[data-theme="dark"] .header .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; }

.icon-btn.active {
  background-color: rgba(255, 255, 255, 0.25);
}

.view-group { display: flex; align-items: center; gap: 2px; }
.view-btn i { font-size: 18px; line-height: 1; }

.header-divider {
  display: inline-block; width: 1px; height: 24px;
  background-color: rgba(255, 255, 255, 0.25); margin: 0 6px;
}

.plus-btn {
  width: 36px !important; height: 36px !important;
  background-color: var(--color-blue, #3b82f6) !important; color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.plus-btn i { font-size: 1.15rem; -webkit-text-stroke: 1px; }
.plus-btn:hover {
  background-color: var(--color-blue, #3b82f6) !important;
  transform: scale(1.05); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.profile-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background-color: #e57373; color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.9rem; font-family: 'Inter', sans-serif;
  cursor: default; user-select: none;
  flex-shrink: 0; margin-left: 4px;
  transition: border-color 0.2s ease;
}
.profile-btn:hover { border-color: #ffffff; }

/* ==========================================================================
   FILTER-LEISTE
   ========================================================================== */

.filter-bar {
  display: flex; align-items: center; padding: 12px 20px; margin: 10px 24px 0 24px;
  border-radius: 12px; background-color: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.05); z-index: 1020;
}
[data-theme="dark"] .filter-bar { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }

.filter-bar .dropdown .btn.form-select {
  background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding-right: 30px;
}
.filter-bar .dropdown .btn.form-select::after { display: none; }
.filter-bar .dropdown-menu {
  min-width: 240px; border: 1px solid var(--card-border); background-color: var(--card-bg);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); padding: 0;
}
/* Lückenlose Filter-Zeilen: ganze Zeile klickbar */
.filter-row { list-style: none; margin: 0; padding: 0; line-height: 1; }
.filter-row-label {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 14px; margin: 0; cursor: pointer;
  font-size: 0.85rem; color: var(--text-main); transition: background-color 0.1s ease;
  user-select: none; -webkit-user-select: none;
  border-left: 3px solid transparent;
}
.filter-row-label:hover { background-color: rgba(59, 130, 246, 0.08); }
.filter-row-label:active { background-color: rgba(59, 130, 246, 0.16); }
.filter-row-label:has(.filter-checkbox:checked) { background-color: rgba(59, 130, 246, 0.1); font-weight: 600; border-left-color: var(--color-blue, #3b82f6); }
.filter-row-label .form-check-input { margin: 0; cursor: pointer; flex-shrink: 0; }
.filter-row-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Auswahl aufheben" Sticky-Zeile oben */
.filter-clear-row {
  list-style: none; position: sticky; top: 0; z-index: 10;
  background: var(--card-bg); padding: 7px 14px;
  border-bottom: 1px solid var(--card-border);
}
.filter-clear-row a { color: var(--text-muted); display: block; }
.filter-clear-row a:hover { color: var(--color-blue); }
/* Filter-Dropdown-Menü: keine Bootstrap-Padding-Gaps */
.filter-bar .dropdown-menu { padding-top: 0; padding-bottom: 0; overflow: hidden; border-radius: 10px; }
/* Dark Mode */
[data-theme="dark"] .filter-row-label:hover { background-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .filter-row-label:active { background-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .filter-row-label:has(.filter-checkbox:checked) { background-color: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .filter-clear-row { background: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .filter-clear-row a { color: #94a3b8; }
[data-theme="dark"] .filter-clear-row a:hover { color: #bfdbfe; }

.my-tasks-btn {
  background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important; height: 30px; display: inline-flex; align-items: center;
  white-space: nowrap; font-weight: 500; font-size: 0.8rem; padding: 0 12px;
  border-radius: 6px; transition: all 0.2s ease;
}
.my-tasks-btn:hover { border-color: #94a3b8 !important; background-color: #f8fafc !important; }
.my-tasks-btn.active {
  background-color: #e0f2fe !important; border-color: #bae6fd !important;
  color: #0369a1 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
[data-theme="dark"] .my-tasks-btn { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; }
[data-theme="dark"] .my-tasks-btn:hover { border-color: #64748b !important; background-color: #334155 !important; }
[data-theme="dark"] .my-tasks-btn.active {
  background-color: #495b77 !important; border-color: #5a7396 !important;
  color: #ffffff !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

.btn-clear-filters {
  background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-muted);
  height: 30px; width: 30px; display: none; align-items: center; justify-content: center;
  border-radius: 6px; padding: 0; font-size: 0.85rem; transition: all 0.2s ease;
}
.btn-clear-filters.filter-active { display: inline-flex !important; }
.btn-clear-filters:hover { background-color: #ef4444; border-color: #ef4444; color: #ffffff; }
[data-theme="dark"] .btn-clear-filters:hover { background-color: #f87171; border-color: #f87171; color: #1f2937; }

/* ==========================================================================
   4. KANBAN BOARD & SPALTEN
   ========================================================================== */

.board-container { flex-grow: 1; height: 0; min-height: 0; margin-top: 10px; display: flex; padding: 20px 0; overflow-x: auto; }
.board-center-wrapper { display: flex; gap: 16px; margin: 0 auto; padding: 0 20px; width: 100%; }

.kanban-col {
  flex: 1; min-width: 280px; display: flex; flex-direction: column; height: 100%;
  background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: var(--card-shadow); overflow: hidden; transition: opacity 0.3s ease, filter 0.3s ease;
}
.kanban-col.col-disabled { opacity: 0.35; pointer-events: none; filter: grayscale(100%); }

.kanban-header {
  background: transparent !important; border-bottom: 1px solid var(--card-border);
  padding: 16px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 16px; color: var(--text-main) !important; min-height: 72px;
}
.col-header-blue, .col-header-orange, .col-header-grey, .col-header-green, .col-header-dynamic { border: none !important; }

.count-badge {
  font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.05);
  padding: 2px 10px; border-radius: 10px; color: var(--text-main); border: 1px solid var(--card-border);
}
[data-theme="dark"] .count-badge { background: rgba(255,255,255,0.1); }

.kanban-body {
  flex-grow: 1; overflow-y: auto; padding: 16px; scrollbar-width: thin;
  display: flex; flex-direction: column;
}

.col-bg-blue { border-top: 4px solid var(--color-blue); background-image: linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 0%, var(--card-bg) 300px); }
.col-bg-orange { border-top: 4px solid var(--color-orange); background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.1) 0%, var(--card-bg) 300px); }
.col-bg-grey { border-top: 4px solid var(--color-grey); background-image: linear-gradient(to bottom, rgba(107, 114, 128, 0.1) 0%, var(--card-bg) 300px); }
.col-bg-green { border-top: 4px solid var(--color-green); background-image: linear-gradient(to bottom, rgba(16, 185, 129, 0.1) 0%, var(--card-bg) 300px); }
.col-bg-dynamic { border-top: 4px solid hsl(var(--dynamic-hue), 70%, 50%); background-image: linear-gradient(to bottom, hsla(var(--dynamic-hue), 70%, 50%, 0.1) 0%, var(--card-bg) 300px); }

[data-theme="dark"] .kanban-col { background-color: #4b5563 !important; }
[data-theme="dark"] .col-bg-blue { background-image: linear-gradient(to bottom, rgba(59, 130, 246, 0.15) 0%, #4b5563 300px); }
[data-theme="dark"] .col-bg-orange { background-image: linear-gradient(to bottom, rgba(245, 158, 11, 0.15) 0%, #4b5563 300px); }
[data-theme="dark"] .col-bg-grey { background-image: linear-gradient(to bottom, rgba(107, 114, 128, 0.15) 0%, #4b5563 300px); }
[data-theme="dark"] .col-bg-green { background-image: linear-gradient(to bottom, rgba(16, 185, 129, 0.15) 0%, #4b5563 300px); }
[data-theme="dark"] .col-bg-dynamic { background-image: linear-gradient(to bottom, hsla(var(--dynamic-hue), 70%, 50%, 0.15) 0%, #4b5563 300px); }
[data-theme="dark"] #boardRow .text-muted { color: var(--text-white) !important; }

/* ==========================================================================
   5. KARTEN (CARDS) & INHALTE
   ========================================================================== */

.kanban-card {
  background-color: var(--card-bg); border: 1px solid var(--card-border);
  border-bottom: 3px solid #cbd5e1; border-radius: 8px; padding: 15px; margin-bottom: 10px;
  box-shadow: var(--card-shadow); cursor: pointer; position: relative; overflow: visible !important;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.kanban-card * { -webkit-user-drag: none; user-drag: none; }
[data-theme="dark"] .kanban-card { border-bottom: 3px solid #1f2937; }
.kanban-card:hover, .card-highlighted { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--color-blue), 0 4px 12px rgba(0,0,0,0.1) !important; z-index: 5; }

.kanban-card.dragging {
  opacity: 0.4 !important; background-color: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #374151 !important; box-shadow: none !important;
}
.kanban-card.dragging > * { visibility: hidden !important; }
[data-theme="dark"] .kanban-card.dragging {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 2px dashed #ffffff !important; border-bottom: 2px dashed #ffffff !important;
  box-shadow: none !important;
}
.kanban-card:has(.dropdown-menu.show) { z-index: 9999 !important; position: relative; }

.card-highlighted { background-color: #ebedf0 !important; }
[data-theme="dark"] .card-highlighted { background-color: #334155 !important; }

.card-title { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 10px; line-height: 1.4; }
.card-desc { font-size: 0.8rem; color: var(--text-muted); margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-row { display: flex; align-items: baseline; font-size: 0.8rem; margin-bottom: 4px; }
.card-label { width: 110px; flex-shrink: 0; color: var(--text-muted); font-size: 0.75rem; }

.link-badge {
  text-decoration: none !important; background: #e0f2fe !important; color: #0369a1 !important;
  border: 1px solid #bae6fd !important; font-size: 11.5px !important; font-weight: 600 !important;
  padding: 4px 10px; border-radius: 20px; transition: all 0.2s ease; cursor: pointer;
}
.link-badge:hover {
  background: #bae6fd !important; color: #0284c7 !important; border-color: #7dd3fc !important;
  transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
[data-theme="dark"] .link-badge { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; border-color: rgba(56, 189, 248, 0.3) !important; }
[data-theme="dark"] .link-badge:hover { background: rgba(56, 189, 248, 0.25) !important; color: #7dd3fc !important; }

.card-val { color: var(--text-main); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.badge-dept { font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; border: 1px solid transparent; }
.badge-clickable { cursor: pointer; transition: opacity 0.2s ease, transform 0.1s ease; }
.badge-clickable:hover { opacity: 0.8; transform: scale(1.05); }

.priority-pill {
  background-color: #fee2e2; color: #991b1b; border: 1px solid #fee2e2;
  padding: 1px 8px; border-radius: 6px; font-weight: 700; font-size: 0.75rem;
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
}
[data-theme="dark"] .priority-pill { background-color: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .kanban-card .border-top { border-color: var(--card-border) !important; }

.kanban-card .link-box-wrapper .btn-outline-primary {
  background-color: #e0f2fe !important; border-color: #bae6fd !important; color: #0369a1 !important;
}
.kanban-card .link-box-wrapper .btn-outline-primary:hover,
.kanban-card .link-box-wrapper .btn-outline-primary[aria-expanded="true"] {
  background-color: #bae6fd !important; border-color: #7dd3fc !important; color: #0284c7 !important;
}
[data-theme="dark"] .kanban-card .link-box-wrapper .btn-outline-primary {
  background-color: rgba(59, 130, 246, 0.15) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #bfdbfe !important;
}
[data-theme="dark"] .kanban-card .link-box-wrapper .btn-outline-primary:hover,
[data-theme="dark"] .kanban-card .link-box-wrapper .btn-outline-primary[aria-expanded="true"] {
  background-color: rgba(59, 130, 246, 0.25) !important; color: #ffffff !important;
}

[data-theme="dark"] .kanban-body .kanban-card {
  background-color: #1f2937 !important; border-color: #374151 !important; border-bottom: 3px solid #0f172a !important;
}
[data-theme="dark"] .kanban-body .kanban-card:hover,
[data-theme="dark"] .kanban-body .card-highlighted {
  background-color: #334155 !important; box-shadow: inset 0 0 0 2px #60a5fa, 0 4px 12px rgba(0,0,0,0.5) !important;
}

body.is-dragging .kanban-body .kanban-card:hover { transform: none !important; box-shadow: var(--card-shadow) !important; background-color: var(--card-bg) !important; }
[data-theme="dark"] body.is-dragging .kanban-body .kanban-card:hover { transform: none !important; background-color: #1f2937 !important; box-shadow: none !important; }

.kanban-col:has(.dragging) { filter: brightness(0.97); box-shadow: 0 0 15px rgba(59, 130, 246, 0.1), var(--card-shadow) !important; transition: filter 0.2s ease, box-shadow 0.2s ease; }
[data-theme="dark"] .kanban-col:has(.dragging) { filter: brightness(1.12); box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), var(--card-shadow) !important; }

/* ==========================================================================
   6. MODALE & FORMULARE
   ========================================================================== */

.modal-content { background-color: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text-main); }
.modal-header { border-bottom: none; padding: 20px 25px 0 25px; }
.modal-body { padding: 25px; }
.modal-footer { border-top: none; }
.modal-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 15px; display: block; letter-spacing: 1px; }
.field-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block; }
.form-select, .form-control { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); font-size: 0.9rem; cursor: pointer; }
.form-select:focus, .form-control:focus { background-color: var(--input-bg); color: var(--input-text); border-color: var(--color-blue); box-shadow: none; }
.form-select-sm { cursor: pointer; max-width: 160px; }

[data-theme="dark"] .modal-content { color: var(--text-white); }
[data-theme="dark"] .modal-content .text-muted, [data-theme="dark"] .form-control-plaintext, [data-theme="dark"] .text-body { color: #dbdbdb !important; }
[data-theme="dark"] .modal-section-title { color: var(--text-white) !important; font-weight: 800; }
.modal-content .bg-light-subtle { background-color: var(--desc-bg) !important; border-color: var(--desc-border) !important; color: var(--desc-text) !important; }
[data-theme="dark"] .list-group-item .fw-bold { color: var(--text-white) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: 1; }
[data-theme="dark"] ::-webkit-calendar-picker-indicator { filter: invert(1); }
[data-theme="dark"] #resubContainer { background-color: var(--card-bg) !important; border-color: #ffffff !important; color: var(--text-white) !important; }
[data-theme="dark"] input[type="date"] { background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--text-white) !important; color-scheme: dark; }

.form-select-priority {
  background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important;
  color: #b91c1c !important; font-weight: 800; width: 60px !important; text-align: center; padding-left: 12px !important;
}
[data-theme="dark"] .form-select-priority { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: #fca5a5 !important; }

[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; }
[data-theme="dark"] .dropdown-menu { background-color: var(--card-bg) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; }
[data-theme="dark"] .dropdown-item { color: var(--text-muted) !important; }
[data-theme="dark"] .dropdown-item:hover { background-color: rgba(59, 130, 246, 0.2) !important; color: var(--text-white) !important; }

[data-theme="dark"] .btn-outline-secondary { color: #f8fafc !important; background-color: rgba(255, 255, 255, 0.05) !important; border-color: #475569 !important; }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; }
[data-theme="dark"] .dropdown-item { color: #f1f5f9 !important; }

#orderForm a.btn-outline-secondary { background-color: #e0f2fe !important; border-color: #bae6fd !important; color: #0369a1 !important; transition: all 0.2s ease; }
#orderForm a.btn-outline-secondary:hover { background-color: #bae6fd !important; border-color: #7dd3fc !important; color: #0284c7 !important; }
[data-theme="dark"] #orderForm a.btn-outline-secondary { background-color: rgba(59, 130, 246, 0.15) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #bfdbfe !important; }
[data-theme="dark"] #orderForm a.btn-outline-secondary:hover { background-color: rgba(59, 130, 246, 0.25) !important; color: #ffffff !important; }

[data-theme="dark"] .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important; filter: none !important; }

select[name="responsible"] { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
select[name="responsible"]:hover { border-color: var(--color-blue) !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] select[name="responsible"]:hover { border-color: #60a5fa !important; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15) !important; }

select[name="priority"] { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
select[name="priority"]:hover { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] select[name="priority"]:hover { border-color: #f87171 !important; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15) !important; }

[data-theme="dark"] #resubContainer .text-secondary,
[data-theme="dark"] #resubContainer .text-secondary i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3e%3c/svg%3e") !important; opacity: 1 !important; filter: none !important; cursor: pointer; }
input[type="date"] { -webkit-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }

[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control:disabled { background-color: #374151 !important; border-color: #f8fafc !important; color: #94a3b8 !important; opacity: 0.8 !important; cursor: not-allowed; }

[data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; color: #fde68a !important; }
[data-theme="dark"] .alert-warning .bi-shield-lock-fill { color: #fbbf24 !important; }
[data-theme="dark"] .alert-warning b { color: #ffffff !important; }

/* ==========================================================================
   7. WORKFLOW BUTTONS
   ========================================================================== */

.status-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-workflow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; padding: 6px 12px; border-radius: 6px; transition: all 0.2s; width: 100%; justify-content: flex-start; text-align: left; }

.btn-workflow-unified { background-color: #ffffff !important; border: 1px solid var(--input-border) !important; color: var(--text-muted) !important; transition: all 0.2s ease; }
.btn-workflow-unified:hover { background-color: #f8fafc !important; border-color: #94a3b8 !important; color: #0f172a !important; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; }
.btn-workflow-unified:active, .btn-workflow-unified.active { background-color: #475569 !important; border-color: #334155 !important; color: #ffffff !important; transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important; }

[data-theme="dark"] .btn-workflow-unified { background-color: #2d3542 !important; border: 1px solid #1e293b !important; color: var(--text-muted) !important; }
[data-theme="dark"] .btn-workflow-unified:hover { background-color: #334155 !important; border-color: #64748b !important; color: #ffffff !important; transform: translateY(-1px); }
[data-theme="dark"] .btn-workflow-unified:active, [data-theme="dark"] .btn-workflow-unified.active { background-color: #e2e8f0 !important; border-color: #ffffff !important; color: #0f172a !important; transform: translateY(0); box-shadow: 0 0 10px rgba(255,255,255,0.1) !important; }

/* ==========================================================================
   8. EXTRAS, UTILITIES & ANIMATIONEN
   ========================================================================== */

.tooltip-inner { background-color: var(--card-bg) !important; color: var(--text-main) !important; border: 1px solid var(--text-muted); box-shadow: 0 2px 5px rgba(0,0,0,0.2); text-align: left !important; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--text-muted) !important; }
[data-theme="dark"] .bg-primary-subtle { background-color: rgba(59, 130, 246, 0.2) !important; color: white !important; }

.spin-animation { animation: spin 1s linear infinite; pointer-events: none; opacity: 0.8; }
@keyframes spin { 100% { transform: rotate(360deg); } }

#devModeBtn, #duplicateFilterBtn { display: none; opacity: 0.3; transition: all 0.3s; margin-right: 5px; }
#devModeBtn:hover, #duplicateFilterBtn:hover { opacity: 1; }
.dev-active { opacity: 1 !important; color: var(--color-red) !important; text-shadow: 0 0 10px rgba(239, 68, 68, 0.8); transform: scale(1.1); }

.kanban-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.kanban-body::-webkit-scrollbar { width: 8px; height: 8px; }
.kanban-body::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.kanban-body::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
.kanban-body::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
[data-theme="dark"] .kanban-body { scrollbar-color: #475569 transparent; }
[data-theme="dark"] .kanban-body::-webkit-scrollbar-thumb { background-color: #475569; }
[data-theme="dark"] .kanban-body::-webkit-scrollbar-thumb:hover { background-color: #64748b; }

/* ==========================================================================
   9. RESPONSIVE & LISTEN-ANSICHT
   ========================================================================== */

.list-container { flex-grow: 1; height: 0; min-height: 0; margin-top: 10px; padding: 0 24px 24px 24px; display: none; overflow-y: auto; scrollbar-width: thin; }
.table-scroll-container { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--card-shadow); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
.data-table thead th:first-child { border-top-left-radius: 12px; }
.data-table thead th:last-child { border-top-right-radius: 12px; }
.data-table thead th { position: sticky; top: 0; background-color: #d8e1ea; z-index: 100; color: var(--text-main); padding: 12px 16px 20px 16px; font-size: 11px; text-transform: uppercase; font-weight: 700; border-bottom: none; }
.data-table thead th::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background-color: var(--card-border); }
.data-table tbody tr { background: var(--card-bg); transition: 0.2s; cursor: pointer; position: relative; z-index: 1; }

.data-table tbody tr.kanban-card:hover, .data-table tbody tr.card-highlighted { z-index: 10 !important; transform: none !important; box-shadow: none !important; outline: none !important; }
.data-table tbody tr.kanban-card:hover td, .data-table tbody tr.card-highlighted td { box-shadow: inset 0 2px 0 0 var(--color-blue), inset 0 -2px 0 0 var(--color-blue) !important; background-color: rgba(59, 130, 246, 0.04); }
.data-table tbody tr.kanban-card:hover td:first-child, .data-table tbody tr.card-highlighted td:first-child { box-shadow: inset 2px 2px 0 0 var(--color-blue), inset 0 -2px 0 0 var(--color-blue) !important; }
.data-table tbody tr.kanban-card:hover td:last-child, .data-table tbody tr.card-highlighted td:last-child { box-shadow: inset -2px 2px 0 0 var(--color-blue), inset 0 -2px 0 0 var(--color-blue) !important; }

[data-theme="dark"] .data-table tbody tr.kanban-card:hover td, [data-theme="dark"] .data-table tbody tr.card-highlighted td { box-shadow: inset 0 2px 0 0 #60a5fa, inset 0 -2px 0 0 #60a5fa !important; background-color: rgba(96, 165, 250, 0.08); }
[data-theme="dark"] .data-table tbody tr.kanban-card:hover td:first-child, [data-theme="dark"] .data-table tbody tr.card-highlighted td:first-child { box-shadow: inset 2px 2px 0 0 #60a5fa, inset 0 -2px 0 0 #60a5fa !important; }
[data-theme="dark"] .data-table tbody tr.kanban-card:hover td:last-child, [data-theme="dark"] .data-table tbody tr.card-highlighted td:last-child { box-shadow: inset -2px 2px 0 0 #60a5fa, inset 0 -2px 0 0 #60a5fa !important; }

.data-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--card-border); vertical-align: middle; font-size: 0.85rem; }

.status-select-modern {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; min-width: 150px; padding: 6px 32px 6px 12px; border-radius: 6px;
  background: #f1f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid #cbd5e1; color: #334155; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.status-select-modern:focus { border-color: var(--color-blue); outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.status-select-modern:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bg-body); }
.status-select-modern option:disabled { color: var(--text-muted); font-style: italic; }

[data-theme="dark"] .data-table thead th { background: var(--bg-body); color: var(--text-main); }
[data-theme="dark"] .data-table tbody tr { background: var(--card-bg); }
[data-theme="dark"] .status-select-modern { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; }

.list-desc-text { color: var(--text-muted); }
[data-theme="dark"] .list-desc-text { color: #e2e8f0 !important; }

.data-table thead th.sortable { cursor: pointer; user-select: none; transition: color 0.2s ease; }
.data-table thead th.sortable:hover { color: var(--color-blue); }
[data-theme="dark"] .data-table thead th.sortable:hover { color: #60a5fa; }

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

@media (min-width: 993px) {
  body:not(.mobile-mode-active) #orderModal .modal-dialog { display: flex !important; align-items: center !important; min-height: calc(100% - 3.5rem) !important; }
  body:not(.mobile-mode-active) #orderModal .modal-content { height: 90vh !important; max-height: 90vh !important; overflow: hidden !important; }
  body:not(.mobile-mode-active) #orderModal .modal-body { padding: 0 !important; }
  body:not(.mobile-mode-active) #orderForm .col-lg-8, body:not(.mobile-mode-active) #orderForm .col-lg-4 { height: calc(90vh - 140px) !important; max-height: calc(90vh - 140px) !important; overflow-y: auto !important; }
}

@media (min-width: 993px) {
  body:not(.mobile-mode-active) #orderModal.is-fs .modal-dialog { max-width: 100vw !important; min-height: 100vh !important; margin: 0 !important; }
  body:not(.mobile-mode-active) #orderModal.is-fs .modal-content { height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; border: none !important; }
  body:not(.mobile-mode-active) #orderModal.is-fs .hide-in-fs { display: none !important; }
  body:not(.mobile-mode-active) #orderModal.is-fs #orderForm .col-lg-12 { height: calc(100vh - 140px) !important; max-height: calc(100vh - 140px) !important; overflow-y: auto !important; }
}

@media (max-width: 992px) {
  .header { height: 80px !important; flex-direction: row !important; justify-content: space-between; position: relative; margin: 10px 10px 0 10px; }
  .title img { height: 45px !important; }
  #mobileHeaderToggle { color: var(--text-white) !important; }
  .actions { display: none !important; position: absolute; top: 60px; right: 0px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 15px; flex-direction: column; align-items: flex-start; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 2000; min-width: 260px; }
  .actions.show-mobile-actions { display: flex !important; }
  .actions .icon-btn { color: var(--text-main) !important; width: 100%; justify-content: flex-start; padding: 12px 10px; font-size: 1.3rem; border-radius: 8px; background-color: rgba(128,128,128,0.05); }
  .actions .icon-btn:hover { transform: none; background-color: rgba(128,128,128,0.1); }
  .actions .icon-btn::after { content: attr(title); font-size: 1rem; font-family: 'Inter', sans-serif; margin-left: 15px; font-weight: 600; }
  .actions .view-group { flex-direction: column; width: 100%; gap: 6px; }
  .actions .view-group .icon-btn { width: 100%; }
  .actions .header-divider { width: 100%; height: 1px; background-color: var(--card-border); margin: 6px 0; }
  .actions .plus-btn { background-color: var(--color-blue, #2f3e8b) !important; color: #fff !important; }
  .actions .plus-btn::after { color: #fff; }
  .actions .profile-btn { width: 100%; justify-content: flex-start; border-radius: 8px; padding: 12px 10px; background-color: #e57373; color: #fff; font-size: 1rem; }
  .actions .profile-btn::after { content: attr(title); font-size: 1rem; font-family: 'Inter', sans-serif; margin-left: 15px; font-weight: 600; }
  .actions .profile-btn span { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; }
  .filter-bar { flex-direction: column; align-items: stretch; padding: 12px; height: auto !important; margin: 10px 10px 0 10px; }
  #mobileFilterToggleBtn { display: flex !important; height: 60px; font-size: 1.2rem; }
  .controls-wrapper { display: none !important; flex-direction: column; width: 100%; gap: 12px; margin-top: 15px; }
  .controls-wrapper.show-mobile-filters { display: flex !important; }
  .filter-bar .dropdown, .filter-bar .dropdown .btn.form-select, .search-wrapper, .search-input { width: 100% !important; max-width: none !important; height: 48px !important; font-size: 1.1rem !important; }
  .filter-bar .dropdown-menu { width: 100% !important; max-width: none !important; }
  .btn-clear-filters { width: 100%; height: 48px; font-size: 1.1rem; justify-content: center; }
  .btn-clear-filters::after { content: " Filter zurücksetzen"; font-weight: bold; margin-left: 10px; }
  .my-tasks-btn { height: 48px; font-size: 1.1rem; justify-content: center; width: 100%; }
  /* Nummernsuche (v1.1.0): die Regel eine Zeile hoeher fasst .search-wrapper und
     .search-input per Klasse und nimmt das neue Feld damit mit (100 %, 48 px).
     Hinweiszeile auf dieselben Raender wie .filter-bar. */
  #searchInfoBar { margin: 10px 10px 0 10px; }
  .modal-body { padding: 12px; }
  .modal-title { font-size: 1.2rem !important; }
  .modal-content .field-label { font-size: 0.95rem !important; margin-bottom: 6px; color: var(--text-main); }
  .modal-content .form-select, .modal-content .form-control { font-size: 1rem !important; padding: 10px !important; min-height: 44px; }
  .modal-section-title { font-size: 0.95rem !important; margin-bottom: 15px; }
  .btn-workflow-unified { font-size: 1.05rem !important; padding: 12px !important; margin-bottom: 5px; }
  .subbox { font-size: 0.95rem !important; }
  .subrow { padding: 10px 12px !important; grid-template-columns: 1fr 1.5fr; gap: 10px; }
  .subrow .label { font-size: 0.9rem !important; }
  .subrow .value { font-size: 0.95rem !important; white-space: normal; word-break: break-word; text-align: left; }
  .address-title { font-size: 0.95rem !important; padding: 12px !important; }
  .address-body table { font-size: 0.9rem !important; }
  .address-body th, .address-body td { padding: 10px 8px !important; white-space: nowrap !important; }
  #asyncLinksContainer .btn-outline-secondary { font-size: 0.95rem !important; padding: 8px 12px !important; }
  .modal-footer .btn { font-size: 1.05rem !important; padding: 12px 20px !important; width: 100%; margin-bottom: 10px; }
  .modal-footer .d-flex { flex-direction: column-reverse; width: 100%; gap: 10px; }
}

@media (max-width: 600px) {
  .kanban-col { flex: none; min-width: 85vw; width: 85vw; scroll-snap-align: center; }
  .mobile-container { grid-template-columns: 1fr !important; }
}

@media (max-width: 500px) {
  .title { font-size: 14px; gap: 8px; white-space: normal; line-height: 1.2; }
  .title img { height: 35px !important; }
}

body.mobile-mode-active .modal-dialog { margin: 0 !important; max-width: 100vw !important; }
body.mobile-mode-active .modal-content { border-radius: 0 !important; min-height: 100vh !important; border: none !important; }
body.mobile-mode-active .modal-header .btn-close { position: fixed !important; top: 15px !important; right: 15px !important; z-index: 9999 !important; background-color: var(--card-bg) !important; padding: 12px !important; border-radius: 50% !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; opacity: 1 !important; border: 1px solid var(--card-border) !important; }

@media (min-width: 1200px) { .modal-xl { max-width: 90vw !important; } }

/* ==========================================================================
   MODAL DARK MODE FEINTUNING
   ========================================================================== */

[data-theme="dark"] .modal-content { background-color: #374151 !important; border: 1px solid #1f2937 !important; }
[data-theme="dark"] .modal-content label, [data-theme="dark"] .modal-content .form-label, [data-theme="dark"] .modal-content h5, [data-theme="dark"] .modal-content h6 { color: #e2e8f0 !important; }
[data-theme="dark"] .modal-header .text-muted, [data-theme="dark"] .modal-header span, [data-theme="dark"] .modal-title { color: #e2e8f0 !important; }
[data-theme="dark"] .modal-content a, [data-theme="dark"] .modal-content .list-group-item, [data-theme="dark"] .modal-content .btn-outline-primary { color: #e2e8f0 !important; }
[data-theme="dark"] .modal-content a:hover, [data-theme="dark"] .modal-content .btn-outline-primary:hover { color: #ffffff !important; }

[data-theme="dark"] #confirmDoneModal .modal-content { background-color: #111827 !important; border: 1px solid #374151 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.8) !important; }
[data-theme="dark"] #confirmDoneModal .modal-title, [data-theme="dark"] #confirmDoneModal .modal-body, [data-theme="dark"] #confirmDoneModal .modal-body p { color: #e2e8f0 !important; }
[data-theme="dark"] #confirmDoneModal .btn-close { filter: none !important; }
[data-theme="dark"] .data-table tbody .text-muted { color: #e2e8f0 !important; }
[data-theme="dark"] .data-table thead th { background-color: #414b5a !important; }

/* ==========================================================================
   DRAG & DROP SPACER
   ========================================================================== */

.dnd-poly-drag-image { pointer-events: none !important; }

.dragging-spacer {
  background-color: rgba(59, 130, 246, 0.15) !important; border: 2px dashed var(--color-blue) !important;
  box-shadow: none !important; opacity: 1 !important; pointer-events: none !important; display: block !important;
}
.dragging-spacer > * { visibility: hidden !important; }

[data-theme="dark"] .kanban-body .dragging-spacer { background-color: rgba(255, 255, 255, 0.1) !important; border: 2px dashed #f8fafc !important; border-bottom: 2px dashed #f8fafc !important; }
[data-theme="dark"] .kanban-body .kanban-card.dragging { background-color: #0f172a !important; opacity: 0.7 !important; border: 1px solid #475569 !important; border-bottom: 1px solid #475569 !important; box-shadow: none !important; }
.kanban-body:has(.dragging) .dragging-spacer { display: none !important; }

/* ==========================================================================
   DASHBOARD DETAIL-ANSICHT (MODAL)
   ========================================================================== */

.panel-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:800px) { .panel-cols-2 { grid-template-columns: 1fr; } }

.subbox { border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; background: var(--card-bg); font-size: 0.85rem; }
.subrow { display: grid; grid-template-columns: 1fr 1fr; padding: 7px 10px; border-bottom: 1px solid var(--card-border); background: var(--bg-body); }
.subrow:nth-child(even) { background: var(--card-bg); }
.subrow:last-child { border-bottom: none; }
.subrow .label { color: var(--text-muted); }
.subrow .value { text-align: right; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.address-title { padding: 8px 10px; background: var(--bg-body); color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--card-border); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px; }
.address-body { background: var(--card-bg); color: var(--text-main); }
.address-body table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.address-body th { background: var(--bg-body); color: var(--text-muted); padding: 8px 10px; text-align: left; font-weight: 600; position: sticky; top: 0; }
.address-body td { padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
.address-body tr:last-child td { border-bottom: none; }

[data-theme="dark"] .subrow { background: transparent; }
[data-theme="dark"] .subrow:nth-child(even) { background: #2d3748 !important; }
[data-theme="dark"] .address-title, [data-theme="dark"] .address-body th { background: #293242 !important; color: #ffffff !important; }
[data-theme="dark"] .address-body table, [data-theme="dark"] .address-body table td { background-color: transparent !important; color: #e2e8f0 !important; border-color: var(--card-border) !important; }

.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
[data-theme="dark"] .custom-scrollbar { scrollbar-color: #475569 transparent; }
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #475569; }

/* ==========================================================================
   LOADER
   ========================================================================== */

#loader-overlay { position: fixed; inset: 0; background: var(--bg-body); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.6s ease; }
.loader-text { color: var(--text-muted); font-weight: 600; letter-spacing: 1px; font-size: 14px; animation: textPulse 1.5s infinite ease-in-out; margin-top: 30px; }
.main-loader-wrapper { position: relative; display: flex; justify-content: center; align-items: center; }
.main-glow-ring { position: absolute; width: 200px; height: 200px; background: var(--color-blue); filter: blur(60px); border-radius: 50%; opacity: 0.15; animation: epicPulse 2.5s ease-in-out infinite alternate; z-index: 0; }
[data-theme="dark"] .main-glow-ring { opacity: 0.25; }
.main-logo-container { position: relative; width: 220px; z-index: 1; }
.main-logo-active { width: 100%; height: auto; filter: brightness(0) saturate(100%) invert(18%) sepia(45%) saturate(2971%) hue-rotate(218deg) brightness(96%) contrast(93%); clip-path: inset(0 0 100% 0); animation: formFromTopMain 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
[data-theme="dark"] .main-logo-active { filter: brightness(0) saturate(100%) invert(75%) sepia(21%) saturate(1478%) hue-rotate(185deg) brightness(101%) contrast(102%); }
.main-scanner-line { position: absolute; top: 0; left: -20%; width: 140%; height: 3px; background: var(--color-blue); box-shadow: 0 0 25px 6px var(--color-blue), 0 0 8px 2px #ffffff; border-radius: 50%; z-index: 2; animation: scanMoveMain 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

@keyframes epicPulse { 0% { transform: scale(0.7); opacity: 0.05; } 100% { transform: scale(1.6); opacity: 0.25; } }
@keyframes formFromTopMain { 0% { clip-path: inset(0 0 100% 0); opacity: 1; } 90% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes scanMoveMain { 0% { top: 0%; opacity: 0; } 5% { opacity: 1; } 90% { top: 100%; opacity: 1; } 95% { top: 100%; opacity: 0; } 100% { top: 100%; opacity: 0; } }
@keyframes textPulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   ESKALATION / WIEDERVORLAGE FÄLLIG
   ========================================================================== */

/* Vorherige Wiedervorlage - bewusst zurueckhaltend (Juli 2026) */
.resub-row .card-label { width: auto !important; flex-shrink: 0; margin-right: 6px; }
.resub-row-prev .card-label, .resub-row-prev .card-val { color: var(--text-muted) !important; font-weight: 400 !important; font-size: 0.72rem !important; }
.resub-prev-inline { color: var(--text-muted); font-weight: 400; cursor: help; display: inline-block; }

.kanban-card.card-overdue { border-color: #ef4444 !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important; }
[data-theme="dark"] .kanban-body .kanban-card.card-overdue { border-color: #f87171 !important; box-shadow: 0 0 12px rgba(248, 113, 113, 0.25) !important; }

.data-table tbody tr.card-overdue td { box-shadow: inset 0 2px 0 0 #ef4444, inset 0 -2px 0 0 #ef4444 !important; background-color: rgba(239, 68, 68, 0.04) !important; }
.data-table tbody tr.card-overdue td:first-child { box-shadow: inset 2px 2px 0 0 #ef4444, inset 0 -2px 0 0 #ef4444 !important; }
.data-table tbody tr.card-overdue td:last-child { box-shadow: inset -2px 2px 0 0 #ef4444, inset 0 -2px 0 0 #ef4444 !important; }
[data-theme="dark"] .data-table tbody tr.card-overdue td { box-shadow: inset 0 2px 0 0 #f87171, inset 0 -2px 0 0 #f87171 !important; background-color: rgba(248, 113, 113, 0.08) !important; }
[data-theme="dark"] .data-table tbody tr.card-overdue td:first-child { box-shadow: inset 2px 2px 0 0 #f87171, inset 0 -2px 0 0 #f87171 !important; }
[data-theme="dark"] .data-table tbody tr.card-overdue td:last-child { box-shadow: inset -2px 2px 0 0 #f87171, inset 0 -2px 0 0 #f87171 !important; }

.kanban-card.card-overdue:hover, .card-overdue.card-highlighted { border-color: var(--color-blue) !important; }
[data-theme="dark"] .kanban-body .kanban-card.card-overdue:hover, [data-theme="dark"] .kanban-body .card-overdue.card-highlighted { border-color: #60a5fa !important; }

.resub-row { background-color: #fee2e2; padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; }
[data-theme="dark"] .kanban-body .kanban-card .resub-row { background-color: rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .kanban-body .kanban-card .resub-row .text-danger { color: #fca5a5 !important; }

/* ==========================================================================
   GESPERRTE LINKS & BLAUE TEXT-LINKS
   ========================================================================== */

.link-disabled { opacity: 0.5 !important; pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(80%); }
[data-theme="dark"] .link-disabled { opacity: 0.35 !important; filter: grayscale(100%); }

[data-theme="dark"] .modal-content .subbox a:not(.link-disabled):not(.btn) { color: #60a5fa !important; }
[data-theme="dark"] .modal-content .subbox a:not(.link-disabled):not(.btn):hover { color: #93c5fd !important; text-decoration: underline !important; }

/* ==========================================================================
   MOBILE VIEW
   ========================================================================== */

.mobile-container { flex: 1; overflow-y: auto; padding: 10px; display: none; grid-template-columns: repeat(auto-fill, minmax(calc(320px * var(--m-scale)), 1fr)); align-items: start; align-content: start; gap: calc(16px * var(--m-scale)); -webkit-overflow-scrolling: touch; --m-scale: 1; }
.mobile-card { width: 100%; background: var(--mc-bg, var(--card-bg)); border: 1px solid var(--card-border); border-radius: calc(12px * var(--m-scale)); padding: calc(16px * var(--m-scale)); display: flex; flex-direction: column; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: background 0.3s, transform 0.1s; font-size: calc(14px * var(--m-scale)); cursor: pointer; }

.mc-open { --mc-bg: rgba(59, 130, 246, 0.05); border-left: calc(6px * var(--m-scale)) solid var(--color-blue); }
.mc-prog { --mc-bg: rgba(245, 158, 11, 0.08); border-left: calc(6px * var(--m-scale)) solid var(--color-orange); }
.mc-lock { --mc-bg: rgba(107, 114, 128, 0.08); border-left: calc(6px * var(--m-scale)) solid var(--color-grey); }
.mc-done { --mc-bg: rgba(16, 185, 129, 0.05); border-left: calc(6px * var(--m-scale)) solid var(--color-green); }
.mc-dynamic { --mc-bg: rgba(107, 114, 128, 0.02); border-left: calc(6px * var(--m-scale)) solid var(--color-grey); }

[data-theme="dark"] .mc-open { --mc-bg: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .mc-prog { --mc-bg: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .mc-lock { --mc-bg: rgba(107, 114, 128, 0.25); }
[data-theme="dark"] .mc-done { --mc-bg: rgba(16, 185, 129, 0.2); }

.mobile-card-header { display: flex; justify-content: space-between; align-items: center; gap: calc(6px * var(--m-scale)); }
.mobile-card-title { font-weight: 800; color: var(--text-main); font-size: calc(15px * var(--m-scale)); line-height: 1.3; }

.mobile-status-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%;
  padding: calc(10px * var(--m-scale)) calc(32px * var(--m-scale)) calc(10px * var(--m-scale)) calc(10px * var(--m-scale));
  font-size: calc(14px * var(--m-scale)); border-radius: calc(8px * var(--m-scale));
  border: 1px solid var(--input-border); background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right calc(10px * var(--m-scale)) center; background-size: calc(16px * var(--m-scale));
  color: var(--input-text); font-weight: 700; outline: none; text-overflow: ellipsis;
}
.mobile-status-select:disabled { opacity: 0.7; cursor: not-allowed; }
[data-theme="dark"] .mobile-status-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); }

/* ==========================================================================
   HARD SNAP, SOFT RELOAD & PROGRESS BAR
   ========================================================================== */

.theme-snap, .theme-snap * { transition: none !important; }

body.is-updating .board-container, body.is-updating .list-container, body.is-updating .mobile-container { opacity: 0.5; pointer-events: none; filter: grayscale(30%); }
.is-prefetching { opacity: 0.5 !important; pointer-events: none !important; filter: grayscale(30%) !important; }
.board-container, .list-container, .mobile-container, #asyncModalData { transition: opacity 0.3s ease, filter 0.3s ease; }

.modal-progress-wrapper { margin-bottom: 1.5rem; transition: opacity 0.4s ease; }
.modal-progress-track { height: 4px; background: rgba(59, 130, 246, 0.15); border-radius: 4px; overflow: hidden; }
.modal-progress-bar { height: 100%; width: 0%; background: var(--color-blue); }
[data-theme="dark"] .modal-progress-track { background: rgba(96, 165, 250, 0.15); }
[data-theme="dark"] .modal-progress-bar { background: #60a5fa; }

/* ==========================================================================
   COLLAPSIBLE SECTIONS (Chevron-Rotation)
   ========================================================================== */

.subbox-header { cursor: pointer; user-select: none; }
.subbox-header .collapse-icon { transition: transform 0.3s ease; }
.subbox-header[aria-expanded="false"] .collapse-icon { transform: rotate(-90deg); }
.subbox-header[aria-expanded="true"] .collapse-icon { transform: rotate(0deg); }