/* css/style.css */
:root {
    --color-ut: #90ee90;
    --color-ft: #212529;
    --color-k: #dc3545;
    --color-v: #ffcccc;
    --color-s: #f8d7da;
    --cell-size: 32px;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background-color: #f0f2f5; color: #333; }

.card-custom { border: none; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); background: white; margin-bottom: 20px; }
.card-header-custom { background: white; border-bottom: 1px solid #eee; padding: 15px 20px; border-radius: 10px 10px 0 0; font-weight: 600; }

.calendar-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.calendar-table th { text-align: center; font-size: 11px; color: #6c757d; font-weight: 600; padding-bottom: 5px; }
.calendar-table td { 
    height: var(--cell-size); text-align: center; vertical-align: middle; 
    font-size: 11px; font-weight: 500; border-radius: 4px; background-color: #fff; 
    border: 1px solid #adb5bd; cursor: pointer; padding: 0; position: relative; transition: all 0.1s;
}
.calendar-table td:hover { transform: scale(1.1); z-index: 5; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-color: #0d6efd; }

.clickable-month, .clickable-employee-name { cursor: pointer; color: #0d6efd; text-decoration: none; font-weight: bold; }
.clickable-month:hover, .clickable-employee-name:hover { text-decoration: underline; }

.status-UT { background-color: var(--color-ut) !important; border-color: var(--color-ut) !important; }
.status-FT { background-color: var(--color-ft) !important; color: white !important; border-color: var(--color-ft) !important; }
.status-K { background-color: var(--color-k) !important; color: white !important; border-color: var(--color-k) !important; }
.status-V { background-color: var(--color-v) !important; border-color: var(--color-v) !important; }
.status-S { background-color: var(--color-s) !important; border-color: var(--color-s) !important; }

.is-weekend::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 6px);
    pointer-events: none; border-radius: 4px;
}

.is-invalid-date { background-color: transparent; border: none; cursor: default; opacity: 0; pointer-events: none;}

.employee-list-item { cursor: pointer; border-radius: 6px !important; margin-bottom: 4px; border: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; }
.employee-list-item:hover { background-color: #f8f9fa; }
.employee-list-item.active { background-color: #e7f1ff; color: #0d6efd; border-color: #cce5ff; font-weight: 600; }

.note-history { max-height: 300px; overflow-y: auto; padding-right: 5px; }
.note-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 10px; margin-bottom: 10px; position: relative; border-left: 3px solid #0d6efd; }
.note-date { font-size: 0.75rem; color: #888; margin-bottom: 4px; display: block; }
.note-actions { position: absolute; top: 10px; right: 10px; opacity: 0.5; transition: 0.2s; }
.note-card:hover .note-actions { opacity: 1; }
.btn-icon { padding: 0 4px; font-size: 0.9rem; color: #666; cursor: pointer; border: none; background: none; }
.btn-icon:hover { color: #0d6efd; }
.btn-icon.text-danger:hover { color: #dc3545; }

.toolbar-container { background: white; border-bottom: 1px solid #ddd; padding: 15px 30px; }
.app-title { font-weight: 700; color: #2c3e50; font-size: 1.25rem; }

/* Sortierbare Tabellen Header */
th.sortable { cursor: pointer; }
th.sortable:hover { background-color: #e9ecef; }