/**
 * Wachbuch ERP-System - Hauptstyles
 * Modernes, responsives Design für industrielle Anwendungen
 */

/* ===== CSS-Variablen ===== */
:root {
    /* Primärfarben */
    --primary-color: #2563eb;
    --primary-rgb: 37, 99, 235;
    --primary-hover: #1d4ed8;
    --primary-light: #3b82f6;
    
    /* Sekundärfarben */
    --secondary-color: #64748b;
    --secondary-hover: #475569;
    
    /* Akzentfarben */
    --accent-color: #f59e0b;
    --accent-color-rgb: 245, 158, 11;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    
    /* Hintergrundfarben */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    
    /* Textfarben */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* Rahmen */
    --border-color: #334155;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    
    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    
    /* Größen */
    --topbar-height: 60px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --db-banner-height: 0px;
    
    /* Übergänge */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* ===== Helles Farbschema ===== */
[data-theme="light"] {
    --primary-color: #2563eb;
    --primary-rgb: 37, 99, 235;
    --primary-hover: #1d4ed8;
    --primary-light: #3b82f6;

    --secondary-color: #64748b;
    --secondary-hover: #475569;

    --accent-color: #d97706;
    --accent-color-rgb: 217, 119, 6;
    --success-color: #059669;
    --warning-color: #d97706;
    --danger-color: #dc2626;

    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border-color: #cbd5e1;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Helles Theme: spezifische Korrekturen */
[data-theme="light"] .login-container {
    background: #ffffff;
    border-color: var(--border-color);
}
[data-theme="light"] .sidebar {
    background: #ffffff;
    border-right-color: var(--border-color);
}
[data-theme="light"] .top-bar {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom-color: var(--border-color);
}
[data-theme="light"] .modal-content {
    background: #ffffff;
}
[data-theme="light"] .data-table th {
    background: #f1f5f9;
}
[data-theme="light"] .data-table tr:hover td {
    background: #f8fafc;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #f8fafc;
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="light"] .btn {
    color: var(--text-primary);
}
[data-theme="light"] .btn-primary {
    color: #ffffff;
}
[data-theme="light"] .user-dropdown {
    background: #ffffff;
    border-color: var(--border-color);
}
[data-theme="light"] .settings-menu-card {
    background: #f8fafc;
    border-color: var(--border-color);
}
[data-theme="light"] .settings-menu-card:hover {
    background: #f1f5f9;
}

/* Theme Toggle Button Styling */
.theme-toggle-btn.active {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

/* ===== Reset & Basis ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Datepicker "Leeren/Clear" Button verstecken */
/* Chrome, Safari, Edge */
input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Firefox - Clear button im Date Input verstecken */
input[type="date"]::-moz-clear {
    display: none !important;
}

/* Input erscheint als type="text" falls das Clear nicht funktioniert */
input[type="date"] {
    -moz-appearance: none;
}

/* Flatpickr Clear Button verstecken */
.flatpickr-clear,
button.flatpickr-clear {
    display: none !important;
}

/* Flatpickr Anpassungen für dunkles Theme */
.flatpickr-calendar {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.flatpickr-months .flatpickr-month {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--text-primary) !important;
}

.flatpickr-weekdays {
    background: var(--bg-secondary) !important;
}

.flatpickr-weekday {
    color: var(--text-secondary) !important;
}

.flatpickr-day {
    color: var(--text-primary) !important;
}

.flatpickr-day:hover {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.flatpickr-day.selected {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

.flatpickr-day.today {
    border-color: var(--accent-color) !important;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ===== App-Container ===== */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== Top-Leiste ===== */
.top-bar {
    position: fixed;
    top: var(--db-banner-height);
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    transition: top 0.3s ease;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.app-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hamburger-Menü-Button (standardmäßig versteckt, nur auf Mobile sichtbar) */
.mobile-menu-btn {
    display: none !important;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.top-bar-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.top-bar-btn .material-icons {
    font-size: 24px;
}

/* Badge für Benachrichtigungen */
.badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Badge-Count für inline Zähler */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 8px;
}

/* ===== Hauptbereich ===== */
.main-wrapper {
    display: flex;
    margin-top: calc(var(--topbar-height) + var(--db-banner-height));
    min-height: calc(100vh - var(--topbar-height) - var(--db-banner-height));
    transition: margin-top 0.3s ease, min-height 0.3s ease;
}

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--topbar-height) + var(--db-banner-height));
    width: var(--sidebar-width);
    height: calc(100vh - var(--topbar-height) - var(--db-banner-height));
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal), top 0.3s ease, height 0.3s ease;
    z-index: 900;
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Toggle */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sidebar-toggle .material-icons {
    font-size: 26px;
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-list {
    list-style: none;
}

.nav-item {
    position: relative;
    margin: 4px 12px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
}

.nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active .nav-link {
    background: var(--primary-color);
    color: var(--text-primary);
}

.nav-link .material-icons {
    font-size: 22px;
    min-width: 22px;
    margin-right: 14px;
    transition: margin var(--transition-normal);
}

.nav-text {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 1;
    transition: opacity var(--transition-normal);
}

/* Collapsed Sidebar */
.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 12px;
}

.sidebar.collapsed .nav-link .material-icons {
    margin-right: 0;
}

.sidebar.collapsed .nav-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Tooltip für collapsed Sidebar */
.nav-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-fast);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.sidebar.collapsed .nav-item:hover[data-tooltip]::after {
    opacity: 1;
    visibility: visible;
}

/* ===== Content-Bereich ===== */
.content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px;
    transition: margin-left var(--transition-normal);
    min-height: calc(100vh - var(--topbar-height) - var(--db-banner-height));
    background: var(--bg-primary);
}

.sidebar.collapsed ~ .content {
    margin-left: var(--sidebar-collapsed-width);
}

/* ===== Seiten ===== */
.page {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.page.active {
    display: block;
}

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

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.page-content {
    width: 100%;
}

/* ===== Dashboard Grid ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Statistik-Karten */
.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--border-radius);
}

.stat-icon .material-icons {
    font-size: 28px;
    color: white;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Willkommens-Karte */
.welcome-card {
    padding: 32px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

.welcome-card h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.welcome-card p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ===== Einstellungen-Menü Grid ===== */
.settings-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.settings-menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.settings-menu-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.settings-menu-card .material-icons {
    font-size: 36px;
    color: var(--primary-color);
}

.settings-menu-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
}

/* ===== Datentabelle ===== */
.data-table-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.table-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

.table-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.table-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 20px;
    pointer-events: none;
}

.filter-input {
    padding: 10px 36px 10px 42px;
    font-size: 0.875rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    min-width: 250px;
    transition: all var(--transition-fast);
}

.filter-input::placeholder {
    color: var(--text-muted);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.filter-clear-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
    opacity: 0;
    pointer-events: none;
}

.filter-clear-btn .material-icons {
    font-size: 18px;
}

.filter-clear-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.filter-wrapper:has(.filter-input:not(:placeholder-shown)) .filter-clear-btn,
.filter-wrapper .filter-clear-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Filter-Chips (kompakte Icon-Buttons mit Popup) */
.filter-chips {
    display: flex;
    gap: 6px;
    margin-left: 8px;
    align-items: center;
}

.filter-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1e293b;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.filter-chip:hover {
    border-color: var(--primary);
    background: #253348;
}

.filter-chip.active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.15);
}

.filter-chip.has-filter {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 1px var(--primary);
}

.filter-chip-icon {
    font-size: 20px;
    color: #9ca3af;
    transition: color 0.15s ease;
}

.filter-chip:hover .filter-chip-icon,
.filter-chip.active .filter-chip-icon {
    color: var(--primary);
}

.filter-chip.has-filter .filter-chip-icon {
    color: #60a5fa;
}

/* Popup-Menü */
.filter-chip-popup {
    display: none;
    position: fixed;
    background: #1e293b;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 160px;
    z-index: 10000;
    padding: 4px;
    animation: filterPopupIn 0.15s ease;
}

@keyframes filterPopupIn {
    from { opacity: 0; margin-top: -4px; }
    to   { opacity: 1; margin-top: 0; }
}

.filter-chip-popup.visible {
    display: block;
}

.filter-chip-popup-scroll {
    max-height: 370px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-chip-popup-scroll::-webkit-scrollbar {
    width: 6px;
}

.filter-chip-popup-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.filter-chip-popup-scroll::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

.filter-chip-popup-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Datum-Baum (Excel-Style) */
.datum-tree-popup {
    min-width: 260px;
    max-width: 320px;
}

.datum-tree-search {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
}

.datum-tree-search input {
    width: 100%;
    background: #0f172a;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 10px;
    color: #d1d5db;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.datum-tree-search input:focus {
    border-color: var(--primary);
}

.datum-tree-scroll {
    max-height: 370px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 4px 4px 4px;
}

.datum-tree-scroll::-webkit-scrollbar {
    width: 6px;
}

.datum-tree-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.datum-tree-scroll::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

.table-scroll {
    overflow-x: auto;
}

.datum-tree-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    color: #d1d5db;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 3px;
    user-select: none;
    white-space: nowrap;
}

.datum-tree-node:hover {
    background: rgba(59, 130, 246, 0.1);
}

.datum-tree-select-all {
    display: flex;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-radius: 0;
}

.datum-tree-toggle {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    border-radius: 3px;
}

.datum-tree-toggle:hover {
    background: rgba(148, 163, 184, 0.2);
    color: #d1d5db;
}

.datum-tree-toggle.expanded {
    transform: rotate(90deg);
}

#datum-tree-content {
    padding-left: 0;
}

#rechnung-monat-tree-content {
    padding-left: 0;
}

#rechnung-monat-tree-content .datum-tree-children {
    display: flex;
    flex-direction: column;
}

#rechnung-monat-tree-content .datum-tree-children.hidden {
    display: none;
}

.datum-tree-children {
    margin-left: 18px;
}

.datum-tree-children.hidden {
    display: none;
}

