/* START OF FILE style.css */

/* Globale Stile & Reset (sehr basic) */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
    /* Verhindert Body-Scroll, wenn interne Elemente scrollen */
    overflow: hidden;
}

h1, h2 {
    color: #555;
    text-align: center;
    margin-bottom: 15px;
}
h3 {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
h4 {
    margin-top: 5px;
    margin-bottom: 10px;
    color: #444;
}

button, .button-like-label {
    padding: 8px 15px;
    margin: 5px;
    border: 1px solid #ccc;
    background-color: #e7e7e7;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
}
.button-like-label {
    display: inline-block; /* Damit Padding etc. wirkt */
}

button:hover, .button-like-label:hover {
    background-color: #ddd;
}
button:disabled {
    cursor: not-allowed;
    background-color: #eee;
    color: #aaa;
    border-color: #ddd;
}


select, input[type="number"], input[type="text"], input[type="time"], input[type="date"], input[type="color"] {
    padding: 8px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Breite für Standard-Inputs im Modal */
#config-sections input[type="text"],
#config-sections input[type="number"],
#config-sections input[type="time"],
#config-sections input[type="date"] {
    width: 250px;
}
/* Kleinere Breite für spezifische Inputs */
#config-sections input[type="color"],
#staffing-needs-editor input[type="number"],
#employee-contract-hours,
#shift-durationHours,
#absence-durationHours {
     width: 80px;
}


/* Layout */
#app-container {
    max-width: 1800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    margin-bottom: 30px;
}

/* NEU: App Header */
#app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Abstand zu Controls */
    flex-shrink: 0;
}
#app-header h1 {
    margin: 0; /* Reset margin */
    text-align: left;
}
#toggle-planning-mode-button {
    background-color: #6c757d;
    color: white;
    border-color: #5a6268;
}
#toggle-planning-mode-button:hover {
    background-color: #5a6268;
}

#controls {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out; /* Übergang für Ausblenden */
}
.control-group {
    margin: 5px 10px;
}

/* Hauptbereich mit Palette und Planer */
#main-content {
    display: flex;
    gap: 20px;
    flex-grow: 1;
    overflow: hidden;
}

#palette {
    flex: 0 0 200px; /* Startbreite */
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 100%;
    display: flex;
    flex-direction: column; /* Damit Sticky Header funktioniert */
    transition: all 0.3s ease-in-out; /* Übergang für Verkleinern */
    overflow: hidden; /* Verhindert, dass Inhalt überläuft */
}

#palette h2 {
    margin-top: 0;
    margin-bottom: 10px; /* Etwas Abstand zum Inhalt */
    font-size: 1.1em;
    position: sticky;
    top: -15px; /* Klebt am oberen Rand der Palette */
    background-color: #f9f9f9;
    padding-top: 15px;
    padding-bottom: 5px;
    z-index: 5;
    transition: opacity 0.3s ease-in-out; /* Übergang für Ausblenden */
}

#palette-items {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    overflow-y: auto; /* Nur dieser Teil scrollt, wenn nötig */
    padding-bottom: 15px; /* Platz am Ende des scrollbaren Bereichs */
}

#palette-items .draggable-item {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: grab;
    text-align: center;
    font-size: 0.9em;
    background-color: #fff;
    word-wrap: break-word; /* Umbruch bei langen Namen */
    transition: all 0.3s ease-in-out; /* Übergang für Verkleinern */
    white-space: nowrap; /* Verhindert Umbruch im Planungsmodus */
    overflow: hidden; /* Versteckt überlaufenden Text */
    text-overflow: ellipsis; /* Fügt ... hinzu */
}

#palette-items .draggable-item:active {
    cursor: grabbing;
}

#planner {
    flex: 1; /* Nimmt verfügbaren Platz */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 15px;
    transition: flex-grow 0.3s ease-in-out; /* Übergang für Vergrößern */
}

#calendar-title {
     font-size: 1.2em;
     margin-bottom: 5px; /* Reduzierter Abstand */
     flex-shrink: 0;
}

#calendar-grid {
    display: grid;
    border: 1px solid #ccc;
    overflow: auto; /* Wichtig für Sticky Positioning */
    flex-grow: 1;
}

