/* ==================== RESET & BASE ==================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: #1f2937; background: #f3f4f6; }

/* LOADING */
.loading-screen { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.loading-content { text-align: center; color: white; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; }
@keyframes spin { to { transform: rotate(360deg); } }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; background: #ff5252; color: white; padding: 10px; text-align: center; z-index: 1000; }
#blazor-error-ui .reload { color: white; margin-left: 10px; }

/* APP LAYOUT */
.app-container { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
.header-brand { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 1.8rem; }
.brand-text { font-size: 1.3rem; font-weight: 600; color: #1f2937; }
.header-nav { display: flex; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; text-decoration: none; color: #4b5563; font-weight: 500; transition: all 0.2s; }
.nav-link:hover { background: #f3f4f6; color: #1f2937; }
.nav-link.active { background: #3b82f6; color: white; }
.app-main { flex: 1; padding: 20px; }
.app-footer { padding: 15px; text-align: center; background: white; color: #6b7280; border-top: 1px solid #e5e7eb; }

/* FORMS */
.form-control { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
.form-control:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* BUTTONS */
.btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:hover { background: #2563eb; }
.btn-secondary { background: #6b7280; color: white; }
.btn-secondary:hover { background: #4b5563; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover { background: #dc2626; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ALERTS */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 15px; }
.alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Warnung im Termin-Dialog */
.warnung-box { margin-top: 15px; padding: 15px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; }
.warnung-titel { font-weight: 700; color: #92400e; margin-bottom: 10px; font-size: 14px; }
.warnung-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.warnung-item { padding: 8px 12px; background: rgba(245, 158, 11, 0.1); border-radius: 6px; font-size: 13px; color: #78350f; border-left: 3px solid #f59e0b; }
.warnung-text { font-weight: 500; margin-bottom: 8px; }
.warnung-frage { font-weight: 700; color: #b45309; font-size: 14px; padding-top: 8px; border-top: 1px solid #fde68a; }
.btn-warning { background: #f59e0b; color: white; }
.btn-warning:hover { background: #d97706; }

/* KALENDER LAYOUT */
.kalender-container { display: flex; gap: 0; height: calc(100vh - 140px); }
.kalender-sidebar { 
    width: 50px; 
    flex-shrink: 0; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    overflow: hidden;
    transition: width 0.3s ease, padding 0.3s ease;
    position: relative;
    z-index: 100;
}
.kalender-sidebar .sidebar-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding: 20px;
}
.kalender-sidebar .sidebar-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.kalender-sidebar .sidebar-mini .mini-icon {
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.kalender-sidebar .sidebar-mini .mini-icon:hover {
    background: #f3f4f6;
}
/* Expanded State (Hover) */
.kalender-sidebar.expanded,
.kalender-sidebar.pinned {
    width: 280px;
}
.kalender-sidebar.expanded .sidebar-content,
.kalender-sidebar.pinned .sidebar-content {
    opacity: 1;
    visibility: visible;
}
.kalender-sidebar.expanded .sidebar-mini,
.kalender-sidebar.pinned .sidebar-mini {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}
/* Sidebar Header */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}
.sidebar-title {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
}
.btn-pin {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    opacity: 0.6;
}
.btn-pin:hover {
    background: #e5e7eb;
    opacity: 1;
}
.btn-pin.pinned {
    background: #dbeafe;
    opacity: 1;
    transform: rotate(45deg);
}
.kalender-main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 15px; }
.sidebar-section { margin-bottom: 25px; }
.sidebar-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }

/* ANSICHT BUTTONS */
.ansicht-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ansicht-btn { padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.ansicht-btn:hover { background: #f3f4f6; }
.ansicht-btn.aktiv { background: #3b82f6; color: white; border-color: #3b82f6; }

/* SPALTEN LISTE */
.spalten-liste { display: flex; flex-direction: column; gap: 8px; }
.spalte-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.spalte-item:hover { background: #f3f4f6; }
.spalte-item.aktiv { background: #eff6ff; }
.spalte-item input { display: none; }
.spalte-farbe { width: 12px; height: 12px; border-radius: 50%; }

/* KALENDER HEADER */
.kalender-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: white; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.btn-nav { padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; cursor: pointer; font-size: 13px; }
.btn-nav:hover { background: #f3f4f6; }
.btn-heute { padding: 8px 16px; border: 1px solid #3b82f6; border-radius: 8px; background: white; color: #3b82f6; cursor: pointer; font-weight: 500; }
.btn-heute:hover { background: #eff6ff; }
.datum-anzeige { font-size: 16px; font-weight: 600; color: #1f2937; }
.btn-neuer-termin { padding: 10px 20px; border: none; border-radius: 8px; background: #10b981; color: white; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.btn-neuer-termin:hover { background: #059669; }
.loading-indicator { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 60px; background: white; border-radius: 12px; }

/* TAGES-ANSICHT */
.tages-grid { 
    display: flex; 
    flex-direction: column;
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    overflow: hidden; 
    flex: 1;
    min-height: 0;
}

/* Header-Zeile (Zeit-Header + Spalten-Header) */
.tages-header-row {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.tages-header-row .zeit-header {
    width: 60px;
    height: 50px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
}

.tages-header-row .spalten-header {
    flex: 1;
    min-width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-right: 1px solid #e5e7eb;
}

.tages-header-row .spalten-header:last-child {
    border-right: none;
}

/* Scroll-Container für Zeit-Achse + Spalten */
.tages-scroll-container {
    display: flex;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.tages-scroll-container .zeit-achse {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
}

.zeit-slot { 
    height: 60px; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    padding-top: 5px; 
    font-size: 11px; 
    color: #6b7280; 
    border-bottom: 1px solid #f3f4f6; 
}

.spalten-bereich {
    display: flex;
    flex: 1;
    min-width: 0;
}

.kalender-spalte { 
    flex: 1; 
    min-width: 150px; 
    border-right: 1px solid #e5e7eb;
}

.kalender-spalte:last-child { 
    border-right: none; 
}

.termine-container { 
    position: relative;
    background: #fafafa;
}

/* Ordinationszeiten-Schattierung */
.ordinations-bereich {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.ausserhalb-ordination {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 0;
}

/* Stunden-Linien (volle Stunden) */
.stunden-linie {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #e5e7eb;
    pointer-events: none;
}

/* Raster-Linien (Zwischen-Raster) */
.raster-linie {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #f0f0f0;
    pointer-events: none;
}

/* Beim Drag alle Kinder-Elemente deaktivieren, damit e.OffsetY immer container-relativ ist */
.termine-container.dragging > * {
    pointer-events: none;
}

.termin-block { 
    position: absolute; 
    left: 4px; 
    right: 4px; 
    border-radius: 6px; 
    padding: 6px 8px; 
    color: white; 
    cursor: pointer; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
    transition: transform 0.1s, box-shadow 0.1s; 
    z-index: 1; 
}

.termin-block:hover { 
    transform: scale(1.02); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    z-index: 10; 
}

.termin-zeit { font-size: 11px; font-weight: 600; opacity: 0.9; }
.termin-patient { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin-art { font-size: 11px; opacity: 0.85; }

/* Drag Preview */
.drag-preview {
    position: absolute;
    left: 4px;
    right: 4px;
    background: rgba(59, 130, 246, 0.3);
    border: 2px dashed #3b82f6;
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

/* Drag-and-Drop: Ghost-Preview beim Verschieben */
.termin-ghost {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 6px;
    padding: 6px 8px;
    color: white;
    opacity: 0.6;
    border: 2px dashed rgba(255,255,255,0.8);
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.termin-ghost .termin-patient { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Termin wird gerade verschoben */
.termin-block.moving {
    opacity: 0.3;
    transform: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Resize-Handle am unteren Rand */
.resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    border-radius: 0 0 6px 6px;
    background: transparent;
}
.resize-handle:hover {
    background: rgba(255,255,255,0.3);
}

/* WOCHEN-ANSICHT (neu mit Zeit-Achse) */
.wochen-ansicht-container { 
    display: flex; 
    flex-direction: column; 
    background: white; 
    border-radius: 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    flex: 1; 
    overflow: hidden; 
}

.wochen-header-zeile { 
    display: flex; 
    border-bottom: 1px solid #e5e7eb; 
    background: #f9fafb;
    flex-shrink: 0;
}

.wochen-zeit-header { 
    width: 50px; 
    flex-shrink: 0; 
    border-right: 1px solid #e5e7eb;
}

.wochen-tag-header-neu { 
    flex: 1; 
    min-width: 100px;
    padding: 10px 5px; 
    text-align: center; 
    border-right: 1px solid #e5e7eb;
}
.wochen-tag-header-neu:last-child { border-right: none; }
.wochen-tag-header-neu.heute { background: #eff6ff; }

.wochen-scroll-container { 
    display: flex; 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden;
}

.wochen-zeit-achse { 
    width: 50px; 
    flex-shrink: 0; 
    border-right: 1px solid #e5e7eb; 
    background: #f9fafb;
}

.wochen-zeit-slot { 
    height: 60px; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center; 
    padding-top: 3px; 
    font-size: 10px; 
    color: #6b7280; 
    border-bottom: 1px solid #f3f4f6; 
}

.wochen-tage-bereich { 
    display: flex; 
    flex: 1; 
    min-width: 0;
}

.wochen-tag-spalte { 
    flex: 1; 
    min-width: 100px; 
    border-right: 1px solid #e5e7eb; 
    background: #fafafa;
}
.wochen-tag-spalte:last-child { border-right: none; }
.wochen-tag-spalte.heute { background: #f0f7ff; }

.wochen-termine-container { 
    position: relative; 
}

.wochen-stunden-linie { 
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 0; 
    border-top: 1px solid #e5e7eb; 
    pointer-events: none; 
    z-index: 0; 
}

.wochen-raster-linie {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #f0f0f0;
    pointer-events: none;
    z-index: 0;
}

.wochen-termin-block { 
    position: absolute; 
    left: 3px; 
    right: 3px; 
    border-radius: 4px; 
    padding: 3px 5px; 
    color: white; 
    cursor: pointer; 
    font-size: 10px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    z-index: 1; 
    overflow: hidden;
}
.wochen-termin-block:hover { transform: scale(1.02); z-index: 10; }
.wochen-termin-block.moving { opacity: 0.3; transform: none; }
.wochen-termine-container.dragging > * { pointer-events: none; }
.wochen-termin-zeit { font-weight: 700; font-size: 9px; }
.wochen-termin-patient { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

/* Legacy Wochen-Ansicht Styles (für Abwärtskompatibilität) */
.wochen-grid { display: flex; gap: 2px; background: white; border-radius: 12px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex: 1; overflow-x: auto; }
.wochen-tag { flex: 1; min-width: 130px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fafafa; overflow: hidden; }
.wochen-tag.heute { border: 2px solid #3b82f6; background: #eff6ff; }
.wochen-tag-header { padding: 12px; background: white; border-bottom: 1px solid #e5e7eb; text-align: center; }
.tag-wochentag { font-size: 11px; text-transform: uppercase; color: #6b7280; font-weight: 600; }
.tag-datum { font-size: 20px; font-weight: 700; color: #1f2937; }
.tag-datum.heute-datum { color: #3b82f6; }
.tag-termin-count { display: inline-block; background: #3b82f6; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-top: 5px; }
.wochen-tag-termine { position: relative; height: 600px; padding: 5px; }

/* LISTEN-ANSICHT */
.listen-ansicht { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.listen-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #e5e7eb; 
}
.listen-titel { 
    font-size: 18px; 
    font-weight: 600; 
    color: #1f2937; 
}
.btn-print { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 8px 16px; 
    font-size: 14px; 
}
.listen-filter-info { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    background: #eff6ff; 
    padding: 10px 15px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    color: #1e40af;
    font-size: 14px;
}
.btn-filter-clear { 
    background: transparent; 
    border: 1px solid #3b82f6; 
    color: #3b82f6; 
    padding: 4px 12px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 12px;
    transition: all 0.2s;
}
.btn-filter-clear:hover { background: #3b82f6; color: white; }
.listen-tag { margin-bottom: 25px; }
.listen-tag-header { margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 2px solid #3b82f6; color: #1f2937; }
.listen-tabelle { width: 100%; border-collapse: collapse; }
.listen-tabelle th { text-align: left; padding: 12px; background: #f9fafb; font-weight: 600; color: #4b5563; border-bottom: 2px solid #e5e7eb; }
.listen-tabelle td { padding: 12px; border-bottom: 1px solid #f3f4f6; }
.listen-zeile { cursor: pointer; transition: background 0.2s; }
.listen-zeile:hover { background: #f9fafb; }
.termin-art-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; color: white; font-size: 12px; font-weight: 500; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.status-geplant { background: #dbeafe; color: #1e40af; }
.status-bestätigt { background: #dcfce7; color: #166534; }
.status-erschienen { background: #d1fae5; color: #065f46; }
.status-nicht-erschienen { background: #fee2e2; color: #991b1b; }
.status-abgesagt { background: #f3f4f6; color: #4b5563; }
.keine-termine { text-align: center; padding: 40px; color: #6b7280; }

/* MONATS-ANSICHT */
.monats-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.monats-header { padding: 10px; text-align: center; font-weight: 600; color: #6b7280; background: #f9fafb; border-radius: 6px; }
.monats-tag { min-height: 100px; padding: 8px; border: 1px solid #f3f4f6; border-radius: 6px; background: white; }
.monats-tag.anderer-monat { background: #f9fafb; opacity: 0.6; }
.monats-tag.heute { border: 2px solid #3b82f6; background: #eff6ff; }
.monats-tag-nummer { font-weight: 600; color: #1f2937; margin-bottom: 5px; }
.monats-termine { display: flex; flex-direction: column; gap: 2px; }
.monats-termin { padding: 3px 6px; border-radius: 4px; color: white; font-size: 11px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monats-termin:hover { opacity: 0.9; }
.monats-termin.moving { opacity: 0.3; }
.monats-termin-ghost { opacity: 0.6; border: 2px dashed rgba(255,255,255,0.8); pointer-events: none; }
.monats-tag.drop-target { background: #dbeafe; border-color: #3b82f6; }
.monats-mehr { font-size: 11px; color: #6b7280; padding: 2px; }

/* DRAG-DROP WARNUNG BANNER */
.dragdrop-warnung { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; animation: dragdrop-warnung-in 0.3s ease-out; white-space: pre-line; }
.dragdrop-warnung-text { flex: 1; color: #92400e; font-size: 13px; line-height: 1.5; }
.dragdrop-warnung-close { color: #92400e; font-weight: bold; font-size: 16px; line-height: 1; padding: 0 4px; }
.dragdrop-warnung-close:hover { color: #78350f; }
@keyframes dragdrop-warnung-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ANSICHT WARNUNG */
.ansicht-warnung { background: white; border-radius: 12px; padding: 60px 40px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.warnung-icon { font-size: 64px; margin-bottom: 20px; }
.ansicht-warnung h3 { margin: 0 0 15px 0; color: #1f2937; }
.ansicht-warnung p { color: #6b7280; margin-bottom: 10px; }

/* MODAL */
.modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-content { background: white; border-radius: 16px; width: 100%; max-width: 550px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.modal-content.modal-lg { max-width: 800px; }
.modal-content.modal-xl { max-width: 1000px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #e5e7eb; }
.modal-header h3 { margin: 0; font-size: 1.25rem; }
.btn-close { width: 32px; height: 32px; border: none; background: #f3f4f6; border-radius: 8px; cursor: pointer; font-size: 16px; }
.btn-close:hover { background: #e5e7eb; }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 15px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; border-radius: 0 0 16px 16px; }
.modal-footer .footer-left { display: flex; gap: 10px; }
.modal-footer .footer-right { display: flex; gap: 10px; }
.btn-info { background: #17a2b8; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.btn-info:hover { background: #138496; }

/* PATIENT SEARCH */
.patient-search { position: relative; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10; max-height: 200px; overflow-y: auto; }
.search-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: #f3f4f6; }
.search-item small { display: block; color: #6b7280; font-size: 12px; }
.selected-patient { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 12px; background: #eff6ff; border-radius: 8px; border: 1px solid #bfdbfe; }
.selected-patient button { border: none; background: transparent; cursor: pointer; color: #6b7280; }
.selected-patient button:hover { color: #ef4444; }

/* RESPONSIVE */
@media (max-width: 1024px) { 
    .kalender-container { flex-direction: column; height: auto; } 
    .kalender-sidebar { width: 100% !important; }
    .kalender-sidebar .sidebar-content { opacity: 1 !important; visibility: visible !important; }
    .kalender-sidebar .sidebar-mini { display: none !important; }
    .kalender-sidebar .sidebar-header { display: none; }
    .kalender-main { margin-left: 0; }
    .form-row { grid-template-columns: 1fr; } 
}
@media (max-width: 768px) { .app-header { flex-direction: column; height: auto; padding: 10px; gap: 10px; } .header-nav { flex-wrap: wrap; justify-content: center; } .kalender-header { flex-direction: column; gap: 15px; } }
/* Drag Preview für Termin-Erstellung */
.termine-container {
    cursor: crosshair;
    user-select: none;
}

.drag-preview {
    position: absolute;
    left: 4px;
    right: 4px;
    background: rgba(59, 130, 246, 0.3);
    border: 2px dashed #3b82f6;
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

/* Reservierungsplan Tab Styles */
.reservierung-section { padding: 1rem 0; }
.reservierung-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.reservierung-header p { margin: 0; color: #6b7280; }
.reservierung-liste { display: flex; flex-direction: column; gap: 0.75rem; }
.reservierung-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; transition: all 0.2s; }
.reservierung-item:hover { border-color: #3b82f6; }
.reservierung-item.aktuell { border-color: #10b981; background: #ecfdf5; }
.reservierung-item.inaktiv { opacity: 0.6; }
.reservierung-info { flex: 1; }
.reservierung-name { font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.reservierung-zeitraum { font-size: 0.9rem; color: #6b7280; }
.reservierung-anzahl { font-size: 0.85rem; color: #9ca3af; margin-top: 0.25rem; }
.reservierung-actions { display: flex; gap: 0.5rem; }
.reservierung-hinweis { margin-top: 1rem; padding: 1rem; background: #eff6ff; border-radius: 8px; color: #1e40af; }
.reservierung-hinweis small { font-size: 0.9rem; }

/* Reservierungen im Kalender */
.reservierung-marker {
    position: absolute;
    left: 0;
    width: 6px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 3;
    transition: width 0.2s, opacity 0.2s;
}

.reservierung-marker:hover {
    width: 100%;
    opacity: 0.9;
}

.reservierung-marker .reservierung-inhalt {
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.2s;
}

.reservierung-marker:hover .reservierung-inhalt {
    opacity: 1;
}

.reservierung-bevorzugt {
    background: linear-gradient(90deg, #3b82f6 0%, rgba(59, 130, 246, 0.3) 100%);
    border-left: 3px solid #2563eb;
}

.reservierung-exklusiv {
    background: linear-gradient(90deg, #f59e0b 0%, rgba(245, 158, 11, 0.3) 100%);
    border-left: 3px solid #d97706;
}

.reservierung-gesperrt {
    background: linear-gradient(90deg, #ef4444 0%, rgba(239, 68, 68, 0.2) 100%);
    border-left: 3px solid #dc2626;
    cursor: not-allowed;
}

/* Reservierung-Filter in Sidebar */
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.checkbox-item input {
    width: 16px;
    height: 16px;
}

.reservierung-legende {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.legende-farbe {
    width: 16px;
    height: 12px;
    border-radius: 2px;
}

.legende-farbe.bevorzugt {
    background: #3b82f6;
}

.legende-farbe.exklusiv {
    background: #f59e0b;
}

.legende-farbe.gesperrt {
    background: #ef4444;
}

/* ==================== KI-EMPFEHLUNGEN ==================== */
.ki-empfehlungen-box {
    margin-top: 15px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 12px;
}

.ki-header-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ki-header-toggle:hover {
    opacity: 0.8;
}

.ki-icon {
    font-size: 18px;
}

.ki-title {
    font-weight: 600;
    color: #0369a1;
    font-size: 13px;
    flex: 1;
}

.ki-toggle {
    color: #64748b;
    font-size: 10px;
}

.ki-loading {
    font-size: 11px;
    color: #64748b;
    font-style: italic;
}

.ki-hinweis {
    color: #64748b;
    margin: 10px 0;
    font-size: 11px;
}

.ki-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.ki-slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-size: 12px;
}

.ki-slot:hover {
    border-color: #0ea5e9;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.15);
    transform: translateY(-1px);
}

.ki-slot.top-empfehlung {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.slot-zeit {
    font-weight: 600;
    color: #1e293b;
}

.slot-behandler {
    color: #64748b;
    font-size: 11px;
}

.slot-score {
    grid-row: span 2;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #0369a1;
}

.slot-grund {
    grid-column: span 2;
    font-size: 10px;
    color: #64748b;
    font-style: italic;
}

.ki-personalisiert {
    margin-top: 8px;
    font-size: 10px;
    color: #059669;
}

.ki-keine {
    color: #94a3b8;
    text-align: center;
    padding: 8px;
    font-size: 11px;
}

.ki-datenschutz {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 9px;
    text-align: center;
}

/* KI-Assistent Tab in Einstellungen */
.ki-status-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ki-status-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ki-status-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.ki-status-icon.aktiv {
    background: #dcfce7;
}

.ki-status-icon.lernphase {
    background: #fef3c7;
}

.ki-status-info {
    flex: 1;
}

.ki-status-titel {
    font-size: 18px;
    font-weight: 600;
    color: #0369a1;
}

.ki-status-qualitaet {
    color: #64748b;
    font-size: 13px;
}

.ki-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.ki-stat-box {
    background: white;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.ki-stat-zahl {
    font-size: 28px;
    font-weight: 700;
    color: #0369a1;
}

.ki-stat-label {
    font-size: 12px;
    color: #64748b;
}

.ki-features-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.ki-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.ki-feature-item.aktiv {
    border-color: #86efac;
}

.ki-feature-item.inaktiv {
    opacity: 0.7;
}

.ki-feature-name {
    font-weight: 600;
    min-width: 180px;
}

.ki-feature-beschreibung {
    color: #64748b;
    font-size: 13px;
}

.ki-datenschutz-hinweis {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 12px 15px;
    color: #166534;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ki-info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.ki-info-box h4 {
    margin-top: 0;
    color: #334155;
}

.ki-info-box ul {
    margin: 0;
    padding-left: 20px;
}

.ki-info-box li {
    margin-bottom: 8px;
    color: #475569;
}

.ki-test-box {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.ki-test-box h4 {
    margin-top: 0;
}

.ki-test-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 15px;
}

.ki-test-form .form-group {
    margin-bottom: 0;
}

.ki-test-ergebnis {
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
}

.ki-test-hinweis {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 10px;
}

.ki-test-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ki-test-slot {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.ki-test-slot.top {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fbbf24;
}

.ki-test-slot .zeit {
    font-weight: 600;
    min-width: 100px;
}

.ki-test-slot .score {
    font-weight: 600;
    color: #0369a1;
    min-width: 40px;
}

.ki-test-slot .kalender {
    color: #64748b;
    min-width: 120px;
}

.ki-test-slot .grund {
    color: #64748b;
    font-size: 12px;
    font-style: italic;
}

.ki-test-keine {
    color: #94a3b8;
    text-align: center;
    padding: 20px;
}