.datum-tree-node input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.datum-tree-node span {
    flex-shrink: 0;
}

.datum-tree-day-row {
    margin-left: 24px;
    display: flex;
}

/* Dienste Checkbox-Spalte */
.dienst-cb-col {
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    text-align: center;
    padding: 4px 8px 4px 16px !important;
}

.dienst-cb-col input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#dienst-table td.dienst-cb-col {
    padding: 4px 8px 4px 16px !important;
}

#dienst-table td {
    padding: 2px 24px;
    min-height: 3.6em;
    height: 3.6em;
}

#dienst-table th:nth-child(2),
#dienst-table td:nth-child(2) {
    padding-right: 6px;
}

#dienst-table th:nth-child(5),
#dienst-table td:nth-child(5) {
    padding-right: 6px;
}

#dienst-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

#dienst-table tbody tr.dienst-row-selected {
    background: rgba(59, 130, 246, 0.12);
}

/* Dienste Aktionsleiste */
.dienst-action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #1e293b;
    border: 1px solid var(--primary);
    border-radius: 8px;
    margin: 6px 0;
}

.dienst-selection-count {
    font-size: 0.85rem;
    color: #60a5fa;
    font-weight: 500;
    min-width: 100px;
}

.dienst-bulk-action {
    font-size: 0.8rem;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Multi-Filter Checkbox-Liste */
.multi-filter-content label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 20px;
    color: #d1d5db;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    white-space: nowrap;
}

.multi-filter-content label:hover {
    background: #334155;
}

.multi-filter-content label input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Dienst-Zellen mehrzeilig */
.dienst-cell-multi {
    line-height: 1.4;
}

.dienst-cell-multi .dienst-cell-line2 {
    display: block;
    color: #9ca3af;
}

.dienst-cell-multi small {
    display: block;
    color: #9ca3af;
    font-size: 0.78rem;
}

/* Dienste Pagination */
.dienst-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 12px;
    font-size: 0.85rem;
    color: #9ca3af;
}

.dienst-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dienst-pagination-controls button {
    background: none;
    border: 1px solid var(--border);
    color: #d1d5db;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.15s, border-color 0.15s;
}

.dienst-pagination-controls button:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--primary);
    color: #fff;
}

.dienst-pagination-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.dienst-pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dienst-page-size select {
    background: #0f172a;
    border: 1px solid var(--border);
    color: #d1d5db;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.dienst-page-size select:focus {
    border-color: var(--primary);
    outline: none;
}

/* Dienste Header-Filter */
.dienst-th-filter {
    cursor: pointer;
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.dienst-th-filter:hover {
    color: var(--primary);
}

.dienst-th-filter-icon {
    font-size: 16px;
    vertical-align: middle;
    opacity: 0.5;
    margin-left: 2px;
}

/* Aktive Filter Leiste */
.dienst-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    flex-wrap: wrap;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.5);
    margin: 0 16px;
}

.dienst-clear-all-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}

.dienst-clear-all-chip .filter-chip-icon {
    font-size: 18px;
}

.dienst-clear-all-chip:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
}

.dienst-active-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.dienst-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 14px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.3);
    font-size: 12.5px;
    color: #cbd5e1;
    cursor: default;
    white-space: normal;
    min-height: 32px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.dienst-filter-tag:hover {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(59, 130, 246, 0.13);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15);
}

/* Gleiche-Werte-Leiste */
.dienst-massenaktion-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    flex-wrap: wrap;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.5);
    margin: 0 16px;
}

.dienst-massenaktion-btn:hover {
    filter: brightness(1.15);
}

.dienst-uniform-values {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    flex-wrap: wrap;
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.5);
    margin: 0 16px;
}

.dienst-uniform-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.dienst-uniform-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 12.5px;
    color: #cbd5e1;
    cursor: default;
    white-space: nowrap;
    min-height: 28px;
    box-sizing: border-box;
}

.dienst-uniform-tag .uniform-tag-label {
    color: #fbbf24;
    font-weight: 600;
    font-size: 12px;
}

.dienst-uniform-tag .uniform-tag-value {
    color: #e2e8f0;
    font-weight: 400;
}

.dienst-filter-tag .filter-tag-label {
    color: #60a5fa;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.01em;
}

.dienst-filter-tag .filter-tag-value {
    color: #e2e8f0;
    font-weight: 400;
}

.dienst-filter-tag .filter-tag-remove {
    font-size: 15px;
    color: #64748b;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    transition: all 0.15s ease;
}

.dienst-filter-tag .filter-tag-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.dienst-th-filter:hover .dienst-th-filter-icon {
    opacity: 1;
}

.dienst-th-filter.filter-disabled {
    cursor: default;
}

.dienst-th-filter.filter-disabled:not(.user-filtered) .dienst-th-filter-icon {
    display: none !important;
}

.dienst-th-filter.has-filter .dienst-th-filter-icon {
    opacity: 1;
    color: var(--primary);
}

.dienst-th-filter-clear {
    display: none !important;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.7;
    color: var(--text-muted, #9ca3af);
}

.dienst-th-filter-clear:hover {
    opacity: 1;
    color: #ef4444;
}

.dienst-th-filter.user-filtered .dienst-th-filter-clear {
    display: inline !important;
}

.filter-popup-footer {
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.filter-popup-ok {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 4px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
}

.filter-popup-ok:hover {
    background: var(--primary-hover, #2563eb);
}

.filter-popup-ok:disabled {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
    pointer-events: none;
}

.dienst-th-filter .datum-tree-popup {
    position: fixed;
    z-index: 99999;
}

.dienst-th-filter.active {
    z-index: 99999 !important;
}

.filter-chip-option {
    padding: 8px 12px;
    color: #d1d5db;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease;
}

.filter-chip-option:hover {
    background: #334155;
    color: #ffffff;
}

.filter-chip-option.selected {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary);
    font-weight: 500;
}

.table-actions {
    display: flex;
    gap: 12px;
    margin-left: 8px;
}

.table-wrapper {
    overflow: auto;
    max-height: calc(100vh - 280px);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

#mitarbeiter-table {
    width: auto;
}

#mitarbeiter-table th,
#mitarbeiter-table td {
    padding: 5px 16px;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
    vertical-align: middle;
}

#mitarbeiter-table tr {
    height: 58px;
}

#mitarbeiter-table .kunde-img-cell {
    padding: 5px !important;
}

#kunden-table {
    width: auto;
}

#kunden-table th,
#kunden-table td {
    padding: 6px 16px;
    height: 68px;
    box-sizing: border-box;
    vertical-align: middle;
}

#page-kunde-sub .data-table-container,
#page-mitarbeiter .data-table-container {
    display: inline-block;
    min-width: 600px;
}

.data-table th,
.data-table td {
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

#rechnungen-verwalten-table td {
    padding: 2px 24px;
}
#rechnungen-verwalten-table th {
    padding: 8px 24px;
}

.data-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
    cursor: pointer;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.data-table tbody tr.selected {
    background: var(--primary-color-alpha, rgba(59, 130, 246, 0.15));
    border-left: 3px solid var(--primary-color);
}

.data-table tbody tr.selected:hover {
    background: var(--primary-color-alpha, rgba(59, 130, 246, 0.2));
}

.data-table tbody tr.row-inactive {
    opacity: 0.5;
}

.data-table tbody tr.row-inactive td {
    color: var(--text-muted);
}

.data-table tbody tr.loading-row {
    cursor: default;
}

.data-table td {
    color: var(--text-secondary);
}

/* Knappschaft-Tabelle kompakt */
#knappschaft-table th,
#knappschaft-table td {
    padding: 10px 8px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Page Header mit Zurück-Button */
.page-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-back:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

/* Formular-Styles */
.edit-form {
    max-width: 600px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 32px;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Formular-Zeile für nebeneinander liegende Felder */
.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    margin-bottom: 10px;
}

.form-group-small {
    flex: 0 0 120px;
}

.form-group-large {
    flex: 1;
}

/* Input mit Buttons */
.input-with-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-buttons .form-input {
    flex: 1;
}

.input-buttons {
    display: flex;
    gap: 4px;
}

.input-buttons .btn-icon {
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.input-buttons .btn-icon:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Pflichtfeld-Markierung (rotes Sternchen) */
.required {
    color: var(--danger-color);
    font-weight: bold;
    margin-left: 2px;
}

.form-input.field-error,
.form-select.field-error,
.form-input.input-error {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
    animation: shake 0.5s ease-in-out;
}

.form-input.field-error:focus,
.form-select.field-error:focus,
.form-input.input-error:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
}

/* KI-Datenübernahme - Feld wurde aktualisiert (grün) */
.form-input.field-updated,
.form-select.field-updated {
    border-color: var(--success-color) !important;
    background-color: rgba(76, 175, 80, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3) !important;
    animation: pulse-success 0.5s ease-in-out;
}

@keyframes pulse-success {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Kritisches Datum - Warnung (orange/gelb) */
.form-input.input-critical,
.form-select.input-critical {
    border-color: #f59e0b !important;
    background-color: #fef3c7 !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3) !important;
    color: #92400e !important;
}

.form-input.input-critical:focus,
.form-select.input-critical:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4) !important;
}

/* Form-Group Wrapper für kritische Felder */
.form-group-critical {
    background-color: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    padding: 12px;
    margin: -8px;
    margin-bottom: 8px;
    border: 2px solid #f59e0b;
}

