/* Eigene Stile der Projektverwaltung (Layout, Schriften, Farben und Hilfsklassen wie .num/.text-small bringt das Portal mit). */

/* ---------- Kategorien: Farbpunkt und Farbfelder ---------- */
.cat-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; flex: none; }
.cat-dot-large { width: 28px; height: 28px; }
.cat-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); cursor: pointer; padding: 0; }

/* ---------- Zeitstrahl (ProjectTimeline.razor, project.js) ---------- */
.tl { --tl-row: 36px; --tl-head: 52px; --tl-left: 340px; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); overflow: hidden; }
.tl-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
/* Der Zeitstrahl nimmt den Hauptteil der Fensterhöhe ein; die leere Fläche unter den Zeilen dient zum Anlegen */
.tl-body { display: flex; align-items: stretch; min-height: max(320px, calc(100vh - 300px)); }

/* linke Spalte */
.tl-left { flex: 0 0 var(--tl-left); width: var(--tl-left); border-right: 1px solid var(--mud-palette-lines-default); position: relative; }
/* Breite ändern: Griff am rechten Rand (project.js) */
.tl-resize { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 4; touch-action: none; }
.tl-resize:hover, .tl-resize.tl-resizing { background: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }
/* Kopfzeilen bleiben beim Scrollen stehen (project.js setzt --tl-stick) */
.tl-left-head, .tl-head { transform: translateY(var(--tl-stick, 0px)); position: relative; z-index: 6; background: var(--mud-palette-surface); }
.tl-stuck .tl-left-head, .tl-stuck .tl-head { box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.tl-left-head { height: var(--tl-head); line-height: var(--tl-head); padding: 0 12px; font-weight: 600; font-size: var(--font-small); border-bottom: 1px solid var(--mud-palette-lines-default); box-sizing: border-box; }
.tl-left-row { height: var(--tl-row); box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: var(--font-small); cursor: pointer; white-space: nowrap; overflow: hidden; }
.tl-left-row:hover { background: var(--mud-palette-action-default-hover); }
/* Zwei Zeilen je Aktivität: Titel über die ganze Breite, darunter Personen, Dauer/Aufwand, Status */
.tl-left-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.tl-left-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-left-sub { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--font-tiny);
    color: var(--mud-palette-text-secondary); }
.tl-left-sub .tl-person { min-width: 18px; height: 14px; line-height: 14px; padding: 0 3px; border-radius: 7px; }
.tl-left-meta { flex: none; }
.tl-status { flex: none; font-weight: 600; }
.tl-status-inprogress { color: var(--mud-palette-info); }
.tl-status-done { color: var(--mud-palette-success); }
.tl-status-blocked { color: var(--mud-palette-error); }
.tl-left-new { color: var(--mud-palette-text-secondary); }

/* rechte Seite: scrollbar */
.tl-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; position: relative; display: flex; flex-direction: column; }
.tl-canvas { position: relative; min-width: 100%; flex: 1 0 auto; display: flex; flex-direction: column; }
.tl-head { height: var(--tl-head); position: relative; border-bottom: 1px solid var(--mud-palette-lines-default); box-sizing: border-box; }
.tl-head-row { position: relative; height: 26px; }
.tl-tick { position: absolute; top: 0; height: 26px; line-height: 26px; box-sizing: border-box; border-left: 1px solid var(--mud-palette-lines-default); padding-left: 6px; font-size: var(--font-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-tick-major { font-weight: 600; }
.tl-tick-minor { color: var(--mud-palette-text-secondary); text-align: center; padding-left: 0; }

/* Zeilen und Hintergrund */
.tl-rows { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.tl-background { position: absolute; inset: 0; pointer-events: none; }
.tl-weekend { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.045); }
.tl-planned { position: absolute; top: 0; bottom: 0; background: rgba(0, 168, 225, .08); border-left: 1px dashed var(--mud-palette-primary); border-right: 1px dashed var(--mud-palette-primary); box-sizing: border-box; }
.tl-gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(0,0,0,.06); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--mud-palette-secondary); z-index: 1; }
.tl-row { position: relative; height: var(--tl-row); flex: none; box-sizing: border-box; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tl-row-new { flex: 1 0 var(--tl-row); border-bottom: none; cursor: crosshair; background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,.02) 20px 40px); }

