/*
 * Eventbuch Inline-Editing CSS - Flexible Modi
 * 
 * Unterstützt verschiedene CSS-Modi:
 * - minimal: Nur funktionale Styles
 * - full: Komplette Styling (Standard)
 * - inherit: Respektiert bestehende Table-Styles
 */

/* ===== MINIMAL MODUS ===== */
/* Nur funktional notwendige Styles - überschreibt alle anderen Styles */
[class*="-minimal"].minimal-editable,
[class*="-minimal"][class*="-editable"] {
    cursor: pointer !important;
    position: relative !important;
    /* Keine Background-, Border- oder Padding-Änderungen! */
    background: inherit !important;
    border: none !important;
    padding: inherit !important;
    color: inherit !important;
    transition: opacity 0.2s ease !important;
}

[class*="-minimal"].minimal-editable:hover,
[class*="-minimal"][class*="-editable"]:hover {
    opacity: 0.8 !important;
    /* Keine anderen visuellen Änderungen */
}

[class*="-minimal"].minimal-editable.editing,
[class*="-minimal"][class*="-editable"].editing {
    outline: 1px solid #007bff !important;
    outline-offset: -1px !important;
}

/* ===== INHERIT MODUS (angepasst für Tabellen-Optik) ===== */
[class*="-inherit"].inherit-editable,
[class*="-inherit"][class*="-editable"] {
    cursor: pointer !important;
    position: relative !important;
    background: inherit !important;   /* übernimmt den Tabellenhintergrund */
    border: 1px solid #bfc9d1 !important;
    color: inherit !important;
    padding: 4px 8px !important;
    border-radius: 3px;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[class*="-inherit"].inherit-editable:hover,
[class*="-inherit"][class*="-editable"]:hover {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.1rem rgba(0,123,255,0.08);
    background: inherit !important;
}

[class*="-inherit"].inherit-editable.editing,
[class*="-inherit"][class*="-editable"].editing {
    border: 2px solid #007bff !important;
    outline: none !important;
    background: inherit !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.15);
}

[class*="-inherit"].inherit-editable.modified::after,
[class*="-inherit"][class*="-editable"].modified::after {
    content: "●" !important;
    color: #ffc107 !important;
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    font-size: 8px !important;
    z-index: 10 !important;
}

/* ===== FULL MODUS ===== */
/* Komplettes Styling (Standard-Verhalten) - nur wenn NICHT minimal oder inherit */

/* Text-Felder */
[class*="-editable"]:not([class*="-minimal"]):not([class*="-inherit"]):not([data-input-type]),
.inline-editable:not([class*="-minimal"]):not([class*="-inherit"]) {
    background-color: #f9f9f9 !important;
    border: 1px dashed #ccc !important;
    cursor: text !important;
    color: #000000 !important;
    padding: 4px 8px;
    min-height: 20px;
    position: relative;
    transition: all 0.2s ease;
}

[class*="-editable"]:not([class*="-minimal"]):not([class*="-inherit"]):not([data-input-type]):hover,
.inline-editable:not([class*="-minimal"]):not([class*="-inherit"]):hover {
    background-color: #e9ecef !important;
    border-color: #007bff !important;
}