.form-group-critical label {
    color: #f59e0b !important;
    font-weight: 600;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.form-actions-right {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

/* Erweitertes Formular */
.edit-form-wide {
    max-width: 900px;
}

/* Kunde Titelbild Vorschau */
.kunde-titelbild-container {
    margin-left: 16px;
    position: relative;
}

.kunde-titelbild-img {
    height: 100px;
    width: auto;
    object-fit: contain;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

.kunde-titelbild-img:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.form-section {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.form-section-title {
    display: none;
}

/* Konditionen-Modal: Gruppierungen visuell sichtbar */
#angebot-konditionen-form > .form-section {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

#angebot-konditionen-form > .form-section > .form-section-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#angebot-konditionen-form > .form-section-plain {
    background: none;
    border: none;
    padding: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.form-group-full {
    grid-column: 1 / -1;
}

/* Select-Styling */
.form-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 40px;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Input mit Button */
.input-with-button {
    display: flex;
    gap: 8px;
}

.input-with-button .form-input {
    flex: 1;
}

.input-addon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.input-addon-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.input-addon-btn .material-icons {
    font-size: 20px;
}

/* Combobox (beschreibbares Dropdown) */
.combobox-wrapper {
    position: relative;
    display: flex;
}

.combobox-input {
    flex: 1;
    padding-right: 40px !important;
    border-radius: var(--border-radius) !important;
}

.combobox-toggle {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 38px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    user-select: none;
}

.combobox-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.combobox-toggle .material-icons {
    font-size: 24px;
    pointer-events: none;
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    margin-top: 4px;
    max-height: 350px;
    overflow-y: auto;
}

.combobox-wrapper.open .combobox-dropdown {
    display: block;
}

.combobox-wrapper.open .combobox-toggle .material-icons {
    transform: rotate(180deg);
}

.combobox-option {
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.combobox-option:hover {
    background: var(--bg-hover);
}

.combobox-option:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.combobox-option:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.combobox-option-custom {
    border-top: 1px solid var(--border-color);
    color: var(--primary-color);
    font-style: italic;
}

/* Label mit Radio-Buttons */
.label-with-radio {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.label-with-radio label:first-child {
    margin-bottom: 0;
    min-width: auto;
}

.radio-group {
    display: flex;
    gap: 16px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.radio-label span {
    margin-bottom: 0;
}

/* Multi-Select Container */
.multi-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multi-select-input-row {
    display: flex;
    gap: 8px;
}

.multi-select-input-row .form-select {
    flex: 1;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--primary-color);
    color: white;
    border-radius: 16px;
    font-size: 0.85rem;
}

.selected-tag .remove-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.selected-tag .remove-tag:hover {
    opacity: 1;
}

.selected-tag .remove-tag .material-icons {
    font-size: 16px;
}

/* Form Group Full Width */
.form-group-full {
    grid-column: 1 / -1;
}

/* Searchable Dropdown */
.searchable-dropdown {
    position: relative;
}

.searchable-dropdown-input {
    padding-right: 35px !important;
}

.searchable-dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 20px;
    transition: transform 0.2s;
}

.searchable-dropdown:focus-within .searchable-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-color);
}

.searchable-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.searchable-dropdown-list.open {
    display: block;
}

.searchable-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

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

.searchable-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.searchable-dropdown-item.selected {
    background: var(--primary-color);
    color: white;
}

.searchable-dropdown-item-title {
    font-weight: 500;
}

.searchable-dropdown-item-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.searchable-dropdown-item:hover .searchable-dropdown-item-subtitle,
.searchable-dropdown-item.selected .searchable-dropdown-item-subtitle {
    color: inherit;
    opacity: 0.8;
}

/* Textarea */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    resize: vertical;
    min-height: 100px;
    transition: all var(--transition-fast);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Options Groups */
/* Checkbox-Grid */
.form-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    transition: background var(--transition-fast);
    user-select: none;
}

.checkbox-label:hover {
    background: var(--bg-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-custom {
    display: none;
}

/* Responsive für Formular */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-checkbox-grid {
        grid-template-columns: 1fr;
    }
    
    .edit-form-wide {
        padding: 20px;
    }
}

/* Loading State */
.loading-row td {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn .material-icons {
    font-size: 18px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-full-width {
    width: 100%;
    justify-content: center;
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Zwischenrechnung Toggle Button – aktiv = rot */
.btn-zwischenrechnung-active {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}
.btn-zwischenrechnung-active:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--secondary-hover);
}

.btn-secondary.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
}

/* Link-Button (inline im Text) */
.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.85rem;
    margin-left: 8px;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.btn-link:hover {
    background: rgba(37, 99, 235, 0.1);
    text-decoration: underline;
}

/* ===== Responsive Design ===== */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px;
    }
    
    .content {
        padding: 20px;
    }
    
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --topbar-height: 56px;
        --sidebar-collapsed-width: 0px;
    }

    /* --- Hamburger-Button anzeigen --- */
    .mobile-menu-btn {
        display: flex !important;
        flex-shrink: 0;
    }

    /* Logo kürzen auf Mobilgeräten */
    .app-logo {
        font-size: 1rem;
    }

    /* --- Sidebar --- */
    .sidebar {
        width: 0;
        transform: translateX(-100%);
    }
    
    .sidebar.expanded {
        width: 280px;
        transform: translateX(0);
    }
    
    .sidebar.collapsed {
        width: 0;
        transform: translateX(-100%);
    }

    /* Toggle-Button in der Sidebar auf Mobile verstecken (Hamburger-Button stattdessen) */
    .sidebar-toggle {
        display: none;
    }

    /* --- Content --- */
    .content {
        margin-left: 0 !important;
        padding: 12px;
    }

    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .page-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .page-title {
        font-size: 1.3rem;
    }

    /* --- Tabellen --- */
    .table-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .data-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table th,
    .data-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* --- Filter --- */
    .filter-wrapper {
        width: 100%;
    }

    .filter-input {
        width: 100%;
    }

    .filter-chips {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* --- Buttons --- */
    .btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    /* --- Modals --- */
    .modal-content {
        width: 95%;
        max-height: 95vh;
        margin: 8px;
        border-radius: var(--border-radius);
    }

    .modal-content.modal-fullform {
        width: 98%;
        max-height: 97vh;
    }

    .modal-content.modal-large {
        max-width: 98%;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-header {
        padding: 14px 16px;
    }

    /* --- Formulare --- */
    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr !important;
    }

    .edit-form-wide {
        padding: 16px;
    }

    /* --- Einstellungen-Menü --- */
    .settings-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* --- Welcome-Card --- */
    .welcome-card {
        padding: 20px;
    }

    .welcome-card h2 {
        font-size: 1.25rem;
    }

    /* --- Mobile Overlay --- */
    .sidebar-overlay {
        position: fixed;
        top: calc(var(--topbar-height) + var(--db-banner-height));
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all var(--transition-normal);
        z-index: 850;
    }
    
    .sidebar.expanded ~ .sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* --- Touch-freundliche Targets --- */
    .nav-link {
        padding: 14px 16px;
        min-height: 48px;
    }

    .nav-item {
        margin: 2px 8px;
    }

    /* --- User-Dropdown --- */
    .user-dropdown {
        right: 0;
        min-width: 180px;
    }
}

/* Kleine Mobile-Geräte */
@media (max-width: 480px) {
    .top-bar {
        padding: 0 8px;
    }

    .app-logo {
        font-size: 0.9rem;
        max-width: 160px;
    }
    
    .top-bar-btn {
        width: 40px;
        height: 40px;
    }

    .top-bar-right {
        gap: 2px;
    }
    
    .badge {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .content {
        padding: 8px;
    }

    .stat-card {
        padding: 12px;
        gap: 12px;
    }

    .stat-icon {
        width: 44px;
        height: 44px;
    }

    .stat-icon .material-icons {
        font-size: 22px;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .page-title {
        font-size: 1.15rem;
    }
    
    .welcome-card {
        padding: 16px;
    }
    
    .welcome-card h2 {
        font-size: 1.1rem;
    }

    /* Einstellungen: 2 Spalten beibehalten */
    .settings-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .settings-menu-card {
        padding: 12px 8px;
    }

    /* Modal voll breit */
    .modal-content {
        width: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-content.modal-fullform,
    .modal-content.modal-large {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* 16:9 Aspect Ratio Optimierung */
@media (min-aspect-ratio: 16/9) and (min-width: 1280px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .content {
        padding: 32px;
    }
    
    .stat-card {
        padding: 28px;
    }
}

/* Scrollbar-Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* ===== Utility-Klassen ===== */
.hidden {
    display: none !important;
}

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

.text-muted {
    color: var(--text-muted);
}

/* Connection Status */
.connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger-color);
}

.status-indicator.connected {
    background: var(--success-color);
}

/* ===== Toast Notifications ===== */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    animation: toastSlideIn 0.3s ease;
    max-width: 400px;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-notification.toast-hide {
    animation: toastSlideOut 0.3s ease forwards;
}

@keyframes toastSlideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-error {
    border-color: var(--danger-color);
}

.toast-error .toast-icon {
    color: var(--danger-color);
}

.toast-success {
    border-color: var(--success-color);
}

.toast-success .toast-icon {
    color: var(--success-color);
}

.toast-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.toast-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toast-close .material-icons {
    font-size: 18px;
}

/* ===== Datenbank-Fehlerbanner ===== */
#db-error-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #b71c1c, #c62828);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 1001;
    box-shadow: 0 4px 16px rgba(183, 28, 28, 0.5);
    animation: dbBannerSlideDown 0.4s ease;
}

@keyframes dbBannerSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#db-error-banner.db-error-banner-hide {
    animation: dbBannerSlideUp 0.3s ease forwards;
}

@keyframes dbBannerSlideUp {
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.db-error-icon {
    font-size: 24px;
    color: #ffcdd2;
    flex-shrink: 0;
}

.db-error-message {
    flex: 1;
    text-align: center;
}

.db-error-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    white-space: nowrap;
}

.db-error-countdown .material-icons {
    font-size: 16px;
    animation: spin 1.5s linear infinite;
}

.db-error-countdown strong {
    color: #fff;
    font-size: 0.9rem;
    min-width: 1.2em;
    text-align: center;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Kunden-Navigation Icons ===== */
.kunde-nav-icons {
    display: flex;
    gap: 10px;
    margin-left: 24px;
    align-items: center;
}

.kunde-nav-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    height: 44px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.kunde-nav-card:hover {
    border-color: var(--primary-light);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kunde-nav-card:active {
    transform: translateY(-1px);
}

/* Farbige Icons für Projekte */
.kunde-nav-card#nav-projekte .material-icons {
    color: #3b82f6; /* Blau für Projekte */
}

.kunde-nav-card#nav-projekte:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: #3b82f6;
}

/* Farbige Icons für Ansprechpartner */
.kunde-nav-card#nav-ansprechpartner .material-icons {
    color: #10b981; /* Grün für Ansprechpartner */
}

.kunde-nav-card#nav-ansprechpartner:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: #10b981;
}