.grid-header {
    background-color: #e0e0e0;
    font-weight: bold;
    padding: 8px 5px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 0.85em;
    position: sticky; /* Basis für Sticky */
    z-index: 10; /* Basis z-index */
    transition: background-color 0.2s ease-in-out; /* Für Farbwechsel */
}
.employee-header {
     background-color: #e8e8e8; /* Etwas heller als Datum */
     position: sticky;
     left: 0; /* Klebt links */
     z-index: 11; /* Über Datum/Zellen */
     text-align: left;
     padding-left: 10px;
     white-space: nowrap;
}
.date-header {
    min-width: 50px;
    position: sticky;
    top: 0; /* Klebt oben */
    z-index: 10; /* Unter Mitarbeiter-Header */
    cursor: help; /* Zeigt Tooltip an */
}
.corner-header {
    position: sticky;
    top: 0; /* Klebt oben */
    left: 0; /* Klebt links */
    z-index: 12; /* Über allen anderen Headern */
    background-color: #d0d0d0; /* Dunkler für Abhebung */
}

/* Styling für Tages-Header basierend auf Besetzung */
.date-header.deficit {
    background-color: rgba(255, 0, 0, 0.15); /* Heller Rotton */
    border-bottom: 2px solid red;
}
.date-header.fulfilled {
    background-color: rgba(0, 128, 0, 0.1); /* Heller Grünton */
    border-bottom: 2px solid green;
}

/* Tooltip für Tages-Header */
.staffing-tooltip-header {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 8px 10px;
    border-radius: 5px;
    z-index: 30; /* Über Grid-Headern */
    top: 100%; /* Unter dem Header */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px; /* Abstand */
    font-size: 0.9em;
    line-height: 1.5;
    white-space: normal; /* Zeilenumbrüche */
    min-width: 180px;
    text-align: left;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}
.date-header:hover .staffing-tooltip-header {
    visibility: visible;
    opacity: 1;
}


.calendar-cell {
    position: relative;
    border: 1px solid #ddd;
    min-height: 40px;
    padding: 5px;
    font-size: 0.8em;
    text-align: center;
    background-color: #fff;
    transition: background-color 0.1s ease-in-out;
    user-select: none; /* Verhindert Textauswahl */
}
.calendar-cell.weekend { background-color: #f0f8ff; }
.calendar-cell.holiday { background-color: #fffacd; font-weight: bold; }

.calendar-cell .wish-indicator-icon {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 1.1em;
    font-weight: bold;
    pointer-events: none;
    z-index: 5;
    line-height: 1;
}
.wish-indicator-icon.pending { color: #ffbf00; }
.wish-indicator-icon.fulfilled { color: #28a745; }
.wish-indicator-icon.overridden { color: #dc3545; }


/* Styling für zugewiesene Dienste/Abwesenheiten */
.calendar-cell .assignment {
    display: block;
    padding: 4px;
    border-radius: 3px;
    color: #333;
    pointer-events: none; /* Klicks gehen zur Zelle durch */
}
/* Farben werden direkt im JS gesetzt, keine spezifischen Klassen mehr nötig */


/* Regelverletzungen */
.rule-violation {
    box-shadow: 0 0 0 2px red inset;
}
.violation-tooltip {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 20;
    bottom: 105%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9em;
    pointer-events: none; /* Wichtig */
}
.calendar-cell.rule-violation:hover .violation-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Block-Styling (nicht mehr verwendet für Zellen) */
.block-start, .block-end, .block-middle, .block-single {
    /* Keine Styles mehr nötig */
}


/* Modal-Styling */
.modal {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Weniger Margin oben für mehr Platz */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 850px; /* Etwas breiter für Block-Editor */
    border-radius: 8px;
    position: relative;
}
.close-button { /* Gilt für Config-Modal */
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}

/* Tab Navigation im Modal */
.tab-navigation {
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    padding-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
}
.tab-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 10px 15px;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.tab-button:hover { background-color: #ddd; }
.tab-button.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    font-weight: bold;
}

/* Tab Content Styling */
.tab-content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background-color: #fff;
    max-height: 70vh; /* Höhe angepasst */
    overflow-y: auto;
}
.tab-content.active { display: block; }

/* Styling für Listen und Formulare im Modal */
#config-sections label {
    display: inline-block;
    min-width: 180px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9em;
    vertical-align: top; /* Bessere Ausrichtung bei mehrzeiligen Elementen */
}

#config-sections input[type="checkbox"] {
    margin-bottom: 8px;
    margin-left: 5px;
    vertical-align: middle;
}
#config-sections form {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* Styling für Listen-Einträge */
.config-list-item { /* Allgemeine Klasse für alle Listen */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
}
.config-list-item:last-child {
    border-bottom: none;
}
.config-list-item span {
    flex-grow: 1;
    margin-right: 10px;
}
.config-list-item button {
    padding: 3px 8px;
    font-size: 0.8em;
    margin-left: 5px;
}
.edit-button { background-color: #ffc107; color: black; } /* Farbe angepasst */
.delete-button { background-color: #dc3545; color: white; }

/* Spezifisches Styling für Block-Formular (Select-Boxen) */
#block-form label {
    display: block; /* Labels über den Elementen */
    min-width: unset;
    margin-bottom: 2px;
}
#block-form select[multiple] {
     width: 100%;
     min-height: 150px;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 5px;
}
#block-form .select-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Zentriert Buttons */
    padding: 0 10px;
}
#block-form .select-controls button {
     width: 30px; /* Kleinere Buttons */
     height: 30px;
     padding: 0;
     margin-bottom: 8px;
     font-size: 1.2em;
}
#block-form .list-container {
    flex: 1;
}
#block-form .block-shift-editor {
    display: flex;
    align-items: stretch; /* Gleiche Höhe für Selects und Buttons */
    gap: 10px;
    margin-top: 5px;
}


