/* NEU Phase 5: Kalender, Terminplanung, Termine in Akte und Kundenansicht */

/* ------------------------------------------------------------ Mitarbeiterfarben (Kalender, Chips) */
.employee-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.employee-color-primary { background: var(--primary); }
.employee-color-info { background: var(--info); }
.employee-color-success { background: var(--success); }
.employee-color-secondary { background: var(--secondary); }
.employee-color-warning { background: var(--warning); }
.employee-color-danger { background: var(--danger); }
:root.dark-mode .employee-color-primary { background: #9db8dc; }

.chip .employee-dot { margin-right: 0.15rem; }
.chip-note { margin-left: 0.3rem; padding: 0 0.4rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.25); font-size: 0.7rem; }

/* Segmentierte Umschaltung (Tag/Woche/Monat, Planungsmodus) */
.segmented { display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--gray-100); gap: 2px; }
.segmented-option {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary);
    transition: var(--transition-fast);
}
.segmented-option.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); font-weight: 600; }

/* ------------------------------------------------------------ Kalender */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cal-nav, .cal-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cal-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; margin-left: 0.25rem; }
.cal-filter { margin-bottom: 0.5rem; }
.cal-filter .filter-chip { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-hint { font-size: 0.78rem; margin-bottom: 0.75rem; }
.cal-surface { padding: 0.75rem; overflow-x: auto; }

.cal-grid { min-width: calc(56px + var(--day-count, 7) * 110px); }
.cal-grid-1 { min-width: 0; }
.cal-grid-header, .cal-grid-body { display: grid; grid-template-columns: 56px repeat(var(--day-count, 7), minmax(0, 1fr)); }
.cal-grid-header { position: sticky; top: 0; z-index: 3; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.cal-day-heading { display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0; font-size: 0.78rem; color: var(--text-secondary); border-radius: var(--radius); }
.cal-day-heading strong { font-size: 0.95rem; color: var(--text-primary); }
.cal-day-heading:hover { background: var(--bg-hover); }
.cal-day-heading.is-today strong { color: var(--text-inverse); background: var(--primary); padding: 0 0.45rem; border-radius: var(--radius-full); }
.cal-time-column { position: relative; }
.cal-hour-label { position: absolute; right: 0.5rem; transform: translateY(-50%); font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }
.cal-hour-label:first-child { transform: none; }
.cal-day-column {
    position: relative; border-left: 1px solid var(--border-light);
    background-image: linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
    background-size: 100% var(--hour-height, 52px);
}
.cal-day-column.is-weekend { background-color: var(--bg-page); }
.cal-day-column.is-today { background-color: rgba(90, 125, 170, 0.05); }
.cal-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.cal-now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cal-outside-note { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-muted); }

.cal-event {
    position: absolute; z-index: 1; overflow: hidden;
    display: flex; flex-direction: column; gap: 0.05rem; align-items: flex-start;
    padding: 0.25rem 0.4rem; border-radius: var(--radius); border-left: 3px solid;
    font-size: 0.72rem; line-height: 1.25; text-align: left; color: var(--text-primary);
    box-shadow: var(--shadow-sm); transition: box-shadow 0.15s;
}
.cal-event:hover, .cal-event:focus-visible { z-index: 4; box-shadow: var(--shadow-md); }
.cal-event.is-draggable { cursor: grab; touch-action: none; }
.cal-event.is-dragging { cursor: grabbing; z-index: 10; opacity: 0.9; box-shadow: var(--shadow-xl); }
.cal-event-time { font-weight: 600; font-family: var(--font-mono); font-size: 0.68rem; white-space: nowrap; }
.cal-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-event-subtitle { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-event.is-proposal { border-style: dashed; border-width: 1px 1px 1px 3px; box-shadow: none; opacity: 0.85; }
.cal-status-planned { border-left-style: dashed; }
.cal-status-done { opacity: 0.6; }
.cal-status-in_progress .cal-event-time::after { content: ' · läuft'; }

.cal-color-primary { background: var(--primary-light); border-color: var(--primary); }
.cal-color-info { background: var(--info-light); border-color: var(--info); }
.cal-color-success { background: var(--success-light); border-color: var(--success); }
.cal-color-secondary { background: var(--secondary-light); border-color: var(--secondary); }
.cal-color-warning { background: var(--warning-light); border-color: var(--warning); }
.cal-color-danger { background: var(--danger-light); border-color: var(--danger); }
.cal-event.is-proposal { background: transparent; }

/* Monat */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; min-width: 640px; }
.cal-month-heading { padding: 0.4rem; background: var(--bg-card); text-align: center; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.cal-month-cell { display: flex; flex-direction: column; gap: 0.2rem; min-height: 104px; padding: 0.3rem; background: var(--bg-card); }
.cal-month-cell.is-other-month { background: var(--bg-page); }
.cal-month-cell.is-other-month .cal-month-day { color: var(--text-muted); }
.cal-month-day { align-self: flex-end; min-width: 26px; height: 26px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; }
.cal-month-day:hover { background: var(--bg-hover); }
.cal-month-cell.is-today .cal-month-day { background: var(--primary); color: var(--text-inverse); }
.cal-month-entry {
    display: block; width: 100%; padding: 0.15rem 0.35rem; border-radius: var(--radius-sm); border-left: 3px solid;
    font-size: 0.7rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary);
}
.cal-month-entry.is-proposal { background: transparent; border-style: dashed; border-width: 1px 1px 1px 3px; }
.cal-month-more { font-size: 0.7rem; color: var(--primary); text-align: left; padding: 0 0.35rem; }
:root.dark-mode .cal-month-more { color: var(--info-dark); }

/* Detaildialog */
.content-dialog { max-width: 520px; }
.content-dialog .modal-heading { position: relative; padding-right: 2.5rem; }
.modal-close { position: absolute; right: 0; top: 0; }
.modal-actions-wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.cal-detail-status { justify-content: flex-start; }

/* ------------------------------------------------------------ Terminplanung */
.planning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.planning-main { display: flex; flex-direction: column; gap: 1rem; }
.planning-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 0.875rem; }
.planning-slots-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.slot-editor-list { display: flex; flex-direction: column; gap: 0.6rem; }
.slot-editor {
    display: grid; grid-template-columns: 28px 170px 120px minmax(0, 1fr) auto; gap: 0.6rem; align-items: end;
    padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.slot-editor-number { font-weight: 700; color: var(--text-muted); padding-bottom: 0.55rem; }
.slot-check { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.55rem; font-size: 0.82rem; color: var(--text-muted); }
.slot-check.is-free { color: var(--success-dark); }
.slot-check.is-conflict { color: var(--danger-dark); font-weight: 600; }
.inline-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }

.occupancy { display: flex; flex-direction: column; gap: 0.6rem; }
.occupancy-day { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); font-size: 0.82rem; }
.occupancy-day-label { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); }
.occupancy-entry { padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); background: var(--gray-100); }
.occupancy-entry.is-new { background: var(--success-light); color: var(--success-dark); }

/* ------------------------------------------------------------ Auftragsakte: Termine */
.proposal-box-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.proposal-line { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.88rem; }
.appointment-row.is-cancelled { opacity: 0.6; }
.appointment-change-request { color: var(--warning-dark); font-size: 0.8rem; font-weight: 600; }

/* ------------------------------------------------------------ Kundenansicht: Termine */
.proposal-picker { display: flex; flex-direction: column; gap: 0.75rem; }
.slot-list { display: flex; flex-direction: column; gap: 0.5rem; }
.slot-option {
    display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 64px; padding: 0.75rem 1rem;
    border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); text-align: left; transition: var(--transition-fast);
}
.slot-option-radio { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--gray-400); border-radius: var(--radius-full); transition: var(--transition-fast); }
.slot-option-text { display: flex; flex-direction: column; }
.slot-option-date { font-weight: 600; font-size: 0.98rem; }
.slot-option-time { font-family: var(--font-mono); color: var(--text-secondary); font-size: 0.9rem; }
.slot-option.selected { border-color: var(--primary); background: var(--primary-light); }
.slot-option.selected .slot-option-radio { border-color: var(--primary); box-shadow: inset 0 0 0 5px var(--primary); }

.appointment-card {
    display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem;
    border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); border-left: 3px solid var(--success);
}
.appointment-card.is-past { border-left-color: var(--gray-300); opacity: 0.8; }
.appointment-card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.appointment-card-type { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); }
.appointment-card-date { font-size: 1.15rem; font-weight: 700; }
.appointment-card-time { font-size: 1rem; }
.appointment-card-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1200px) {
    .planning-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
    .cal-toolbar { flex-direction: column; align-items: stretch; }
    .cal-actions { justify-content: space-between; }
    .cal-title { font-size: 1.05rem; }
    .cal-filter { flex-wrap: nowrap; overflow-x: auto; }
    .cal-hint { display: none; }
    .slot-editor { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) auto; }
    .slot-editor .slot-check { grid-column: 2 / -1; padding-bottom: 0; }
    .planning-settings { grid-template-columns: 1fr 1fr; }
}