/* Farbige Icons für Dokumente */
.kunde-nav-card#nav-dokumente .material-icons,
.kunde-nav-card#nav-mitarbeiter-dokumente .material-icons {
    color: #f59e0b; /* Orange für Dokumente */
}

.kunde-nav-card#nav-dokumente:hover,
.kunde-nav-card#nav-mitarbeiter-dokumente:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: #f59e0b;
}

/* Farbige Icons für Verdienst */
.kunde-nav-card#nav-mitarbeiter-verdienst .material-icons {
    color: #10b981; /* Grün für Verdienst/Geld */
}

.kunde-nav-card#nav-mitarbeiter-verdienst:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: #10b981;
}

/* Farbige Icons für ELStAM */
.kunde-nav-card#nav-mitarbeiter-elstam .material-icons {
    color: #6366f1; /* Indigo für ELStAM/Steuer */
}

.kunde-nav-card#nav-mitarbeiter-elstam:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: #6366f1;
}

/* Farbige Icons für Beschäftigung */
.kunde-nav-card#nav-mitarbeiter-beschaeftigung .material-icons {
    color: #8b5cf6; /* Violett für Beschäftigung/Arbeit */
}

.kunde-nav-card#nav-mitarbeiter-beschaeftigung:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: #8b5cf6;
}

/* Hochladen Button */
#add-dokument .material-icons {
    color: #10b981; /* Grün für Hochladen */
}

#add-dokument:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: #10b981;
}

.kunde-nav-card .material-icons {
    font-size: 22px;
    transition: transform var(--transition-fast);
}

.kunde-nav-card:hover .material-icons {
    transform: scale(1.15);
}

.kunde-nav-label {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ===== Unterseiten Platzhalter ===== */
.subpage-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    margin: 20px 0;
}

.subpage-placeholder .material-icons {
    font-size: 80px;
    color: var(--primary-color);
    margin-bottom: 24px;
    opacity: 0.6;
}

.subpage-placeholder h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.subpage-placeholder p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 400px;
}

/* Responsive für Kunden-Navigation */
@media (max-width: 768px) {
    .kunde-nav-icons {
        gap: 6px;
        margin-left: 12px;
    }
    
    .kunde-nav-card {
        min-width: auto;
        padding: 6px 10px;
        height: 38px;
    }
    
    .kunde-nav-card .material-icons {
        font-size: 18px;
    }
    
    .kunde-nav-label {
        font-size: 0.7rem;
    }
    
    .page-header {
        flex-wrap: wrap;
    }
}

/* ===== Modal ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

/* Universeller Blur-Hintergrund für ALLE Modals via ::before */
.modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    pointer-events: none;
}

.modal.active {
    display: flex;
}

/* Gestapelte Modals: das hintere Modal wird geblurt */
body.modal-blur-level-1 .modal.blur-behind {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

body.modal-blur-level-2 .modal.blur-behind-2 {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

/* Modal-Overlay als eigenständiges Element (für Projekt-Modal etc.) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-overlay .modal,
.modal-overlay .projekt-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    max-width: 550px;
    width: 90%;
    max-height: 90vh;
    animation: modalSlideIn 0.3s ease;
}

/* Modal-Overlay innerhalb von Modal - nicht mehr nötig, wird ignoriert */
.modal > .modal-overlay {
    display: none;
}

.modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

/* Große Modals */
.modal-content.modal-large {
    max-width: 1100px;
}

/* Konditionen: 4 Spalten */
#angebot-konditionen-form .form-grid-3 {
    grid-template-columns: repeat(4, 1fr);
}

/* Pauschalpreis-Betrag orange hervorheben */
#konditionen-pauschalpreis-betrag {
    border-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.15);
}

/* Vollständiges Formular-Modal (z.B. Mitarbeiter bearbeiten) */
.modal-content.modal-fullform {
    max-width: 900px;
    width: 95%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-fullform .modal-header {
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 24px;
}

.modal-content.modal-fullform .modal-header h2 {
    margin: 0;
    white-space: nowrap;
}

.modal-content.modal-fullform .modal-header .modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
}

.modal-content.modal-fullform .modal-header .kunde-nav-icons {
    margin-left: auto;
    margin-right: 40px;
}

.modal-content.modal-fullform .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 20px 24px;
}

.modal-content.modal-fullform .modal-body .edit-form {
    max-width: 100%;
}

.modal-content.modal-fullform .modal-body .form-actions {
    padding: 16px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}

.modal-content.modal-scrollable {
    max-height: 85vh;
    overflow: hidden;
}

.modal-content.modal-scrollable .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-grow: 0;
}

/* Titelbild im Modal-Header */
.modal-titelbild {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modal-titelbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dokument-Button im Modal-Header */
.modal-header .btn-icon {
    margin-left: auto;
    margin-right: 10px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--accent-color);
}

.modal-header .btn-icon:hover {
    background: var(--accent-color);
    color: white;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    display: flex;
    border-radius: 4px;
    transition: all var(--transition-fast);
    z-index: 10;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* ===== File Upload ===== */
.file-upload-wrapper {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-card);
}

.file-upload-wrapper:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.file-upload-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.file-upload-info .material-icons {
    font-size: 40px;
    color: var(--primary-color);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.file-upload-actions {
    margin-top: 12px;
    text-align: center;
}

.file-select-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.file-select-buttons .btn {
    flex: 1;
    min-width: 150px;
}

.file-selected-info {
    padding: 10px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--border-radius);
    border: 1px solid var(--success-color);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-sm .material-icons {
    font-size: 18px;
}

/* ===== Kunden Tabelle Vorschaubild ===== */
.kunde-img-cell {
    width: 68px;
    text-align: center;
    padding: 5px !important;
    vertical-align: middle;
}

.kunde-table-img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    display: block;
}

.kunde-kurz-cell {
    white-space: nowrap;
}

.kunde-details-cell {
    white-space: nowrap;
}

/* ===== Dokumente Tabelle ===== */
.file-icon-cell {
    width: 40px;
    text-align: center;
}

.file-icon {
    color: var(--primary-color);
    font-size: 24px;
}

.actions-cell {
    white-space: nowrap;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon.btn-view:hover {
    color: var(--primary-color);
}

.btn-icon.btn-edit:hover {
    color: var(--warning-color);
}

.btn-icon.btn-delete:hover {
    color: var(--danger-color);
}

.btn-icon .material-icons {
    font-size: 20px;
}

/* ===== Dokumente Vorschau ===== */
.file-preview-img,
.table-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.thumb-cell {
    width: 50px;
    text-align: center;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--bg-tertiary);
}

/* ===== Aktionen-Zelle ===== */
.actions-cell {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

/* ===== Titelbild Button ===== */
.btn-titelbild.active,
.btn-einsatzort-titelbild.active {
    color: var(--warning-color);
}

.btn-titelbild.active:hover,
.btn-einsatzort-titelbild.active:hover {
    background: transparent;
    color: var(--warning-color);
}

/* ===== Identbild Star ===== */
.identbild-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    color: var(--text-muted);
}

.identbild-star:hover {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.identbild-star.active {
    color: var(--warning-color);
}

.identbild-star.active:hover {
    background: rgba(255, 193, 7, 0.2);
}

/* ===== Bild-Editor ===== */
.modal-large {
    max-width: 800px;
    width: 95%;
}

.image-editor-container {
    min-height: 400px;
    max-height: 60vh;
    overflow: hidden;
    background: #1a1a2e;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-editor-container img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
}

/* Cropper.js Container muss sichtbar sein */
.image-editor-container .cropper-container {
    max-height: 60vh !important;
}

.image-editor-toolbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
}

.btn-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-toolbar:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-toolbar .material-icons {
    font-size: 24px;
}

/* Cropper.js Anpassungen */
.cropper-view-box,
.cropper-face {
    border-radius: 0;
}

.cropper-line,
.cropper-point {
    background-color: var(--primary-color);
}

/* ===== Projekt-Baum Styles ===== */
.projekt-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
}

.projekt-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin-bottom: 4px;
}

.projekt-filter-checkbox {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.btn-sm .material-icons {
    font-size: 18px;
}

.projekt-tree-container {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    overflow: auto;
    padding: 16px;
}

.projekt-tree {
    user-select: none;
}

.projekt-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.projekt-tree-empty .material-icons {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.projekt-tree-empty p {
    font-size: 1.1rem;
}

/* Projekt-Knoten */
.projekt-node {
    margin-bottom: 4px;
}

.projekt-node-content {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: 10px;
}

.projekt-node-content:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.projekt-node-content.selected {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
}

.projekt-node-content.inactive {
    opacity: 0.6;
}

.projekt-node-content.ordnungsprojekt {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(var(--primary-rgb), 0.1) 100%);
}

.projekt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--primary-color);
    flex-shrink: 0;
    overflow: hidden;
}

.projekt-icon .material-icons {
    font-size: 18px;
}

.projekt-icon .projekt-titelbild {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projekt-node-content.ordnungsprojekt .projekt-icon {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
}

.projekt-info {
    flex: 1;
    min-width: 0;
}

.projekt-title {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projekt-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.projekt-nummer {
    display: flex;
    align-items: center;
    gap: 4px;
}

.projekt-nummer .material-icons {
    font-size: 14px;
}

.projekt-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.projekt-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
}

.projekt-badge.ordnung {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
}

.projekt-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
}

.projekt-node-content:hover .projekt-actions {
    opacity: 1;
}

.projekt-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.projekt-action-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.projekt-action-btn.add:hover {
    color: var(--success-color);
}