[class*="-editable"]:not([class*="-minimal"]):not([class*="-inherit"]):not([data-input-type]):focus,
.inline-editable:not([class*="-minimal"]):not([class*="-inherit"]):focus {
    outline: none !important;
    background-color: #ffffff !important;
    border: 2px solid #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Select/Dropdown-Felder */
[class*="-editable-select"]:not([class*="-minimal"]):not([class*="-inherit"]),
.inline-editable-select:not([class*="-minimal"]):not([class*="-inherit"]) {
    background-color: #f9f9f9 !important;
    border: 1px dashed #ccc !important;
    cursor: pointer !important;
    color: #000000 !important;
    padding: 4px 8px;
    min-height: 20px;
    position: relative;
    transition: all 0.2s ease;
}

[class*="-editable-select"]:not([class*="-minimal"]):not([class*="-inherit"]):hover,
.inline-editable-select:not([class*="-minimal"]):not([class*="-inherit"]):hover {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-color: #0056b3 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

[class*="-editable-select"]:not([class*="-minimal"]):not([class*="-inherit"])::after,
.inline-editable-select:not([class*="-minimal"]):not([class*="-inherit"])::after {
    content: "▼";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #6c757d;
    pointer-events: none;
    transition: color 0.2s ease;
}

[class*="-editable-select"]:not([class*="-minimal"]):not([class*="-inherit"]):hover::after,
.inline-editable-select:not([class*="-minimal"]):not([class*="-inherit"]):hover::after {
    color: #ffffff !important;
}

/* Checkbox-Felder */
[class*="-editable-checkbox"]:not([class*="-minimal"]):not([class*="-inherit"]),
.inline-editable-checkbox:not([class*="-minimal"]):not([class*="-inherit"]) {
    background-color: #f9f9f9 !important;
    border: 1px dashed #ccc !important;
    cursor: pointer !important;
    color: #000000 !important;
    padding: 4px 8px;
    min-height: 20px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease;
    font-weight: bold;
}

/* Checkbox Hover: Grün für checked (✓) */
[class*="-editable-checkbox"]:not([class*="-minimal"]):not([class*="-inherit"]).checkbox-checked:hover,
.inline-editable-checkbox:not([class*="-minimal"]):not([class*="-inherit"]).checkbox-checked:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #1e7e34 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

/* Checkbox Hover: Rot für unchecked (✗) */
[class*="-editable-checkbox"]:not([class*="-minimal"]):not([class*="-inherit"]).checkbox-unchecked:hover,
.inline-editable-checkbox:not([class*="-minimal"]):not([class*="-inherit"]).checkbox-unchecked:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #c82333 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

/* ===== GEMEINSAME STATUS-STYLES ===== */
/* Gelten für alle Modi */

/* Editing-Status */
[class*="-editable"].editing,
.inline-editable.editing {
    animation: pulse-border 1s infinite;
}

@keyframes pulse-border {
    0% { border-color: #007bff; }
    50% { border-color: #0056b3; }
    100% { border-color: #007bff; }
}

/* Modified-Status */
[class*="-editable"].modified::after,
.inline-editable.modified::after {
    content: "●";
    color: #ffc107;
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 8px;
    z-index: 10;
}

/* Saving-Status - HÖCHSTE PRIORITÄT für Feedback auch bei Hover */
[class*="-editable"].saving,
.inline-editable.saving,
[class*="-editable"].saving:hover,
.inline-editable.saving:hover,
table [class*="-editable"].saving:hover,
table .inline-editable.saving:hover,
.table [class*="-editable"].saving:hover,
.table .inline-editable.saving:hover {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    border-style: solid !important;
    transform: none !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3) !important;
}

[class*="-editable"].saving::before,
.inline-editable.saving::before,
[class*="-editable"].saving:hover::before,
.inline-editable.saving:hover::before {
    content: "⟳";
    position: absolute;
    top: 2px;
    left: 4px;
    color: #856404;
    animation: spin 1s linear infinite;
    font-size: 10px;
    z-index: 10;
}

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

/* Saved-Status - HÖCHSTE PRIORITÄT für Feedback auch bei Hover */
[class*="-editable"].saved,
.inline-editable.saved,
[class*="-editable"].saved:hover,
.inline-editable.saved:hover,
table [class*="-editable"].saved:hover,
table .inline-editable.saved:hover,
.table [class*="-editable"].saved:hover,
.table .inline-editable.saved:hover {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    border-style: solid !important;
    transform: none !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3) !important;
}

[class*="-editable"].saved::before,
.inline-editable.saved::before,
[class*="-editable"].saved:hover::before,
.inline-editable.saved:hover::before {
    content: "✓";
    position: absolute;
    top: 2px;
    left: 4px;
    color: #155724;
    font-size: 10px;
    z-index: 10;
}

/* Error-Status - HÖCHSTE PRIORITÄT für Feedback auch bei Hover */
[class*="-editable"].error,
.inline-editable.error,
[class*="-editable"].error:hover,
.inline-editable.error:hover,
table [class*="-editable"].error:hover,
table .inline-editable.error:hover,
.table [class*="-editable"].error:hover,
.table .inline-editable.error:hover {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    border-style: solid !important;
    transform: none !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3) !important;
}

[class*="-editable"].error::before,
.inline-editable.error::before,
[class*="-editable"].error:hover::before,
.inline-editable.error:hover::before {
    content: "✗";
    position: absolute;
    top: 2px;
    left: 4px;
    color: #721c24;
    font-size: 10px;
    z-index: 10;
}

/* ===== DROPDOWN-MENÜ ===== */
/* Gelten für alle Modi */

.inline-select-dropdown {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
}

.dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.dropdown-option:hover {
    background-color: #007bff;
    color: white;
}

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

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    [class*="-editable"],
    .inline-editable,
    [class*="-editable-select"],
    .inline-editable-select,
    [class*="-editable-checkbox"],
    .inline-editable-checkbox {
        min-height: 36px;
        padding: 8px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .inline-select-dropdown {
        max-height: 150px;
    }
    
    .dropdown-option {
        padding: 12px;
        font-size: 16px;
    }
}

/* ===== MESSAGE-BOX ===== */
#inline-edit-messages {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#inline-edit-messages .alert {
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    [class*="-editable"]:not([class*="-minimal"]):not([class*="-inherit"]),
    .inline-editable {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    .inline-select-dropdown {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .dropdown-option:hover {
        background-color: #4a5568;
    }
}

/* Eventbuch Inline-Editing CSS */
/* ============================================ */

/* FORCE BLACK TEXT - Höchste Priorität für Lesbarkeit */
table .inline-editable,
td.inline-editable,
.table .inline-editable,
.inline-editable {
    color: #000000 !important;
    font-weight: 500 !important;
}

table .inline-editable-select,
td.inline-editable-select,
.table .inline-editable-select,
.inline-editable-select {
    color: #000000 !important;
    font-weight: 500 !important;
}

table .inline-editable-checkbox,
td.inline-editable-checkbox,
.table .inline-editable-checkbox,
.inline-editable-checkbox {
    color: #000000 !important;
    font-weight: bold !important;
}

/* Hover states mit besserer Lesbarkeit */
.inline-editable:hover {
    color: #0056b3 !important;
}

.inline-editable-select:hover {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-color: #0056b3 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.inline-editable-checkbox:hover {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
    border-style: solid !important;
    color: #495057 !important;
}

/* Spezifische Hover-Farben für Checkbox-Status */
.inline-editable-checkbox.checkbox-checked:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #1e7e34 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.inline-editable-checkbox.checkbox-unchecked:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #c82333 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

/* Bootstrap Tabellen Override */
.table td.inline-editable,
.table td.inline-editable-select,
.table td.inline-editable-checkbox,
.table-striped tbody tr:nth-of-type(odd) td.inline-editable,
.table-striped tbody tr:nth-of-type(odd) td.inline-editable-select,
.table-striped tbody tr:nth-of-type(odd) td.inline-editable-checkbox,
.table-striped tbody tr:nth-of-type(even) td.inline-editable,
.table-striped tbody tr:nth-of-type(even) td.inline-editable-select,
.table-striped tbody tr:nth-of-type(even) td.inline-editable-checkbox {
    color: #000000 !important;
}

/* Basis-Styling für editierbare Zellen */
.inline-editable {
    background-color: #f9f9f9 !important;
    border: 1px dashed #ccc !important;
    cursor: text;
    transition: all 0.3s ease;
    padding: 8px !important;
    min-height: 20px;
    position: relative;
    font-weight: 500;
}

.inline-editable:focus {
    outline: none;
    background-color: #ffffff !important;
    border: 2px solid #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    color: #212529 !important;
}

/* Verschiedene Zustände */
.inline-editable.editing {
    background-color: #ffffff !important;
    border: 2px solid #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.inline-editable.modified {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    border-style: solid !important;
    position: relative;
}

.inline-editable.modified::after {
    content: "●";
    color: #ffc107;
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 12px;
}

.inline-editable.saving,
.inline-editable.saving:hover,
table .inline-editable.saving:hover,
.table .inline-editable.saving:hover {
    background-color: #d1ecf1 !important;
    border-color: #17a2b8 !important;
    border-style: solid !important;
    opacity: 0.8;
    position: relative;
    transform: none !important;
    box-shadow: 0 0 8px rgba(23, 162, 184, 0.3) !important;
}

.inline-editable.saving::after,
.inline-editable.saving:hover::after {
    content: "⟳";
    color: #17a2b8;
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 14px;
    animation: spin 1s linear infinite;
}

.inline-editable.saved,
.inline-editable.saved:hover,
table .inline-editable.saved:hover,
.table .inline-editable.saved:hover {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    border-style: solid !important;
    position: relative;
    transform: none !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3) !important;
}

.inline-editable.saved::after,
.inline-editable.saved:hover::after {
    content: "✓";
    color: #28a745;
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 14px;
    font-weight: bold;
}

.inline-editable.error,
.inline-editable.error:hover,
table .inline-editable.error:hover,
.table .inline-editable.error:hover {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    border-style: solid !important;
    position: relative;
    transform: none !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3) !important;
}

.inline-editable.error::after,
.inline-editable.error:hover::after {
    content: "✗";
    color: #dc3545;
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* Spezifische Styling-Klassen für verschiedene Feldtypen */
.editable-client-name {
    font-weight: 500;
    color: #212529 !important;
}

.editable-vorname,
.editable-nachname {
    font-weight: 500;
    color: #212529 !important;
}

.editable-email {
    color: #007bff !important;
    font-family: monospace;
    font-weight: 500;
}

.editable-telefon {
    font-family: monospace;
    color: #212529 !important;
    font-weight: 500;
}

.editable-event-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #212529 !important;
}

.editable-event-beschreibung,
.editable-anmeldung-bemerkung,
.editable-programm-beschreibung {
    min-height: 60px;
    line-height: 1.4;
    white-space: pre-wrap;
    color: #212529 !important;
}

.editable-programm-preis {
    text-align: right;
    font-family: monospace;
    font-weight: bold;
    color: #212529 !important;
}

.editable-anmeldung-startnr {
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    color: #212529 !important;
}

/* Animationen */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.inline-editable.saving {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Message-System */
#inline-edit-messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 300px;
}

#inline-edit-messages .alert {
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

#inline-edit-messages .alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

#inline-edit-messages .alert-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

#inline-edit-messages .alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .inline-editable {
        padding: 6px !important;
        font-size: 14px;
    }
    
    #inline-edit-messages {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Tooltip-ähnliche Hover-Hilfe */