/* Balken */
.tl-bar { position: absolute; top: 6px; height: calc(var(--tl-row) - 12px); border-radius: 4px; color: #fff; font-size: var(--font-caption); line-height: calc(var(--tl-row) - 12px); padding: 0 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.25); user-select: none; z-index: 2; }
.tl-bar-group { border-radius: 2px; height: 12px; top: 12px; line-height: 12px; font-size: var(--font-tiny); opacity: .85; }
.tl-bar-readonly { cursor: pointer; }
.tl-bar:hover { filter: brightness(1.08); }
.tl-bar.tl-moving { opacity: .85; cursor: grabbing; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.tl-bar.tl-armed { outline: 2px solid var(--mud-palette-secondary); }
.tl-bar-label { text-shadow: 0 1px 1px rgba(0,0,0,.35); }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tl-handle-start { left: 0; }
.tl-handle-end { right: 0; }
.tl-bar:hover .tl-handle { background: rgba(255,255,255,.3); }
.tl-ghost { background: var(--mud-palette-primary); opacity: .5; pointer-events: none; }
.tl-row.tl-creating { background-color: var(--mud-palette-action-default-hover); }

@media (max-width: 700px) {
    .tl { --tl-left: 180px; }
    .tl-left-meta { display: none; }
}

/* ---------- Projektseite: verschiebbare, zusammenklappbare Blöcke (ProjectPage.razor, projectWidgets) ---------- */
.pw-widgets { display: flex; flex-direction: column; gap: 12px; }
.pw-widget { position: relative; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; box-shadow: 0 1px 2px rgba(15,30,45,.04); }
.pw-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 16px; min-height: 44px; }
.pw-title { font-size: var(--font-large); }
.pw-body { padding: 0 16px 16px 16px; }
/* Zugeklappt: nur die Überschrift. Beim Überfahren klappt der Block ganz auf – als Überlagerung, damit der Zeitstrahl darunter
   nicht springt; nach einem Klick in den Inhalt bleibt er offen (data-peek, project.js – auch während einer Auswahlliste), bis außerhalb
   geklickt wird; der Zuklapp-Knopf zählt nicht. */
.pw-collapsed .pw-body { display: none; }
.pw-collapsed:hover, .pw-collapsed[data-peek], .pw-collapsed:has(.pw-body:focus-within) { z-index: 40; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pw-collapsed:hover .pw-body, .pw-collapsed[data-peek] .pw-body, .pw-collapsed .pw-body:focus-within {
    display: block; position: absolute; left: -1px; right: -1px; top: 100%; z-index: 40; padding-top: 4px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-top: none;
    border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(15,30,45,.18); max-height: 75vh; overflow: auto; }
.pw-collapsed .pw-head { cursor: default; }
/* Anordnen: Griff, kompakte Vorschau, nicht bedienbar */
.widgets-editing .pw-widget { cursor: grab; }
.widgets-editing .pw-head { background: var(--mud-palette-primary); color: #fff; border-radius: 10px 10px 0 0; }
.widgets-editing .pw-head .mud-icon-button, .widgets-editing .pw-head .mud-typography { color: #fff; }
.widgets-editing .pw-body { pointer-events: none; max-height: 120px; overflow: hidden; opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.pw-widget.widget-dragging { opacity: .35; }
.pw-widget.drop-before { box-shadow: 0 -4px 0 0 var(--mud-palette-primary); }
.pw-widget.drop-after { box-shadow: 0 4px 0 0 var(--mud-palette-primary); }

/* ---------- Zeitstrahl, Phase 3: Baum, Personen, Abhängigkeiten, eigene Aktivitäten ---------- */
.tl-toggle, .tl-toggle-space { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.tl-toggle { cursor: pointer; border-radius: 4px; color: var(--mud-palette-text-secondary); }
.tl-toggle:hover { background: var(--mud-palette-action-default-hover); }
.tl-left-group { font-weight: 600; }
.tl-left-mine { box-shadow: inset 3px 0 0 var(--mud-palette-secondary); }
.tl-person { flex: none; min-width: 22px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; font-size: var(--font-tiny); font-weight: 600;
    line-height: 20px; text-align: center; background: var(--mud-palette-primary); color: #fff; }
.tl-person-more { background: var(--mud-palette-text-secondary); }
.tl-add-child { flex: none; display: none; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer;
    color: var(--mud-palette-primary); }
.tl-left-row:hover .tl-add-child { display: inline-flex; }
.tl-add-child:hover { background: var(--mud-palette-action-default-hover); }
/* Pfeile der Abhängigkeiten liegen unter den Balken und fangen keine Klicks ab */
.tl-links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 1; }
.tl-links path { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.4; }
.tl-links marker path { fill: var(--mud-palette-text-secondary); stroke: none; }
.tl-bar-mine { outline: 2px solid var(--mud-palette-secondary); outline-offset: 1px; }
.tl-bar-done { opacity: .6; }
/* Ist-Balken: gebuchter Zeitraum aus der Zeiterfassung, schmal unter dem Plan (Phase 5c) */
.tl-booked { position: absolute; bottom: 1px; height: 5px; border-radius: 2px; background: var(--mud-palette-text-primary); opacity: .9; z-index: 3; pointer-events: none; }
.tl-bar-done .tl-bar-label { text-decoration: line-through; }

/* ---------- Projektseite: Stand gegen das Budget ---------- */
.budget-stand { display: flex; flex-direction: column; gap: 4px; }
.budget-line { display: flex; justify-content: space-between; gap: 8px; font-size: var(--font-small); margin-top: 4px; }
.budget-line span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- Aktivitäts-Dialog: Felder, die die Mitarbeit selbst pflegt; Kommentare ---------- */
.pv-editable .mud-input.mud-input-outlined { background-color: rgba(243, 146, 0, .07); }
.pv-editable .mud-input-outlined-border { border-color: var(--mud-palette-secondary) !important; border-width: 2px; }
.pv-comments { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 8px; }
.pv-comment { border-left: 3px solid var(--mud-palette-lines-default); padding: 4px 0 4px 10px; margin-top: 8px; }
.pv-comment-head { display: flex; align-items: center; gap: 8px; font-size: var(--font-caption); }
.pv-comment-text { white-space: pre-wrap; font-size: var(--font-base); overflow-wrap: anywhere; }
.tl-comments { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-tiny); color: var(--mud-palette-text-secondary); }