.projekt-action-btn.edit:hover {
    color: var(--primary-color);
}

.projekt-action-btn.delete:hover {
    color: var(--danger-color);
}

.projekt-action-btn .material-icons {
    font-size: 18px;
}

/* Ausgewähltes Projekt */
.projekt-node-content.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--primary-color);
}

/* Kinder-Container */
.projekt-children {
    margin-left: 32px;
    padding-left: 16px;
    margin-top: 4px;
}

/* Drag & Drop Styles */
.projekt-node-content.moveable {
    cursor: grab;
}

.projekt-node-content.moveable:hover {
    border-color: var(--primary-color);
}

.projekt-node-content.dragging {
    opacity: 0.5;
    border: 2px dashed var(--primary-color);
    cursor: grabbing;
}

.projekt-node-content.drag-over {
    background: rgba(var(--success-rgb, 76, 175, 80), 0.15);
    border-color: var(--success-color);
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(var(--success-rgb, 76, 175, 80), 0.2);
}

/* Vorschau beim Drag & Drop */
.projekt-drop-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 4px 0;
    background: rgba(var(--success-rgb, 76, 175, 80), 0.1);
    border: 2px dashed var(--success-color);
    border-radius: 8px;
    color: var(--success-color);
    font-size: 0.9rem;
    font-weight: 500;
    animation: preview-pulse 1s ease-in-out infinite;
}

.projekt-drop-preview .material-icons {
    font-size: 18px;
}

@keyframes preview-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Drop-Zone für Hauptebene */
.projekt-root-dropzone {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.projekt-root-dropzone.visible {
    display: flex;
}

.projekt-root-dropzone.active {
    background: rgba(var(--success-rgb, 76, 175, 80), 0.15);
    border-color: var(--success-color);
    color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb, 76, 175, 80), 0.2);
}

.projekt-root-dropzone .material-icons {
    font-size: 20px;
}

.projekt-drop-zone {
    height: 8px;
    margin: 2px 0;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.projekt-drop-zone.active {
    background: rgba(var(--primary-rgb), 0.3);
    height: 40px;
    border: 2px dashed var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.projekt-drop-zone.active::after {
    content: 'Hier ablegen';
    color: var(--primary-color);
    font-size: 0.85rem;
}

/* Projekt Modal */
.projekt-modal {
    max-width: 550px;
}

.projekt-modal .modal-body {
    padding-bottom: 24px;
}

/* Footer innerhalb des scrollbaren Bereichs */
.modal-footer-inline {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.projekt-checkboxes {
    margin-top: 16px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .projekt-toolbar {
        flex-direction: column;
        gap: 12px;
    }
    
    .projekt-toolbar-left,
    .projekt-toolbar-right {
        width: 100%;
        justify-content: center;
    }
    
    .projekt-children {
        margin-left: 16px;
        padding-left: 12px;
    }
    
    .projekt-node-content {
        padding: 8px 10px;
    }
    
    .projekt-actions {
        opacity: 1;
    }
}

/* ===== ANFRAGEN SECTION ===== */
.anfragen-section {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 16px;
}

.anfragen-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.anfragen-section .section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.anfragen-section .table-wrapper {
    overflow-x: auto;
}

.anfragen-section .data-table {
    width: 100%;
    border-collapse: collapse;
}

.anfragen-section .data-table th,
.anfragen-section .data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: none;
}

.anfragen-section .data-table thead tr {
    border-bottom: 1px solid var(--border-color);
}

.anfragen-section .data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.anfragen-section .data-table tbody tr:last-child {
    border-bottom: none;
}

/* Aktion-Spalte zentrieren */
.anfragen-section .data-table th:last-child,
.anfragen-section .data-table td:last-child {
    text-align: center;
}

.anfragen-section .data-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
}

.anfragen-section .data-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.15);
    cursor: pointer;
}

.anfrage-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.anfrage-status.status-0 { /* unbearbeitet */
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.anfrage-status.status-1 { /* Rückfrage gestellt */
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.anfrage-status.status-2 { /* Storno */
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.anfrage-status.status-3 { /* Angebot erstellt */
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.anfrage-status.status-4 { /* Abgeschlossen */
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.anfrage-status.status-5 { /* Abgelehnt */
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Angebot Status-Klassen */
.anfrage-status.status-entwurf {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.anfrage-status.status-versendet {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.anfrage-status.status-angenommen {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.anfrage-status.status-abgelehnt {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.anfrage-status.status-storniert {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.anfrage-status.status-abgelaufen {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Angebot-Aktionen */
.angebot-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Anfrage Datum-Zelle mit zwei Zeilen */
.anfrage-datum-cell {
    line-height: 1.3;
}

.anfrage-datum-primary {
    font-weight: 500;
    color: var(--text-primary);
}

.anfrage-datum-secondary {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.anfrage-actions {
    display: grid;
    grid-template-columns: 56px 36px 36px 36px;
    gap: 4px;
    justify-content: center;
    align-items: start;
    white-space: nowrap;
}

.anfrage-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    position: relative;
    align-self: center;
    justify-self: center;
}

.anfrage-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.anfrage-action-btn.delete:hover {
    color: var(--danger-color);
}

.anfrage-action-btn .material-icons {
    font-size: 18px;
}

/* Bunte Symbole doppelt so groß (Anfragen: Planliste + Angebot, Angebot: Öffnen + Senden + Konditionen) */
.anfrage-action-btn.planliste > .material-icons:first-child,
.anfrage-action-btn.angebot > .material-icons:first-child,
.anfrage-action-btn.view > .material-icons:first-child,
.anfrage-action-btn.send-email > .material-icons:first-child,
.anfrage-action-btn.konditionen > .material-icons:first-child {
    font-size: 36px;
}

/* Konditionen Check-Icon Positionierung */
.anfrage-action-btn .konditionen-check,
.anfrage-action-btn .versendet-check {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px !important;
    background: white;
    border-radius: 50%;
}

.anfrage-action-btn.docs {
    color: var(--accent-color);
}

.anfrage-action-btn.docs:hover {
    background: var(--bg-secondary);
}

.anfrage-planliste-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    justify-self: center;
}

.anfrage-datum-dienst {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1;
    margin-top: -2px;
}

.anfragen-header-actions {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.anfrage-action-btn.planliste {
    color: #9c27b0;
}

.anfrage-action-btn.planliste:hover {
    background: var(--bg-secondary);
}

.anfrage-action-btn.angebot {
    color: #ff9800;
}

.anfrage-action-btn.angebot:hover {
    background: var(--bg-secondary);
}

.anfrage-action-btn.angebot.has-items {
    color: #4caf50;
}

.anfrage-action-btn.angebot.has-items:hover {
    background: var(--bg-secondary);
}

/* Wochentage Grid für Planliste */
.wochentage-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wochentag-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wochentag-checkbox:hover {
    background: var(--bg-secondary);
}

.wochentag-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

/* Planliste Tabelle */
#anfrage-planliste-table th,
#anfrage-planliste-table td {
    vertical-align: middle;
}

#anfrage-planliste-table td:first-child,
#anfrage-planliste-table td:nth-child(2),
#anfrage-planliste-table td:nth-child(3) {
    white-space: nowrap;
}

/* Planliste Modal breiter */
#anfrage-planliste-modal .modal-content {
    max-width: 880px;
}

/* Selektierbare Zeilen */
.planliste-selectable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Planliste Modal: Überschrift linksbündig */
#anfrage-planliste-modal .modal-header {
    justify-content: flex-start;
}

/* Planliste Buttons farbig */
#anfrage-regelbasiert .material-icons {
    color: #3b82f6;
}
#anfrage-regelbasiert:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: #3b82f6;
}
#anfrage-schnellerfassung .material-icons {
    color: #f59e0b;
}
#anfrage-schnellerfassung:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: #f59e0b;
}
#anfrage-add-planliste .material-icons {
    color: #10b981;
}
#anfrage-add-planliste:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: #10b981;
}

.planliste-selectable-row:hover {
    background-color: rgba(var(--accent-color-rgb), 0.08);
}

.planliste-selectable-row:has(.planliste-row-checkbox:checked) {
    background-color: rgba(var(--accent-color-rgb), 0.15);
}

.planliste-selectable-row:has(.planliste-row-checkbox:checked):hover {
    background-color: rgba(var(--accent-color-rgb), 0.2);
}

.planliste-anzahl {
    font-weight: 600;
    color: var(--accent-color);
    text-align: center;
}

/* Planliste Summen-Zeile */
.planliste-sum-row {
    background-color: var(--bg-tertiary);
    font-weight: 600;
}

.planliste-sum-row td {
    border-top: 2px solid var(--border-color);
    padding: 12px 8px;
}

.planliste-sum-row td:first-child {
    width: 40px;
    text-align: center;
}

#planliste-sum-stunden {
    font-size: 1.05em;
}

/* Zeit-Auswahl Dropdowns */
.time-select-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-select {
    width: 75px !important;
    min-width: 75px;
}

/* Pause dropdown wider for full text */
#planliste-pause {
    width: 90px !important;
    min-width: 90px;
}

/* Schnellerfassung Modal */
.modal-xlarge {
    max-width: 550px;
}

.schnell-monat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.schnell-monat-row label {
    font-weight: 500;
    color: var(--text-primary);
}

.schnell-monat-select {
    width: 120px;
}

.schnell-section {
    margin-bottom: 4px;
}

.schnell-tage-section {
    border-top: 2px solid var(--text-secondary);
    padding-top: 4px;
}

.schnell-table-scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* Einfache Schnellerfassung Tabelle */
.schnell-simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.schnell-simple-table th {
    padding: 4px 4px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.schnell-simple-table td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--border-color);
}

.schnell-simple-table th:first-child,
.schnell-simple-table td:first-child {
    width: 55px;
}

.schnell-simple-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 3px 5px;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.schnell-simple-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.schnell-simple-input.schnell-input-error,
.schnell-vorlage-row .schnell-simple-input.schnell-input-error {
    border-color: #ff4444 !important;
    background-color: rgba(255, 68, 68, 0.2) !important;
}

