/* NEU: Monteurbereich (mode-technician) – Einsatzkarten, einhändig bedienbar */

.job-card-list { display: flex; flex-direction: column; gap: 0.875rem; }

.job-card {
    display: grid; grid-template-columns: 64px 1fr; gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card); box-shadow: var(--shadow-sm);
}
.job-card-time { display: flex; flex-direction: column; align-items: center; padding-top: 0.15rem; }
.job-card-start { font-size: 1.2rem; font-weight: 600; color: var(--text-primary); }
.job-card-end { font-size: 0.75rem; color: var(--text-muted); }
.job-card-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.job-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.job-card-type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); }
.job-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.job-card-text { color: var(--text-secondary); font-size: 0.92rem; }
.job-card-address, .job-card-hint { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.92rem; }
.job-card-address i { color: var(--primary); }
.job-card-hint { color: var(--warning-dark); }
.job-card-actions { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.job-card-actions .btn { flex: 1; min-height: var(--touch-target); }

/* ------------------------------------------------------------ NEU Phase 7: Einsatzkarten (Zustände, Wochenliste) */
/* Ganze Karte klickbar über den Titel-Link; Knöpfe liegen darüber */
.job-card { position: relative; }
.job-card-link { color: inherit; }
.job-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.job-card-link:focus-visible { outline: none; }
.job-card:has(.job-card-link:focus-visible) { box-shadow: var(--focus-ring); }
.job-card-actions { position: relative; z-index: 1; }
.job-card.is-running { border-left: 4px solid var(--primary); }
.job-card.is-closed { opacity: 0.72; }
.job-card.is-compact { grid-template-columns: 56px 1fr; padding: 0.75rem; }
.job-card.is-compact .job-card-title { font-size: 0.95rem; }

.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.week-nav .btn-icon { width: var(--touch-target); height: var(--touch-target); }
.week-nav-title { display: flex; flex-direction: column; align-items: center; }
.week-list { display: flex; flex-direction: column; gap: 1rem; }
.week-day { display: flex; flex-direction: column; gap: 0.5rem; }
.week-day-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; }
.week-day-date { color: var(--text-secondary); font-weight: 500; }
.week-day.is-today .week-day-title { color: var(--primary); }
.week-day-empty { padding: 0.6rem 0.9rem; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 0.85rem; }

/* ------------------------------------------------------------ NEU Phase 7: Einsatzansicht */
.job-page { gap: 1rem; }
.job-page.has-sticky-bar { padding-bottom: calc(96px + var(--safe-bottom)); }
.job-header { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.job-header-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.9rem; }
.job-header-contact { color: var(--text-secondary); font-size: 0.9rem; }
.job-primary-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.job-report { margin-top: 0.4rem; white-space: pre-wrap; }

.job-section { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.job-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.job-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; }
.job-section-title i { color: var(--primary); }
.job-section-header .btn { min-height: 40px; }

.job-scope { display: flex; flex-direction: column; gap: 0.4rem; }
.job-scope-item { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.92rem; }
.job-scope-item.is-text { color: var(--text-secondary); font-style: italic; }
.job-scope-quantity { flex-shrink: 0; min-width: 72px; color: var(--text-secondary); font-size: 0.82rem; }
.job-damage { display: flex; flex-direction: column; gap: 0.5rem; }
.job-damage + .job-damage { padding-top: 0.75rem; border-top: 1px solid var(--border-light); }

.job-photo-capture { display: flex; flex-direction: column; gap: 0.6rem; }
.job-photo-capture .segmented { display: flex; }
.job-photo-capture .segmented-option { flex: 1; min-height: 40px; }
.job-photo-capture label.btn { cursor: pointer; min-height: var(--touch-target); }
.job-photo-groups { display: flex; flex-direction: column; gap: 0.6rem; }
.job-photo-label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.3rem; }

.entry-list { display: flex; flex-direction: column; }
.entry-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.entry-row + .entry-row { border-top: 1px solid var(--border-light); }
.entry-icon { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); }
.entry-main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.entry-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-secondary); }
.entry-actions { display: flex; gap: 0.15rem; }
.entry-actions .btn-icon { width: 40px; height: 40px; }

.job-note { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--warning-light); margin-bottom: 0.4rem; }
.job-note p { white-space: pre-wrap; font-size: 0.9rem; }
.job-note.is-pinned { border-left: 3px solid var(--warning); }
.job-note-form { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.job-note-form textarea { width: 100%; }

/* ------------------------------------------------------------ NEU Phase 7: Einsatzabschluss */
.completion-form { display: flex; flex-direction: column; gap: 1rem; }
.sticky-action-bar-inner.is-single { grid-template-columns: 1fr; }

/* Unterschrift: immer weißer Grund, auch im Dark Mode (Bild bleibt lesbar) */
.signature-pad { display: flex; flex-direction: column; gap: 0.4rem; }
.signature-pad-header { display: flex; align-items: center; justify-content: space-between; }
.signature-pad-header .form-label { margin-bottom: 0; }
.signature-pad-area { position: relative; border: 2px dashed var(--border); border-radius: var(--radius-md); background: #ffffff; overflow: hidden; }
.signature-canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 240; touch-action: none; cursor: crosshair; }
.signature-pad-line { position: absolute; left: 8%; right: 8%; bottom: 22%; border-bottom: 1px solid #b8c2cf; pointer-events: none; }
.signature-pad-hint { position: absolute; left: 8%; bottom: 8%; font-size: 0.75rem; color: #8a94a3; pointer-events: none; }
.signature-pad.has-signature .signature-pad-hint { display: none; }
.signature-pad.has-signature .signature-pad-area { border-style: solid; border-color: var(--success); }

/* ------------------------------------------------------------ NEU Phase 7: Profil */
.profile-head { display: flex; align-items: center; gap: 0.875rem; }
.profile-head .avatar { width: 56px; height: 56px; font-size: 1.1rem; }
.profile-head .customer-muted { display: flex; align-items: center; gap: 0.3rem; }
.week-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.week-hours-day { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-md); background: var(--bg-hover); }
.week-hours-day.is-today { outline: 2px solid var(--primary); }
.week-hours-label { font-size: 0.75rem; color: var(--text-secondary); }
.week-hours-value { font-weight: 600; }