.inline-editable:not(.editing):not(.saving):hover::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Tabellen-spezifische Verbesserungen */
table .inline-editable {
    display: block; /* Stellt sicher, dass Margin und Width korrekt angewendet werden */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite einbezogen */
    width: calc(100% - 10px); /* 5px Margin auf jeder Seite */
    margin: 5px; /* Abstand zum Zellenrand */
    background-color: #ffffff !important; /* Weißer Hintergrund für den "Eingabefeld"-Look */
    border: 1px solid #ced4da !important; /* Standard-Bootstrap-Input-Rahmen */
    border-radius: .25rem; /* Abgerundete Ecken */
    padding: 8px !important; /* Innerer Abstand beibehalten (von Basis-Styling) */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

table .inline-editable:hover {
     border-color: #80bdff !important; /* Hellerer Blauton bei Hover */
}

table .inline-editable:focus,
table .inline-editable.editing {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}

/* Leere Zellen */
.inline-editable:empty::before {
    content: attr(data-placeholder);
    color: #6c757d;
    font-style: italic;
    opacity: 0.7;
}

/* Fokus-Ring für bessere Accessibility */
.inline-editable:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Verbessertes Styling für verschiedene Tabellendesigns */
.table .inline-editable {
    background-color: transparent !important;
    border: 1px dashed #dee2e6 !important;
}

.table .inline-editable:hover {
    background-color: #f8f9fa !important;
}

.table-striped tbody tr:nth-of-type(odd) .inline-editable {
    background-color: rgba(0,0,0,.02) !important;
}

.table-striped tbody tr:nth-of-type(odd) .inline-editable:hover {
    background-color: #f8f9fa !important;
}

/* Dark Mode Support (falls das System Dark Mode unterstützt) */
@media (prefers-color-scheme: dark) {
    .inline-editable {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border-color: #4a5568 !important;
    }
    
    .inline-editable:hover {
        background-color: #4a5568 !important;
        border-color: #63b3ed !important;
    }
    
    .inline-editable:focus,
    .inline-editable.editing {
        background-color: #1a202c !important;
        border-color: #63b3ed !important;
        color: #f7fafc !important;
    }

    table .inline-editable {
        background-color: #2d3748 !important; /* Dunkler Hintergrund für Formularfeld */
        border-color: #4a5568 !important; /* Passender Rahmen */
        color: #e2e8f0 !important;
    }

    table .inline-editable:hover {
        border-color: #63b3ed !important; /* Hellerer Rahmen bei Hover */
        background-color: #4a5568 !important; /* Hintergrund leicht ändern */
    }

    table .inline-editable:focus,
    table .inline-editable.editing {
        background-color: #1a202c !important; /* Noch dunklerer Hintergrund bei Fokus */
        border-color: #63b3ed !important;
        box-shadow: 0 0 0 0.2rem rgba(99, 179, 237, 0.25) !important; /* Angepasster Schatten */
        color: #f7fafc !important;
    }
} 

/* Dropdown-Arrow Indikator */
.inline-editable-select::after {
    content: "▼";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 10px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.inline-editable-select:hover::after {
    color: #ffffff !important;
}

/* Dropdown-Menu */
.inline-select-dropdown {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
}

.dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.dropdown-option:hover {
    background-color: #007bff;
    color: white;
}

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

/* Checkbox Styling */
.inline-editable-checkbox {
    background-color: #f9f9f9 !important;
    border: 1px dashed #ccc !important;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px !important;
    min-height: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
}

.inline-editable-checkbox:hover {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border-color: #1e7e34 !important;
    border-style: solid !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.inline-editable-checkbox.modified {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
    border-style: solid !important;
    color: #856404 !important;
}

.inline-editable-checkbox.saving {
    background-color: #d1ecf1 !important;
    border-color: #17a2b8 !important;
    border-style: solid !important;
    opacity: 0.8;
    color: #0c5460 !important;
}

.inline-editable-checkbox.saved {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    border-style: solid !important;
    color: #155724 !important;
}

.inline-editable-checkbox.error {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    border-style: solid !important;
    color: #721c24 !important;
}

/* Status-Icons für verschiedene Eingabe-Typen */
.inline-editable-select.modified::before,
.inline-editable-checkbox.modified::before {
    content: "●";
    color: #ffc107;
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 12px;
}

.inline-editable-select.saving::before,
.inline-editable-checkbox.saving::before {
    content: "⟳";
    color: #17a2b8;
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 14px;
    animation: spin 1s linear infinite;
}

.inline-editable-select.saved::before,
.inline-editable-checkbox.saved::before {
    content: "✓";
    color: #28a745;
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
}

.inline-editable-select.error::before,
.inline-editable-checkbox.error::before {
    content: "✗";
    color: #dc3545;
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* Responsive Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .inline-editable-select,
    .inline-editable-checkbox {
        padding: 10px !important;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    .inline-select-dropdown {
        max-height: 150px;
        font-size: 16px;
    }
    
    .dropdown-option {
        padding: 12px;
        font-size: 16px;
    }
}

/* Accessibility Verbesserungen */
.inline-editable-select:focus,
.inline-editable-checkbox:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Spezielle Styling-Klassen für verschiedene Select-Typen */
.editable-status-select {
    font-weight: bold;
}

.editable-priority-select {
    text-align: center;
}

.editable-category-select {
    font-style: italic;
}

/* Dark Mode für neue Elemente */
@media (prefers-color-scheme: dark) {
    .inline-editable-select,
    .inline-editable-checkbox {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
        border-color: #4a5568 !important;
    }
    
    .inline-editable-select:hover,
    .inline-editable-checkbox:hover {
        background-color: #4a5568 !important;
        border-color: #63b3ed !important;
    }
    
    .inline-select-dropdown {
        background: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .dropdown-option:hover {
        background-color: #4299e1;
    }
}