.schnell-simple-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.schnell-vorlage-row td {
    padding: 4px 4px;
}

.schnell-vorlage-row .schnell-simple-input {
    background-color: rgba(100, 149, 237, 0.15);
    border-color: rgba(100, 149, 237, 0.4);
}

.schnell-vorlage-row .schnell-simple-input:focus {
    background-color: rgba(100, 149, 237, 0.25);
    border-color: var(--accent-color);
}

.schnell-tag-cell {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.schnell-tag-weekend .schnell-tag-cell {
    color: var(--accent-color);
}

.section-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 0.85em;
}

.btn-sm .material-icons {
    font-size: 16px;
}

.time-separator {
    font-weight: bold;
    color: var(--text-secondary);
}

.form-grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* Projekt Action Docs Button */
.projekt-action-btn.docs {
    color: var(--accent-color);
}

.projekt-action-btn.docs:hover {
    background: var(--accent-color);
    color: white;
}

/* Anfrage Modal */
.anfrage-modal {
    max-width: 600px;
}

/* ============================================
   BILD-EDITOR MODAL
   ============================================ */

.image-editor-modal {
    max-width: 700px;
    width: 90%;
}

.image-editor-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.image-editor-preview {
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-editor-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.image-editor-tools {
    display: flex;
    gap: 10px;
}

.image-editor-tools .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
}

.image-editor-tools .btn .material-icons {
    font-size: 28px;
}

/* Btn-Icon für Bild bearbeiten */
.btn-edit-image {
    color: var(--accent-color);
}

.btn-edit-image:hover {
    color: var(--primary-color);
}

/* Umsortieren-Checkbox aktiv - auffälliger Stil */
#projekt-allow-move:checked + .checkbox-custom {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

#projekt-allow-move:checked ~ span:last-child,
.projekt-filter-checkbox:has(#projekt-allow-move:checked) {
    color: #f59e0b;
    font-weight: 600;
}

/* Pulsierender Effekt wenn Umsortieren aktiv */
@keyframes pulse-warning {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.8); }
}

#projekt-allow-move:checked + .checkbox-custom {
    animation: pulse-warning 2s ease-in-out infinite;
}

/* Angebotsempfänger-Liste */
.empfaenger-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.empfaenger-select-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.empfaenger-select-row select {
    flex: 1;
}

.empfaenger-select-row .btn-sm {
    padding: 8px 12px;
    min-width: auto;
}

.empfaenger-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px;
}

.empfaenger-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.empfaenger-chip .material-icons {
    font-size: 14px;
    color: var(--text-secondary);
}

.empfaenger-chip .remove-empfaenger {
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--transition-fast);
    padding: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
}

.empfaenger-chip .remove-empfaenger:hover {
    color: var(--danger-color);
}

/* Regelbasiert Modal - höherer z-index für gestapelte Modals */
#planliste-regel-modal {
    z-index: 2100;
}

#planliste-regel-modal .modal-content {
    max-width: 700px;
}

.regel-modal-body {
    padding: 16px 20px !important;
}

.regel-modal-body .form-grid {
    margin-bottom: 12px;
}

.regel-modal-body .form-group {
    margin-bottom: 0;
}

/* Zeit-Grid mit unterschiedlichen Spaltenbreiten */
.regel-zeit-grid {
    grid-template-columns: 1fr 1fr auto auto !important;
}

.regel-pause-group {
    max-width: 90px;
}

.regel-anzahl-group {
    max-width: 70px;
}

.checkbox-grid-wide {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 0;
}

.checkbox-grid-wide .checkbox-label {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 13px;
}

/* Planliste Modal breiter */
#anfrage-planliste-modal .modal-content {
    max-width: 880px;
}

/* Allgemeine Checkbox-Zelle */
.checkbox-cell {
    width: 40px;
    padding: 8px !important;
    vertical-align: middle;
    text-align: center;
    background: transparent !important;
}

.checkbox-cell .checkbox-label {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.checkbox-cell .checkbox-label:hover {
    background: transparent;
}

/* Ausgewählte Zeile markieren */
.row-selected,
.row-selected td {
    background-color: rgba(37, 99, 235, 0.25) !important;
}

.row-selected:hover,
.row-selected:hover td {
    background-color: rgba(37, 99, 235, 0.35) !important;
}

/* Checkbox-Spalte schmaler und zentriert */
.planliste-checkbox-cell {
    width: 40px;
    padding: 8px !important;
    vertical-align: middle;
    text-align: center;
}

.planliste-checkbox-cell input[type="checkbox"] {
    margin: 0 auto;
    display: block;
}

/* Zeilen mit weniger als 0,25h rot markieren */
.planliste-low-hours {
    background-color: rgba(220, 53, 69, 0.25) !important;
}

.planliste-low-hours:hover {
    background-color: rgba(220, 53, 69, 0.35) !important;
}

/* Regelbasierte Datumszeiträume eingekreist */
.planliste-daterange {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 16px;
}

/* Stundenspalten rechtsbündig */
.planliste-stunden {
    text-align: right !important;
    padding-right: 12px !important;
}

/* Schnellerfassung Modal - höherer z-index */
#planliste-schnell-modal {
    z-index: 2100;
}

/* Angebot Senden Modal Styles */
.empfaenger-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
}

.empfaenger-item .empfaenger-info {
    flex: 1;
}

.empfaenger-item .empfaenger-name {
    font-weight: 500;
    color: var(--text-primary);
}

.empfaenger-item .empfaenger-email {
    font-size: 13px;
    color: var(--text-secondary);
}

.empfaenger-item .empfaenger-typ {
    font-size: 11px;
    color: var(--accent-color);
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.empfaenger-item .empfaenger-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.empfaenger-item .btn-send-single {
    padding: 6px 12px;
    font-size: 13px;
}

.empfaenger-item .gesendet-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #10b981;
    font-size: 12px;
}

.empfaenger-item.bereits-gesendet {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Protokoll Liste */
.protokoll-liste {
    max-height: 200px;
    overflow-y: auto;
}

.protokoll-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.protokoll-item .protokoll-zeit {
    color: var(--text-secondary);
    min-width: 130px;
}

.protokoll-item .protokoll-empfaenger {
    flex: 1;
}

.protokoll-item .protokoll-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.protokoll-item .protokoll-status.gesendet {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.protokoll-item .protokoll-status.manuell {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Tooltip für Email-Text im Protokoll */
.protokoll-item[title] {
    position: relative;
}

.protokoll-item[title]:hover {
    background: var(--bg-hover);
}

.protokoll-item .protokoll-status.fehler {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ============================================
   Dokument-Viewer Modal
   ============================================ */

#dokument-viewer-modal::before {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dokument-viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dokument-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    z-index: 10;
    min-height: 52px;
}

.dokument-viewer-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 12px;
}

.dokument-viewer-counter {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 16px;
    white-space: nowrap;
}

.dokument-viewer-actions {
    display: flex;
    gap: 4px;
}

.dokument-viewer-actions .btn-icon {
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dokument-viewer-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dokument-viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 20px 60px;
    position: relative;
}

.dokument-viewer-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.dokument-viewer-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
    background: #fff;
}

.dokument-viewer-body .viewer-unsupported {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    padding: 40px;
}

.dokument-viewer-body .viewer-unsupported .material-icons {
    font-size: 64px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.dokument-viewer-body .viewer-unsupported p {
    font-size: 15px;
    margin-bottom: 16px;
}

.dokument-viewer-body .viewer-unsupported .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
}

.dokument-viewer-body .viewer-unsupported .btn:hover {
    background: var(--primary-dark);
}

.dokument-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.dokument-viewer-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

.dokument-viewer-nav:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.dokument-viewer-nav .material-icons {
    font-size: 32px;
}

.dokument-viewer-prev {
    left: 12px;
}

.dokument-viewer-next {
    right: 12px;
}

/* ===== Restore-Overlay ===== */
.restore-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.restore-overlay-content {
    text-align: center;
    color: #fff;
    max-width: 460px;
    padding: 40px;
}

.restore-overlay-content h2 {
    font-size: 1.4rem;
    margin: 20px 0 10px;
    font-weight: 600;
}

.restore-overlay-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

.restore-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    margin: 18px 0 8px;
    overflow: hidden;
    position: relative;
}

.restore-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 0;
}

.restore-progress-text {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.restore-spinner .restore-spin-icon {
    font-size: 64px;
    color: var(--primary-color);
    animation: restoreSpin 1.2s linear infinite;
}

@keyframes restoreSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.restore-done-icon .material-icons {
    font-size: 64px;
    color: var(--success-color);
}

.restore-done-icon.restore-error .material-icons {
    color: var(--danger-color);
}

.restore-overlay-content .btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background var(--transition-fast);
}

.restore-overlay-content .btn:hover {
    background: var(--primary-hover);
}

/* ===== Login-Overlay ===== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    transition: opacity .4s ease, visibility .4s ease;
}
.login-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.login-card {
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 16px;
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    position: relative;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}
.login-logo-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 8px;
}
.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 2px;
    margin: 0;
}
.login-subtitle {
    color: #94a3b8;
    font-size: 13px;
    margin: 4px 0 0;
}

.login-step.hidden { display: none; }

.login-field {
    margin-bottom: 20px;
}
.login-field label {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.login-input-wrap {
    display: flex;
    align-items: center;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color .2s;
}
.login-input-wrap:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.login-input-wrap .material-icons {
    color: #64748b;
    font-size: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}
.login-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 15px;
    padding: 12px 0;
    font-family: inherit;
}
.login-input-wrap input::placeholder {
    color: #475569;
}
.login-toggle-pw {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #64748b;
    flex-shrink: 0;
}
.login-toggle-pw:hover { color: #94a3b8; }

.login-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s;
    margin-top: 8px;
}
.login-btn:hover { background: var(--primary-hover); }
.login-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.login-btn-email {
    background: #059669;
}
.login-btn-email:hover {
    background: #047857;
}

.login-btn-link {
    width: 100%;
    padding: 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}
.login-btn-link:hover { color: #94a3b8; }

.login-user-info {
    color: #e2e8f0;
    font-size: 14px;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: rgba(37,99,235,.1);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.login-hint {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.login-message {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.login-message.hidden { display: none; }
.login-message.error {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.25);
}
.login-message.success {
    background: rgba(16,185,129,.12);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.25);
}
.login-message.info {
    background: rgba(37,99,235,.12);
    color: #93c5fd;
    border: 1px solid rgba(37,99,235,.25);
}

.login-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    color: #94a3b8;
    font-size: 13px;
}
.login-loading.hidden { display: none; }

.login-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #334155;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}
@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* ===== Login: DB-Fehler ===== */
.login-db-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    animation: fadeIn 0.3s ease;
}
.login-db-error.hidden { display: none; }