/* Styling für Bedarfseditor */
#staffing-needs-editor .staffing-day-type {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
#staffing-needs-editor .staffing-day-type h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
}
#staffing-needs-editor .staffing-posten {
    margin-left: 15px;
    margin-bottom: 10px;
}
#staffing-needs-editor .staffing-posten label {
    min-width: 120px; /* Etwas mehr Platz */
    font-weight: normal;
}


/* Zusätzliches Styling für Import/Export Tab */
#tab-import-export .control-group { margin-bottom: 15px; }
#tab-import-export label.button-like-label { margin-left: 10px; }

/* Drag Over Highlighting */
.drag-over { background-color: #e0ffe0 !important; }

/* Highlight für Range Selection */
.range-highlight {
    background-color: #c0f0c0 !important; /* Deutlicheres Grün */
    box-shadow: 0 0 0 1px darkgreen inset;
}

/* Kontextmenü-Styling */
.context-menu {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 5px 0;
    min-width: 150px;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.9em;
}

.context-menu li:hover {
    background-color: #f0f0f0;
}


/* Statistik-Overlay Styling (unverändert) */
#statistics-overlay {
    display: none; /* Standardmäßig versteckt */
    position: fixed; /* Bleibt beim Scrollen sichtbar */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter Hintergrund */
    z-index: 150; /* Über dem Config-Modal */
    justify-content: center; /* Zentriert den Inhaltsbereich horizontal */
    align-items: center; /* Zentriert den Inhaltsbereich vertikal */
    overflow-y: auto; /* Scrollbar, falls Inhalt zu groß */
}

.statistics-content {
    background-color: #fefefe;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #888;
    width: 90%; /* Breite des Inhaltsbereichs */
    max-width: 1000px; /* Maximale Breite */
    max-height: 90vh; /* Maximale Höhe */
    overflow-y: auto; /* Intern scrollbar, falls nötig */
    position: relative; /* Für den Schließen-Button */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#close-stats-overlay-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
#close-stats-overlay-button:hover,
#close-stats-overlay-button:focus {
    color: black;
    text-decoration: none;
}

#stats-overlay-employee-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 15px;
    font-size: 0.9em; /* Etwas kleinere Schrift */
}
#stats-overlay-employee-table th,
#stats-overlay-employee-table td {
    border: 1px solid #ddd;
    padding: 6px 8px; /* Etwas weniger Padding */
    text-align: left;
}
#stats-overlay-employee-table th {
    background-color: #f2f2f2;
    position: sticky; /* Header fixieren beim Scrollen der Tabelle */
    top: 0;
    z-index: 1; /* Über Tabelleninhalt */
}
#stats-overlay-employee-table td.numeric,
#stats-overlay-employee-table th.numeric {
    text-align: right;
}
#stats-overlay-employee-table .positive { color: green; }
#stats-overlay-employee-table .negative { color: red; }
#stats-overlay-employee-table tfoot td {
    font-weight: bold;
    background-color: #f9f9f9;
}


/* --- NEU: Planungsmodus --- */
body.planning-mode-active #controls {
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

body.planning-mode-active #palette {
    flex-basis: 60px; /* Schmale Palette */
    padding: 10px 5px; /* Weniger Padding */
}

body.planning-mode-active #palette h2 {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

body.planning-mode-active #palette .draggable-item {
    padding: 5px;
    font-size: 0.8em;
    margin-bottom: 5px;
}

/* Optional: Nur Kürzel in Palette anzeigen im Planungsmodus */
/* body.planning-mode-active #palette .draggable-item { */
    /* Hier könnte man versuchen, nur das Kürzel anzuzeigen, */
    /* aber das ist mit reinem CSS schwierig, wenn der Text generisch ist. */
    /* Man könnte z.B. den vollen Namen in einem untergeordneten Span verstecken. */
/* } */