.login-db-error-icon {
    font-size: 56px;
    color: #ef4444;
    margin-bottom: 16px;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.05); }
}

.login-db-error-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ef4444;
    margin: 0 0 8px 0;
}

.login-db-error-detail {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
    word-break: break-word;
}

.login-db-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--border-radius);
    color: #94a3b8;
    font-size: 0.85rem;
}
.login-db-countdown .material-icons {
    font-size: 20px;
    color: #64748b;
    animation: login-spin 1.5s linear infinite;
}
.login-db-countdown strong {
    color: #e2e8f0;
    font-size: 1rem;
}

/* Einstellungen: Alle Passwörter zurücksetzen Button */
.settings-menu-card-danger {
    border: 1px solid rgba(239,68,68,.3) !important;
}
.settings-menu-card-danger:hover {
    background: rgba(239,68,68,.1) !important;
    border-color: rgba(239,68,68,.5) !important;
}
.settings-menu-card-danger .material-icons {
    color: #ef4444 !important;
}
.settings-menu-card-danger .settings-menu-label {
    color: #fca5a5 !important;
}

/* Logged-in User Info in Top-Bar */
.top-bar-user-name {
    color: #cbd5e1;
    font-size: 13px;
    margin-right: 4px;
    white-space: nowrap;
}

/* ===== User Dropdown Menu ===== */
.user-dropdown-wrapper {
    position: relative;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

.user-dropdown.open {
    display: block;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}

.user-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.user-dropdown-item .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}

.user-dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.user-dropdown-item-danger:hover .material-icons {
    color: var(--danger-color);
}

/* ===== BACKUP / DATENSICHERUNG ===== */
#backup-table {
    border-collapse: collapse;
}

.backup-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.backup-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.backup-action-btn .material-icons {
    font-size: 16px;
}

.backup-action-btn.restore {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.backup-action-btn.restore:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

.backup-action-btn.download {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.backup-action-btn.download:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.backup-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    white-space: nowrap;
}

/* Inline-Fortschrittsbalken für Backup-Erstellung */
.backup-inline-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 4px;
}

.backup-inline-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.backup-inline-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 0;
}

.backup-inline-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

tr.backup-in-progress {
    background: rgba(37,99,235,0.05);
}

/* ── Netto Refresh Progress Overlay ── */
.netto-refresh-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    animation: netto-overlay-in 0.4s ease;
}
.netto-refresh-overlay.active {
    display: flex;
}
@keyframes netto-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.netto-refresh-card {
    position: relative;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    padding: 40px 50px 36px;
    text-align: center;
    min-width: 380px;
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.netto-refresh-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(99, 102, 241, 0.08) 25%,
        transparent 50%,
        rgba(139, 92, 246, 0.08) 75%,
        transparent 100%
    );
    animation: netto-glow-spin 4s linear infinite;
    pointer-events: none;
}
@keyframes netto-glow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.netto-refresh-icon-ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}
.netto-refresh-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.netto-refresh-ring-bg {
    fill: none;
    stroke: rgba(99, 102, 241, 0.15);
    stroke-width: 6;
}
.netto-refresh-ring-fg {
    fill: none;
    stroke: url(#nettoGradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 0.5s ease;
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6));
}
.netto-refresh-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #e0e7ff;
    letter-spacing: -1px;
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.netto-refresh-title {
    font-size: 18px;
    font-weight: 600;
    color: #e0e7ff;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}
.netto-refresh-current {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
    min-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}
.netto-refresh-stats {
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 500;
    margin-bottom: 6px;
}
.netto-refresh-eta {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
}

.netto-refresh-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.netto-refresh-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
    background-size: 200% 100%;
    animation: netto-bar-shimmer 2s ease-in-out infinite;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
@keyframes netto-bar-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* SVG gradient for ring (injected dynamically or via inline SVG) */
.netto-refresh-ring-svg defs stop:first-child { stop-color: #6366f1; }
.netto-refresh-ring-svg defs stop:last-child { stop-color: #a78bfa; }


/* =================================================================
   DIENSTPLAN - 5-Tage-Schichtplanungs-Board
   ================================================================= */

/* Board-Container */
.dp-board {
    flex: 0 1 auto;
    overflow: auto;
    padding: 0;
    min-height: 0;
    max-height: calc(100% - 240px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
}

/* Dienstplan-Seite: kompakterer Header */
#page-dienstplan {
    margin-top: -14px;
}
#page-dienstplan > .page-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: none;
}

/* Scroll-Indikator (Fade + Pfeil) */
.dp-scroll-indicator {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
    margin-top: -38px;
    pointer-events: none;
    z-index: 20;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-primary) 90%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.dp-scroll-indicator.dp-scroll-hidden {
    opacity: 0;
}
.dp-scroll-indicator .material-icons {
    font-size: 20px;
    color: var(--primary-light);
    animation: dp-bounce 1.5s ease-in-out infinite;
    opacity: 0.7;
}
@keyframes dp-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* CSS-Grid für das Board */
.dp-grid {
    display: grid;
    grid-template-columns: 220px repeat(5, 1fr);
    min-width: 900px;
}

/* Zeile */
.dp-row {
    display: contents;
}

/* Header-Zeile */
.dp-header-row .dp-label-cell {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--border-color);
}
.dp-day-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    font-weight: 600;
    padding: 10px 8px;
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    transition: background var(--transition-fast);
    user-select: none;
}
.dp-day-header:hover {
    background: var(--bg-tertiary);
}
.dp-day-header {
    background: color-mix(in srgb, rgb(var(--primary-rgb)) 15%, var(--bg-secondary));
    border-bottom-color: var(--primary-color);
    border-right: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
}
/* dp-center hat keine Sonderbehandlung mehr – alle 5 Tage gleich */
.dp-day-wd {
    display: block;
    font-size: 0.82rem;
    color: #7fb8b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dp-day-date {
    display: block;
    font-size: 1.38rem;
    color: var(--primary-light);
    margin-top: -6px;
}

/* Seiten-Spalten */

/* Wochenende */
.dp-day-header.dp-weekend .dp-day-wd {
    color: #6cc4c4;
}

/* Feiertag */
.dp-day-header.dp-feiertag {
    background: color-mix(in srgb, #ef4444 15%, var(--bg-secondary)) !important;
    border-bottom-color: #ef4444 !important;
}
.dp-day-header.dp-feiertag .dp-day-wd {
    color: #ef4444;
}
.dp-day-header.dp-feiertag .dp-day-date {
    color: #ef4444;
}
.dp-feiertag-icon {
    font-size: 11px;
    color: #ef4444;
    vertical-align: middle;
    opacity: 0.8;
}
.dp-day-cell.dp-feiertag {
    background: rgba(239, 68, 68, 0.05);
}

/* Alle Tages-Spalten gleicher Hintergrund (nicht Header!) */
.dp-day-cell:not(.dp-day-header) {
    background: rgba(var(--primary-rgb), 0.06);
}

/* Label-Zelle (links) */
.dp-label-cell {
    padding: 8px 14px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 54px;
}

/* Kunden-Trennzeile */
.dp-kunde-row .dp-label-cell {
    background: var(--bg-tertiary);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 6px 14px;
    min-height: 32px;
}
.dp-kunde-row .dp-day-cell {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    min-height: 32px;
}

/* Schicht-Zeile */
.dp-shift-label {
    background: var(--bg-secondary);
}
.dp-shift-project {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-shift-time {
    font-size: 0.75rem;
    color: var(--primary-light);
    margin-top: 2px;
    padding: 2px 6px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 4px;
    display: inline-block;
}
.dp-shift-ort {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.dp-shift-sub-info {
    font-size: 0.70rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.3;
}
/* Auftraggeber – gleiche Optik wie Ort */

/* Tag-Zelle */
.dp-day-cell {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 54px;
    transition: opacity var(--transition-fast);
}

/* Slot (besetzt oder frei) */
.dp-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    min-height: 30px;
    cursor: default;
    transition: all var(--transition-fast);
}
.dp-slot-occupied {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.30);
    color: var(--text-primary);
}
.dp-slot-occupied:hover {
    background: rgba(16, 185, 129, 0.22);
}
.dp-slot-icon {
    font-size: 16px;
    color: #10b981;
    flex-shrink: 0;
}
.dp-slot-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.dp-slot-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

/* Mini-Ampel (MA / EL / Admin) */
.dp-ampel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 4px;
}
.dp-ampel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
}
.dp-ampel-dot.dp-ampel-on {
    background: #22c55e;
    border-color: #16a34a;
    box-shadow: 0 0 3px rgba(34,197,94,0.5);
}
.dp-ampel-dot.dp-ampel-red {
    background: #ef4444;
    border-color: #dc2626;
    box-shadow: 0 0 3px rgba(239,68,68,0.5);
}
.dp-slot-free {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: var(--text-muted);
    cursor: copy;
}
.dp-slot-free:hover, .dp-slot-free.dp-dragover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}
.dp-slot-icon-free {
    font-size: 16px;
    color: #ef4444;
    flex-shrink: 0;
    opacity: 0.5;
}
.dp-slot-free-label {
    font-style: italic;
    opacity: 0.6;
}

/* Leer-Hint */
.dp-empty-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 14px 0;
    opacity: 0.5;
}

/* Leere Gesamt-Zeile */
.dp-empty-row .dp-label-cell {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

/* =================================================================
   POOL (Mitarbeiter unten)
   ================================================================= */
.dp-pool {
    flex-shrink: 0;
    height: 230px;
    min-height: 160px;
    border-top: 2px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
}

.dp-pool-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}
.dp-pool-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
}
.dp-pool-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}
.dp-pool-tab.active {
    color: var(--primary-light);
    border-bottom-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.07);
}

.dp-pool-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.dp-pool-lists {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.dp-pool-list {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    overflow-y: auto;
    position: absolute;
    inset: 0;
    align-content: flex-start;
}
.dp-pool-list.active {
    display: flex;
}

/* Pool-Karte */
.dp-pool-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: grab;
    transition: all var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}
.dp-pool-card:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.dp-pool-card:active {
    cursor: grabbing;
    transform: scale(0.97);
}
.dp-pool-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.dp-pool-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.dp-pool-badge {
    background: transparent;
    color: rgba(var(--accent-color-rgb), 0.7);
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
}

/* Sub-Pool spezifisch */
.dp-sub-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-right: 14px;
    margin-bottom: 4px;
}
.dp-sub-ma-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}
.dp-pool-card-sub {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-color: rgba(var(--accent-color-rgb), 0.25);
    font-weight: 600;
    padding: 2px 10px;
    font-size: 0.75rem;
    height: 26px;
    box-sizing: border-box;
}
.dp-pool-card-subma {
    font-size: 0.75rem;
    padding: 2px 10px;
    height: 26px;
    box-sizing: border-box;
}

/* Dienstplan Nav-Buttons 50% größer */
.dp-nav-btn {
    width: 42px;
    height: 42px;
}
.dp-nav-btn .material-icons {
    font-size: 30px;
}

/* =================================================================
   PROJEKT-FILTER DROPDOWN (unterhalb des Buttons)
   ================================================================= */
.dp-project-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 90vw;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.dp-project-filter-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}
.dp-pf-toggle-all {
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 2px;
    padding-bottom: 10px !important;
}
.dp-pf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.dp-pf-item:hover {
    background: var(--bg-tertiary);
    border-radius: 4px;
}
.dp-pf-checkbox {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
}

/* =================================================================
   CONTEXT-MENU (Rechtsklick „Ausplanen")
   ================================================================= */
.dp-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 4px 0;
    min-width: 180px;
}
.dp-context-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dp-context-item:hover {
    background: var(--bg-tertiary);
}
.dp-context-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Unklar-Markierung */
.dp-slot-unklar {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}
.dp-slot-unklar:hover {
    background: rgba(245, 158, 11, 0.28) !important;
}
.dp-unklar-badge {
    font-size: 14px;
    color: #ef4444;
    margin-left: 4px;
    flex-shrink: 0;
    cursor: default;
    opacity: 0.85;
}

/* Kommentar Info-Icon */
.dp-kommentar-icon {
    font-size: 14px;
    color: var(--accent-color);
    margin-left: 4px;
    flex-shrink: 0;
    cursor: help;
    opacity: 0.85;
}
.dp-slot-occupied:hover .dp-kommentar-icon {
    opacity: 1;
}

/* Kommentar-Dialog */
.dp-kommentar-dialog {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-kommentar-dialog-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 360px;
    max-width: 90vw;
    padding: 0;
}
.dp-kommentar-dialog-header {
    display: flex;
    align-items: center;
    padding: 14px 16px 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.dp-kommentar-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.dp-kommentar-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dp-kommentar-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    outline: none;
}
.dp-kommentar-textarea:focus {
    background: var(--bg-secondary);
}
.dp-kommentar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
}

/* Sub-Picker */
.dp-sub-picker {
    min-width: 200px;
}
.dp-sub-picker-header {
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
}

/* =================================================================
   DIENSTPLAN: Heute-Button & Datum-Input (gleicher Stil wie Filter)
   ================================================================= */
.dp-nav-today-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}
.dp-nav-today-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dp-nav-date-input {
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}
.dp-nav-date-input:hover,
.dp-nav-date-input:focus {
    background: var(--bg-tertiary);
    outline: none;
}

/* =================================================================
   DIENSTPLAN: Trennung-Einstellung
   ================================================================= */
.dp-trennung-group {
    display: flex;
    position: relative;
}
.dp-trennung-btn {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.dp-trennung-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dp-trennung-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    z-index: 100;
    padding: 8px 0;
    flex-direction: column;
}
.dp-trennung-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.dp-trennung-option:hover {
    background: var(--bg-tertiary);
}
.dp-trennung-option input[type="radio"] {
    accent-color: var(--primary-color);
}

/* =================================================================
   UHRZEITEN-MODUS Toggle
   ================================================================= */
.dp-time-mode-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.dp-time-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: none;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dp-time-mode-btn:last-child {
    border-right: none;
}
.dp-time-mode-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dp-time-mode-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}
.dp-time-mode-btn .material-icons {
    font-size: 18px;
}

/* Filter-Gruppe (Kunde + Projekt) – gleicher Stil wie Time-Mode-Group */
.dp-filter-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: visible;
    position: relative;
}
.dp-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: none;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.dp-filter-btn:last-of-type {
    border-right: none;
}
.dp-filter-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.dp-filter-btn .material-icons {
    font-size: 18px;
}
.dp-filter-group .dp-project-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
}

/* Modus 2: Zeit-Badge im Slot */
.dp-slot-time {
    font-size: 0.75rem;
    color: var(--primary-light);
    background: rgba(var(--primary-rgb), 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
}
/* Modus 2: Slot vertikal anordnen – Zeit oben, Name darunter */
.dp-slot-has-time {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    padding: 2px 4px;
    position: relative;
    min-height: 42px;
    justify-content: center;
}
.dp-slot-has-time .dp-slot-name {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dp-slot-has-time .dp-unklar-badge,
.dp-slot-has-time .dp-kommentar-icon {
    position: absolute;
    top: 1px;
    right: 1px;
}
.dp-slot-has-time .dp-ampel {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    padding-left: 0;
}

/* Modus 3: Zeitgruppen-Rahmen */
.dp-time-frame {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 2px solid var(--frame-color, var(--primary-color));
    border-radius: 6px;
    padding: 8px 2px 2px 2px;
    position: relative;
    margin-top: 10px;
}
/* Modus 3: Zeit-Label auf dem Rahmen */
.dp-frame-time {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--frame-color, var(--primary-color));
    background: var(--bg-secondary);
    border: 1.5px solid var(--frame-color, var(--primary-color));
    border-radius: 10px;
    padding: 0 8px;
    line-height: 1.45;
    white-space: nowrap;
    z-index: 1;
}
.dp-time-frame .dp-slot {
    min-height: 26px;
    padding: 2px 6px;
    font-size: 0.74rem;
}
.dp-time-frame .dp-slot-icon,
.dp-time-frame .dp-slot-icon-free {
    font-size: 14px;
}

/* Move-Modus: freie Slots hervorheben */
.dp-slot-free.dp-move-target {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.15);
    animation: dp-pulse 1.2s ease-in-out infinite;
    cursor: pointer;
}
/* Move-Modus: Quell-Slot hervorheben */
.dp-slot-occupied.dp-move-source {
    border-color: var(--primary-color) !important;
    background: rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
@keyframes dp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
/* Massenaktion: ausgewählte Dienste */
.dp-slot.dp-slot-selected {
    border-color: #a855f7 !important;
    border-style: solid !important;
    background: rgba(168, 85, 247, 0.25) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5);
    position: relative;
}
.dp-slot.dp-slot-selected::after {
    content: 'check_circle';
    font-family: 'Material Icons';
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #a855f7;
    pointer-events: none;
}
/* Massenaktion-Modus: Cursor auf Board */
.dp-massenaktion-mode .dp-slot {
    cursor: pointer;
}
/* Massenaktion-Button aktiv */
.dp-massenaktion-btn.active {
    background: rgba(168, 85, 247, 0.2) !important;
    border-color: #a855f7 !important;
    color: #a855f7 !important;
}
/* Swap-Modus: Quell-Slot hervorheben */
.dp-slot-occupied.dp-swap-source {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4);
}
/* Swap-Modus: Ziel-Slots hervorheben */
.dp-slot-occupied.dp-swap-target {
    outline: 2px dashed rgba(245, 158, 11, 0.5);
    outline-offset: -2px;
    cursor: pointer;
}

/* Sub-MA Toggle Checkbox */
.dp-sub-ma-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-left: auto;
    padding: 2px 6px;
    border-radius: var(--border-radius);
}
.dp-sub-ma-toggle:hover {
    background: var(--bg-tertiary);
}
.dp-sub-ma-toggle input[type="checkbox"] {
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* =================================================================
   RESPONSIVE: Dienstplan
   ================================================================= */
@media (max-width: 1100px) {
    .dp-grid {
        grid-template-columns: 160px repeat(5, 1fr);
    }
    .dp-label-cell {
        padding: 6px 8px;
    }
}
@media (max-width: 768px) {
    .dp-grid {
        grid-template-columns: 120px repeat(5, 1fr);
        font-size: 0.75rem;
    }
    .dp-pool {
        height: 180px;
    }
}

/* Zeiten-Modal: disabled Felder */
#dp-zeiten-modal .form-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(30, 41, 59, 0.7);
}

/* Zeiten-Modal: geänderte Felder */
#dp-zeiten-modal .dp-zeiten-changed {
    border-color: #facc15 !important;
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.3);
}

/* Konditionen: Berechnungs-Animation */
.field-calculating {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%) !important;
    background-size: 200% 100% !important;
    animation: fieldShimmer 1.2s ease-in-out infinite !important;
    color: transparent !important;
}
.field-calculating::placeholder {
    color: transparent !important;
}
@keyframes fieldShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}