/**
 * FlowClock Design System – CSS
 *
 * Extrahiert aus layout/flowclock-design-template.html
 * Enthält alle CSS Custom Properties und fc-* Klassen.
 *
 * Update v1.0.8: Erstellt in Phase 07
 */

/* =========================================================
   FLOWCLOCK DESIGN SYSTEM – CSS Custom Properties
   Projekt: FlowClock Management Platform
   Design: "The Brutalist Executive" – Architectural Precision
   ========================================================= */

:root {
  /* --- Primärfarben --- */
  --fc-primary:                   #b9151e;
  --fc-primary-container:         #dd3333;
  --fc-on-primary:                #ffffff;
  --fc-on-primary-container:      #fffeff;
  --fc-primary-fixed:             #ffdad6;
  --fc-primary-fixed-dim:         #ffb3ac;
  --fc-on-primary-fixed:          #410003;
  --fc-on-primary-fixed-variant:  #930010;

  /* --- Sekundärfarben --- */
  --fc-secondary:                 #a13d38;
  --fc-secondary-container:       #ff857b;
  --fc-on-secondary:              #ffffff;
  --fc-on-secondary-container:    #751d1b;

  /* --- Tertiärfarben --- */
  --fc-tertiary:                  #00667b;
  --fc-tertiary-container:        #00819b;
  --fc-on-tertiary:               #ffffff;
  --fc-on-tertiary-container:     #ffffff;

  /* --- Fehler --- */
  --fc-error:                     #ba1a1a;
  --fc-error-container:           #ffdad6;
  --fc-on-error:                  #ffffff;
  --fc-on-error-container:        #93000a;

  /* --- Hintergründe & Oberflächen --- */
  --fc-background:                #f0f0f0;
  --fc-on-background:             #1a1a2e;
  --fc-surface:                   #f0f0f0;
  --fc-on-surface:                #1a1a2e;
  --fc-surface-variant:           #e0e0e0;
  --fc-on-surface-variant:        #5b403d;
  --fc-surface-dim:               #d4d4d4;
  --fc-surface-bright:            #f8f8f8;
  --fc-surface-container-lowest:  #ffffff;
  --fc-surface-container-low:     #f2f2f2;
  --fc-surface-container:         #ebebeb;
  --fc-surface-container-high:    #e2e2e2;
  --fc-surface-container-highest: #d8d8d8;
  --fc-surface-tint:              #bb171f;

  /* --- Inverse --- */
  --fc-inverse-surface:           #2f2e43;
  --fc-inverse-on-surface:        #f4f4f4;
  --fc-inverse-primary:           #ffb3ac;

  /* --- Konturen --- */
  --fc-outline:                   #906f6c;
  --fc-outline-variant:           #e4beba;

  /* --- Shell (Sidebar / Header) --- */
  --fc-shell-bg:                  #384859;
  --fc-shell-text:                #ffffff;

  /* --- Typografie --- */
  --fc-font-family:               'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fc-font-display-lg:           clamp(2rem, 4vw, 3rem);
  --fc-font-display-md:           clamp(1.75rem, 3vw, 2.5rem);
  --fc-font-display-sm:           clamp(1.5rem, 2.5vw, 2rem);
  --fc-font-headline-lg:          1.75rem;
  --fc-font-headline-md:          1.5rem;
  --fc-font-headline-sm:          1.25rem;
  --fc-font-title-lg:             1.125rem;
  --fc-font-title-md:             1rem;
  --fc-font-title-sm:             0.875rem;
  --fc-font-body-lg:              1rem;
  --fc-font-body-md:              0.875rem;
  --fc-font-body-sm:              0.75rem;
  --fc-font-label-lg:             0.875rem;
  --fc-font-label-md:             0.75rem;
  --fc-font-label-sm:             0.6875rem;

  /* --- Abstände (4px-Raster) --- */
  --fc-space-1:   4px;
  --fc-space-2:   8px;
  --fc-space-3:   12px;
  --fc-space-4:   16px;
  --fc-space-5:   20px;
  --fc-space-6:   24px;
  --fc-space-8:   32px;
  --fc-space-10:  40px;
  --fc-space-12:  48px;
  --fc-space-16:  64px;

  /* --- Formen (4px-Constraint) --- */
  --fc-radius:    4px;
  --fc-radius-sm: 2px;
  --fc-radius-lg: 4px;

  /* --- Übergänge --- */
  --fc-transition: 160ms ease;
}

/* =========================================================
   RESET & BASIS (scoped auf #flowclock-root)
   ========================================================= */

/* Update v1.1.0: :where() für Null-Spezifität – fc-* Klassen überschreiben den Reset */
:where(#flowclock-root) *, :where(#flowclock-root) *::before, :where(#flowclock-root) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#flowclock-root {
  font-family: var(--fc-font-family);
  background: var(--fc-background);
  color: var(--fc-on-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */

.fc-display-lg  { font-size: var(--fc-font-display-lg);  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.fc-display-md  { font-size: var(--fc-font-display-md);  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.fc-display-sm  { font-size: var(--fc-font-display-sm);  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.fc-headline-lg { font-size: var(--fc-font-headline-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.fc-headline-md { font-size: var(--fc-font-headline-md); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.fc-headline-sm { font-size: var(--fc-font-headline-sm); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.fc-title-lg    { font-size: var(--fc-font-title-lg);    font-weight: 600; line-height: 1.4; }
.fc-title-md    { font-size: var(--fc-font-title-md);   line-height: 1.4; }
.fc-title-sm    { font-size: var(--fc-font-title-sm);   line-height: 1.4; }
.fc-body-lg     { font-size: var(--fc-font-body-lg);     font-weight: 400; line-height: 1.6; }
.fc-body-md     { font-size: var(--fc-font-body-md);     font-weight: 400; line-height: 1.6; }
.fc-body-sm     { font-size: var(--fc-font-body-sm);     font-weight: 400; line-height: 1.5; }
.fc-label-lg    { font-size: var(--fc-font-label-lg);   line-height: 1.3; }
.fc-label-md    { font-size: var(--fc-font-label-md);   line-height: 1.3; letter-spacing: 0.01em; }
.fc-label-sm    { font-size: var(--fc-font-label-sm);   line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; }

/* =========================================================
   FARB-HILFKLASSEN
   ========================================================= */

.fc-text-primary         { color: var(--fc-primary); }
.fc-text-on-surface      { color: var(--fc-on-surface); }
.fc-text-on-surface-var  { color: var(--fc-on-surface-variant); }
.fc-text-error           { color: var(--fc-error); }
.fc-text-tertiary        { color: var(--fc-tertiary); }

.fc-bg-primary           { background: var(--fc-primary-container); color: var(--fc-on-primary); }
.fc-bg-surface           { background: var(--fc-surface); }
.fc-bg-surface-low       { background: var(--fc-surface-container-low); }
.fc-bg-surface-container { background: var(--fc-surface-container); }
.fc-bg-shell             { background: var(--fc-shell-bg); color: var(--fc-shell-text); }

/* =========================================================
   BUTTONS
   ========================================================= */

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-4);
  border-radius: var(--fc-radius);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-label-lg);

  cursor: pointer;
  border: none;
  transition: background var(--fc-transition), border-color var(--fc-transition);
  text-decoration: none;
  white-space: nowrap;
}

/* Primär – #00667B */
.fc-btn-primary {
  background: #00667b;
  color: #ffffff;
}
.fc-btn-primary:hover {
  background: #004f5e;
}

/* Sekundär – Outline */
.fc-btn-secondary {
  background: transparent;
  color: var(--fc-on-surface);
  border: 1px solid var(--fc-outline);
}
.fc-btn-secondary:hover {
  border-color: var(--fc-primary-container);
  color: var(--fc-primary-container);
}

/* Ghost – kein Rahmen */
.fc-btn-ghost {
  background: transparent;
  color: var(--fc-on-surface);
}
.fc-btn-ghost:hover {
  background: var(--fc-surface-container-low);
}

/* Destruktiv – #DD3333 */
.fc-btn-danger {
  background: #dd3333;
  color: #ffffff;
}
.fc-btn-danger:hover { opacity: 0.9; }

/* Größen */
.fc-btn-sm { padding: var(--fc-space-1) var(--fc-space-3); font-size: var(--fc-font-label-md); }
.fc-btn-lg { padding: var(--fc-space-3) var(--fc-space-6); font-size: var(--fc-font-title-md); }

/* Deaktiviert */
.fc-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* =========================================================
   BADGES / CHIPS
   ========================================================= */

.fc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--fc-space-2);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-sm);

  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fc-badge-primary  { background: var(--fc-primary-container); color: var(--fc-on-primary); }
.fc-badge-success  { background: var(--fc-tertiary-container); color: var(--fc-on-tertiary); }
.fc-badge-warning  { background: #f59e0b22; color: #b45309; border: 1px solid #f59e0b44; }
.fc-badge-error    { background: var(--fc-error-container); color: var(--fc-on-error-container); }
.fc-badge-neutral  { background: var(--fc-surface-container-high); color: var(--fc-on-surface-variant); }
/* Update v1.7.9: Blaues Info-Badge für Priorität „Normal" */
.fc-badge-info     { background: #2563eb22; color: #1d4ed8; border: 1px solid #2563eb44; }
.fc-badge-live     { background: var(--fc-primary-container); color: var(--fc-on-primary); animation: fc-pulse 2s infinite; }

@keyframes fc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* =========================================================
   FORMULARELEMENTE
   ========================================================= */

.fc-form-group { display: flex; flex-direction: column; gap: var(--fc-space-1); }

.fc-label {
  font-size: var(--fc-font-label-md);

  color: var(--fc-on-surface-variant);
}

.fc-input,
.fc-select,
.fc-textarea {
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-body-md);
  padding: var(--fc-space-2) var(--fc-space-3);
  /* Update v1.2.8: Statt `border` wird die 1px-Linie über `box-shadow inset`
     gezeichnet. Grund: echte `border` wurden auf Displays mit nicht-ganzzahligem
     devicePixelRatio sub-pixel-gerendert (0.8 px), wodurch die linke/obere
     Kante dunkler erschien als die rechte/untere. `box-shadow inset` wird
     pixelgenau und auf allen Seiten identisch gezeichnet.
     Update v2.1.8: border: 0 !important, damit das Theme (z.B. Blocksy)
     keine dunklen Borders einschmuggeln kann. */
  border: 0 !important;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  background-clip: padding-box;
  color: var(--fc-on-surface);
  transition: box-shadow var(--fc-transition);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}
/* Update v1.3.3: Fokus-Rand auf Türkis #00819B (statt Violett/Primary). */
.fc-input:focus,
.fc-select:focus,
.fc-textarea:focus {
  box-shadow: inset 0 0 0 1px #00819B;
}
.fc-input::placeholder,
.fc-textarea::placeholder {
  color: var(--fc-on-surface-variant);
  opacity: 0.6;
}
.fc-textarea { resize: vertical; min-height: 80px; }
.fc-input-error { box-shadow: inset 0 0 0 1px var(--fc-error) !important; }
.fc-hint { font-size: var(--fc-font-label-sm); color: var(--fc-on-surface-variant); }
.fc-hint-error { color: var(--fc-error); }

/* Checkbox & Radio */
.fc-checkbox,
.fc-radio {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  cursor: pointer;
  font-size: var(--fc-font-body-md);
}
.fc-checkbox input[type="checkbox"],
.fc-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--fc-primary-container);
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
}

/* Toggle / Switch */
.fc-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.fc-toggle input { opacity: 0; width: 0; height: 0; }
.fc-toggle-slider {
  position: absolute; inset: 0;
  background: var(--fc-surface-container-high);
  border: 1px solid var(--fc-outline-variant);
  border-radius: 11px;
  transition: background var(--fc-transition);
  cursor: pointer;
}
.fc-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: var(--fc-on-surface-variant);
  border-radius: 50%;
  transition: transform var(--fc-transition);
}
.fc-toggle input:checked + .fc-toggle-slider { background: var(--fc-primary-container); border-color: var(--fc-primary-container); }
.fc-toggle input:checked + .fc-toggle-slider::before { transform: translateX(18px); background: white; }

/* =========================================================
   KARTEN (CARDS)
   ========================================================= */

.fc-card {
  background: var(--fc-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4);
}
.fc-card:hover {
  border-color: rgba(185, 21, 30, 0.3);
}
.fc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fc-space-3);
}
.fc-card-title {
  font-size: var(--fc-font-title-md);
  font-weight: 600;
  color: var(--fc-on-surface);
}
.fc-card-subtitle {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  margin-top: var(--fc-space-1);
}

/* Metrikkarte
 * Update v1.3.3: Hintergrund auf Weiß (war zuvor hellgrau). */
.fc-metric-card {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4) var(--fc-space-5);
}
.fc-metric-label { font-size: var(--fc-font-label-md); color: var(--fc-on-surface-variant); text-transform: uppercase; letter-spacing: 0.05em; }
.fc-metric-value { font-size: var(--fc-font-display-sm); font-weight: 700; letter-spacing: -0.02em; color: var(--fc-on-surface); line-height: 1.2; margin-top: var(--fc-space-1); }
.fc-metric-delta { font-size: var(--fc-font-label-md); margin-top: var(--fc-space-1); }
.fc-metric-delta.positive { color: var(--fc-tertiary); }
.fc-metric-delta.negative { color: var(--fc-error); }

/* Aktiv-Timer-Karte */
.fc-timer-card {
  background: var(--fc-primary-container);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4) var(--fc-space-5);
  color: var(--fc-on-primary);
}
.fc-timer-display { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* =========================================================
   TABELLEN
   ========================================================= */

/* Update v1.2.2: Tabellen werden grundsaetzlich in weisser Karte dargestellt. */
/* Update v1.8.5: overflow-x auto, damit breite Tabellen horizontal scrollbar sind */
.fc-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--fc-surface-container-lowest);
  /* Update v2.1.8: !important gegen Theme-Überschreibung (z.B. Blocksy) */
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: var(--fc-radius) !important;
  outline: none !important;
  box-shadow: none !important;
}

.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fc-font-body-md);
  /* Update v2.1.8: Blocksy setzt border-color via --theme-table-border-color auf
     table-Elemente. Mit border: none !important wird das unterbunden. */
  border: none !important;
}
/* Update v1.2.5: Tabellen zeigen grundsätzlich KEINE senkrechten Linien.
   Nur horizontale Trennungen zwischen Header und Body sowie zwischen Zeilen.
   Update v2.1.8: explizite Farbe statt inherit, damit Blocksy's --theme-border-color
   Variable (rgb(26,26,46)) nicht als border-color durchschlägt. */
.fc-table th,
.fc-table td {
  border-left: none !important;
  border-right: none !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
/* Update v1.2.3: Tabellen-Header-Hintergrund weiss (wie Karte) */
.fc-table thead tr {
  border-bottom: 2px solid rgba(0, 0, 0, 0.10) !important;
  background: var(--fc-surface-container-lowest) !important;
}
.fc-table thead th {
  text-align: left;
  padding: var(--fc-space-2) var(--fc-space-3);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--fc-surface-container-lowest) !important;
  border-bottom: none !important;
  border-top: none !important;
}
.fc-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-top: none !important;
  transition: background var(--fc-transition);
}
.fc-table tbody tr:last-child {
  border-bottom: none !important;
}
.fc-table tbody tr:hover {
  background: var(--fc-surface-container-low);
}
.fc-table td {
  padding: var(--fc-space-2) var(--fc-space-3);
  color: var(--fc-on-surface);
  vertical-align: middle;
  border-top: none !important;
  border-bottom: none !important;
}
.fc-table .fc-text-right { text-align: right; }
.fc-table .fc-text-mono  { font-variant-numeric: tabular-nums; }

/* =========================================================
   FORTSCHRITTSBALKEN
   ========================================================= */

.fc-progress-wrap { display: flex; flex-direction: column; gap: var(--fc-space-1); }
.fc-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--fc-surface-container-high);
  overflow: hidden;
}
.fc-progress-fill {
  height: 100%;
  background: var(--fc-primary-container);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.fc-progress-fill.tertiary { background: var(--fc-tertiary-container); }

/* =========================================================
   TAGS / CHIPS
   ========================================================= */

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius);
  border: 1px solid var(--fc-outline-variant);
  background: var(--fc-surface-container-low);
  font-size: var(--fc-font-label-md);

  cursor: pointer;
  transition: all var(--fc-transition);
}
.fc-chip:hover { border-color: var(--fc-primary-container); color: var(--fc-primary-container); }
.fc-chip.active { background: var(--fc-primary-container); color: var(--fc-on-primary); border-color: var(--fc-primary-container); }

/* =========================================================
   TRENNLINIE / DIVIDER
   ========================================================= */

.fc-divider {
  height: 1px;
  background: var(--fc-outline-variant);
  opacity: 0.15;
  margin: var(--fc-space-4) 0;
  border: none;
}

/* =========================================================
   AVATARE
   ========================================================= */

.fc-avatar {
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-high);
  color: var(--fc-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fc-font-label-md);
  flex-shrink: 0;
}
.fc-avatar-sm  { width: 28px; height: 28px; font-size: 11px; }
.fc-avatar-md  { width: 36px; height: 36px; font-size: 13px; }
.fc-avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.fc-avatar-primary { background: var(--fc-primary-container); color: var(--fc-on-primary); }

/* =========================================================
   ALERTS / BENACHRICHTIGUNGEN
   ========================================================= */

.fc-alert {
  padding: var(--fc-space-3) var(--fc-space-4);
  border-radius: var(--fc-radius);
  border-left: 3px solid;
  display: flex;
  gap: var(--fc-space-3);
  font-size: var(--fc-font-body-md);
}
.fc-alert-info    { background: var(--fc-surface-container-low); border-color: var(--fc-tertiary); color: var(--fc-on-surface); }
.fc-alert-success { background: #f0fdf4; border-color: var(--fc-tertiary-container); color: var(--fc-on-surface); }
.fc-alert-warning { background: #fffbeb; border-color: #f59e0b; color: var(--fc-on-surface); }
.fc-alert-error   { background: var(--fc-error-container); border-color: var(--fc-error); color: var(--fc-on-error-container); }

/* =========================================================
   LAYOUT – APP-SHELL
   ========================================================= */

/* Update v1.0.9: Admin-Bar-Höhe berücksichtigen */
/* Update v1.4.3: height statt min-height + overflow:hidden, damit Sidebar und Header fixiert bleiben */
.fc-app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: calc(100vh - var(--fc-admin-bar-height, 0px));
  overflow: hidden;
}

/* WordPress Admin Bar Kompensation */
.admin-bar #flowclock-root {
  --fc-admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar #flowclock-root {
    --fc-admin-bar-height: 46px;
  }
}

/* Sidebar */
/* Update v1.4.3: Sidebar fixiert (scrollt intern, wenn Inhalt länger als Viewport) */
.fc-sidebar {
  grid-row: 1 / -1;
  background: var(--fc-shell-bg);
  color: var(--fc-shell-text);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.fc-sidebar-logo {
  padding: var(--fc-space-4) var(--fc-space-5) var(--fc-space-6);
  font-size: var(--fc-font-headline-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fc-sidebar-logo span { color: var(--fc-primary-container); }
.fc-sidebar-section {
  padding: var(--fc-space-2) var(--fc-space-5);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--fc-space-4);
}
.fc-nav-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-2) var(--fc-space-5);
  font-size: var(--fc-font-body-md);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: color var(--fc-transition), background var(--fc-transition);
  position: relative;
  text-decoration: none;
  border-left: 5px solid transparent;
}
.fc-nav-item:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.fc-nav-item.active {
  color: #ffffff;
  border-left-color: var(--fc-primary-container);
  background: #546A7C;
}
.fc-nav-item .material-icons-round { font-size: 18px; }
.fc-sidebar-spacer { flex: 1; }
/* Update v2.1.6: Abmelden-Link in der Sidebar */
.fc-sidebar-logout {
  margin-left: auto;
  color: rgba(255,255,255,0.5);
  font-size: var(--fc-font-label-md);
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease;
}
.fc-sidebar-logout:hover { color: rgba(255,255,255,0.9); }

/* Update v3.1.3: Flyout-Untermenü für Favoriten-Projekte */
.fc-nav-flyout-wrapper {
  position: relative;
}

.fc-nav-flyout {
  position: fixed;
  min-width: 220px;
  max-width: 300px;
  overflow-y: auto;
  background: var(--fc-surface-container-lowest, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius, 4px);
  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  padding: var(--fc-space-1, 4px) 0;
  animation: fc-flyout-fade-in 150ms ease;
}

@keyframes fc-flyout-fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fc-nav-flyout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--fc-space-2, 8px) var(--fc-space-4, 16px);
  font-size: var(--fc-font-label-sm, 0.6875rem);
  font-weight: 600;
  color: var(--fc-on-surface-variant, #5b403d);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: var(--fc-space-1, 4px);
}

.fc-nav-flyout-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2, 8px);
  padding: var(--fc-space-2, 8px) var(--fc-space-4, 16px);
  font-size: var(--fc-font-body-md, 0.875rem);
  color: var(--fc-on-surface, #1c1b1f);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-nav-flyout-item:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-nav-flyout-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.fc-nav-flyout-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-nav-flyout-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: var(--fc-space-1, 4px) 0;
}

.fc-nav-flyout-all {
  color: var(--fc-on-surface-variant, #5b403d);
  font-weight: 500;
}

.fc-nav-flyout-all .material-icons-round {
  font-size: 16px;
}

/* Flyout nur auf Desktop/Tablet (≥769px) */
@media (max-width: 768px) {
  .fc-nav-flyout {
    display: none !important;
  }
}

/* Header */
.fc-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  padding: var(--fc-space-3) var(--fc-space-8);
  display: flex;
  align-items: center;
  gap: var(--fc-space-4);
}
/* Update v2.7.11: Header-Title nicht mehr flex:1, damit Suchfeld mittig Platz bekommt. */
.fc-header-title { font-size: var(--fc-font-headline-sm); font-weight: 700; letter-spacing: -0.01em; flex: 0 0 auto; }
.fc-header-actions { display: flex; align-items: center; gap: var(--fc-space-3); flex-shrink: 0; }
/* Update v2.7.11: Globale Suche – nimmt die mittige Restbreite und ist horizontal zentriert. */
.fc-header-search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0 var(--fc-space-4); }

/* Update v2.3.6: Hamburger-Menü-Button – nur mobil sichtbar */
.fc-header-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--fc-on-surface);
  cursor: pointer;
  padding: var(--fc-space-1);
  border-radius: var(--fc-radius);
  transition: background var(--fc-transition);
  flex-shrink: 0;
}
.fc-header-hamburger:hover { background: rgba(0, 0, 0, 0.06); }
.fc-header-hamburger .material-icons-round { font-size: 24px; }

/* Update v2.3.6: Backdrop nur mobil sichtbar – Desktop ausblenden */
.fc-sidebar-backdrop { display: none; }

/* Rechte Spalte (Header + Main) – Update v1.4.3: eigenes Grid, damit Header fix bleibt */
.fc-app-content {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  overflow: hidden;
}

/* Haupt-Content-Bereich */
.fc-main {
  background: var(--fc-background);
  padding: var(--fc-space-8);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =========================================================
   HILFKLASSEN
   ========================================================= */

.fc-flex         { display: flex; }
.fc-flex-col     { display: flex; flex-direction: column; }
.fc-items-center { align-items: center; }
.fc-justify-between { justify-content: space-between; }
.fc-gap-1 { gap: var(--fc-space-1); }
.fc-gap-2 { gap: var(--fc-space-2); }
.fc-gap-3 { gap: var(--fc-space-3); }
.fc-gap-4 { gap: var(--fc-space-4); }
.fc-gap-6 { gap: var(--fc-space-6); }
.fc-gap-8 { gap: var(--fc-space-8); }
.fc-w-full { width: 100%; }
.fc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fc-space-4); }
.fc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fc-space-4); }
.fc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fc-space-4); }
.fc-mt-2  { margin-top: var(--fc-space-2); }
.fc-mt-4  { margin-top: var(--fc-space-4); }
.fc-mt-6  { margin-top: var(--fc-space-6); }
.fc-mt-8  { margin-top: var(--fc-space-8); }
.fc-p-4   { padding: var(--fc-space-4); }
.fc-p-6   { padding: var(--fc-space-6); }

/* Scrollbar */
/* Update v1.4.3: Slim rote Scrollbar gemäß Design-Vorlage (layout/flowclock-design-template.html). */
#flowclock-root,
#flowclock-root * {
  scrollbar-width: thin;
  scrollbar-color: var(--fc-primary-container) transparent;
}
#flowclock-root ::-webkit-scrollbar,
#flowclock-root::-webkit-scrollbar { width: 6px; height: 6px; }
#flowclock-root ::-webkit-scrollbar-track,
#flowclock-root::-webkit-scrollbar-track { background: transparent; }
#flowclock-root ::-webkit-scrollbar-thumb,
#flowclock-root::-webkit-scrollbar-thumb {
  background: var(--fc-primary-container);
  border-radius: 3px;
}
#flowclock-root ::-webkit-scrollbar-thumb:hover,
#flowclock-root::-webkit-scrollbar-thumb:hover {
  background: #c02d2d;
}
#flowclock-root ::-webkit-scrollbar-corner,
#flowclock-root::-webkit-scrollbar-corner { background: transparent; }

/* =========================================================
   MODAL (Phase 08)
   Update v1.1.1: Modal-Komponente
   ========================================================= */

.fc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fc-space-4);
  z-index: 9999;
  animation: fc-fade-in 160ms ease;
}

.fc-modal {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--fc-space-8));
  display: flex;
  flex-direction: column;
  animation: fc-slide-up 200ms ease;
}
.fc-modal-sm { max-width: 420px; }
.fc-modal-md { max-width: 560px; }
.fc-modal-lg { max-width: 760px; }

.fc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4) var(--fc-space-5);
  border-bottom: 1px solid var(--fc-outline-variant);
}
.fc-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fc-on-surface-variant);
  padding: var(--fc-space-1);
  border-radius: var(--fc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fc-transition), color var(--fc-transition);
}
.fc-modal-close:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
}
.fc-modal-body {
  padding: var(--fc-space-5);
  overflow-y: auto;
  flex: 1;
}
.fc-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3) var(--fc-space-5);
  border-top: 1px solid var(--fc-outline-variant);
  background: var(--fc-surface-container-low);
}

@keyframes fc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fc-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   TOAST-BENACHRICHTIGUNGEN (Phase 08)
   Update v1.1.1: Toast-Container
   Update v1.1.2: Position auf unten rechts – siehe CLAUDE.md UI-Konventionen
   ========================================================= */

.fc-toast-container {
  position: fixed;
  bottom: var(--fc-space-4);
  right: var(--fc-space-4);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--fc-space-2);
  z-index: 10000;
  max-width: 360px;
  pointer-events: none;
}
.fc-toast {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3) var(--fc-space-4);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  border: 1px solid var(--fc-outline-variant);
  border-left: 3px solid var(--fc-tertiary);
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface);
  pointer-events: auto;
  animation: fc-toast-in 200ms ease;
}
.fc-toast-success { border-left-color: var(--fc-tertiary-container); }
.fc-toast-error   { border-left-color: var(--fc-error); background: var(--fc-error-container); color: var(--fc-on-error-container); }
.fc-toast-warning { border-left-color: #f59e0b; background: #fffbeb; }
.fc-toast-info    { border-left-color: var(--fc-tertiary); }
.fc-toast-icon    { font-size: 20px; flex-shrink: 0; }
.fc-toast-message { flex: 1; }
.fc-toast-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.fc-toast-close:hover { opacity: 1; }
.fc-toast-close .material-icons-round { font-size: 16px; }

@keyframes fc-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* =========================================================
   SPINNER (Phase 08)
   Update v1.1.1: LoadingSpinner-Komponente
   ========================================================= */

.fc-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-6);
}
.fc-spinner-inline {
  flex-direction: row;
  padding: 0;
}
.fc-spinner {
  display: inline-block;
  border: 2px solid var(--fc-outline-variant);
  border-top-color: var(--fc-primary-container);
  border-radius: 50%;
  animation: fc-spin 0.8s linear infinite;
}
.fc-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.fc-spinner-md { width: 22px; height: 22px; border-width: 2px; }
.fc-spinner-lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

.fc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   EMPTY-STATE (Phase 08)
   ========================================================= */

.fc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--fc-space-12) var(--fc-space-6);
  color: var(--fc-on-surface-variant);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}
.fc-empty-icon {
  font-size: 48px !important;
  color: var(--fc-outline);
  opacity: 0.7;
}

/* =========================================================
   KUNDEN-SEITE (Phase 08)
   Update v1.1.1: Spezifische Stile für Kundenverwaltung
   ========================================================= */

.fc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  margin-bottom: var(--fc-space-6);
  flex-wrap: wrap;
}
.fc-page-actions {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  flex-wrap: wrap;
}

/* Update v1.1.3: Einheitlicher Seiten-Subtitle (Meta-/Counter-Text oben links).
   Normale Body-Größe + Bold, damit der Text nicht in kleiner grauer Schrift
   erscheint. Siehe CLAUDE.md → UI-Konventionen Regel 3. */
.fc-page-subtitle {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--fc-on-surface);
  margin: 0;
}

/* Update v1.7.6: overflow entfernt, damit Tooltips nicht abgeschnitten werden */
.fc-table-card {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-table-actions {
  display: inline-flex;
  gap: var(--fc-space-1);
}
.fc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--fc-radius);
  cursor: pointer;
  color: var(--fc-on-surface-variant);
  transition: all var(--fc-transition);
}
.fc-icon-btn:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
  border-color: var(--fc-outline-variant);
}
.fc-icon-btn.danger:hover {
  color: var(--fc-error);
  border-color: var(--fc-error);
}
.fc-icon-btn .material-icons-round { font-size: 18px; }

.fc-row-archived { opacity: 0.55; }
.fc-row-clickable { cursor: pointer; }

/* Form-Grid im Modal */
.fc-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fc-space-4);
}
.fc-form-grid .fc-col-2 { grid-column: span 2; }
@media (max-width: 520px) {
  .fc-form-grid { grid-template-columns: 1fr; }
  .fc-form-grid .fc-col-2 { grid-column: auto; }
}

/* =========================================================
   PROJEKTE-SEITE (Phase 09)
   Update v1.2.0: Listen- & Kachel-Ansicht für Projekte
   ========================================================= */

/* Filter-Chips-Leiste */
.fc-project-filters {
  display: flex;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-4);
  flex-wrap: wrap;
}

/* Ansichts-Umschalter (Liste/Kachel) */
.fc-view-toggle {
  display: inline-flex;
  gap: var(--fc-space-1);
  padding: 2px;
  border: 1px solid var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}
.fc-view-toggle .fc-icon-btn.active {
  background: var(--fc-surface-container-lowest);
  color: var(--fc-primary-container);
  border-color: var(--fc-outline-variant);
}

/* Listen-Ansicht */
/* Update v1.2.2: Tabelle auf weisser Karte; Farbstreifen am linken Zeilenrand */
/* Update v1.7.6: overflow:visible statt hidden, damit Tooltips nicht abgeschnitten werden */
.fc-project-list {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

/* Update v2.3.9: 5 Spalten (+ Aufgaben offen/erledigt) */
.fc-project-list-head,
.fc-project-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 140px minmax(180px, 1.5fr) 160px 200px;
  gap: var(--fc-space-3);
  align-items: center;
  padding: var(--fc-space-2) var(--fc-space-4) var(--fc-space-2) var(--fc-space-5);
}
/* Update v1.2.3: Tabellen-Header-Hintergrund ebenfalls weiss */
.fc-project-list-head {
  padding-top: var(--fc-space-3);
  padding-bottom: var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border-bottom: 1px solid var(--fc-outline-variant);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Update v1.2.2: Ueberschriften-Ausrichtung identisch zu den Werten darunter */
.fc-project-list-head .fc-col-tasks    { text-align: center; }
.fc-project-list-head .fc-col-progress { text-align: left; }
.fc-project-list-head .fc-col-hours    { text-align: right; }
.fc-project-list-head .fc-col-actions  { text-align: right; }

.fc-project-row {
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background var(--fc-transition);
  min-height: 48px;
}
.fc-project-row:last-child { border-bottom: none; }
.fc-project-row:hover { background: var(--fc-surface-container-low); }
.fc-project-row.is-overdue .fc-project-title-btn { color: var(--fc-error); }

/* Update v1.2.2: Farbstreifen als linker Zeilenrand, nicht eingerueckt */
.fc-project-color {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc-row-color, var(--fc-primary-container));
  display: block;
}

.fc-project-main {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
}
.fc-project-main .fc-project-meta {
  display: inline-flex;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}
.fc-tree-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fc-on-surface-variant);
  padding: 0;
}
.fc-tree-toggle:hover { color: var(--fc-primary-container); }
.fc-tree-toggle .material-icons-round { font-size: 20px; }
.fc-tree-spacer {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}

.fc-project-title-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--fc-on-surface);
  padding: 0;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fc-project-title-btn:hover { color: var(--fc-primary-container); }

.fc-project-progress-col {
  min-width: 0;
}

.fc-project-hours-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fc-project-actions-col {
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--fc-space-1);
}

/* Update v2.3.9: Aufgaben-Spalte in Projektliste */
.fc-project-tasks-col {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--fc-font-body-md);
}
.fc-tasks-count-open {
  font-weight: 600;
  color: var(--fc-on-surface);
}
.fc-tasks-count-sep {
  color: var(--fc-on-surface-variant);
  margin: 0 2px;
}
.fc-tasks-count-done {
  color: var(--fc-on-surface-variant);
}

/* Update v2.3.9: Fade-Out-Animation beim Archivieren/Reaktivieren */
.fc-project-row-fadeout {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

/* Update v1.7.8: Play-Button immer rot gefuellt mit weissem Icon (wie im Screenshot) */
.fc-timer-play {
  background: var(--fc-primary-container) !important;
  color: var(--fc-on-primary) !important;
  border-color: var(--fc-primary-container) !important;
  border-radius: var(--fc-radius) !important;
}
.fc-timer-play:hover {
  background: #c02d2d !important;
  color: var(--fc-on-primary) !important;
  border-color: #c02d2d !important;
}

/* Kachel-Ansicht */
.fc-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--fc-space-4);
}

/* Update v1.2.2: Karten auf Haupthintergrund = weiss */
.fc-project-card {
  position: relative;
  cursor: pointer;
  padding-left: var(--fc-space-6);
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-container-lowest);
}
.fc-project-card:hover { border-color: rgba(185, 21, 30, 0.3); }
.fc-project-card:focus-visible {
  outline: 2px solid var(--fc-primary-container);
  outline-offset: 2px;
}

.fc-project-card-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: var(--fc-radius);
  border-bottom-left-radius: var(--fc-radius);
}

.fc-project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

.fc-project-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fc-space-3);
}

.fc-project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

.fc-avatar-stack {
  display: inline-flex;
  align-items: center;
}
.fc-avatar-stack > * + * {
  margin-left: -8px;
  border: 2px solid var(--fc-surface-container-low);
}

/* Farbauswahl im Projekt-Modal */
.fc-color-picker {
  display: flex;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}
.fc-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--fc-transition), border-color var(--fc-transition);
}
.fc-color-swatch:hover { transform: scale( 1.1 ); }
.fc-color-swatch.active {
  border-color: var(--fc-on-surface);
  box-shadow: inset 0 0 0 2px var(--fc-surface-container-lowest);
}

/* Update v2.7.5: Custom-Color-Picker */
.fc-custom-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
}
.fc-color-swatch-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-container-low, #f2f2f2);
  border: 2px dashed var(--fc-on-surface-variant, #888);
}
.fc-color-swatch-custom.active {
  border-style: solid;
  border-color: var(--fc-on-surface);
}
.fc-color-native-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.fc-color-hex-input {
  width: 90px !important;
  font-family: monospace;
  font-size: 13px;
  padding: 4px 6px;
  text-transform: uppercase;
}

/* Mitgliederliste (ProjectMembers) */
.fc-project-members {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}
.fc-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}
.fc-members-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}
/* Update v1.8.9: flex-direction column für Bearbeitungs-Panel */
.fc-member-item {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  padding: var(--fc-space-2);
  border-radius: var(--fc-radius);
  transition: background var(--fc-transition);
}
.fc-member-item:hover { background: var(--fc-surface-container-low); }
.fc-member-info { flex: 1; min-width: 0; }
.fc-member-name { font-weight: 500; color: var(--fc-on-surface); }

.fc-member-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

/* Mobile-Anpassung Listen-Ansicht */
/* Update v1.2.2: Farbstreifen weiterhin absolute links, nicht im Grid */
@media (max-width: 900px) {
  .fc-project-list-head {
    display: none;
  }
  .fc-project-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'main actions'
      'tasks tasks'
      'progress progress'
      'hours hours';
    row-gap: var(--fc-space-1);
    padding: var(--fc-space-3) var(--fc-space-4) var(--fc-space-3) var(--fc-space-5);
  }
  .fc-project-main { grid-area: main; }
  .fc-project-tasks-col { grid-area: tasks; text-align: left; }
  .fc-project-progress-col { grid-area: progress; }
  .fc-project-hours-col { grid-area: hours; text-align: left; }
  .fc-project-actions-col { grid-area: actions; }
}

/* =========================================================
   PROJEKTDETAIL & KANBAN (Phase 10, v1.2.4)
   ========================================================= */

/* Utility-Klassen, die auch außerhalb von Tabellen gelten sollen */
.fc-text-right { text-align: right; }
.fc-text-mono  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.fc-mb-2       { margin-bottom: var(--fc-space-2); }
.fc-mb-4       { margin-bottom: var(--fc-space-4); }
.fc-mb-6       { margin-bottom: var(--fc-space-6); }

/* Statischer Chip (nicht anklickbar, z.B. Kunden-Chip) */
.fc-chip-static {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  border: 1px solid var(--fc-outline-variant);
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-sm);

  cursor: default;
}

/* Farb-Vorschau (z.B. in Einstellungen-Tab) */
.fc-color-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: var(--fc-radius-sm);
  vertical-align: middle;
  margin-right: var(--fc-space-1);
  border: 1px solid var(--fc-outline-variant);
}

/* Definitionsliste (Einstellungen-Tab) */
.fc-definition-list {
  display: grid;
  gap: var(--fc-space-3);
}
.fc-definition-list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--fc-space-4);
  align-items: start;
  padding: var(--fc-space-2) 0;
  border-bottom: 1px solid var(--fc-outline-variant);
}
.fc-definition-list > div:last-child { border-bottom: none; }
.fc-definition-list dt {
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fc-on-surface-variant);
}
.fc-definition-list dd {
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
}

.fc-project-description-view {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Projekt-Detail-Seite Kopf */
.fc-project-detail {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}
/* Update v3.0.6: Zurück-Button rechts im Header statt als eigene Zeile */
/* Update v3.0.6: Rechte Gruppe im Header (Zurück + Mitglieder) */
.fc-project-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.fc-project-back-btn {
  white-space: nowrap;
  color: var(--fc-on-surface-variant, #666);
  font-size: 13px;
}
.fc-project-back-btn:hover {
  color: var(--fc-on-surface, #1a1a2e);
}
.fc-project-detail-top {
  display: flex;
}
/* Update v1.7.6: overflow entfernt fuer Tooltip-Sichtbarkeit */
.fc-project-detail-header {
  position: relative;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4) var(--fc-space-5) var(--fc-space-4) var(--fc-space-6);
}
.fc-project-detail-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc-row-color, var(--fc-primary-container));
}
.fc-project-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}
.fc-project-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-2);
}

/* Update v2.3.6: Roter runder Timer-Startbutton im Projekt-Header */
.fc-project-timer-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--fc-error, #dd3333);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  padding: 0;
  flex-shrink: 0;
}
.fc-project-timer-start:hover {
  background: #c62828;
  transform: scale(1.1);
}
.fc-project-timer-start:active {
  transform: scale(0.95);
}
.fc-project-timer-start .material-icons-round {
  font-size: 14px;
}

/* Update v1.2.5: Mitglieder- und Einstellungs-Karte (innerhalb Projektdetail) explizit weiß */
.fc-project-detail-card {
  padding: var(--fc-space-5);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
}
.fc-project-detail-card:hover {
  border-color: rgba(0, 0, 0, 0.07);
}

/* Tab-Leiste */
.fc-tabs {
  display: flex;
  gap: var(--fc-space-1);
  border-bottom: 1px solid var(--fc-outline-variant);
  flex-wrap: wrap;
}
.fc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  /* Update v3.3.22: Horizontalen Tab-Abstand auf ca. 60% reduziert. */
  padding: var(--fc-space-3) 10px;
  border: none;
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-md);

  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--fc-transition), border-color var(--fc-transition);
}
.fc-tab:hover {
  color: var(--fc-on-surface);
}
.fc-tab.is-active {
  color: var(--fc-primary-container);
  border-bottom-color: var(--fc-primary-container);
}

.fc-project-detail-content {
  min-height: 200px;
}

/* Kanban-Board */
.fc-kanban-board {
  display: flex;
  gap: var(--fc-space-3);
  overflow-x: auto;
  padding-bottom: var(--fc-space-3);
  align-items: flex-start;
}

/* Update v1.2.5: Spalten weiß, Border wie Mitglieder-Karten (rgba(0,0,0,0.07)) */
.fc-kanban-column {
  flex: 0 0 280px;
  width: 280px;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
  min-height: 200px;
}
.fc-kanban-column.is-over {
  background: #fafafa;
  border-color: var(--fc-primary-container);
}

/* Update v1.2.5: Header bleibt weiß, Trennlinie dezent grau (wie Karten-Border) */
.fc-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-lowest);
  border-top-left-radius: var(--fc-radius);
  border-top-right-radius: var(--fc-radius);
}
.fc-kanban-column-title {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
}
.fc-kanban-column-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-kanban-column-name {
  font-weight: 600;
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-kanban-column-count {
  background: var(--fc-surface-container);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  padding: 2px var(--fc-space-2);
  border-radius: 99px;
}
.fc-kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 40px;
}
/* Update v1.2.5: Empty-Placeholder mit dezentem Grau-Dashed statt Rosa */
.fc-kanban-column-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-4);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
  transition: border-color var(--fc-transition), color var(--fc-transition);
}
.fc-kanban-column-empty:hover {
  border-color: var(--fc-primary-container);
  color: var(--fc-primary-container);
}
.fc-kanban-column-empty .material-icons-round { font-size: 16px; }

/* Kanban-Karte */
/* Update v1.2.5: Karten #F0F0F0 (background), Border wie Mitglieder-Karten (rgba(0,0,0,0.07)) */
.fc-kanban-card {
  background: var(--fc-background);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-3);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  transition: border-color var(--fc-transition), background var(--fc-transition);
  user-select: none;
}
.fc-kanban-card:hover {
  border-color: var(--fc-primary-container);
}
.fc-kanban-card:focus-visible {
  outline: 2px solid var(--fc-primary-container);
  outline-offset: 1px;
}
.fc-kanban-card.is-dragging {
  cursor: grabbing;
  border-color: var(--fc-primary-container);
}
.fc-kanban-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* Update v1.4.9: Titel beginnt direkt rechts vom Check-Icon */
  gap: var(--fc-space-2);
}
.fc-kanban-card-title {
  font-weight: 600;
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  line-height: 1.35;
  word-break: break-word;
  /* Update v1.4.9: Titel wächst links, Priority-Badge bleibt rechts. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.fc-kanban-card-prio {
  flex-shrink: 0;
}
.fc-kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}
.fc-kanban-card-meta-left,
.fc-kanban-card-meta-right {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}
.fc-kanban-card-date,
.fc-kanban-card-subtasks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
}
.fc-kanban-card-date.is-overdue {
  color: var(--fc-error);
  font-weight: 600;
}
.fc-kanban-card-timer {
  width: 28px;
  height: 28px;
}
.fc-kanban-card-timer .material-icons-round { font-size: 16px; }

/* Quick-Add-Feld */
.fc-kanban-quickadd {
  background: var(--fc-surface-container-lowest);
  border: 1px solid var(--fc-primary-container);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-2);
}
.fc-kanban-quickadd .fc-input {
  width: 100%;
  border: none;
  padding: var(--fc-space-2);
  font-size: var(--fc-font-body-md);
  background: transparent;
}
.fc-kanban-quickadd .fc-input:focus {
  outline: none;
  box-shadow: none;
}


/* Update v1.8.0: Kanban-Spalte Inline-Rename + Add-Column */
.fc-kanban-column-name-input {
  font-weight: 600;
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  padding: 2px 4px;
  border: 1px solid var(--fc-outline-variant);
  border-radius: 2px;
  background: var(--fc-surface-container-lowest);
  font-family: inherit;
}

.fc-kanban-column-name-input:focus {
  outline: none;
  border-color: var(--fc-tertiary);
  box-shadow: 0 0 0 1px var(--fc-tertiary);
}

/* Add-Column-Button am Ende des Kanban-Board */
.fc-kanban-add-column-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
  transition: all 200ms ease;
  gap: 8px;
}

.fc-kanban-add-column-btn:hover {
  background: var(--fc-surface-container-low);
  border-color: var(--fc-tertiary);
  color: var(--fc-tertiary);
}

.fc-kanban-add-column-btn .material-icons-round {
  font-size: 20px;
}

.fc-kanban-add-column-input-wrapper {
  display: flex;
  align-items: center;
  min-width: 280px;
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px solid var(--fc-tertiary);
  border-radius: 4px;
}

.fc-kanban-add-column-input {
  flex: 1;
  font-size: var(--fc-font-body-md);
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  color: var(--fc-on-surface);
}

.fc-kanban-add-column-input:focus {
  outline: none;
}

.fc-kanban-add-column-input::placeholder {
  color: var(--fc-on-surface-variant);
}

/* Update v1.8.1: Spalten-Drag-Handle + Sortable-States */
.fc-kanban-column-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: grab;
  color: var(--fc-on-surface-variant);
  opacity: 0.4;
  transition: opacity 120ms ease;
  flex-shrink: 0;
}
.fc-kanban-column-drag-handle:hover {
  opacity: 0.8;
}
.fc-kanban-column-drag-handle:active {
  cursor: grabbing;
}
.fc-kanban-column-drag-handle .material-icons-round {
  font-size: 16px;
}
.fc-kanban-column.is-dragging {
  opacity: 0.4;
}
.fc-kanban-column-drag-overlay {
  width: 280px;
  opacity: 0.85;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   AUFGABEN-DETAIL-PANEL (Phase 11)
   Update v1.2.6: Slide-in-Panel von rechts mit Inline-Edit,
   Unteraufgaben, Anhängen und Kommentaren.
   ========================================================= */

.fc-task-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.45);
  z-index: 9990;
  animation: fc-fade-in 160ms ease;
}
/* Update v1.7.7: Panel-Breite auf 50% der Seitenbreite (Desktop) */
.fc-task-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
  max-width: 100%;
  background: var(--fc-surface-container-lowest);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  z-index: 9991;
  animation: fc-panel-slide-in 220ms ease;
}
@keyframes fc-panel-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.fc-task-panel-header {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-2);
  padding: var(--fc-space-4) var(--fc-space-5);
  border-bottom: 1px solid var(--fc-outline-variant);
}
.fc-task-panel-header-title {
  flex: 1 1 auto;
  min-width: 0;
}
.fc-task-panel-title {
  font-size: var(--fc-font-headline-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fc-on-surface);
  word-break: break-word;
  cursor: text;
  padding: var(--fc-space-1) var(--fc-space-2);
  border-radius: var(--fc-radius);
  border: 1px solid transparent;
  transition: border-color var(--fc-transition), background var(--fc-transition);
  margin: calc(var(--fc-space-1) * -1) calc(var(--fc-space-2) * -1);
}
.fc-task-panel-title:hover {
  border-color: rgba(0, 0, 0, 0.08);
  background: var(--fc-surface-container-low);
}
.fc-task-panel-title-input {
  width: 100%;
  font-size: var(--fc-font-headline-sm);
  font-weight: 600;
  line-height: 1.25;
  padding: var(--fc-space-1) var(--fc-space-2);
  border: 1px solid var(--fc-primary-container);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  margin: calc(var(--fc-space-1) * -1) calc(var(--fc-space-2) * -1);
}
.fc-task-panel-subtitle {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  margin-top: var(--fc-space-1);
}
/* Update v2.0.7: Erstellt/Geändert rechts neben DETAILS-Überschrift */
.fc-task-panel-dates {
  display: inline-flex;
  gap: var(--fc-space-4);
  font-size: var(--fc-font-label-md);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--fc-on-surface-variant);
  margin-left: auto;
}
.fc-task-panel-date-label {
  font-weight: 600;
  color: var(--fc-on-surface);
}
.fc-task-panel-actions {
  display: inline-flex;
  gap: var(--fc-space-2);
  align-items: center;
  flex-shrink: 0;
}
.fc-task-panel-timer {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: var(--fc-primary-container);
  color: var(--fc-on-primary);
  cursor: pointer;
  transition: opacity var(--fc-transition);
}
.fc-task-panel-timer:hover { opacity: 0.9; }
.fc-task-panel-timer .material-icons-round { font-size: 20px; }
.fc-task-panel-close {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface-variant);
  transition: background var(--fc-transition), color var(--fc-transition);
}
.fc-task-panel-close:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
}

.fc-task-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--fc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-6);
}

/* Metadaten-Leiste */
.fc-task-panel-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--fc-space-3) var(--fc-space-4);
  align-items: center;
}
.fc-task-panel-meta-label {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);

}
.fc-task-panel-meta-value {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.fc-task-panel-meta-value .fc-select,
.fc-task-panel-meta-value .fc-input {
  width: 100%;
}

/* Update v1.9.4: Kompaktes Metadaten-Grid (3 Spalten, 2 Zeilen) */
.fc-task-panel-meta-compact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--fc-space-2);
}
.fc-task-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fc-task-meta-cell-label {
  font-size: var(--fc-font-label-sm, 11px);
  color: var(--fc-on-surface-variant);

  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Update v1.9.5: Avatar-Wrapper entfernt, einheitliche Feldhöhen */

/* Kleine Selects und Inputs im Detail-Panel – Höhe orientiert sich am
   nativen date-Input (Browser-Chrome + Kalender-Icon bestimmen die Höhe).
   Alle Felder im Meta-Grid bekommen dieselbe Höhe. */
.fc-task-panel-meta-compact .fc-select,
.fc-task-panel-meta-compact select,
.fc-task-panel-meta-compact input,
.fc-select-sm,
.fc-input-sm {
  padding: 6px 8px;
  font-size: var(--fc-font-body-sm, 13px);
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  box-sizing: border-box;
  line-height: 1.4;
}

/* Create-Mode Erstellen-Button */
.fc-task-panel-create-actions {
  padding: var(--fc-space-3) 0;
  display: flex;
  gap: var(--fc-space-2);
}
.fc-task-panel-create-actions .fc-btn-primary {
  flex: 1;
}

/* Abschnittsüberschrift */
.fc-task-panel-section-title {
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fc-on-surface-variant);
  margin: 0 0 var(--fc-space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

/* Beschreibung */
.fc-task-panel-description-view {
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  min-height: 72px;
  cursor: text;
  /* Update v2.4.4: white-space:pre-wrap entfernt – plainTextToHtml()
     konvertiert \n jetzt zu <br>/<p>, pre-wrap würde doppelte Umbrüche erzeugen */
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  line-height: 1.5;
}
.fc-task-panel-description-view.is-empty {
  color: var(--fc-on-surface-variant);
  font-style: normal;
}
.fc-task-panel-description-view:hover {
  border-color: rgba(0, 0, 0, 0.15);
}
.fc-task-panel-description-input {
  width: 100%;
  min-height: 120px;
  padding: var(--fc-space-3);
  border: 1px solid var(--fc-primary-container);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  line-height: 1.5;
  resize: vertical;
}

/* Unteraufgaben */
.fc-subtask-progress {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-3);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}
.fc-subtask-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--fc-surface-container-high);
  border-radius: 3px;
  overflow: hidden;
}
.fc-subtask-progress-bar-fill {
  height: 100%;
  background: var(--fc-tertiary);
  transition: width 240ms ease;
}
.fc-subtask-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  margin-bottom: var(--fc-space-3);
}
.fc-subtask-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  transition: background var(--fc-transition);
}
.fc-subtask-item:hover {
  background: var(--fc-surface-container-low);
}
/* Update v2.5.9: Native Checkbox durch fc-task-check Icon ersetzt */
.fc-subtask-item .fc-task-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.fc-subtask-item .fc-task-check .material-icons-round {
  font-size: 20px;
}
.fc-subtask-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface);
  word-break: break-word;
}
.fc-subtask-item.is-done .fc-subtask-item-title {
  text-decoration: line-through;
  color: var(--fc-on-surface-variant);
}
.fc-subtask-item-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fc-on-surface-variant);
  opacity: 0;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--fc-radius);
  transition: opacity var(--fc-transition), color var(--fc-transition);
}
.fc-subtask-item:hover .fc-subtask-item-delete { opacity: 1; }
.fc-subtask-item-delete:hover { color: var(--fc-error); }
.fc-subtask-item-delete .material-icons-round { font-size: 16px; }
.fc-subtask-add {
  display: flex;
  gap: var(--fc-space-2);
  align-items: center;
}
.fc-subtask-add-trigger {
  width: 100%;
  text-align: left;
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface-variant);
  cursor: pointer;
  font-size: var(--fc-font-body-sm);
  transition: border-color var(--fc-transition), color var(--fc-transition);
}
.fc-subtask-add-trigger:hover {
  border-color: var(--fc-primary-container);
  color: var(--fc-primary-container);
}

/* Anhänge */
.fc-attachment-dropzone {
  padding: var(--fc-space-4);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--fc-radius);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fc-transition), background var(--fc-transition);
  background: var(--fc-surface-container-low);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}
.fc-attachment-dropzone.is-dragging,
.fc-attachment-dropzone:hover {
  border-color: var(--fc-primary-container);
  color: var(--fc-primary-container);
}
.fc-attachment-dropzone .material-icons-round {
  display: block;
  font-size: 28px;
  margin-bottom: var(--fc-space-1);
}
.fc-attachment-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  margin-top: var(--fc-space-3);
}
.fc-attachment-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}
.fc-attachment-item-icon {
  color: var(--fc-tertiary);
  flex-shrink: 0;
}
.fc-attachment-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.fc-attachment-item-name {
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  text-decoration: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.fc-attachment-item-name:hover { color: var(--fc-primary-container); }
.fc-attachment-item-meta {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
}
.fc-attachment-item-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  flex-shrink: 0;
}
.fc-attachment-item-action {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fc-on-surface-variant);
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fc-radius);
  transition: color var(--fc-transition);
  text-decoration: none;
}
.fc-attachment-item-download:hover { color: var(--fc-tertiary); }
.fc-attachment-item-delete:hover { color: var(--fc-error); }
.fc-attachment-item-action .material-icons-round { font-size: 18px; }

/* Kommentare */
.fc-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-3);
}
.fc-comment-item {
  display: flex;
  gap: var(--fc-space-2);
  align-items: flex-start;
}
.fc-comment-body {
  flex: 1 1 auto;
  background: var(--fc-surface-container-low);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  min-width: 0;
}
.fc-comment-item-ai .fc-comment-body {
  border-color: rgba(0, 102, 123, 0.28);
  background: #f5fbfc;
}
.fc-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-1);
}
.fc-comment-name {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
}
.fc-comment-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--fc-space-2);
  padding: 1px var(--fc-space-1);
  border-radius: var(--fc-radius);
  background: var(--fc-tertiary);
  color: var(--fc-on-tertiary);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  vertical-align: middle;
}
.fc-comment-ai-badge .material-icons-round {
  font-size: 13px;
}
.fc-comment-time {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}
.fc-comment-content {
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-md);
  white-space: pre-wrap;
  line-height: 1.5;
  word-break: break-word;
}
.fc-comment-delete {
  margin-top: var(--fc-space-1);
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fc-on-surface-variant);
  cursor: pointer;
  font-size: var(--fc-font-body-sm);
}
.fc-comment-delete:hover { color: var(--fc-error); }
.fc-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}
.fc-comment-form textarea {
  min-height: 80px;
  resize: vertical;
}
.fc-comment-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--fc-space-2);
}

/* Update v1.4.3: Kommentar-Content zeigt HTML-Formatierung korrekt an */
.fc-comment-content { white-space: normal; }
.fc-comment-content p { margin: 0 0 0.5em 0; }
.fc-comment-content p:last-child { margin-bottom: 0; }
.fc-comment-content ul,
.fc-comment-content ol { margin: 0 0 0.5em 0; padding-left: 1.5em; }
.fc-comment-content a { color: var(--fc-tertiary); text-decoration: underline; }
.fc-comment-content strong { font-weight: 600; }

/* Update v3.3.44: Kommentar-Aktionen fuer Projekt-Memory-Suggestions */
.fc-comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-top: var(--fc-space-2);
}

.fc-comment-memory {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fc-tertiary);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
}

.fc-comment-memory .material-icons-round {
  font-size: 16px;
}

.fc-comment-memory:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   RICH TEXT EDITOR (Phase v1.4.3)
   ========================================================= */
.fc-rte {
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  overflow: visible; /* Update v1.9.7: visible statt hidden, damit Emoji-Picker sichtbar bleibt */
  position: relative; /* Update v1.9.7: Positionierungskontext für Emoji-Picker */
}
.fc-rte:focus-within {
  border-color: #00819B;
  box-shadow: 0 0 0 1px #00819B inset;
}
.fc-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--fc-surface-container-low);
}
.fc-rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
  cursor: pointer;
  transition: background var(--fc-transition), border-color var(--fc-transition);
}
.fc-rte-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
}
.fc-rte-btn:active {
  background: rgba(0, 0, 0, 0.1);
}
.fc-rte-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(0, 0, 0, 0.12);
}
.fc-rte-content {
  padding: var(--fc-space-3) var(--fc-space-4);
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface);
  line-height: 1.5;
  outline: none;
  overflow-y: auto;
  max-height: 400px;
}

.fc-rte-view {
  font-size: var(--fc-font-body-md);
  line-height: 1.5;
}

/* Update v3.3.4: Gegen Theme-Code-Styles absichern und Code auf normale Editor-Schrift setzen. */
#flowclock-root .fc-rte-content,
#flowclock-root .fc-rte-view {
  font-size: var(--fc-font-body-md) !important;
  line-height: 1.5 !important;
}
.fc-rte-content[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--fc-on-surface-variant);
  pointer-events: none;
}
.fc-rte-content p { margin: 0 0 0.5em 0; }
.fc-rte-content p:last-child { margin-bottom: 0; }
.fc-rte-content ul,
.fc-rte-content ol { margin: 0 0 0.5em 0; padding-left: 1.5em; }
.fc-rte-content a { color: var(--fc-tertiary); text-decoration: underline; }
.fc-rte-content strong { font-weight: 600; }
.fc-rte-content em { font-style: italic; }
.fc-rte-content u { text-decoration: underline; }

/* Update v1.9.7: Überschriften-Styles im Editor */
.fc-rte-content h2 { font-size: 1.25em; font-weight: 700; margin: 0.6em 0 0.3em 0; line-height: 1.3; }
.fc-rte-content h3 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0 0.25em 0; line-height: 1.3; }
.fc-rte-content h4 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em 0; line-height: 1.3; }
.fc-rte-content h2:first-child,
.fc-rte-content h3:first-child,
.fc-rte-content h4:first-child { margin-top: 0; }

/* Update v1.9.7: Überschriften-Dropdown in der Toolbar */
/* Update v1.9.8: width:auto + flex-shrink verhindert, dass das Dropdown die volle Breite einnimmt */
.fc-rte-heading-select {
  appearance: auto;
  border: 1px solid var(--fc-outline-variant);
  border-radius: 3px;
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  font-size: var(--fc-font-label-md);
  padding: 2px 4px;
  height: 26px;
  width: auto;
  flex: 0 0 auto;
  cursor: pointer;
  outline: none;
}
.fc-rte-heading-select:hover { border-color: var(--fc-on-surface-variant); }
.fc-rte-heading-select:focus { box-shadow: 0 0 0 1px #00819B inset; }

/* Update v1.9.7: Aktiver Button-Zustand (Emoji) */
.fc-rte-btn.is-active { background: var(--fc-surface-container-low); }

/* Update v1.9.7: Emoji-Picker-Popover */
.fc-rte-emoji-picker {
  position: static;
  z-index: 1;
  margin: 0;
  background: var(--fc-surface-container-lowest);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
}
.fc-rte-emoji-group { margin-bottom: 8px; }
.fc-rte-emoji-group:last-child { margin-bottom: 0; }
.fc-rte-emoji-group-label {
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.fc-rte-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 2px;
}
.fc-rte-emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
  border: none;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.fc-rte-emoji-btn:hover { background: var(--fc-surface-container-low); }

/* Toolbar muss position:relative für Emoji-Picker-Popover haben */
.fc-rte-toolbar { position: relative; }

/* Update v2.7.1: Farb-Picker-Popover */
.fc-rte-color-picker {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  padding: 8px;
  width: 240px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.fc-rte-color-picker-label {
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.fc-rte-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.fc-rte-color-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.fc-rte-color-btn:hover {
  transform: scale(1.15);
  border-color: var(--fc-on-surface);
}
.fc-rte-color-remove {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--fc-font-label-sm);
  color: var(--fc-on-surface-variant);
  border-radius: 3px;
  width: 100%;
}
.fc-rte-color-remove:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
}

/* Update v2.7.1: Bilder im RichTextEditor und in der Read-Ansicht */
.fc-rte-content img,
.fc-rte-view img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fc-radius);
  margin: 4px 0;
}

.fc-rte-content pre,
.fc-rte-view pre {
  position: relative;
  counter-reset: fc-code-line;
  margin: 0 0 0.75em;
  padding: var(--fc-space-2) 0;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: #1a1a2e;
  color: #f8f8f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: inherit;
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
}

#flowclock-root .fc-rte-content pre,
#flowclock-root .fc-rte-view pre,
#flowclock-root .fc-rte-content pre code,
#flowclock-root .fc-rte-view pre code,
#flowclock-root .fc-rte-code,
#flowclock-root .fc-code-line,
#flowclock-root .fc-code-line-content {
  font-size: inherit !important;
  line-height: 1.45 !important;
}

.fc-rte-content pre::before,
.fc-rte-view pre::before {
  content: attr(data-language);
  position: absolute;
  top: var(--fc-space-1);
  left: var(--fc-space-2);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.fc-rte-content pre {
  padding: var(--fc-space-6) var(--fc-space-3) var(--fc-space-3);
}

.fc-rte-content code,
.fc-rte-view code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.fc-rte-content pre code,
.fc-rte-view pre code {
  display: block;
  color: inherit;
}

/* Update v3.3.3: CodeMirror-Dialog, stabile Zeilennummern, Copy und Highlight.js-Styles */
.fc-rte-code {
  color: inherit;
}

.fc-rte-code-wrap {
  overflow: hidden;
  margin: 0 0 0.75em;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: #1a1a2e;
}

.fc-rte-code-wrap > pre {
  margin: 0;
  padding: var(--fc-space-1) 0 var(--fc-space-2);
  border: 0;
  border-radius: 0;
}

.fc-rte-code-wrap > pre::before {
  content: none;
}

.fc-rte-code-header {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
  padding: 0 var(--fc-space-2) 0 var(--fc-space-2);
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-label-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.fc-rte-view .fc-code-line {
  counter-increment: fc-code-line;
  display: grid;
  grid-template-columns: 2.75ch minmax(0, 1fr);
  gap: var(--fc-space-2);
  min-height: 1.45em;
  line-height: 1.45;
}

.fc-rte-view .fc-code-line::before {
  content: counter(fc-code-line);
  padding-left: 0;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.fc-rte-view .fc-code-line-content {
  min-width: 0;
  white-space: pre;
}

.fc-rte-code-copy {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--fc-radius);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.fc-rte-code-copy:hover,
.fc-rte-code-copy.is-copied {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.fc-rte-code-copy .material-icons-round {
  font-size: 16px;
}

.fc-rte-view .hljs-keyword,
.fc-rte-view .hljs-selector-tag,
.fc-rte-view .hljs-built_in,
.fc-rte-view .hljs-type {
  color: #ffb3ac;
  font-weight: 600;
}

.fc-rte-view .hljs-string,
.fc-rte-view .hljs-attr,
.fc-rte-view .hljs-template-variable {
  color: #b8e986;
}

.fc-rte-view .hljs-comment,
.fc-rte-view .hljs-quote {
  color: #9aa4b2;
  font-style: italic;
}

.fc-rte-view .hljs-number,
.fc-rte-view .hljs-literal,
.fc-rte-view .hljs-symbol {
  color: #8bd7ff;
}

.fc-rte-view .hljs-tag,
.fc-rte-view .hljs-name,
.fc-rte-view .hljs-selector-class {
  color: #ffd166;
}

.fc-rte-view .hljs-title,
.fc-rte-view .hljs-function,
.fc-rte-view .hljs-section {
  color: #9cdcfe;
}

.fc-rte-view .hljs-operator,
.fc-rte-view .hljs-punctuation {
  color: #f8f8f8;
}

.fc-rte-code-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fc-space-6);
  background: rgba(26, 26, 46, 0.58);
}

.fc-rte-code-dialog {
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-rte-code-dialog-header,
.fc-rte-code-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-rte-code-dialog-header label {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
  font-weight: 600;
}

.fc-rte-code-dialog-header .fc-select {
  min-width: 150px;
  height: 34px;
}

.fc-rte-code-dialog-editor {
  min-height: 360px;
  background: #1a1a2e;
}

.fc-rte-code-dialog-loading {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fc-font-label-lg);
}

.fc-rte-code-dialog-editor .cm-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--fc-font-body-md);
  line-height: 1.45;
}

#flowclock-root .fc-rte-code-dialog-editor .cm-editor,
#flowclock-root .fc-rte-code-dialog-editor .cm-scroller,
#flowclock-root .fc-rte-code-dialog-editor .cm-content,
#flowclock-root .fc-rte-code-dialog-editor .cm-line,
#flowclock-root .fc-rte-code-dialog-editor .cm-gutters,
#flowclock-root .fc-rte-code-dialog-editor .cm-gutter,
#flowclock-root .fc-rte-code-dialog-editor .cm-gutterElement {
  font-size: var(--fc-font-body-md) !important;
  line-height: 1.45 !important;
}

.fc-rte-code-dialog-editor .cm-scroller {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.45;
}

.fc-rte-code-dialog-editor .cm-line,
.fc-rte-code-dialog-editor .cm-gutterElement {
  line-height: 1.45;
}

.fc-rte-code-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 0;
  background: var(--fc-surface-container-low);
}

/* HTML-Ansicht (read-only) der Aufgabenbeschreibung */
.fc-rte-view p { margin: 0 0 0.5em 0; }
.fc-rte-view p:last-child { margin-bottom: 0; }
.fc-rte-view ul,
.fc-rte-view ol { margin: 0 0 0.5em 0; padding-left: 1.5em; }
.fc-rte-view a { color: var(--fc-tertiary); text-decoration: underline; }
.fc-rte-view strong { font-weight: 600; }
.fc-rte-view em { font-style: italic; }
/* Update v1.9.7: Überschriften-Styles in der Read-Only-Ansicht */
.fc-rte-view h2 { font-size: 1.25em; font-weight: 700; margin: 0.6em 0 0.3em 0; line-height: 1.3; }
.fc-rte-view h3 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0 0.25em 0; line-height: 1.3; }
.fc-rte-view h4 { font-size: 1em; font-weight: 600; margin: 0.4em 0 0.2em 0; line-height: 1.3; }
.fc-rte-view h2:first-child,
.fc-rte-view h3:first-child,
.fc-rte-view h4:first-child { margin-top: 0; }

/* Aufgabenliste (Phase 11 Task Page) */
/* Update v1.9.9: Filter-Felder schrumpfen, damit „Neue Aufgabe" immer rechts Platz hat */
.fc-tasks-filters {
  display: flex;
  gap: var(--fc-space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: var(--fc-space-2);
}
.fc-tasks-filters .fc-form-group {
  min-width: 120px;
  flex: 1 1 120px;
  max-width: 200px;
}

/* Update v3.4.0: Checkbox-Dropdowns mit normaler Select-Feldhoehe */
.fc-multi-select {
  position: relative;
  width: 100%;
}
.fc-multi-select-toggle {
  width: 100%;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  background-clip: padding-box;
  color: var(--fc-on-surface);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-body-md);
  line-height: 1.5;
  cursor: pointer;
  outline: none;
  box-shadow: none !important;
  text-align: left;
  transition: border-color var(--fc-transition), background var(--fc-transition);
  -webkit-appearance: none;
  appearance: none;
}
.fc-multi-select-toggle:hover {
  border-color: rgba(0, 0, 0, 0.32) !important;
}
.fc-multi-select-toggle:focus-visible,
.fc-multi-select-toggle.is-open {
  border-color: #00819B !important;
  box-shadow: none !important;
}
.fc-multi-select-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fc-multi-select-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-multi-select-toggle .material-icons-round {
  font-size: 18px;
  color: var(--fc-on-surface-variant);
  flex: 0 0 auto;
}
.fc-multi-select-menu {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--fc-space-2);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}
.fc-multi-select-group + .fc-multi-select-group {
  margin-top: var(--fc-space-2);
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.fc-multi-select-group-label {
  padding: 2px 6px 4px;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
  font-weight: 700;
  text-transform: uppercase;
}
.fc-multi-select-option {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-height: 30px;
  padding: 5px 6px;
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
}
.fc-multi-select-option:hover {
  background: var(--fc-surface-container-low);
}
.fc-multi-select-option input[type="checkbox"] {
  margin: 0;
  accent-color: var(--fc-tertiary);
}
.fc-multi-select-footer {
  margin-top: var(--fc-space-2);
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.fc-multi-select-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
}
.fc-multi-select-clear:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-primary-container);
}
.fc-multi-select-clear .material-icons-round {
  font-size: 16px;
}
/* Update v3.4.0: Aufgabenlisten-Filter gegen Theme-Buttonstyles absichern. */
#flowclock-root .fc-tasks-filters .fc-multi-select-toggle {
  position: relative;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: var(--fc-space-2) 40px var(--fc-space-2) var(--fc-space-3) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: var(--fc-radius) !important;
  background-color: var(--fc-surface-container-lowest) !important;
  color: var(--fc-on-surface) !important;
  font-family: var(--fc-font-family) !important;
  font-size: var(--fc-font-body-md) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  box-shadow: none !important;
}
#flowclock-root .fc-tasks-filters .fc-multi-select-toggle:hover {
  border-color: rgba(0, 0, 0, 0.32) !important;
  background-color: var(--fc-surface-container-lowest) !important;
}
#flowclock-root .fc-tasks-filters .fc-multi-select-toggle:focus-visible,
#flowclock-root .fc-tasks-filters .fc-multi-select-toggle.is-open {
  border-color: #00819B !important;
  background-color: var(--fc-surface-container-lowest) !important;
  box-shadow: none !important;
}
#flowclock-root .fc-tasks-filters .fc-multi-select-toggle .material-icons-round {
  position: absolute;
  right: 12px;
  color: #1f1f1f !important;
  pointer-events: none;
}
/* Update v1.8.5: table-layout:fixed, damit lange Titel die Tabelle nicht aufblähen.
   Die Titel-Spalte füllt den verbleibenden Platz und schneidet per Ellipsis ab. */
.fc-tasks-table {
  table-layout: fixed;
}
.fc-tasks-table tbody tr {
  cursor: default;
  position: relative;
}
/* Update v2.1.3: Tooltip-Fix – gehoverte Zeile über darüberliegender Zeile +
   kein Abschneiden am linken Tabellenrand.
   Problem: position:relative + z-index auf <tr> (display:table-row) erzeugt
   in Chrome keinen zuverlässigen Stacking-Kontext. Lösung: z-index auf die
   <td>-Zellen (display:table-cell) setzen – dort funktioniert es zuverlässig
   (genau wie bei den Status-/Priorität-Tooltips auf .fc-inline-editable).
   1) Gehoverte Zeile: alle <td> bekommen position:relative + z-index:2.
   2) Tooltips auf Check-Icons (ganz links) werden linksbündig positioniert,
      damit sie nicht am Tabellenrand abgeschnitten werden.
   3) Der umgebende .fc-table-wrap bleibt overflow:visible. */
.fc-tasks-table tbody tr:hover td {
  position: relative;
  z-index: 2;
}
.fc-table-wrap:has(.fc-tasks-table) {
  overflow: visible;
}
/* Update v2.4.7: Linksbündige Tooltips für Check-Icon, Drag-Handle und
   Tree-Toggle – identisches Pattern: left:0, transform:none, damit der
   Tooltip nicht am Tabellenrand abgeschnitten und nicht von der Zeile
   darüber verdeckt wird (z-index:2 auf tr:hover td erledigt den Rest). */
.fc-task-check[data-tooltip]:hover::after,
.fc-task-check[data-tooltip]:focus-visible::after,
.fc-task-drag-handle[data-tooltip]:hover::after,
.fc-task-drag-handle[data-tooltip]:focus-visible::after,
.fc-task-tree-toggle[data-tooltip]:hover::after,
.fc-task-tree-toggle[data-tooltip]:focus-visible::after {
  left: 0;
  transform: none;
  animation: fcTooltipInLeft 120ms ease-out forwards;
}
.fc-task-check[data-tooltip]:hover::before,
.fc-task-check[data-tooltip]:focus-visible::before,
.fc-task-drag-handle[data-tooltip]:hover::before,
.fc-task-drag-handle[data-tooltip]:focus-visible::before,
.fc-task-tree-toggle[data-tooltip]:hover::before,
.fc-task-tree-toggle[data-tooltip]:focus-visible::before {
  left: 12px;
  transform: none;
  animation: fcTooltipInLeft 120ms ease-out forwards;
}
@keyframes fcTooltipInLeft {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Update v1.7.9: Alte Prio-Icon-Styles entfernt – Priorität wird jetzt als Badge dargestellt. */
.fc-tasks-table .fc-overdue { color: var(--fc-error); font-weight: 600; }

/* Update v1.7.9: Inline-Edit-Zellen in Aufgabenlisten */
.fc-inline-editable {
  cursor: pointer;
  transition: background 120ms ease;
  border-radius: var(--fc-radius);
}
.fc-inline-editable:hover {
  background: var(--fc-surface-container-low);
}
.fc-inline-select {
  min-width: 120px;
  max-width: 180px;
  font-size: var(--fc-font-body-sm);
  padding: 2px 6px;
  height: 28px;
}
.fc-inline-input {
  min-width: 120px;
  max-width: 150px;
  font-size: var(--fc-font-body-sm);
  padding: 2px 6px;
  height: 28px;
}

@media (max-width: 900px) {
  .fc-task-panel {
    width: 100%;
  }
  .fc-task-panel-meta {
    grid-template-columns: 1fr;
    gap: var(--fc-space-1) 0;
  }
}

/* =========================================================
   TIMER-WIDGET (Header) – Phase 12
   Update v1.2.9: Phase 12 – Zeiterfassung & Header-Timer
   ========================================================= */

.fc-timer-widget-empty {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  user-select: none;
}

.fc-timer-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-1) var(--fc-space-3);
  background: var(--fc-primary-container);
  color: var(--fc-on-primary);
  border-radius: var(--fc-radius);
  max-width: 420px;
}

/* Update v2.0.8: .fc-timer-widget-time ist jetzt ein <button>, Basis-Styles verschoben in den Time-Wrap-Block unten */
.fc-timer-widget-time {
  font-size: var(--fc-font-title-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.fc-timer-widget-center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 140px;
  max-width: 280px;
}

.fc-timer-widget-title {
  background: transparent;
  border: none;
  color: var(--fc-on-primary);
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-timer-widget-title:hover {
  text-decoration: underline;
}

.fc-timer-widget-input {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: var(--fc-on-primary);
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--fc-radius-sm);
  max-width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fc-timer-widget-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.fc-timer-widget-project {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fc-font-body-sm);
  color: rgba(255, 255, 255, 0.85);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-timer-widget-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--fc-on-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--fc-transition);
}
.fc-timer-widget-stop:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.32);
}
.fc-timer-widget-stop:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.fc-timer-widget-stop .material-icons-round {
  font-size: 20px;
}

/* Update v2.0.8: Startzeit-Popup im Header-Timer-Widget */
.fc-timer-widget-time-wrap {
  position: relative;
}
.fc-timer-widget-time {
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  padding: 2px 4px;
  border-radius: var(--fc-radius-sm, 2px);
  transition: background var(--fc-transition);
}
.fc-timer-widget-time:hover {
  background: rgba(255, 255, 255, 0.15);
}
.fc-timer-starttime-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  white-space: nowrap;
  animation: fcStartTimePopupIn 120ms ease-out;
}
@keyframes fcStartTimePopupIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.fc-timer-starttime-popup::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--fc-surface-container-lowest);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.fc-timer-starttime-popup-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-timer-starttime-label {
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-timer-starttime-input {
  font-size: var(--fc-font-body-lg, 16px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  width: 100px;
  text-align: center;
}
.fc-timer-starttime-input:focus {
  outline: none;
  border-color: #00819B;
  box-shadow: 0 0 0 1px #00819B;
}
.fc-timer-starttime-date {
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface-variant);
}

/* =========================================================
   ZEITERFASSUNGS-SEITE – Phase 12
   ========================================================= */

/* Aktive Timer-Karte (grosse Darstellung) */
.fc-timer-card-active {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding: var(--fc-space-6);
  background: var(--fc-primary-container);
  color: var(--fc-on-primary);
  border-radius: var(--fc-radius);
}
.fc-timer-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-3);
}
.fc-timer-card-title {
  background: transparent;
  border: none;
  color: var(--fc-on-primary);
  font-size: var(--fc-font-title-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.fc-timer-card-title:hover {
  text-decoration: underline;
}
.fc-timer-card-title-input {
  background: rgba(255, 255, 255, 0.18);
  color: var(--fc-on-primary);
  font-size: var(--fc-font-title-lg);
  font-weight: 700;
  border-radius: var(--fc-radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.fc-timer-card-title-input:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.fc-timer-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--fc-space-2);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--fc-radius-sm);
  font-size: var(--fc-font-body-sm);
}
.fc-timer-card-actions {
  display: flex;
  justify-content: flex-end;
}
.fc-timer-card-stop {
  background: rgba(0, 0, 0, 0.25);
  color: var(--fc-on-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.fc-timer-card-stop:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Leerzustand mit Quick-Start */
.fc-timer-card-empty {
  padding: var(--fc-space-6);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}
.fc-timer-quickstart {
  display: grid;
  grid-template-columns: 1fr 260px auto;
  gap: var(--fc-space-4);
  align-items: end;
}
.fc-timer-quickstart-btn {
  height: 44px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .fc-timer-quickstart {
    grid-template-columns: 1fr;
  }
}

/* Tagesprotokoll */
.fc-timelog {
  margin-top: var(--fc-space-6);
}
/* Update v1.7.6: overflow entfernt fuer Tooltip-Sichtbarkeit */
.fc-timelog-day {
  margin-top: var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}
.fc-timelog-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-2) var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.fc-timelog-day-label {
  font-weight: 600;
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface);
}
.fc-timelog-day-total {
  color: var(--fc-on-surface-variant);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Update v3.3.89: Manueller Zeiteintrag mit engerem Label-Abstand und eigener Zeitzeile */
.fc-manual-entry-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}

.fc-manual-entry-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--fc-space-4);
  row-gap: var(--fc-space-5);
  align-items: start;
}

.fc-manual-entry-group {
  gap: 2px;
}

.fc-manual-entry-half,
.fc-manual-entry-third {
  min-width: 0;
}

.fc-manual-entry-time-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .fc-manual-entry-row {
    grid-template-columns: 1fr;
  }
}

.fc-timelog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Update v1.3.5: Farbstreifen links pro Zeile in Projektfarbe
   (Farbe wird inline via CSS-Variable --fc-row-color gesetzt). */
.fc-timelog-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  padding: var(--fc-space-3) var(--fc-space-4);
  padding-left: calc(var(--fc-space-4) + 8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background var(--fc-transition);
}
.fc-timelog-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc-row-color, transparent);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.fc-timelog-item:last-child {
  border-bottom: none;
}
.fc-timelog-item:hover {
  background: var(--fc-surface-container-low);
}
.fc-timelog-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fc-timelog-title {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-timelog-title:hover {
  text-decoration: underline;
}
.fc-timelog-title-input {
  max-width: 340px;
}
.fc-timelog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}
/* Update v1.7.7: fc-timelog-chip ist jetzt ein Button (Projekt ändern) */
.fc-timelog-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--fc-surface-container);
  border-radius: var(--fc-radius-sm);
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fc-transition), border-color var(--fc-transition);
}
.fc-timelog-chip:hover {
  background: var(--fc-surface-container-lowest);
  border-color: rgba(0, 0, 0, 0.12);
}
.fc-timelog-task {
  color: var(--fc-on-surface-variant);
}
.fc-timelog-time {
  color: var(--fc-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.fc-timelog-item-right {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  flex-shrink: 0;
}
.fc-timelog-duration {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}
.fc-timelog-duration:hover {
  background: var(--fc-surface-container);
  border-radius: var(--fc-radius-sm);
}
.fc-timelog-duration-input {
  width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fc-timelog-billable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--fc-surface-container);
  color: var(--fc-on-surface-variant);
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  transition: background var(--fc-transition), color var(--fc-transition);
}
.fc-timelog-billable:hover {
  background: var(--fc-surface-container-high);
}
.fc-timelog-billable.is-active {
  background: var(--fc-tertiary);
  color: var(--fc-on-tertiary);
}

/* Update v1.7.8: Roter Play-Button im Tagesprotokoll – gefuellt wie ueberall */
.fc-timelog-play-btn {
  background: var(--fc-primary-container);
  color: var(--fc-on-primary);
  border-color: var(--fc-primary-container);
  border-radius: var(--fc-radius);
}
.fc-timelog-play-btn:hover {
  background: #c02d2d;
  color: var(--fc-on-primary);
  border-color: #c02d2d;
}
/* Update v1.7.7: Projekt-Select im Tagesprotokoll */
.fc-timelog-project-select {
  min-width: 140px;
  max-width: 220px;
  font-size: var(--fc-font-label-md);
  padding: 2px 6px;
}
.fc-timelog-more {
  display: flex;
  justify-content: center;
  margin-top: var(--fc-space-4);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  .fc-app-shell {
    grid-template-columns: 1fr;
  }

  /* Update v2.3.6: Hamburger-Menü-Button anzeigen */
  .fc-header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Update v2.3.6: Sidebar als Overlay (70% Breite, von links hereinfahren) */
  .fc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70%;
    max-width: 320px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }
  .fc-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }

  /* Update v2.3.6: Backdrop hinter der mobilen Sidebar */
  .fc-sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }

  .fc-header {
    padding: var(--fc-space-3) var(--fc-space-4);
  }
  .fc-main {
    padding: var(--fc-space-4);
  }
  .fc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .fc-grid-3 { grid-template-columns: 1fr; }

  .fc-definition-list > div {
    grid-template-columns: 1fr;
    gap: var(--fc-space-1);
  }
  .fc-kanban-column {
    flex-basis: 260px;
    width: 260px;
  }

  .fc-timer-widget-center {
    display: none;
  }
  .fc-timelog-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .fc-timelog-item-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================================================
   METRIKKARTEN-ABSCHNITT (v1.3.2)
   Oberhalb des Tagesprotokolls; 1:1 aus der Designvorlage
   (layout/flowclock-design-template.html – „Metrikkarten").
   ========================================================= */
.fc-metric-section {
  /* Update v1.5.2: Abstand oben und unten halbiert. */
  margin-top: var(--fc-space-3);
  margin-bottom: var(--fc-space-2);
}
.fc-metric-section-title {
  font-size: var(--fc-font-label-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fc-on-surface-variant);
  margin: 0 0 var(--fc-space-3) 0;
}
.fc-metric-grid {
  gap: var(--fc-space-4);
}

/* Rote Timer-Kachel als Teil der Metrikkarten */
.fc-metric-timer-card {
  background: var(--fc-primary-container) !important;
  color: var(--fc-on-primary);
  border-color: transparent !important;
}
.fc-metric-timer-card .fc-metric-label,
.fc-metric-timer-label {
  color: var(--fc-on-primary);
  opacity: 0.85;
}
.fc-metric-timer-display {
  font-size: var(--fc-font-display-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: var(--fc-space-1);
  color: var(--fc-on-primary);
  font-variant-numeric: tabular-nums;
}
.fc-metric-timer-subtitle {
  font-size: var(--fc-font-body-sm);
  margin-top: var(--fc-space-2);
  color: var(--fc-on-primary);
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .fc-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fc-task-panel-meta-compact {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   TAGESPROTOKOLL – Inline-Edit für Zeit & Datum (v1.3.2)
   ========================================================= */
.fc-timelog-time-btn,
.fc-timelog-date-btn {
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-radius: var(--fc-radius-sm);
}
.fc-timelog-time-btn:hover,
.fc-timelog-date-btn:hover {
  background: var(--fc-surface-container);
  color: var(--fc-on-surface);
}
.fc-timelog-time-sep,
.fc-timelog-sep {
  color: var(--fc-on-surface-variant);
  padding: 0 2px;
}
/* Update v1.3.5: Zeit-Input breiter, damit Stunden UND Minuten + Uhr-Icon
   in allen Browsern vollständig sichtbar sind. */
.fc-timelog-time-input {
  width: auto;
  min-width: 120px;
  max-width: 140px;
  padding: 2px 8px;
  font-size: var(--fc-font-body-sm);
  font-variant-numeric: tabular-nums;
}
/* Chrome-spezifisch: nativer Inhalt des time-Inputs nicht abschneiden. */
.fc-timelog-time-input::-webkit-datetime-edit {
  padding: 0;
}
.fc-timelog-date-input {
  width: auto;
  min-width: 140px;
  max-width: 170px;
  padding: 2px 8px;
  font-size: var(--fc-font-body-sm);
}

/* =========================================================
   AUTOCOMPLETE-DROPDOWN (v1.3.3)
   Wird im Quick-Start-Titelfeld der Zeiterfassung verwendet:
   zeigt Vorschläge aus bereits vorhandenen Zeiteinträgen.
   ========================================================= */
.fc-autocomplete {
  position: relative;
  flex: 1;
  min-width: 0;
}
.fc-autocomplete .fc-input {
  width: 100%;
}
.fc-autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  max-height: 260px;
  overflow-y: auto;
}
.fc-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-autocomplete-item:hover,
.fc-autocomplete-item.is-highlight {
  background: var(--fc-surface-container-low);
}
.fc-autocomplete-item.is-highlight {
  box-shadow: inset 3px 0 0 0 #00819B;
}
.fc-autocomplete-title {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-autocomplete-meta {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-autocomplete-empty {
  padding: 8px 12px;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}

/* =========================================================
   DASHBOARD-SEITE
   Update v1.3.7: Dashboard auf reine Metrikkarten-Ansicht
   reduziert. Alle zuvor angelegten Projektkacheln-, Filter-,
   Grid-, Balken- und Skeleton-Styles wurden entfernt; die
   Neugestaltung folgt in einer späteren Iteration.
   ========================================================= */

.fc-dashboard-page {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}

/* =========================================================
   BERICHTE-SEITE (Phase 14, Update v1.3.8)
   ========================================================= */

.fc-reports-page {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}

/* ---------- Filter-Leiste ---------- */
.fc-report-filters {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4) var(--fc-space-5);
}
.fc-report-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fc-space-3);
}
.fc-report-filter-label {
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 90px;
}
.fc-report-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
}
.fc-report-filter-inline {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}
.fc-report-filter-sep {
  color: var(--fc-on-surface-variant);

}
.fc-report-date-input {
  min-width: 150px;
}
.fc-report-filter-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fc-space-3);
}
.fc-report-filter-selects .fc-report-filter-label {
  display: block;
  min-width: 0;
  margin-bottom: var(--fc-space-1);
}
.fc-report-filter-field {
  display: flex;
  flex-direction: column;
}
.fc-report-filter-actions {
  display: flex;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* ---------- Diagramme ---------- */
.fc-report-charts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--fc-space-4);
}
@media (max-width: 1000px) {
  .fc-report-charts {
    grid-template-columns: 1fr;
  }
}
.fc-report-chart-card {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4) var(--fc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  min-width: 0;
}
.fc-report-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}
.fc-report-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-6) var(--fc-space-4);
  color: var(--fc-on-surface-variant);
  text-align: center;
  min-height: 200px;
}
.fc-report-chart-empty .material-icons-round {
  font-size: 40px;
  opacity: 0.4;
}

/* Balkendiagramm */
.fc-report-barchart-wrapper {
  position: relative;
  width: 100%;
}
.fc-report-barchart {
  width: 100%;
  height: auto;
  display: block;
}
.fc-report-chart-tooltip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--fc-on-surface);
  color: #ffffff;
  padding: var(--fc-space-2) var(--fc-space-3);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
  min-width: 180px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 200;
}

/* =========================================================
   GLOBALER TOOLTIP (v1.5.3)
   Wird überall da angezeigt, wo ein Element `data-tooltip`
   gesetzt hat. Ersetzt die nativen, weißen Browser-Tipps.
   ========================================================= */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fc-on-surface);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  opacity: 0;
  animation: fcTooltipIn 120ms ease-out forwards;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--fc-on-surface);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  animation: fcTooltipIn 120ms ease-out forwards;
}
@keyframes fcTooltipIn {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Tooltip nach unten klappen, wenn das Element oben anklebt.
   Wird über die Marker-Klasse `data-tooltip-position="bottom"` erzwungen. */
[data-tooltip][data-tooltip-position="bottom"]:hover::after,
[data-tooltip][data-tooltip-position="bottom"]:focus-visible::after {
  bottom: auto;
  top: calc(100% + 8px);
}
[data-tooltip][data-tooltip-position="bottom"]:hover::before,
[data-tooltip][data-tooltip-position="bottom"]:focus-visible::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--fc-on-surface);
}
/* Update v2.0.9: Tooltip rechts vom Element */
[data-tooltip][data-tooltip-position="right"]:hover::after,
[data-tooltip][data-tooltip-position="right"]:focus-visible::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(-50%);
}
[data-tooltip][data-tooltip-position="right"]:hover::before,
[data-tooltip][data-tooltip-position="right"]:focus-visible::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 4px);
  right: auto;
  transform: translateY(-50%) rotate(45deg);
  border-color: transparent;
  border-right-color: var(--fc-on-surface);
  border-top-color: var(--fc-on-surface);
}
.fc-report-chart-tooltip-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.fc-report-chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--fc-space-2);
  text-align: left;
}
/* Update v1.5.3: Projekt-Titel linksbündig, Stundenwert rechtsbündig. */
.fc-report-chart-tooltip-row > span:not(.fc-dashboard-overview-tooltip-swatch) {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-report-chart-tooltip-row > strong {
  margin-left: auto;
  white-space: nowrap;
}
.fc-report-chart-legend {
  display: flex;
  justify-content: center;
  gap: var(--fc-space-4);
  flex-wrap: wrap;
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.fc-report-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
}
.fc-report-chart-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Kreisdiagramm */
.fc-report-piechart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-3);
}
.fc-report-piechart {
  width: 200px;
  height: 200px;
}
.fc-report-piechart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fc-report-piechart-legend-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: var(--fc-space-2);
  padding: 6px 8px;
  border-radius: var(--fc-radius);
  cursor: pointer;
  font-size: var(--fc-font-body-sm);
  transition: background var(--fc-transition);
}
.fc-report-piechart-legend-item:hover {
  background: var(--fc-surface-container-low);
}
.fc-report-piechart-legend-item.is-active {
  background: var(--fc-surface-container-low);
  box-shadow: inset 3px 0 0 0 var(--fc-primary-container);
}
.fc-report-piechart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.fc-report-piechart-legend-title {
  font-weight: 600;
  color: var(--fc-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-report-piechart-legend-meta {
  color: var(--fc-on-surface-variant);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fc-report-piechart-legend-sub {
  grid-column: 2 / 4;
  font-size: var(--fc-font-label-sm);
  color: var(--fc-on-surface-variant);
  margin-top: -2px;
}

/* ---------- Tabelle ---------- */
.fc-report-table th {
  user-select: none;
}
.fc-report-th-sortable:hover {
  color: var(--fc-on-surface);
}
.fc-report-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fc-report-sort-icon {
  font-size: 16px !important;
  color: var(--fc-on-surface-variant);
  opacity: 0.5;
}
.fc-report-sort-icon.is-active {
  color: var(--fc-primary-container);
  opacity: 1;
}
.fc-report-user-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
}
.fc-report-table-loading {
  padding: var(--fc-space-6) 0;
  display: flex;
  justify-content: center;
}
.fc-report-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-2) 0 0 0;
  flex-wrap: wrap;
}
.fc-report-pagination-controls {
  display: flex;
  gap: var(--fc-space-2);
}

/* ─────────────────────────────────────────────
   EINSTELLUNGEN-SEITE (Phase 15, v1.3.9)
   ───────────────────────────────────────────── */

.fc-settings-page {
  max-width: 1040px;
}

/* Update v3.3.92: Settings-Navigation als kompakte Tabs. */
.fc-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-4);
}

.fc-settings-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-height: 40px;
  padding: var(--fc-space-2) var(--fc-space-4);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-label-lg);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fc-transition), border-color var(--fc-transition), color var(--fc-transition);
}

.fc-settings-tab:hover {
  background: var(--fc-surface-container-low);
}

.fc-settings-tab.is-active {
  border-color: var(--fc-tertiary);
  background: rgba(0, 102, 123, 0.08);
  color: var(--fc-tertiary);
}

.fc-settings-tab .material-icons-round {
  font-size: 19px;
}

.fc-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}

.fc-settings-section {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-5);
}

.fc-settings-section-title {
  margin: 0 0 var(--fc-space-4) 0;
  padding-bottom: var(--fc-space-3);
  border-bottom: 1px solid var(--fc-outline-variant);
}

.fc-settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-3);
  cursor: pointer;
  user-select: none;
}

.fc-settings-toggle input[type='checkbox'] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--fc-tertiary);
  cursor: pointer;
}

.fc-settings-toggle span {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
}

.fc-settings-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-2);
}

.fc-settings-checkbox {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fc-settings-checkbox:hover {
  background: var(--fc-surface-container-low);
}

.fc-settings-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--fc-tertiary);
  cursor: pointer;
}

.fc-settings-checkbox:has(input[type='checkbox']:checked) {
  border-color: var(--fc-tertiary);
  background: rgba(0, 102, 123, 0.05);
}

.fc-settings-about {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--fc-space-4);
  row-gap: var(--fc-space-2);
  margin: 0;
}

.fc-settings-about dt {
  font-weight: 600;
  color: var(--fc-on-surface-variant);
}

.fc-settings-about dd {
  margin: 0;
  color: var(--fc-on-surface);
}

.fc-settings-about a {
  color: var(--fc-tertiary);
  text-decoration: none;
}

.fc-settings-about a:hover {
  text-decoration: underline;
}

.fc-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fc-space-3);
  padding-top: var(--fc-space-3);
}

/* Update v3.3.43: K2-7 KI-Agentenverwaltung in den Einstellungen */
.fc-ai-agent-settings {
  margin-top: var(--fc-space-4);
}

.fc-ai-agent-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-4);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-agent-settings-header .fc-settings-section-title {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-2);
}

.fc-ai-agent-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-agent-metrics span {
  display: inline-flex;
  gap: var(--fc-space-1);
  align-items: center;
  padding: var(--fc-space-1) var(--fc-space-2);
  background: var(--fc-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
}

.fc-ai-agent-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(160px, 220px);
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-agent-table-wrap {
  margin-top: var(--fc-space-3);
}

.fc-ai-agent-table td {
  vertical-align: top;
}

.fc-ai-agent-meta,
.fc-ai-agent-limits,
.fc-ai-agent-tools {
  display: block;
  margin-top: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-ai-agent-secret-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  margin-top: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-ai-agent-secret-status .material-icons-round {
  font-size: 16px;
}

.fc-ai-agent-secret-status.is-configured {
  color: var(--fc-tertiary);
}

.fc-ai-agent-secret-status.is-missing {
  color: var(--fc-error);
}

.fc-ai-agent-token-box,
.fc-ai-agent-test-result,
.fc-ai-agent-handoff-note,
.fc-ai-agent-secret-panel,
.fc-ai-agent-cost-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-ai-agent-token-box {
  flex-wrap: wrap;
  margin-bottom: var(--fc-space-3);
  border-color: var(--fc-tertiary);
  background: rgba(0, 102, 123, 0.06);
}

.fc-ai-agent-token-box code {
  flex: 1 1 260px;
  min-width: 0;
  padding: var(--fc-space-2) var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-body-sm);
  word-break: break-all;
  user-select: all;
}

.fc-ai-agent-test-result {
  align-items: center;
  margin-bottom: var(--fc-space-3);
}

.fc-ai-agent-test-result.is-success {
  border-color: var(--fc-tertiary);
  background: rgba(0, 102, 123, 0.06);
}

.fc-ai-agent-test-result.is-error {
  border-color: var(--fc-error);
  background: var(--fc-error-container);
  color: var(--fc-on-error-container);
}

.fc-ai-agent-handoff-note .material-icons-round {
  color: var(--fc-tertiary);
}

.fc-ai-agent-secret-panel {
  flex-direction: column;
}

.fc-ai-agent-cost-panel {
  flex-direction: column;
  width: 100%;
  border-color: rgba(0, 102, 123, 0.24);
  background: rgba(0, 102, 123, 0.06);
}

.fc-ai-agent-cost-header {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-2);
}

.fc-ai-agent-cost-header .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 22px;
  line-height: 1;
}

.fc-ai-agent-cost-header h4 {
  margin: 0 0 var(--fc-space-1);
  font-size: var(--fc-font-title-sm);
  font-weight: 700;
  color: var(--fc-on-surface);
}

.fc-ai-agent-cost-header .fc-hint {
  display: block;
}

.fc-ai-agent-cost-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fc-space-3);
  width: 100%;
}

.fc-ai-agent-secret-panel > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-ai-agent-secret-controls {
  display: flex;
  gap: var(--fc-space-2);
  width: 100%;
}

.fc-ai-agent-secret-controls .fc-input {
  flex: 1;
}

.fc-ai-agent-system-prompt {
  min-height: 160px;
  line-height: 1.5;
}

.fc-ai-agent-inline-control {
  display: flex;
  gap: var(--fc-space-2);
}

.fc-ai-agent-inline-control .fc-select {
  flex: 1;
}

.fc-ai-agent-form-actions {
  margin: var(--fc-space-5) calc(var(--fc-space-5) * -1) calc(var(--fc-space-5) * -1);
}

/* Update v3.3.44: K2-8 Queue-Monitor in den Einstellungen */
.fc-ai-queue-monitor {
  margin-top: var(--fc-space-4);
}

.fc-ai-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-4);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-queue-header .fc-settings-section-title {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-2);
}

.fc-ai-queue-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-2);
}

.fc-ai-queue-usage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-queue-metrics span,
.fc-ai-queue-usage span {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  padding: var(--fc-space-1) var(--fc-space-2);
  background: var(--fc-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
}

.fc-ai-queue-usage span {
  gap: var(--fc-space-2);
  color: var(--fc-on-surface-variant);
}

.fc-ai-queue-usage strong {
  color: var(--fc-on-surface);
}

.fc-ai-queue-filters {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(180px, 1fr) minmax(150px, 180px) minmax(120px, 160px);
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-4);
}

.fc-ai-queue-table td {
  vertical-align: top;
}

.fc-ai-queue-meta {
  display: block;
  margin-top: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-ai-queue-error {
  margin-top: var(--fc-space-2);
  color: var(--fc-on-error-container);
  font-size: var(--fc-font-body-sm);
}

.fc-ai-queue-error summary {
  cursor: pointer;
  color: var(--fc-error);
}

.fc-ai-queue-error p {
  margin: var(--fc-space-1) 0 0;
  padding: var(--fc-space-2);
  background: var(--fc-error-container);
  border-radius: var(--fc-radius);
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .fc-settings-about {
    grid-template-columns: 1fr;
  }

  .fc-ai-agent-settings-header,
  .fc-ai-queue-header,
  .fc-ai-agent-inline-control,
  .fc-ai-agent-secret-controls,
  .fc-ai-agent-cost-fields {
    flex-direction: column;
  }

  .fc-ai-agent-cost-fields {
    display: flex;
  }

  .fc-ai-agent-filters,
  .fc-ai-queue-filters {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PROJEKTDETAIL – EINZEILIGER HEADER (v1.4.5)
   Titel und Meta (Kunde, Status, Fälligkeit) stehen in einer
   Zeile. Auf schmalen Ansichten bricht die Meta-Zeile unter
   den Titel.
   ========================================================= */
.fc-project-detail-header.is-single-line {
  padding: var(--fc-space-3) var(--fc-space-5) var(--fc-space-3) var(--fc-space-6);
}
.fc-project-detail-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-4);
}
.fc-project-detail-title {
  margin: 0;
}
.fc-project-detail-header.is-single-line .fc-project-detail-meta {
  margin-left: 0;
}

@media (max-width: 720px) {
  .fc-project-detail-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fc-space-2);
  }
}

/* =========================================================
   PROJEKTDETAIL – AUFGABEN-TAB (v1.4.5)
   Filter oberhalb der Tabelle, identisch zu TasksPage.
   ========================================================= */
.fc-project-tasks-tab {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

/* Update v3.3.44: Projekt-Memory-Tab fuer K2-Suggestions */
.fc-project-memory-tab {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}

.fc-project-memory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  align-items: end;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-project-memory-reload {
  min-height: 38px;
}

.fc-project-memory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fc-space-4);
}

.fc-project-memory-panel {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
  min-width: 0;
  padding: var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-project-memory-panel-head,
.fc-project-memory-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-3);
}

.fc-project-memory-panel-head h3,
.fc-project-memory-item-head h4 {
  margin: 0;
}

.fc-project-memory-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding-bottom: var(--fc-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-project-memory-textarea {
  min-height: 104px;
  resize: vertical;
}

.fc-project-memory-form-actions,
.fc-project-memory-suggestion-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fc-space-2);
}

.fc-project-memory-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-project-memory-item {
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-project-memory-item p {
  margin: var(--fc-space-3) 0 0;
  color: var(--fc-on-surface);
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .fc-project-memory-layout,
  .fc-project-memory-toolbar {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ERLEDIGT-CHECKBOX + SORTIER-ICONS (v1.4.7)
   ========================================================= */

/* Sortier-Icons aller Listen auf einer Baseline mit dem Label. */
.fc-th-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  min-height: 20px;
}
.fc-th-label {
  display: inline-block;
}
.fc-sort-icon {
  font-size: 16px !important;
  color: var(--fc-on-surface-variant);
  opacity: 0.5;
  line-height: 1;
}
.fc-sort-icon.is-active {
  color: var(--fc-primary-container);
  opacity: 1;
}

/* Tabellen-Header mit nur einem Sortier-Icon (z. B. Priorität)
   bekommt keinen Label-Abstand und wird zentriert. */
.fc-tasks-table th.fc-text-center .fc-th-content {
  justify-content: center;
}

/* Update v2.7.5: Inline-Schnelleingabe im Tabellen-Header (Titel-Spalte)
   Update v2.7.5b: Dezent – Rand #F0F0F0, flach, Placeholder in Headergröße
   Update v2.7.5c: !important gegen Theme-Overrides (Blocksy setzt globale input-Styles) */
.fc-tasks-table th input.fc-quick-create-input {
  flex: 1 !important;
  min-width: 80px !important;
  width: auto !important;
  border: 1px solid #f0f0f0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--fc-font-label-sm, 11px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--fc-on-surface) !important;
  padding: 2px 6px !important;
  margin-left: 8px !important;
  height: 20px !important;
  line-height: 18px !important;
  border-radius: var(--fc-radius, 4px) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fc-tasks-table th input.fc-quick-create-input::placeholder {
  color: var(--fc-on-surface-variant, #5b403d) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.fc-tasks-table th input.fc-quick-create-input:focus {
  background: var(--fc-surface-container-lowest, #fff) !important;
  border-color: #d0d0d0 !important;
}
.fc-tasks-table th input.fc-quick-create-input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Asana-Style Erledigt-Checkbox. Update v1.4.8: Türkisgrün statt Grün, kleinerer Abstand zum Titel.
   Update v1.5.7: Check-Icon hat keine eigene Spalte mehr, sondern steht direkt vor
   dem Titel innerhalb der Titel-Zelle. Wrapper ist `.fc-task-title-wrap`.
   Update v1.5.8: Davor steht ein Tree-Toggle (Dreieck). Wrapper wird pro
   Hierarchie-Ebene über Inline-`padding-left` eingerückt. Aufgaben ohne
   Unteraufgaben zeigen einen unsichtbaren Platzhalter derselben Breite,
   damit die Check-Icons einer Ebene exakt untereinander stehen. */
/* Update v1.8.5: Titel-Zelle muss overflow kappen, damit table-layout:fixed greift */
/* Update v2.1.3: Bei Hover auf Check-Icon overflow:visible, damit der Tooltip sichtbar bleibt */
.fc-task-title-cell {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Update v3.4.1: Schlichter 3px-Projektfarbstrich am Zeilenanfang. */
.fc-tasks-table tbody .fc-task-title-cell::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--fc-row-color, var(--fc-primary-container));
  border-radius: 0;
  pointer-events: none;
}
/* Update v2.4.7: overflow:visible auch für Drag-Handle und Tree-Toggle,
   damit deren Tooltips nicht von der Zelle abgeschnitten werden. */
.fc-task-title-cell:has(.fc-task-check:hover),
.fc-task-title-cell:has(.fc-task-drag-handle:hover),
.fc-task-title-cell:has(.fc-task-tree-toggle:hover) {
  overflow: visible;
}
.fc-task-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.fc-task-title-wrap .fc-task-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tree-Toggle (Dreieck) vor dem Check-Icon. Update v2.0.3: Dreiecke in primärem Rot. */
.fc-task-tree-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 3px;
  color: var(--fc-primary-container);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fc-task-tree-toggle:hover {
  background: rgba( 0, 0, 0, 0.08 );
  color: var(--fc-primary);
}
.fc-task-tree-toggle .material-icons-round {
  font-size: 24px;
  line-height: 1;
}
/* Update v2.0.2: Punkt statt unsichtbarem Platzhalter bei Aufgaben ohne Unteraufgaben */
.fc-task-tree-toggle.is-dot {
  cursor: default;
  pointer-events: none;
}
.fc-task-tree-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fc-on-surface-variant);
  opacity: 0.5;
}
/* Update v2.0.5: Rotes Dreieck für nicht-eingeblendete Unteraufgaben (partielles Aufklappen) */
.fc-task-tree-toggle-collapsed {
  color: var(--fc-primary-container);
}
.fc-task-tree-toggle-collapsed:hover {
  color: var(--fc-primary);
  background: rgba( 221, 51, 51, 0.08 );
}
/* Erledigte Zeilen dimmen den Toggle nicht komplett – Dreieck bleibt lesbar. */
.fc-task-row-done .fc-task-tree-toggle,
.fc-task-row-done .fc-task-tree-toggle * {
  opacity: 1;
}
/* Aufgaben-Titel als Button. Update v1.5.9: Nur der Titel öffnet das Detail-Panel,
   nicht mehr die ganze Zeile (sonst könnte der Tree-Toggle nicht funktionieren). */
.fc-task-title-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
}
.fc-task-title-btn:hover {
  color: var(--fc-tertiary);
  text-decoration: underline;
}
.fc-task-title-btn:focus-visible {
  outline: 2px solid var(--fc-tertiary);
  outline-offset: 2px;
}
.fc-task-check {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--fc-on-surface-variant);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.fc-task-check .material-icons-round {
  font-size: 22px;
  line-height: 1;
}
.fc-task-check:hover {
  color: var(--fc-tertiary); /* Türkisgrün beim Hover */
  background: rgba( 0, 102, 123, 0.08 );
}
.fc-task-check.is-done {
  color: var(--fc-tertiary);
}
.fc-task-check.is-done:hover {
  color: var(--fc-tertiary);
  background: rgba( 0, 102, 123, 0.12 );
}
/* Update v2.9.6: Gelbes Check-Icon bei angeheftetem Hinweis oder privater Notiz */
.fc-task-check.is-highlighted {
  color: #C28600;
  background: rgba( 255, 193, 7, 0.18 );
  border-radius: 50%;
}
.fc-task-check.is-highlighted .material-icons-round {
  color: #C28600;
}
.fc-task-check.is-highlighted:hover {
  background: rgba( 255, 193, 7, 0.32 );
  color: #9A6800;
}

/* Erledigter Aufgaben-Titel erscheint schwächer + durchgestrichen. */
.fc-task-title.is-done,
.fc-kanban-card-title.is-done {
  color: var(--fc-on-surface-variant);
  text-decoration: line-through;
}
.fc-task-row-done td {
  opacity: 0.72;
}
/* Update v1.5.7: Check-Icon steht jetzt innerhalb der Titel-Zelle –
   der Haken soll weiterhin voll sichtbar sein, der Titeltext wird via
   `.fc-task-title.is-done` separat gedimmt und durchgestrichen. */
.fc-task-row-done .fc-task-check,
.fc-task-row-done .fc-task-check * {
  opacity: 1;
}

/* Überschrift der Erledigt-Tabelle. */
.fc-tasks-done-section {
  margin-top: var(--fc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}
/* Update v2.0.3: Gleiche Schriftgröße wie fc-page-subtitle */
.fc-tasks-done-heading {
  margin: 0;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Kanban-Karte: Haupt-Zeile trägt jetzt Check + Titel + Prio-Badge.
   Update v1.4.8: negativer margin-right reduziert den Abstand zum Titel. */
.fc-kanban-card-main .fc-task-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 1px;
  margin-right: -4px;
}
.fc-kanban-card-main .fc-task-check .material-icons-round {
  font-size: 20px;
}

/* =========================================================
   PROJEKT-HEADER – MITGLIEDER-STACK (v1.4.7)
   Rechts in der Kopfzeile zeigen wir die Projekt-Mitglieder
   als runde Avatar-Badges. Manager rot, Mitglieder türkis.
   ========================================================= */
.fc-project-detail-inline {
  flex-wrap: wrap;
}
.fc-project-members-stack {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  padding-left: var(--fc-space-4);
}
.fc-project-members-stack > * + * {
  margin-left: -6px;
}
.fc-member-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  border: 2px solid var(--fc-surface-container-lowest);
  box-sizing: border-box;
}
.fc-member-badge.is-manager {
  background: var(--fc-primary-container); /* #DD3333 rot */
}
.fc-member-badge.is-member {
  background: var(--fc-tertiary); /* #00667b türkis */
}
.fc-member-badge.is-more {
  background: var(--fc-surface-container-high);
  color: var(--fc-on-surface-variant);
  font-size: 12px;
}

@media (max-width: 720px) {
  .fc-project-members-stack {
    margin-left: 0;
    padding-left: 0;
  }
}

/* ============================================================== */
/* DASHBOARD-OVERVIEW (v1.5.0)                                     */
/* ============================================================== */

.fc-dashboard-overview {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
  /* Update v1.5.1: Abstand zu den Metrikkarten oben identisch zum
     Karten-Gap (fc-space-4), damit kein größerer Leerraum entsteht. */
  margin-top: var(--fc-space-4);
}

.fc-dashboard-overview-error {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3) var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  color: var(--fc-primary-container);
}

/* Filter-Bar */
.fc-dashboard-overview-filters {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-dashboard-overview-filter-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  flex-wrap: wrap;
}

.fc-dashboard-overview-filter-row-period {
  width: 100%;
}

.fc-dashboard-overview-filter-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--fc-on-surface);
  min-width: 72px;
}

.fc-dashboard-period-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  margin-left: auto;
}

.fc-dashboard-period-icon-chip {
  min-width: 34px;
  justify-content: center;
  padding-right: var(--fc-space-2);
  padding-left: var(--fc-space-2);
}

.fc-dashboard-period-nav .material-icons-round {
  font-size: 18px;
  line-height: 1;
}

.fc-dashboard-period-nav .fc-chip:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .fc-dashboard-period-nav {
    width: 100%;
    margin-left: 0;
  }
}

/* Karte */
.fc-dashboard-overview-card {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-dashboard-overview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

/* BarChart-Wrapper (nutzt bestehende fc-report-barchart-*-Styles) */
.fc-dashboard-overview-barchart {
  margin-top: var(--fc-space-2);
}

/* Grid unten: Donut+Liste links, Team rechts */
.fc-dashboard-overview-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--fc-space-4);
}

@media (max-width: 1000px) {
  .fc-dashboard-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Donut + Projektliste */
.fc-dashboard-overview-projects-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--fc-space-4);
  align-items: start;
}

@media (max-width: 720px) {
  .fc-dashboard-overview-projects-body {
    grid-template-columns: 1fr;
  }
}

.fc-dashboard-overview-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-dashboard-overview-donut {
  width: 180px;
  height: 180px;
  display: block;
}

.fc-dashboard-overview-donut-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.fc-dashboard-overview-donut-meta strong {
  font-size: 15px;
  color: var(--fc-on-surface);
  font-variant-numeric: tabular-nums;
}

.fc-dashboard-overview-project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fc-dashboard-overview-project-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: var(--fc-space-3);
  align-items: center;
  padding: var(--fc-space-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.fc-dashboard-overview-project-item:last-child {
  border-bottom: none;
}

.fc-dashboard-overview-project-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.fc-dashboard-overview-project-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fc-dashboard-overview-project-title {
  font-weight: 600;
  color: var(--fc-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-dashboard-overview-project-sub {
  font-size: 12px;
  color: var(--fc-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-dashboard-overview-project-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.fc-dashboard-overview-project-values strong {
  font-weight: 600;
  color: var(--fc-on-surface);
}

/* Update v1.5.1: Stunden + Prozent nebeneinander in einer Zeile,
   Euro-Betrag darunter. */
.fc-dashboard-overview-project-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fc-dashboard-overview-project-percent {
  font-size: 12px;
  color: var(--fc-on-surface-variant);
}

.fc-dashboard-overview-project-revenue {
  font-size: 12px;
  color: var(--fc-tertiary);
  font-weight: 600;
}

/* Swatch im Chart-Tooltip (kleine Projektfarbe vor dem Titel) */
.fc-dashboard-overview-tooltip-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Team-Aktivitäten */
.fc-dashboard-overview-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-dashboard-overview-team-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--fc-space-3);
  align-items: center;
}

.fc-dashboard-overview-team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fc-tertiary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.fc-dashboard-overview-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-dashboard-overview-team-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fc-dashboard-overview-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

.fc-dashboard-overview-team-name {
  font-weight: 600;
  color: var(--fc-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-dashboard-overview-team-hours {
  font-variant-numeric: tabular-nums;
  color: var(--fc-on-surface);
}

.fc-dashboard-overview-team-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.fc-dashboard-overview-team-bar-fill {
  height: 100%;
  background: var(--fc-tertiary);
  border-radius: 2px;
  transition: width 240ms ease;
}

.fc-dashboard-overview-team-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fc-on-surface-variant);
  flex-wrap: wrap;
}

.fc-dashboard-overview-team-sep {
  opacity: 0.5;
}

/* =============================================================
   IMPORT-SEITE (v1.5.4)
   ============================================================= */

.fc-import-page {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}

.fc-import-section {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
}

.fc-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-2);
}

.fc-import-busy {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-low);
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface-variant);
}

.fc-import-result {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding-top: var(--fc-space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-import-counters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--fc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fc-import-counters li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--fc-space-2) var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  font-size: 13px;
  color: var(--fc-on-surface-variant);
}

.fc-import-counters li strong {
  font-size: 22px;
  color: var(--fc-on-surface);
  font-variant-numeric: tabular-nums;
}

.fc-import-counters li.is-error strong {
  color: var(--fc-primary-container);
}

.fc-import-log {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-import-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-import-log li {
  display: flex;
  gap: var(--fc-space-2);
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.fc-import-log li:last-child {
  border-bottom: none;
}

.fc-import-log-level {
  display: inline-block;
  flex-shrink: 0;
  min-width: 58px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.fc-import-log-info .fc-import-log-level {
  background: rgba(0, 102, 123, 0.12);
  color: var(--fc-tertiary);
}

.fc-import-log-warning .fc-import-log-level {
  background: rgba(245, 166, 35, 0.18);
  color: #8a6a00;
}

.fc-import-log-error .fc-import-log-level {
  background: rgba(221, 51, 51, 0.12);
  color: var(--fc-primary-container);
}

/* =============================================================
   E-MAIL-ALIAS-LISTE (v1.5.4)
   ============================================================= */

.fc-alias-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-3);
}

.fc-alias-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-alias-arrow {
  color: var(--fc-on-surface-variant);
  font-size: 20px;
}

@media (max-width: 720px) {
  .fc-alias-row {
    grid-template-columns: 1fr auto;
  }

  .fc-alias-arrow {
    display: none;
  }
}

/* =============================================================
   GEFAHRENZONE (v1.5.4)
   ============================================================= */

.fc-settings-danger-zone {
  border: 1px solid rgba(221, 51, 51, 0.35);
  background: rgba(221, 51, 51, 0.04);
  padding: var(--fc-space-4);
  border-radius: var(--fc-radius);
}

.fc-settings-danger-title {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-primary-container);
}

.fc-settings-danger-title .material-icons-round {
  font-size: 22px;
}

.fc-btn-danger {
  background: var(--fc-primary-container);
  color: #ffffff;
  border: 1px solid var(--fc-primary-container);
}

.fc-btn-danger:hover:not(:disabled) {
  background: #c02d2d;
  border-color: #c02d2d;
}

.fc-btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * VOLLWERTIGE UNTERAUFGABEN (v1.5.6)
 * Breadcrumb + Back-Button im Detail-Panel, klickbare Subtask-Titel,
 * Parent-Spalte in Aufgaben-Tabellen, Toggle „Unteraufgaben einschließen".
 * ------------------------------------------------------------------ */

/* Detail-Panel: Zurück-Button links vom Titel */
.fc-task-panel-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--fc-on-surface);
  border-radius: var(--fc-radius);
  cursor: pointer;
  transition: background 120ms ease;
  flex-shrink: 0;
}

.fc-task-panel-back-btn:hover {
  background: var(--fc-surface-container-low);
}

.fc-task-panel-back-btn .material-icons-round {
  font-size: 20px;
}

/* Breadcrumb im Detail-Panel */
.fc-task-panel-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  padding: var(--fc-space-2) var(--fc-space-4);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-low);
}

.fc-task-panel-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.fc-task-panel-breadcrumb-link {
  display: inline-block;
  max-width: 220px;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease, color 120ms ease;
}

.fc-task-panel-breadcrumb-link:hover {
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
}

.fc-task-panel-breadcrumb-link.is-current {
  color: var(--fc-on-surface);
  font-weight: 600;
  cursor: default;
}

.fc-task-panel-breadcrumb-link.is-current:hover {
  background: transparent;
}

.fc-task-panel-breadcrumb-sep {
  font-size: 14px;
  color: var(--fc-on-surface-variant);
  opacity: 0.7;
}

/* Unteraufgaben-Liste: klickbarer Titel + open_in_new Icon */
.fc-subtask-item-title-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--fc-on-surface);
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  transition: color 120ms ease;
}

.fc-subtask-item-title-btn:hover {
  color: var(--fc-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fc-subtask-item-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--fc-on-surface-variant);
  border-radius: var(--fc-radius);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}

.fc-subtask-item:hover .fc-subtask-item-open,
.fc-subtask-item-open:focus-visible {
  opacity: 1;
}

.fc-subtask-item-open:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-tertiary);
}

.fc-subtask-item-open .material-icons-round {
  font-size: 16px;
}

/* Aufgaben-Tabelle: Parent-Spalte */
.fc-task-parent-col {
  width: 180px;
  max-width: 220px;
}

.fc-task-parent-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-family: inherit;
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
  border-radius: var(--fc-radius);
  transition: background 120ms ease, color 120ms ease;
}

.fc-task-parent-link:hover {
  background: var(--fc-surface-container-low);
  color: var(--fc-tertiary);
}

.fc-task-parent-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.fc-task-parent-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Update v2.0.5: Filter-Reset als quadratischer Icon-Button direkt neben dem Datumsfeld */
.fc-tasks-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
  align-self: flex-end;
}
/* Update v1.9.9: „Neue Aufgabe"-Button rechts in der Filterleiste */
.fc-tasks-new-btn-wrap {
  margin-left: auto;
  min-width: auto;
  flex: 0 0 auto;
}
.fc-tasks-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Update v1.9.9: Dezente Checkbox „Unteraufgaben einblenden" über der Tabelle */
/* Update v2.0.3: 5px nach unten, 2px nach links für optische Ausrichtung */
.fc-tasks-subtask-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  margin-top: 5px;
  margin-left: 2px;
}
.fc-tasks-subtask-toggle input[type="checkbox"] {
  accent-color: var(--fc-tertiary);
  margin: 0;
}
.fc-tasks-subtask-toggle:hover {
  color: var(--fc-on-surface);
}

/* ==========================================================================
   IMPORT-TABS & CLOCKIFY-IMPORT (v1.7.0)
   ========================================================================== */

.fc-import-tabs {
  display: flex;
  gap: var(--fc-space-2);
  margin-bottom: var(--fc-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-import-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  color: var(--fc-on-surface-variant);
  font: inherit;

  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  border-radius: var(--fc-radius) var(--fc-radius) 0 0;
}

.fc-import-tab .material-icons-round {
  font-size: 18px;
}

.fc-import-tab:hover {
  color: var(--fc-on-surface);
  background: var(--fc-surface-container-low);
}

.fc-import-tab.is-active {
  color: var(--fc-on-surface);
  border-bottom-color: var(--fc-primary-container);
}

.fc-import-tab-panel {
  min-height: 120px;
}

.fc-clockify-panel {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-clockify-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  flex-wrap: wrap;
}

.fc-clockify-label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  font-weight: 600;
}

.fc-clockify-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-clockify-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
}

.fc-clockify-stats > div strong {
  font-size: var(--fc-font-headline-sm);
  color: var(--fc-on-surface);
}

.fc-clockify-stats > div.is-warn strong {
  color: var(--fc-primary-container);
}

.fc-clockify-subheadline {
  margin-top: var(--fc-space-3);
}

.fc-clockify-table-wrap {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  overflow: auto;
  max-width: 100%;
}

.fc-clockify-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.fc-clockify-table thead th {
  background: var(--fc-surface-container-lowest);
  text-align: left;
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  padding: 10px 12px;
  border-bottom: 1px solid var(--fc-outline-variant);
}

.fc-clockify-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: top;
}

.fc-clockify-table tbody tr:last-child td {
  border-bottom: none;
}

.fc-clockify-table tbody tr.is-warn {
  background: rgba(221, 51, 51, 0.05);
}

.fc-clockify-project-name {
  font-weight: 600;
  color: var(--fc-on-surface);
}

.fc-clockify-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
}

.fc-clockify-tag {
  padding: 1px 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  font-size: 11px;
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface-variant);
}

.fc-clockify-create-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.fc-clockify-skip-note {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  font-style: normal;
}

.fc-clockify-hint {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface-variant);
  white-space: nowrap;
}

.fc-clockify-hint.is-hardcoded,
.fc-clockify-hint.is-hardcoded-create {
  background: rgba(0, 102, 123, 0.12);
  color: var(--fc-tertiary);
}

.fc-clockify-hint.is-name-match,
.fc-clockify-hint.is-email,
.fc-clockify-hint.is-alias,
.fc-clockify-hint.is-name-unique {
  background: rgba(0, 161, 82, 0.14);
  color: #007a3d;
}

.fc-clockify-hint.is-customer-map {
  background: rgba(0, 102, 123, 0.12);
  color: var(--fc-tertiary);
}

.fc-clockify-hint.is-none,
.fc-clockify-hint.is-name-ambiguous {
  background: rgba(221, 51, 51, 0.12);
  color: var(--fc-primary-container);
}

.fc-clockify-ambiguity {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(221, 51, 51, 0.08);
  border: 1px solid rgba(221, 51, 51, 0.2);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface);
}

.fc-clockify-ambiguity .material-icons-round {
  font-size: 16px;
  color: var(--fc-primary-container);
  margin-top: 1px;
}

.fc-clockify-daterange {
  align-items: flex-end;
}

.fc-clockify-daterange .fc-clockify-label input {
  min-width: 160px;
}

.fc-clockify-daterange p {
  flex-basis: 100%;
  margin: 0;
}

/* ───────────────────────────────────────────────────────
   CLOCKIFY-SKIP-PROTOKOLL (v1.7.1)
   Zeigt übersprungene Zeiteinträge mit rot markierter
   Ursache (fehlendes Projekt, fehlender Nutzer, …).
   ─────────────────────────────────────────────────────── */

.fc-clockify-skip-breakdown {
  margin-top: var(--fc-space-4);
  padding-top: var(--fc-space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-clockify-skip-breakdown > h4 {
  margin: 0 0 var(--fc-space-2) 0;
}

.fc-clockify-skip-log {
  margin-top: var(--fc-space-4);
  padding-top: var(--fc-space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-clockify-skip-log > h4 {
  margin: 0 0 var(--fc-space-1) 0;
}

.fc-clockify-skip-log > p {
  margin: 0 0 var(--fc-space-2) 0;
}

.fc-clockify-skip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  max-height: 320px;
  overflow-y: auto;
}

.fc-clockify-skip-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px var(--fc-space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: var(--fc-font-body-sm);
  line-height: 1.4;
}

.fc-clockify-skip-item:last-child {
  border-bottom: none;
}

.fc-clockify-skip-item:nth-child(even) {
  background: var(--fc-surface-container-low);
}

.fc-clockify-skip-field {
  color: var(--fc-on-surface);
}

.fc-clockify-skip-sep {
  color: var(--fc-on-surface-variant);
  opacity: 0.6;
}

.fc-clockify-skip-missing {
  color: var(--fc-primary-container);
  font-weight: 600;
}

.fc-clockify-skip-more {
  margin: var(--fc-space-2) 0 0 0;
  font-style: normal;
}

/* ───────────────────────────────────────────────────────
   CLOCKIFY-PROJEKT-SYNC (v1.7.3)
   Eigenständiger Button zum Spiegeln aller Clockify-Projekte
   nach FlowClock, bevor Zeiteinträge importiert werden.
   ─────────────────────────────────────────────────────── */

.fc-clockify-project-sync {
  margin-top: var(--fc-space-4);
  padding: var(--fc-space-4);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  display: flex;
  gap: var(--fc-space-4);
  align-items: center;
  flex-wrap: wrap;
}

.fc-clockify-project-sync-info {
  flex: 1 1 320px;
  min-width: 0;
}

.fc-clockify-project-sync-info > h3 {
  margin: 0 0 var(--fc-space-1) 0;
}

.fc-clockify-project-sync-info > p {
  margin: 0;
}

.fc-clockify-project-sync-actions {
  display: flex;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}

.fc-clockify-project-sync-result {
  margin-top: var(--fc-space-3);
}

.fc-clockify-project-sync-details {
  margin-top: var(--fc-space-2);
}

.fc-clockify-project-sync-details > summary {
  cursor: pointer;
  padding: var(--fc-space-1) 0;
  font-weight: 600;
}

/* =========================================================
   PROJEKT-FAVORITEN (v1.7.6)
   ========================================================= */
.fc-favorite-btn {
  color: var(--fc-on-surface-variant);
  transition: color 120ms ease;
}
.fc-favorite-btn:hover {
  color: #f5a623;
}
.fc-favorite-btn.is-favorite {
  color: #f5a623;
}
.fc-favorite-btn.is-favorite:hover {
  color: #d48b0a;
}
/* Kachel-Header: Stern + Badge nebeneinander */
.fc-project-card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--fc-space-1);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MITGLIEDER-BERECHTIGUNGEN (v1.8.9)
   ───────────────────────────────────────────────────────────────────────────── */

/* Mitglied-Item Header-Zeile (Avatar + Info + Actions) */
.fc-member-item-header {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  width: 100%;
}
.fc-member-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mitglied-Eintrag mit Bearbeitungs-Panel */
.fc-member-item.is-editing {
  background: var(--fc-surface-container-low);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-2);
  margin: -4px -8px;
}

/* Bearbeitungs-Panel unterhalb der Header-Zeile */
.fc-member-edit-panel {
  margin-top: var(--fc-space-2);
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Berechtigungs-Grid: Checkboxen in 2 Spalten */
.fc-member-permissions {
  margin-top: var(--fc-space-2);
}
.fc-member-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--fc-space-1) var(--fc-space-3);
  margin-top: var(--fc-space-1);
}
.fc-member-permission-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-1);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface);
  cursor: pointer;
  padding: 2px 0;
}
.fc-member-permission-item input[type="checkbox"] {
  accent-color: var(--fc-tertiary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.fc-member-permission-item input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Berechtigungs-Badges (Nur-Lese-Ansicht für Nicht-Manager) */
.fc-member-permissions-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--fc-space-1);
  padding-left: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MITARBEITER-NAME IN ZEITEINTRÄGE-LISTE (v1.8.9)
   ───────────────────────────────────────────────────────────────────────────── */

/* Update v1.9.1: Mitarbeiter-Name steht jetzt rechts vor der Dauer */
.fc-timelog-user {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  margin-right: var(--fc-space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MULTI-SPALTEN-SORTIERUNG (v2.0.0)
   ───────────────────────────────────────────────────────────────────────────── */

/* Sortier-Icon-Wrapper mit Prioritäts-Badge */
.fc-sort-icon-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.fc-sort-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--fc-tertiary);
  border-radius: 7px;
  padding: 0 3px;
}

/* Sortier-Info-Leiste über der Tabelle */
.fc-tasks-sort-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-3);
}

/* Update v2.0.2: Sortier-Chips + Reset rechts ausrichten */
.fc-tasks-sort-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-2);
  margin-left: auto;
}

.fc-tasks-sort-label {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  font-weight: 600;
}

.fc-tasks-sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px 2px 8px;
  font-size: var(--fc-font-label-md);

  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
  white-space: nowrap;
}

.fc-tasks-sort-chip .material-icons-round {
  color: var(--fc-tertiary);
}

.fc-tasks-sort-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fc-on-surface-variant);
  cursor: pointer;
  border-radius: 50%;
  margin-left: 2px;
}
.fc-tasks-sort-chip-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--fc-primary-container);
}

/* Update v2.0.0: Drag-Handle-Icon im Sortier-Chip */
.fc-tasks-sort-chip-drag {
  font-size: 16px;
  color: var(--fc-on-surface-variant);
  cursor: grab;
  margin-right: 2px;
  opacity: 0.6;
}
.fc-tasks-sort-chip:hover .fc-tasks-sort-chip-drag {
  opacity: 1;
}
.fc-tasks-sort-chip:active {
  cursor: grabbing;
}

/* ========================================================================
   RELOAD-BUTTON & OVERDUE STATUS (v2.0.1)
   ======================================================================== */

/* Update v2.0.1: Roter Reload-Button bei ausstehenden Änderungen */
.fc-tasks-reload-btn {
  background: var(--fc-primary-container) !important;
  color: #ffffff !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  margin-left: 8px;
  animation: fcReloadPulse 1.5s ease-in-out infinite;
}
.fc-tasks-reload-btn:hover {
  background: #c02d2d !important;
  animation: none;
}

@keyframes fcReloadPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* ═══════════════════════════════════════════════════════════
   ZEITLEISTE / TIMELINE (v2.1.9)
   Gantt-Chart-Ansicht für Aufgaben mit Drag & Drop + Resize
   Update v2.2.0: Bugfixes (Header, Raster, Resize, Sidebar-Drag)
   ═══════════════════════════════════════════════════════════ */

.fc-timeline-page {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  height: 100%;
}

/* ─── Filter-Bar ──────────────────────────────────────────── */

.fc-timeline-filters {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-timeline-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-timeline-filter-controls {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: var(--fc-space-2);
}

.fc-timeline-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
}

.fc-timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}

.fc-timeline-chip:hover {
  background: var(--fc-surface-container-low);
}

.fc-timeline-chip.is-active {
  background: var(--fc-tertiary);
  color: #ffffff;
  border-color: var(--fc-tertiary);
}

.fc-timeline-chip.is-active .material-icons-round {
  color: #ffffff;
}

/* ─── Zoom-Steuerung ──────────────────────────────────────── */

.fc-timeline-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fc-timeline-zoom-label {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  margin-right: 4px;
}

.fc-timeline-zoom-level {
  font-size: var(--fc-font-body-sm);
  font-weight: 600;
  min-width: 64px;
  text-align: center;
}

.fc-timeline-group-toggle {
  display: inline-flex;
  gap: var(--fc-space-1);
}

/* ─── Chart-Container ─────────────────────────────────────── */

.fc-timeline-container {
  display: flex;
  flex: 1;
  min-height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  overflow: hidden;
}

/* ─── Sidebar (Aufgaben-Liste links) ──────────────────────── */

/* Update v2.2.2: Kein eigener Scroll – Sidebar bewegt sich per CSS transform
   synchron mit dem Chart-Scroll-Container. Wheel-Events werden per JS weitergeleitet. */
.fc-timeline-sidebar {
  flex-shrink: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  background: var(--fc-surface-container-lowest);
}

.fc-timeline-sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 var(--fc-space-3);
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-lowest);
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Update v2.2.2: Sidebar-Body wird per translateY synchron zum Chart verschoben */
.fc-timeline-sidebar-body {
  will-change: transform;
}

/* Update v2.2.3: box-sizing: border-box für konsistente Höhe mit dem Chart */
.fc-timeline-group-header {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: 0 var(--fc-space-3);
  font-size: var(--fc-font-body-sm);
  font-weight: 600;
  color: var(--fc-on-surface);
  background: var(--fc-background);
  box-sizing: border-box;
}

.fc-timeline-group-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.fc-timeline-group-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-timeline-group-count {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
}

/* Update v2.2.3: box-sizing: border-box damit die Zeilenhöhe (inline gesetzt als
   ROW_HEIGHT + ROW_GAP = 38px) exakt zur absolut positionierten Chart-Zeile passt.
   Ohne border-box addiert der 1px-Border 1px pro Zeile, was sich über viele Zeilen
   zu einem enormen Versatz aufsummiert. */
.fc-timeline-sidebar-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: 0 var(--fc-space-3);
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  transition: background 80ms;
  box-sizing: border-box;
}

.fc-timeline-sidebar-row:hover {
  background: var(--fc-surface-container-low);
}

.fc-timeline-row-color {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}

.fc-timeline-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fc-font-body-sm);
}

/* ─── Chart-Scroll-Container ──────────────────────────────── */

.fc-timeline-chart-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #DD3333 transparent;
}

.fc-timeline-chart {
  position: relative;
  min-height: 100%;
}

/* ─── Header (Datum-Achse) ────────────────────────────────── */

.fc-timeline-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fc-surface-container-lowest);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-timeline-header-row {
  position: relative;
  height: 26px;
}

/* Update v2.2.0: Kräftigere Trennlinie zwischen oberer und unterer Kopfzeile */
.fc-timeline-header-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Update v2.2.0: Header-Zellen sichtbarer – größere Schrift, kräftigere Borders */
.fc-timeline-header-cell {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;

  color: var(--fc-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0 4px;
  box-sizing: border-box;
}

.fc-timeline-header-top .fc-timeline-header-cell {
  font-weight: 600;
  font-size: 12px;
  color: var(--fc-on-surface);
}

.fc-timeline-header-cell.is-weekend {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.02);
}

/* ─── Body ────────────────────────────────────────────────── */

.fc-timeline-body {
  position: absolute;
  left: 0;
  right: 0;
}

/* Heute-Linie */
.fc-timeline-today {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--fc-primary-container);
  z-index: 1;
  pointer-events: none;
}

.fc-timeline-today::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fc-primary-container);
}

/* Update v2.2.1: Senkrechte Rasterlinien im Body – #F0F0F0 */
.fc-timeline-grid-line {
  position: absolute;
  top: 0;
  width: 1px;
  background: #F0F0F0;
  pointer-events: none;
}

/* Update v2.2.1: Wochenend-Streifen – #F0F0F0 */
.fc-timeline-weekend {
  position: absolute;
  top: 0;
  background: #F0F0F0;
  pointer-events: none;
}

/* Gruppen-Header-Hintergrund */
.fc-timeline-group-line {
  position: absolute;
  left: 0;
  background: var(--fc-background);
}

/* Zeilen-Hintergrund – Update v2.2.0: sichtbarere Trennlinien */
.fc-timeline-row-bg {
  position: absolute;
  left: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ─── Aufgaben-Balken ─────────────────────────────────────── */

/* Update v2.2.2: will-change für flüssiges DOM-Drag (left/width werden direkt gesetzt) */
.fc-timeline-bar {
  position: absolute;
  border-radius: var(--fc-radius);
  cursor: grab;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: opacity 80ms, box-shadow 80ms;
  user-select: none;
  z-index: 1;
  will-change: left, width;
}

.fc-timeline-bar:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.fc-timeline-bar.is-dragging {
  opacity: 0.85;
  cursor: grabbing;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.fc-timeline-bar.is-done {
  opacity: 0.5;
}

.fc-timeline-bar.is-overdue {
  outline: 2px solid var(--fc-primary-container);
  outline-offset: 1px;
}

.fc-timeline-bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;

  color: #ffffff;
  padding: 0 8px;
  line-height: 1;
  pointer-events: none;
}

/* ─── Resize-Handles ──────────────────────────────────────── */

.fc-timeline-resize {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}

.fc-timeline-resize-left {
  left: 0;
  border-radius: var(--fc-radius) 0 0 var(--fc-radius);
}

.fc-timeline-resize-right {
  right: 0;
  border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
}

.fc-timeline-resize:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ─── Hint-Box ────────────────────────────────────────────── */

/* ─── Update v2.2.0: Sidebar-Drag & Drop ─────────────────── */

.fc-timeline-sidebar-row.is-draggable {
  cursor: grab;
}

.fc-timeline-sidebar-row.is-draggable:active {
  cursor: grabbing;
}

.fc-timeline-sidebar-row.is-sidebar-dragging {
  opacity: 0.4;
}

.fc-timeline-drag-icon {
  font-size: 16px;
  color: var(--fc-on-surface-variant);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 120ms;
}

.fc-timeline-sidebar-row.is-draggable:hover .fc-timeline-drag-icon {
  opacity: 0.5;
}

/* Drop-Target-Hervorhebung */
.fc-timeline-chart.is-drop-target {
  outline: 2px dashed var(--fc-tertiary);
  outline-offset: -2px;
}

/* Drop-Indikator-Linie */
.fc-timeline-drop-indicator {
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--fc-tertiary);
  z-index: 3;
  pointer-events: none;
  opacity: 0.7;
}

.fc-timeline-drop-indicator::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fc-tertiary);
}

.fc-timeline-hint {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  margin-top: var(--fc-space-2);
  background: rgba(0, 102, 123, 0.06);
  border: 1px solid rgba(0, 102, 123, 0.15);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface);
}

.fc-timeline-hint .material-icons-round {
  font-size: 18px;
  color: var(--fc-tertiary);
  flex-shrink: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */

@media ( max-width: 768px ) {
  .fc-timeline-sidebar {
    width: 180px !important;
  }

  .fc-timeline-chip {
    padding: 3px 8px;
    font-size: 12px;
  }

  .fc-timeline-filter-controls {
    flex-wrap: wrap;
  }
}

/* ─── Update v2.2.4: Heute-Linie Uhrzeit-Label ──────────── */

.fc-timeline-today-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-primary-container);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* ─── Update v2.2.4: Floating-Tooltip ────────────────────── */

.fc-timeline-floating-tooltip {
  background: var(--fc-on-surface, #1a1a2e);
  color: #ffffff;
  font-size: var(--fc-font-label-md, 12px);

  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  animation: fcTooltipIn 100ms ease-out;
}

/* ─── Update v2.2.4: Kontextmenü ─────────────────────────── */

.fc-timeline-context-menu {
  background: var(--fc-surface-container-lowest, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius, 4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 4px 0;
  z-index: 9999;
}

.fc-timeline-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fc-font-body-sm, 13px);
  color: var(--fc-on-surface, #1a1a2e);
  cursor: pointer;
  text-align: left;
  transition: background 80ms;
}

.fc-timeline-context-item:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-timeline-context-danger {
  color: var(--fc-primary-container, #DD3333);
}

.fc-timeline-context-danger:hover {
  background: rgba(221, 51, 51, 0.06);
}

/* Update v2.3.3: Trennlinie im Kontextmenü */
.fc-timeline-context-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 4px 0;
}

/* Update v2.3.3: Refresh-Counter ausgeblendet */
.fc-timeline-refresh-counter {
  display: none !important;
}

/* =========================================================
   DRAG & DROP REPARENTING (v2.4.5)
   Visuelles Feedback beim Ziehen von Aufgaben in der Tabelle
   ========================================================= */

/* Drag-Handle: Grip-Icon links in der Zeile – immer sichtbar (v2.4.5) */
.fc-task-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: grab;
  color: var(--fc-on-surface);
  opacity: 0.35;
  flex-shrink: 0;
  border-radius: var(--fc-radius);
  transition: opacity 120ms ease, background 120ms ease;
}
.fc-task-drag-handle:active {
  cursor: grabbing;
}
.fc-task-drag-handle .material-icons-round {
  font-size: 18px;
}
/* Bei Hover über die Zeile oder das Icon selbst stärker hervorheben */
tr:hover .fc-task-drag-handle,
.fc-task-drag-handle:focus-visible {
  opacity: 0.6;
}
tr:hover .fc-task-drag-handle:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}
/* Update v2.4.7: Alte linksbündige Tooltip-Positionierung entfernt –
   Drag-Handle nutzt jetzt data-tooltip-position="bottom". */

/* Zeile wird gerade gedraggt */
.fc-task-row-dragging {
  opacity: 0.3;
}

/* Gültiges Drop-Ziel: leichte türkise Hervorhebung */
.fc-task-row-drop-target {
  background: rgba(0, 102, 123, 0.08) !important;
  outline: 2px solid var(--fc-tertiary);
  outline-offset: -2px;
}

/* Ungültiges Drop-Ziel: leicht rot (z. B. eigene Nachfahren) */
.fc-task-row-drop-invalid {
  background: rgba(221, 51, 51, 0.04) !important;
  opacity: 0.5;
}

/* Root-Dropzone: Erscheint beim Draggen oben über der Tabelle */
.fc-task-root-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: var(--fc-space-2);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface);
  opacity: 0.6;
  font-size: var(--fc-font-body-md);
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.fc-task-root-dropzone .material-icons-round {
  font-size: 20px;
}
.fc-task-root-dropzone.is-over {
  border-color: var(--fc-tertiary);
  background: rgba(0, 102, 123, 0.06);
  opacity: 1;
}

/* Drag-Overlay: Schwebendes Element während des Drags */
.fc-task-drag-overlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--fc-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.fc-task-drag-overlay .material-icons-round {
  font-size: 18px;
  opacity: 0.5;
}

/* =========================================================
   TOAST ACTION BUTTON (v2.4.5)
   „Rückgängig"-Button innerhalb von Toast-Benachrichtigungen
   ========================================================= */

.fc-toast-action {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--fc-tertiary);
  font-weight: 600;
  font-size: var(--fc-font-body-md);
  padding: 2px 8px;
  border-radius: var(--fc-radius);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.fc-toast-action:hover {
  background: rgba(0, 102, 123, 0.08);
}

/* =========================================================
   UNGELESEN-MARKIERUNG (v2.4.8)
   Aufgaben, die von anderen Mitarbeitern neu angelegt oder
   bearbeitet wurden, werden mit warmem Hintergrund hervorgehoben,
   bis der Nutzer sie einmal geöffnet hat.
   ========================================================= */

/* Update v2.4.8: Tabellenzeile – ungelesene Aufgabe */
.fc-task-row-unread td {
  background: #FEF2DE !important;
}

/* Update v2.4.8: Kanban-Karte – ungelesene Aufgabe */
.fc-kanban-card.is-unread {
  background: #FEF2DE !important;
  border-left: 3px solid #F5A623;
}

/* Update v2.5.0: Änderungs-Banner im Aufgaben-Detail-Panel */
.fc-task-changes-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 0 8px;
  background: #FEF2DE;
  border: 1px solid #F5A623;
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-body-sm);
  line-height: 1.5;
  color: var(--fc-on-surface);
}
.fc-task-changes-icon {
  font-size: 18px;
  color: #F5A623;
  flex-shrink: 0;
}
.fc-task-changes-text {
  flex: 1;
  min-width: 0;
}
/* Update v2.9.6: Angehefteter Zustand – etwas kräftiger hervorgehoben */
.fc-task-changes-banner.is-pinned {
  background: #FEF0C0;
  border-color: #C28600;
}
.fc-task-changes-banner.is-pinned .fc-task-changes-icon {
  color: #C28600;
}
/* Update v2.9.6: Pin-Button im Banner */
.fc-task-change-pin-btn {
  background: transparent;
  border: none;
  padding: 2px 4px;
  border-radius: var(--fc-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: #F5A623;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.fc-task-change-pin-btn:hover {
  opacity: 1;
  background: rgba( 245, 166, 35, 0.15 );
}
.fc-task-change-pin-btn.is-active {
  opacity: 1;
  color: #C28600;
}
.fc-task-change-pin-btn .material-icons-round {
  font-size: 18px;
  /* Gedreht = angeheftet, normal = nicht angeheftet */
}
.fc-task-change-pin-btn:not(.is-active) .material-icons-round {
  transform: rotate(45deg); /* „ungeheftete" Darstellung */
}

/* Update v2.9.7: Private Notizen Sektion – identisch zur Beschreibung, kein Kasten */
.fc-task-private-notes-section {
  /* kein eigener background/border – gleiche Optik wie Beschreibungs-Sektion */
}
.fc-task-private-note-hint {
  margin: 6px 0 0;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────
   BENACHRICHTIGUNGS-GLOCKE (v2.6.3)
   Dropdown im Header mit ungelesenen Aufgaben-Änderungen.
   Separater Gelesen-Status (user_meta), unabhängig von der
   farblichen Hervorhebung ungelesener Aufgaben.
   ───────────────────────────────────────────────────────────── */

/* Wrapper für relative Positionierung des Dropdowns */
.fc-notification-bell {
  position: relative;
}

/* Glocken-Button mit Badge */
.fc-notification-bell-btn {
  position: relative;
}
.fc-notification-badge {
  position: absolute;
  /* Update v2.6.6: Badge dichter an die Glocke gerückt */
  top: 2px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--fc-primary-container);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* Dropdown-Container */
.fc-notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: fcNotifDropIn 120ms ease-out;
}

@keyframes fcNotifDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown-Header */
.fc-notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fc-space-3) var(--fc-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}
.fc-notification-dropdown-title {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
}

/* "Alle gelesen"-Button */
.fc-notification-mark-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-tertiary);
  font-size: var(--fc-font-label-md);

  cursor: pointer;
  transition: background 120ms;
}
.fc-notification-mark-all-btn:hover {
  background: rgba(0, 102, 123, 0.08);
}
.fc-notification-mark-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbarer Body */
.fc-notification-dropdown-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Leerer Zustand */
.fc-notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-6) var(--fc-space-4);
  color: var(--fc-on-surface-var);
  font-size: var(--fc-font-body-sm);
}

/* Einzelne Benachrichtigung */
.fc-notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-2);
  width: 100%;
  padding: var(--fc-space-3) var(--fc-space-4);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 120ms;
  position: relative;
}
.fc-notification-item:hover {
  background: var(--fc-surface-container-low);
}
.fc-notification-item:last-child {
  border-bottom: none;
}

/* Farbstreifen links */
.fc-notification-item-color {
  display: block;
  width: 3px;
  min-height: 100%;
  border-radius: 2px;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

/* Inhalt */
.fc-notification-item-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--fc-space-1);
}
.fc-notification-item-title {
  font-size: var(--fc-font-body-sm);
  font-weight: 600;
  color: var(--fc-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-notification-item-meta {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Änderungstyp-Tags */
.fc-notification-item-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.fc-notification-change-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(0, 102, 123, 0.08);
  color: var(--fc-tertiary);
  font-size: 10px;

  line-height: 16px;
}

/* Zeitangabe rechts */
.fc-notification-item-time {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--fc-on-surface-var);
  white-space: nowrap;
  margin-top: 2px;
}

/* Responsive: schmale Viewports */
@media (max-width: 480px) {
  .fc-notification-dropdown {
    width: calc(100vw - 24px);
    right: -8px;
  }
}

/* ==========================================================================
   GLOBALE SUCHE (v2.7.11)
   ========================================================================== */

.fc-global-search {
  position: relative;
  width: 100%;
  max-width: 560px;
}

/* Update v2.8.0: Suchfeld vollständig gegen Theme-Overrides (Blocksy etc.) gehärtet.
   Das Blocksy-Theme stylt das native <input>-Element direkt mit Border und
   farbigem Fokus-Outline; daher überall konsequent !important einsetzen. */
.fc-global-search-input-wrap,
.fc-global-search-input-wrap:hover,
.fc-global-search-input-wrap:focus-within,
.fc-global-search-input-wrap:focus,
.fc-global-search-input-wrap:active {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--fc-surface-container-low, #f2f2f2) !important;
  border: 0 !important;
  border-radius: var(--fc-radius) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

/* Update v2.8.0: Natives <input> – Blocksy-Theme zeichnet hier sonst Border +
   farbigen Fokus-Outline. Mit !important komplett überschreiben. */
.fc-global-search-input,
.fc-global-search-input:hover,
.fc-global-search-input:focus,
.fc-global-search-input:focus-visible,
.fc-global-search-input:focus-within,
.fc-global-search-input:active {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.fc-global-search-icon {
  font-size: 20px;
  color: var(--fc-on-surface-variant, #555);
  margin-left: var(--fc-space-3);
  flex-shrink: 0;
  pointer-events: none;
}

.fc-global-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px var(--fc-space-3);
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface, #1c1c1c);
  outline: none;
  font-family: inherit;
}

.fc-global-search-input::placeholder {
  color: var(--fc-on-surface-variant, #777);
  opacity: 0.85;
}

.fc-global-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--fc-on-surface-variant, #555);
  cursor: pointer;
  margin-right: 4px;
  flex-shrink: 0;
  transition: background 160ms ease;
}

.fc-global-search-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--fc-on-surface, #1c1c1c);
}

.fc-global-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--fc-surface-container-lowest, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--fc-radius);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  z-index: 1000;
  animation: fcSearchDropIn 140ms ease-out;
}

@keyframes fcSearchDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fc-global-search-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--fc-space-3) var(--fc-space-4);
  color: var(--fc-on-surface-variant, #555);
  font-size: var(--fc-font-body-sm);
}

.fc-global-search-loading .material-icons-round {
  animation: fcSearchSpin 1s linear infinite;
}

@keyframes fcSearchSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.fc-global-search-scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: var(--fc-space-2) var(--fc-space-3) 0;
  padding: 2px 8px;
  background: rgba(0, 102, 123, 0.08);
  color: var(--fc-on-surface-variant);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-label-md);
  font-weight: 600;
}

.fc-global-search-section {
  padding: var(--fc-space-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fc-global-search-section:last-child {
  border-bottom: none;
}

.fc-global-search-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--fc-space-4);
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fc-on-surface-variant, #666);
}

.fc-global-search-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px var(--fc-space-4);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
  border-left: 3px solid transparent;
}

.fc-global-search-item:hover,
.fc-global-search-item.is-active {
  background: rgba(0, 0, 0, 0.04);
  border-left-color: var(--fc-primary-container, #DD3333);
}

.fc-global-search-item-color {
  width: 6px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(0, 0, 0, 0.12);
}

.fc-global-search-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.fc-global-search-item-title {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface, #1c1c1c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-global-search-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant, #666);
}

.fc-global-search-item-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-on-surface-variant, #555);
}

.fc-global-search-item-snippet {
  margin-top: 2px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-global-search-item-arrow {
  font-size: 18px;
  color: var(--fc-on-surface-variant, #999);
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.fc-global-search-item:hover .fc-global-search-item-arrow,
.fc-global-search-item.is-active .fc-global-search-item-arrow {
  opacity: 1;
}

.fc-global-search-hint {
  padding: 6px var(--fc-space-4);
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant, #777);
  font-style: normal;
}

.fc-global-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--fc-space-5) var(--fc-space-4);
  color: var(--fc-on-surface-variant, #666);
  font-size: var(--fc-font-body-sm);
  text-align: center;
}

/* Mobil: Header-Suche schmaler */
@media (max-width: 720px) {
  .fc-header-search {
    padding: 0 var(--fc-space-2);
  }
  .fc-global-search {
    max-width: none;
  }
  .fc-global-search-dropdown {
    left: -8px;
    right: -8px;
  }
}

/* ==========================================================================
   ERLEDIGT-SOUND (v2.8.1)
   Sound-Einstellungen mit Lautstärke-Slider und Vorhören-Button
   ========================================================================== */

.fc-sound-hint {
  margin: 0 0 var(--fc-space-3) 0;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant, #666);
  line-height: 1.5;
}

.fc-sound-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  margin: 0 0 var(--fc-space-3) 0;
  background: rgba(221, 51, 51, 0.06);
  border: 1px solid rgba(221, 51, 51, 0.2);
  border-radius: var(--fc-radius);
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface, #1a1a1a);
}

.fc-sound-warning .material-icons-round {
  color: var(--fc-primary-container, #DD3333);
  font-size: 20px;
  flex-shrink: 0;
}

.fc-sound-volume {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-3);
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-low, #f2f2f2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
}

.fc-sound-volume-label {
  flex: 0 0 auto;
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface, #1a1a1a);

}

.fc-sound-volume-slider {
  flex: 1 1 auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 6px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.fc-sound-volume-slider:focus {
  outline: none;
}

.fc-sound-volume-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 102, 123, 0.25);
}

.fc-sound-volume-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0, 102, 123, 0.25);
}

/* WebKit-Track */
.fc-sound-volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  border: none;
}

/* WebKit-Thumb */
.fc-sound-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  background: var(--fc-on-surface-variant);
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.fc-sound-volume-slider::-webkit-slider-thumb:hover {
  background: #00525e;
  transform: scale(1.1);
}

/* Firefox-Track */
.fc-sound-volume-slider::-moz-range-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  border: none;
}

/* Firefox-Thumb */
.fc-sound-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--fc-on-surface-variant);
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.fc-sound-volume-slider::-moz-range-thumb:hover {
  background: #00525e;
  transform: scale(1.1);
}

/* Disabled-Zustand */
.fc-sound-volume-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fc-sound-volume-slider:disabled::-webkit-slider-thumb {
  background: var(--fc-on-surface-variant, #999);
  cursor: not-allowed;
}

.fc-sound-volume-slider:disabled::-moz-range-thumb {
  background: var(--fc-on-surface-variant, #999);
  cursor: not-allowed;
}

.fc-sound-volume-value {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: right;
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface, #1a1a1a);
  font-variant-numeric: tabular-nums;
}

.fc-sound-preview-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fc-sound-preview-btn .material-icons-round {
  font-size: 18px;
}

/* ============================================================
   KALENDER (v2.9.0)
   ============================================================ */

/* ─── Seite ─── */
/* Update v2.9.1: padding entfernt – .fc-main liefert bereits 32px Außenabstand */
.fc-calendar-page {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3, 12px);
  flex: 1;          /* füllt fc-main (flex-Spalte) bis zum unteren Rand */
  min-height: 0;
}

/* ─── Toolbar ─── */
.fc-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fc-space-3, 12px);
  padding: var(--fc-space-3, 12px) var(--fc-space-4, 16px);
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  flex-shrink: 0;
}

.fc-calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2, 8px);
}

.fc-calendar-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  background: var(--fc-surface-container-lowest, #fff);
  color: var(--fc-on-surface, #1a1a1a);
  cursor: pointer;
  transition: background 120ms;
}

.fc-calendar-nav-arrow:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-calendar-nav-arrow .material-icons-round {
  font-size: 20px;
}

.fc-calendar-range-label {
  font-size: var(--fc-font-body-md, 14px);
  font-weight: 600;
  color: var(--fc-on-surface, #1a1a1a);
  white-space: nowrap;
}

/* ─── Ansicht-Toggle ─── */
.fc-calendar-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  overflow: hidden;
}

.fc-calendar-view-btn {
  padding: 6px 14px;
  font-size: var(--fc-font-body-sm, 13px);

  color: var(--fc-on-surface, #1a1a1a);
  background: var(--fc-surface-container-lowest, #fff);
  border: none;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  line-height: 1.4;
}

.fc-calendar-view-btn:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-view-btn.is-active {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
}

.fc-calendar-view-btn:hover:not(.is-active) {
  background: var(--fc-surface-container-low, #f2f2f2);
}

/* ─── Loading / Empty ─── */
.fc-calendar-loading {
  display: flex;
  justify-content: center;
  padding: var(--fc-space-6, 48px) 0;
}

.fc-calendar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-3, 12px);
  padding: var(--fc-space-6, 48px) var(--fc-space-4, 16px);
  color: var(--fc-on-surface-variant, #888);
}

.fc-calendar-empty .material-icons-round {
  font-size: 48px;
  opacity: 0.4;
}

.fc-calendar-empty p {
  font-size: var(--fc-font-body-md, 14px);
  margin: 0;
}

/* ─── Wochenansicht ─── */
.fc-calendar-week {
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.fc-calendar-week-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--fc-space-2, 8px) var(--fc-space-1, 4px);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-col-header:last-child {
  border-right: none;
}

.fc-calendar-dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fc-on-surface-variant, #888);
  text-transform: uppercase;
}

.fc-calendar-day-num-pill {
  font-size: var(--fc-font-body-md, 14px);

  color: var(--fc-on-surface, #1a1a1a);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fc-radius, 4px);
}

.fc-calendar-col-header.is-today .fc-calendar-day-num-pill {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  font-weight: 700;
}

/* Span-Zone */
.fc-calendar-span-zone {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 30px;
  background: var(--fc-surface-container-lowest, #fff);
}

.fc-calendar-span-zone-month {
  border-bottom: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.fc-calendar-span-slot {
  padding: 1px 2px;
}

/* Span-Balken */
.fc-calendar-span-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 22px;
  padding: 0 6px;
  font-size: 12px;

  color: var(--fc-on-surface, #1a1a1a);
  background: color-mix(in srgb, var(--fc-span-color, #4A90D9) 15%, white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 120ms;
}

.fc-calendar-span-bar:hover {
  opacity: 0.85;
}

.fc-calendar-span-bar.continues-left {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fc-calendar-span-bar.continues-right {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fc-calendar-span-bar.is-done {
  opacity: 0.55;
  text-decoration: line-through;
}

.fc-calendar-span-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Update v3.3.90: Loeschaktion fuer Kalender-Span-Aufgaben. */
.fc-calendar-span-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border-radius: var(--fc-radius, 4px);
  color: var(--fc-on-surface-variant, #666);
  opacity: 0;
  flex-shrink: 0;
}

.fc-calendar-span-bar:hover .fc-calendar-span-delete {
  opacity: 1;
}

.fc-calendar-span-delete:hover {
  color: var(--fc-primary-container, #DD3333);
  background: rgba(221, 51, 51, 0.08);
}

.fc-calendar-span-delete .material-icons-round {
  font-size: 15px;
}

.fc-calendar-span-arrow {
  font-size: 14px !important;
  flex-shrink: 0;
}

/* Wochenraster-Body */
/* Update v2.9.1: grid-template-rows: 1fr + align-items: stretch damit Spalten immer volle Höhe einnehmen */
.fc-calendar-week-body {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 1fr;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}


/* ═══════════════════════════════════════════════════
   Update v3.0.6: Kalender-Wochenansicht – Zeitraster
   ═══════════════════════════════════════════════════ */

.fc-calendar-week-timegrid {
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
}

/* ─── Header ─── */
.fc-calendar-tg-header {
  display: grid;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.fc-calendar-tg-corner {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-calendar-tg-day-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 13px;
}

.fc-calendar-tg-day-header:last-child {
  border-right: none;
}

.fc-calendar-tg-day-header.is-weekend {
  background: rgba(0, 0, 0, 0.018);
}

.fc-calendar-tg-day-name {
  color: var(--fc-on-surface-variant, #666);
  font-weight: 500;
}

.fc-calendar-tg-day-num {
  font-weight: 700;
  color: var(--fc-on-surface, #1a1a2e);
  font-size: 16px;
}

.fc-calendar-tg-day-header.is-today .fc-calendar-tg-day-num {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ─── Ganztägig-Zeile ─── */
.fc-calendar-tg-allday {
  display: grid;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 36px;
  flex-shrink: 0;
}

.fc-calendar-tg-allday-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 4px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fc-on-surface-variant, #888);
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-tg-allday-cell {
  padding: 3px 2px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 30px;
  transition: background 0.15s;
}

.fc-calendar-tg-allday-cell:last-child {
  border-right: none;
}

.fc-calendar-tg-allday-cell.is-weekend {
  background: rgba(0, 0, 0, 0.018);
}

.fc-calendar-tg-allday-cell.is-drop-over {
  background: rgba(0, 102, 123, 0.08);
}
/* Ganztägig-Zelle: Aufgabe-hinzufügen-Button (nur bei Hover) */
.fc-calendar-tg-add-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: var(--fc-radius, 4px);
  background: transparent;
  color: var(--fc-on-surface-variant, #888);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  margin-top: 1px;
}

.fc-calendar-tg-allday-cell:hover .fc-calendar-tg-add-btn {
  display: flex;
}

.fc-calendar-tg-add-btn:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
  color: var(--fc-on-surface, #1a1a2e);
  border-color: rgba(0, 0, 0, 0.3);
}
/* Update v3.0.6: Tooltip-Overflow in Kalender-Ganztägig-Zelle */
.fc-calendar-tg-allday-label,
.fc-calendar-tg-allday-cell {
  overflow: visible;
}



/* Span-Balken Zeile */
.fc-calendar-tg-spans {
  display: grid;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding: 2px 0;
  flex-shrink: 0;
}

.fc-calendar-tg-spans-gutter {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

/* ─── Zeitraster-Body (scrollbar) ─── */
/* Update v3.0.9: scrollbar-gutter: stable auf allen Grid-Sektionen,
   damit Header/Allday/Spans dieselbe Breite wie der scrollbare Body haben
   und die vertikalen Spaltenlinien exakt fluchten */
.fc-calendar-tg-header,
.fc-calendar-tg-allday,
.fc-calendar-tg-spans {
  scrollbar-gutter: stable;
  overflow-y: auto;
}

.fc-calendar-tg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-gutter: stable;
}

.fc-calendar-tg-grid {
  display: grid;
  position: relative;
}

/* Zeitspalte links */
.fc-calendar-tg-times {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-tg-time-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 11px;
  color: var(--fc-on-surface-variant, #999);
  position: relative;
  box-sizing: border-box;
}

.fc-calendar-tg-time-label.is-full-hour span {
  transform: translateY(-7px);
}

.fc-calendar-tg-time-label.is-hover {
  background: #fffbeb;
}

/* Tagesspalten */
.fc-calendar-tg-day-col {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  position: relative;
}

.fc-calendar-tg-day-col:last-child {
  border-right: none;
}

.fc-calendar-tg-day-col.is-weekend {
  background: rgba(0, 0, 0, 0.018);
}

/* Einzelne Slots */
.fc-calendar-tg-slot {
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.1s;
  cursor: default;
}

/* Update v3.1.0: Full-Hour hat fette Linie OBEN (border-top),
   damit Stundenbereich von fetter Linie bis zur nächsten reicht */
.fc-calendar-tg-slot.is-full-hour {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.fc-calendar-tg-slot.is-hover {
  background: #fffbeb;
}

/* Aktuelle Uhrzeit – rote Linie */
.fc-calendar-tg-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fc-primary-container, #DD3333);
  z-index: 2;
  pointer-events: none;
}

.fc-calendar-tg-now-line::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fc-primary-container, #DD3333);
}

/* ─── Update v3.1.0: Termine im Zeitraster ─── */
.fc-calendar-tg-appointment {
  background: color-mix(in srgb, var(--fc-appt-color, #DD3333) 15%, var(--fc-surface-container-lowest, #fff));
  border-left: 3px solid var(--fc-appt-color, #DD3333);
  border-radius: var(--fc-radius, 4px);
  padding: 2px 6px;
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  line-height: 1.3;
  transition: box-shadow 0.15s ease;
}
.fc-calendar-tg-appointment:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
/* Update v3.1.0: Virtuelle Termine sehen identisch aus wie physische */
.fc-calendar-tg-appointment.is-virtual {
  /* Kein visueller Unterschied – Nutzer soll keinen Unterschied bemerken */
}
.fc-calendar-tg-appointment.is-cancelled {
  opacity: 0.45;
  text-decoration: line-through;
}
.fc-calendar-tg-appointment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-appt-color, #DD3333);
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.fc-calendar-tg-appointment-time {
  font-weight: 600;
  color: var(--fc-on-surface, #333);
  white-space: nowrap;
}
.fc-calendar-tg-appointment-title {
  color: var(--fc-on-surface, #333);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Lösch-Button für einzelne Vorkommen – nur bei Hover sichtbar */
.fc-calendar-tg-appointment-delete {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
}
.fc-calendar-tg-appointment:hover .fc-calendar-tg-appointment-delete {
  display: inline-flex;
}
/* DragOverlay für Termine */
.fc-calendar-tg-appointment--drag-overlay {
  padding: 4px 8px;
  border-radius: var(--fc-radius, 4px);
  background: color-mix(in srgb, var(--fc-appt-color, #DD3333) 20%, #fff);
  border-left: 3px solid var(--fc-appt-color, #DD3333);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* Drop-Highlight für Tagesspalten und Slots im Zeitraster */
.fc-calendar-tg-day-col.is-drop-over {
  background: rgba(0, 102, 123, 0.06);
}
.fc-calendar-tg-slot.is-drop-over {
  background: rgba(0, 102, 123, 0.15) !important;
}

/* Termin-Karte im Kalender (wiederverwendet .fc-calendar-task Styles) */
.fc-calendar-appointment .fc-appointment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  flex-shrink: 0;
  margin-right: 4px;
}
.fc-calendar-appointment .fc-appointment-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-on-surface-variant, #666);
  margin-right: 4px;
  white-space: nowrap;
}
.fc-calendar-appointment .fc-appointment-participants-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--fc-on-surface-variant, #888);
  margin-left: auto;
}

/* ─── Update v3.1.0: Termin-Panel-Styles ─── */
/* Termin-Formular: Abstände zwischen Feldern */
.fc-appointment-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fc-appointment-form > .fc-form-group {
  padding-top: 20px;
}
.fc-appointment-form > .fc-form-group:first-child {
  padding-top: 0;
}
.fc-appointment-form .fc-form-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fc-on-surface, #333);
  margin-bottom: 8px;
  margin-top: 0;
}
/* Titel-Feld: sichtbarer Rahmen und Innenabstand */
.fc-appointment-title-input {
  font-size: 18px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: var(--fc-radius, 4px) !important;
  padding: 10px 12px !important;
  width: 100%;
  box-sizing: border-box;
}
.fc-appointment-title-input:focus {
  border-color: var(--fc-primary-container, #DD3333) !important;
  outline: none !important;
}
.fc-appointment-status-row {
  display: flex;
  gap: 8px;
}
.fc-appointment-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--fc-radius, 4px);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.fc-appointment-status-badge.is-active {
  font-weight: 600;
}
.fc-appointment-datetime-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.fc-appointment-datetime-field {
  flex: 1;
}
.fc-appointment-datetime-sep {
  padding-bottom: 8px;
  font-size: 16px;
  color: var(--fc-on-surface-variant, #888);
}
.fc-form-sublabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-on-surface-variant, #888);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Teilnehmer */
.fc-appointment-participants {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.fc-appointment-participant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--fc-surface-container-low, #f2f2f2);
  border-radius: var(--fc-radius, 4px);
}
.fc-appointment-participant-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-appointment-participant-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.fc-appointment-participant-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-tertiary, #00667b);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.fc-appointment-participant-name {
  font-size: 13px;
  font-weight: 500;
}
.fc-appointment-participant-status {
  font-size: 12px;
  font-weight: 600;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fc-appointment-participant-status--accepted { color: #4caf50; }
.fc-appointment-participant-status--declined { color: #f44336; }
.fc-appointment-participant-status--pending { color: #ff9800; }
.fc-appointment-participant-status--tentative { color: #9e9e9e; }

.fc-appointment-participant-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--fc-radius, 4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.fc-appointment-participant-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.fc-appointment-participant-dropdown-item:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

/* Erinnerungen */
.fc-appointment-reminders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.fc-appointment-notify-channels {
  display: flex;
  align-items: center;
}

/* Wiederholung */
.fc-appointment-recurrence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.fc-appointment-weekday-picker {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.fc-appointment-weekday-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s;
}
.fc-appointment-weekday-btn.is-active {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  border-color: var(--fc-primary-container, #DD3333);
}

/* Zeitraster-Slot Klick-Cursor */
.fc-calendar-tg-slot {
  cursor: pointer;
}
.fc-calendar-tg-slot:hover {
  background: rgba(0, 102, 123, 0.04);
}

/* ─── Monatsansicht ─── */
.fc-calendar-month {
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  overflow: hidden;
  flex: 1 1 auto;
}

.fc-calendar-month-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-lowest, #fff);
}

.fc-calendar-month-dow {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fc-on-surface-variant, #888);
  text-align: center;
  text-transform: uppercase;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-month-dow:last-child {
  border-right: none;
}

.fc-calendar-week-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex: 1 1 0;
}

.fc-calendar-week-row:last-child {
  border-bottom: none;
}

.fc-calendar-month-row-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  flex: 1 1 auto;
}

/* ─── Tageszelle ─── */
.fc-calendar-day-cell {
  min-width: 0;
  overflow: hidden;
  padding: 4px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Update v2.9.1: height: 100% damit Spalten den vollen Wochenraster-Body ausfüllen; kein Datum-Header → kein border-top nötig */
.fc-calendar-week-body .fc-calendar-day-cell {
  min-height: 120px;
  height: 100%;
  border-top: none;
}

.fc-calendar-day-cell:last-child {
  border-right: none;
}

.fc-calendar-day-cell.is-compact {
  min-height: 80px;
  padding: 3px;
}

.fc-calendar-day-cell.is-other-month {
  background: rgba(0, 0, 0, 0.015);
}

/* Tag-Header in Tageszelle */
.fc-calendar-day-header {
  padding: 2px 4px;
}

.fc-calendar-day-cell.is-compact .fc-calendar-day-header {
  padding: 1px 2px;
}

.fc-calendar-day-num {
  font-size: var(--fc-font-body-sm, 13px);

  color: var(--fc-on-surface, #1a1a1a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: var(--fc-radius, 4px);
}

.fc-calendar-day-header.is-today .fc-calendar-day-num {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  font-weight: 700;
}

.fc-calendar-day-header.is-other-month .fc-calendar-day-num {
  color: var(--fc-on-surface-variant, #aaa);
}

/* Aufgaben-Liste in Tageszelle */
.fc-calendar-day-tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ─── Aufgaben-Karte ─── */
.fc-calendar-task {
  position: relative;
  display: flex;
  align-items: flex-start;      /* Mehrzeiler oben ausrichten */
  width: 100%;
  min-height: 26px;             /* Mindesthöhe statt fester Höhe */
  height: auto;                 /* Mehrzeilig möglich */
  padding: 4px 6px 4px 10px;
  font-size: 12px;

  color: var(--fc-on-surface, #1a1a1a);
  background: var(--fc-surface-container-lowest, #fff);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  cursor: pointer;
  text-align: left;
  overflow: visible;
  margin: 1px 0;            /* Update v3.1.8: Kompakterer Abstand zwischen Aufgaben */
  transition: background 100ms, padding-left 100ms;
  box-sizing: border-box;
}

.fc-calendar-task::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc-row-color, #cccccc);
  border-top-left-radius: var(--fc-radius, 4px);
  border-bottom-left-radius: var(--fc-radius, 4px);
}

.fc-calendar-task:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-calendar-task.is-compact {
  height: 22px;
  font-size: 11px;
}

.fc-calendar-task.is-done .fc-calendar-task-title {
  text-decoration: line-through;
  color: var(--fc-on-surface-variant, #888);
  opacity: 0.72;
}

.fc-calendar-task-title {
  flex: 1 1 auto;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;          /* Mehrzeiliger Text */
  word-break: break-word;
  line-height: 1.35;
}

/* "+N weitere"-Link */
.fc-calendar-more {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  line-height: 1.4;
}

.fc-calendar-more:hover {
  background: rgba(0, 102, 123, 0.08);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .fc-calendar-toolbar {
    gap: var(--fc-space-2, 8px);
  }

  .fc-calendar-week-head,
  .fc-calendar-week-body,
  .fc-calendar-month-row-cells {
    overflow-x: auto;
  }

  .fc-calendar-col-header {
    min-width: 80px;
  }

  .fc-calendar-day-cell {
    min-width: 80px;
  }
}

/* =========================================================================
   KALENDER – WOCHENENDE & FILTER (v2.9.2)
   ========================================================================= */

/* ── Toolbar Rechte Gruppe ──────────────────────────────────────────────── */
.fc-calendar-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}

/* ── Optionen- und Filter-Button ────────────────────────────────────────── */
.fc-calendar-options-btn,
.fc-calendar-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
  cursor: pointer;
  transition: background 120ms;
}

.fc-calendar-options-btn:hover,
.fc-calendar-filter-btn:hover {
  background: var(--fc-surface-container-low);
}

.fc-calendar-options-btn .material-icons-round,
.fc-calendar-filter-btn .material-icons-round {
  font-size: 18px;
}

/* Filter-Button: aktiver Zustand */
.fc-calendar-filter-btn.is-active {
  color: var(--fc-tertiary);
  border-color: var(--fc-tertiary);
}

/* Filter-Badge (Zähler) */
.fc-calendar-filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: var(--fc-tertiary);
  border-radius: 8px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Oranger Punkt für ungespeicherte Änderungen */
.fc-calendar-filter-dirty-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F5A623;
  pointer-events: none;
}

/* ── Toolbar-Action-Wrapper (Button + Popover) ─────────────────────────── */
.fc-calendar-toolbar-action {
  position: relative;
  display: inline-flex;
}

/* ── Popover (allgemein) ────────────────────────────────────────────────── */
.fc-popover {
  position: absolute;
  top: calc(100% + 6px);
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-3);
  z-index: 50;
  min-width: 240px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.fc-popover--right {
  right: 0;
}

.fc-popover--left {
  left: 0;
}

/* ── Popover-Inhalte ────────────────────────────────────────────────────── */
.fc-calendar-popover-heading {
  font-size: var(--fc-font-label-md, 12px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fc-on-surface-variant, #6b6b6b);
  letter-spacing: 0.04em;
  margin-bottom: var(--fc-space-2);
  padding-bottom: var(--fc-space-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-calendar-popover-radio,
.fc-calendar-popover-toggle {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: 5px 2px;
  cursor: pointer;
  font-size: var(--fc-font-body-md, 14px);
  color: var(--fc-on-surface);
  border-radius: var(--fc-radius);
  transition: background 100ms;
  width: 100%;
}

.fc-calendar-popover-radio:hover,
.fc-calendar-popover-toggle:hover {
  background: var(--fc-surface-container-low);
}

.fc-calendar-popover-radio input[type="radio"],
.fc-calendar-popover-toggle input[type="checkbox"] {
  accent-color: var(--fc-tertiary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
}

.fc-calendar-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  margin-top: var(--fc-space-3);
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* ── Wochenend-Layout-Varianten (Wochenansicht) ──────────────────────────
   Die Klasse wird auf .fc-calendar-week gesetzt, alle Kinder-Grids erben.
   ─────────────────────────────────────────────────────────────────────── */

/* full = Standard-Grid (7 gleiche Spalten) – keine extra Klasse nötig */
.fc-calendar-week .fc-calendar-week-head,
.fc-calendar-week .fc-calendar-span-zone,
.fc-calendar-week .fc-calendar-week-body {
  grid-template-columns: repeat(7, 1fr);
}

/* narrow: Sa + So als 40-px-Spalten */
.fc-calendar-week.is-weekend-narrow .fc-calendar-week-head,
.fc-calendar-week.is-weekend-narrow .fc-calendar-span-zone,
.fc-calendar-week.is-weekend-narrow .fc-calendar-week-body {
  grid-template-columns: repeat(5, 1fr) 40px 40px;
}

/* hidden: nur Mo–Fr */
.fc-calendar-week.is-weekend-hidden .fc-calendar-week-head,
.fc-calendar-week.is-weekend-hidden .fc-calendar-span-zone,
.fc-calendar-week.is-weekend-hidden .fc-calendar-week-body {
  grid-template-columns: repeat(5, 1fr);
}

/* sunday_hidden: Mo–Sa */
.fc-calendar-week.is-weekend-sunday_hidden .fc-calendar-week-head,
.fc-calendar-week.is-weekend-sunday_hidden .fc-calendar-span-zone,
.fc-calendar-week.is-weekend-sunday_hidden .fc-calendar-week-body {
  grid-template-columns: repeat(6, 1fr);
}

/* ── Wochenend-Layout-Varianten (Monatsansicht) ──────────────────────────
   Klasse auf .fc-calendar-month gesetzt.
   ─────────────────────────────────────────────────────────────────────── */

/* full = Standard (7 Spalten) */
.fc-calendar-month .fc-calendar-month-head,
.fc-calendar-month .fc-calendar-month-row-cells,
.fc-calendar-month .fc-calendar-span-zone-month {
  grid-template-columns: repeat(7, 1fr);
}

/* narrow: Sa + So als 40-px-Spalten */
.fc-calendar-month.is-weekend-narrow .fc-calendar-month-head,
.fc-calendar-month.is-weekend-narrow .fc-calendar-month-row-cells,
.fc-calendar-month.is-weekend-narrow .fc-calendar-span-zone-month {
  grid-template-columns: repeat(5, 1fr) 40px 40px;
}

/* hidden: nur Mo–Fr */
.fc-calendar-month.is-weekend-hidden .fc-calendar-month-head,
.fc-calendar-month.is-weekend-hidden .fc-calendar-month-row-cells,
.fc-calendar-month.is-weekend-hidden .fc-calendar-span-zone-month {
  grid-template-columns: repeat(5, 1fr);
}

/* sunday_hidden: Mo–Sa */
.fc-calendar-month.is-weekend-sunday_hidden .fc-calendar-month-head,
.fc-calendar-month.is-weekend-sunday_hidden .fc-calendar-month-row-cells,
.fc-calendar-month.is-weekend-sunday_hidden .fc-calendar-span-zone-month {
  grid-template-columns: repeat(6, 1fr);
}


/* =========================================================================
   KALENDER – QUICK-ADD, HOVER-CHECK & DRAG AND DROP (v2.9.4)
   =========================================================================
   Hinweis: Der v2.9.3-Block wird durch diesen ersetzt.
   Korrekturen: kein display:flex-Override auf .fc-calendar-task,
   kein overflow:visible-Override – das Original (v2.9.0) bleibt erhalten.
   ========================================================================= */

/* ── Check-Icon (absolut positioniert, kein Layout-Eingriff) ── */

/* Das .fc-calendar-task benutzt bereits display:flex aus v2.9.0.
   Das check-icon wird über position:absolute platziert. */

.fc-calendar-check-icon {
  position:        absolute;
  left:            4px;
  top:             3px;          /* Fix: Mehrzeiler → oben ausrichten statt 50% */
  transform:       none;
  width:           18px;
  height:          18px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 120ms;
  color:           var(--fc-on-surface-variant);
  cursor:          pointer;
  border-radius:   50%;
  background:      transparent;
  border:          0;
  padding:         0;
  z-index:         2;
}

.fc-calendar-check-icon .material-icons-round {
  font-size: 15px;
}

/* Beim Hover über die Karte: check-icon sichtbar */
.fc-calendar-task.has-check:hover .fc-calendar-check-icon {
  opacity: 1;
}

/* Erledigte Aufgabe: dauerhaft sichtbar in Türkis */
.fc-calendar-check-icon.is-done {
  opacity: 1;
  color:   var(--fc-tertiary, #00667b);
}

.fc-calendar-check-icon:hover {
  background: rgba(0, 102, 123, 0.08);
  color:      var(--fc-tertiary, #00667b);
}

.fc-calendar-check-icon.is-done:hover {
  background: rgba(0, 102, 123, 0.12);
}

/* Update v3.3.90: Loesch-Icon fuer Aufgaben direkt im Kalender. */
.fc-calendar-task-delete {
  position:        absolute;
  right:           4px;
  top:             3px;
  width:           18px;
  height:          18px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 120ms;
  color:           var(--fc-on-surface-variant);
  cursor:          pointer;
  border-radius:   var(--fc-radius, 4px);
  background:      transparent;
  border:          0;
  padding:         0;
  z-index:         2;
}

.fc-calendar-task-delete .material-icons-round {
  font-size: 15px;
}

.fc-calendar-task.has-delete:hover .fc-calendar-task-delete {
  opacity: 1;
}

.fc-calendar-task-delete:hover {
  background: rgba(221, 51, 51, 0.08);
  color: var(--fc-primary-container, #DD3333);
}

/* Karte mit check-icon braucht etwas mehr left-padding */
.fc-calendar-task.has-check {
  padding-left: 10px;           /* Standard: kein Platz für Icon */
}
.fc-calendar-task.has-check:hover {
  padding-left: 22px;           /* Hover: Platz für Check-Icon */
}

.fc-calendar-task.has-delete {
  padding-right: 24px;
}

/* Touch-Geräte: Check immer sichtbar */
@media (hover: none) {
  .fc-calendar-check-icon {
    opacity: 1;
  }
  .fc-calendar-task-delete,
  .fc-calendar-span-delete {
    opacity: 1;
  }
}

/* ── Drag & Drop ── */

/* Karte während des Ziehens (Original halbdurchsichtig) */
.fc-calendar-task.is-dragging {
  opacity: 0.35 !important;
  cursor: grabbing;
}

/* Drag-Overlay: Phantom-Karte */
.fc-calendar-task--drag-overlay {
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  cursor:     grabbing;
  opacity:    1 !important;
  border:     1px solid rgba(0,0,0,0.12) !important;
}

/* Drop-Ziel-Hervorhebung */
.fc-calendar-day-cell.is-drop-over {
  background: rgba(0, 102, 123, 0.06) !important;
  outline:    2px solid var(--fc-tertiary, #00667b);
  outline-offset: -2px;
}

/* ── Quick-Add-Button (Update v2.9.4: immer sichtbar) ── */

.fc-calendar-quickadd {
  padding:        2px var(--fc-space-2, 8px) 4px;
  margin-top:     2px;
}

/* Button IMMER sichtbar (kein opacity:0 mehr) */
.fc-calendar-quickadd-btn {
  display:      flex;
  align-items:  center;
  gap:          4px;
  width:        100%;
  padding:      3px 4px;
  border:       0;
  border-radius: var(--fc-radius, 4px);
  background:   transparent;
  color:        var(--fc-on-surface-variant, #888);
  font-size:    var(--fc-font-label-md, 12px);
  cursor:       pointer;
  text-align:   left;
  white-space:  nowrap;
  transition:   background 100ms, color 100ms;
  /* Keine opacity:0 – Button ist immer sichtbar */
}

.fc-calendar-quickadd-btn:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
  color:      var(--fc-on-surface, #1a1a1a);
}

.fc-calendar-quickadd-btn .material-icons-round {
  font-size:   14px;
  flex-shrink: 0;
}

.fc-calendar-quickadd-label {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Inline-Input-Feld */
.fc-calendar-quickadd-input {
  width:        100%;
  height:       28px;
  font-size:    var(--fc-font-label-md, 12px);
  padding:      2px 6px;
  border:       1px solid var(--fc-primary-container, #DD3333);
  border-radius: var(--fc-radius, 4px);
}

/* ==========================================================================
   CHAT – Update v3.0.0
   ========================================================================== */

/* Chat-Seite Layout */
.fc-chat-page {
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--fc-background, #f0f0f0);
}

.fc-chat-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-md);
}

.fc-chat-sidebar-col {
  width: 300px;
  min-width: 300px;
  border-right: 1px solid rgba(0,0,0,0.07);
  background: var(--fc-surface-container-lowest, #ffffff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fc-chat-window-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Chat-Leer-Zustand */
.fc-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--fc-on-surface-variant);
  gap: 12px;
}

.fc-chat-empty .material-icons-round {
  font-size: 48px;
  opacity: 0.4;
}

.fc-chat-empty p {
  font-size: var(--fc-font-body-md);
  margin: 0;
}

/* --- Chat Sidebar --- */
.fc-chat-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fc-chat-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.fc-chat-sidebar-search .material-icons-round {
  font-size: 20px;
  color: var(--fc-on-surface-variant);
}

.fc-chat-sidebar-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--fc-font-body-md);
  background: transparent;
  font-family: var(--fc-font-family);
}

.fc-chat-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.fc-chat-sidebar-section {
  padding: 12px 16px 4px;
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fc-on-surface-variant);
}

.fc-chat-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.fc-chat-sidebar-item:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-chat-sidebar-item.active {
  background: var(--fc-primary-fixed, #ffdad6);
}

.fc-chat-sidebar-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--fc-shell-bg, #384859);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: #ffffff;
}

.fc-chat-sidebar-avatar-project {
  border-radius: 4px;
  color: #fff;
}

.fc-chat-sidebar-avatar-project .material-icons-round {
  font-size: 18px;
}

.fc-chat-sidebar-avatar-ai {
  border-radius: var(--fc-radius, 4px);
  background: var(--fc-tertiary, #00667b);
}

.fc-chat-sidebar-avatar-ai .material-icons-round {
  font-size: 18px;
}

.fc-chat-sidebar-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-chat-sidebar-name {
  font-size: var(--fc-font-body-md);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-chat-sidebar-ai-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--fc-radius-sm, 2px);
  background: rgba(0, 102, 123, 0.12);
  color: var(--fc-tertiary, #00667b);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

.fc-chat-sidebar-preview {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-chat-sidebar-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* --- Chat Window --- */
.fc-chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #E1E1E1;
}

.fc-chat-window-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--fc-surface-container-lowest, #ffffff);
  border-bottom: 2px solid #E1E1E1;
  min-height: 56px;
}

.fc-chat-back-btn {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
  color: var(--fc-on-surface);
  border-radius: 50%;
}

.fc-chat-back-btn:hover {
  background: var(--fc-surface-container-low);
}

.fc-chat-window-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-chat-window-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fc-font-title-md);
  font-weight: 600;
  margin: 0;
}

.fc-chat-title-ai-icon {
  color: var(--fc-tertiary, #00667b);
  font-size: 18px;
}

.fc-chat-window-subtitle {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
}

/* Nachrichtenliste */
.fc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-chat-load-more {
  text-align: center;
  padding: 8px 0 16px;
}

.fc-chat-load-more button {
  border: none;
  background: var(--fc-surface-container-lowest, #ffffff);
  color: var(--fc-primary-container, #DD3333);
  font-size: var(--fc-font-label-md);
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--fc-font-family);
}

.fc-chat-load-more button:hover {
  background: var(--fc-surface-container-low);
}

/* --- Chat Message --- */
.fc-chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 75%;
  position: relative;
}

.fc-chat-msg-own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.fc-chat-msg-other {
  align-self: flex-start;
}

.fc-chat-msg-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--fc-shell-bg, #384859);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-top: 2px;
}

.fc-chat-msg-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-chat-msg-sender {
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-on-surface-variant);
  padding-left: 8px;
}

/* Sprechblasen */
.fc-chat-bubble {
  padding: 8px 28px 8px 12px;
  border-radius: 12px;
  max-width: 100%;
  word-break: break-word;
  position: relative;
}

.fc-chat-bubble-own {
  background: var(--fc-primary-container, #DD3333);
  color: var(--fc-on-primary-container, #ffffff);
  border-top-right-radius: 4px;
}

.fc-chat-bubble-other {
  background: var(--fc-surface-container-low, #f2f2f2);
  color: var(--fc-on-surface);
  border-top-left-radius: 4px;
}

.fc-chat-bubble-deleted {
  background: transparent;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
  padding: 4px 0;
}

.fc-chat-bubble-text {
  font-size: var(--fc-font-body-md);
  line-height: 1.4;
}

.fc-chat-bubble-text p {
  margin: 0;
}

.fc-chat-bubble-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
  gap: 2px;
}

.fc-chat-bubble-attachments {
  margin-top: 8px;
}

/* Update v3.0.2: Reply-Zitat innerhalb der Bubble (WhatsApp-Stil) */
.fc-chat-msg-reply {
  background: rgba(0,0,0,0.06);
  border-left: 3px solid var(--fc-primary-container, #DD3333);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: var(--fc-font-label-md);
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.fc-chat-msg-reply:hover {
  background: rgba(0,0,0,0.1);
}

.fc-chat-bubble-own .fc-chat-msg-reply {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.6);
}

.fc-chat-bubble-own .fc-chat-msg-reply:hover {
  background: rgba(255,255,255,0.25);
}

.fc-chat-msg-reply-name {
  font-weight: 600;
  display: block;
  font-size: var(--fc-font-label-sm);
  color: var(--fc-primary-container, #DD3333);
}

.fc-chat-bubble-own .fc-chat-msg-reply-name {
  color: rgba(255,255,255,0.85);
}

.fc-chat-msg-reply-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fc-on-surface-variant);
  line-height: 1.3;
}

.fc-chat-bubble-own .fc-chat-msg-reply-text {
  color: rgba(255,255,255,0.7);
}

/* Kontextmenü (WhatsApp-Stil, Rechtsklick) */
.fc-chat-context-menu {
  z-index: 200;
  background: var(--fc-surface-container-lowest, #ffffff);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.fc-chat-context-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  color: var(--fc-on-surface);
  text-align: left;
}

.fc-chat-context-menu button:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-chat-context-menu button .material-icons-round {
  font-size: 20px;
  color: var(--fc-on-surface-variant);
}

.fc-chat-context-menu .fc-chat-context-danger {
  color: var(--fc-error, #ba1a1a);
}

.fc-chat-context-menu .fc-chat-context-danger .material-icons-round {
  color: var(--fc-error, #ba1a1a);
}

/* --- Chat Input --- */
/* Update v3.0.4: position:relative für Emoji-Picker-Positionierung */
.fc-chat-input-wrapper {
  position: relative;
  background: var(--fc-surface-container-lowest, #ffffff);
  border-top: 1px solid rgba(0,0,0,0.07);
  padding: 8px 16px 12px;
}

.fc-chat-input-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--fc-surface-container-low, #f2f2f2);
  border-left: 3px solid var(--fc-primary-container, #DD3333);
  border-radius: 4px;
}

.fc-chat-input-reply-content {
  flex: 1;
  min-width: 0;
}

.fc-chat-input-reply-name {
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  color: var(--fc-primary-container, #DD3333);
  display: block;
}

.fc-chat-input-reply-text {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fc-chat-input-reply-close {
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
  color: var(--fc-on-surface-variant);
  border-radius: 50%;
}

.fc-chat-input-reply-close:hover {
  background: var(--fc-surface-container);
}

.fc-chat-input-reply-close .material-icons-round {
  font-size: 18px;
}

.fc-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--fc-surface-container-low, #f2f2f2);
  border-radius: 4px;
  padding: 4px 8px;
}

.fc-chat-input-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  color: var(--fc-on-surface-variant);
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.fc-chat-input-btn:hover {
  background: var(--fc-surface-container);
}

.fc-chat-input-btn .material-icons-round {
  font-size: 20px;
}

.fc-chat-input-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  line-height: 1.4;
  padding: 8px 4px;
  background: transparent;
  max-height: 150px;
  min-height: 20px;
}

.fc-chat-input-send {
  border: none;
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.fc-chat-input-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fc-chat-input-send:not(:disabled):hover {
  background: var(--fc-primary, #b9151e);
}

.fc-chat-input-send .material-icons-round {
  font-size: 20px;
}

/* --- Emoji Picker --- */
.fc-chat-emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 16px;
  width: 280px;
  background: var(--fc-surface-container-lowest, #ffffff);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
  margin-bottom: 8px;
  z-index: 100;
}

.fc-chat-emoji-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 4px;
  gap: 2px;
}

.fc-chat-emoji-tab {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  color: var(--fc-on-surface-variant);
  display: flex;
  align-items: center;
}

.fc-chat-emoji-tab:hover,
.fc-chat-emoji-tab.active {
  background: var(--fc-surface-container-low, #f2f2f2);
  color: var(--fc-on-surface);
}

.fc-chat-emoji-tab .material-icons-round {
  font-size: 18px;
}

.fc-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding: 8px;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}

.fc-chat-emoji-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-chat-emoji-btn:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

/* --- Chat Attachments --- */
.fc-chat-attachment {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-chat-attachment-image {
  max-width: 240px;
}

.fc-chat-attachment-thumb {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
  display: block;
}

.fc-chat-attachment-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}

.fc-chat-attachment-link:hover {
  background: rgba(0,0,0,0.08);
}

.fc-chat-attachment-icon {
  font-size: 24px;
  color: var(--fc-on-surface-variant);
}

.fc-chat-attachment-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fc-chat-attachment-name {
  font-size: var(--fc-font-body-sm);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-chat-attachment-size {
  font-size: var(--fc-font-label-sm);
  color: var(--fc-on-surface-variant);
}

.fc-chat-attachment-download {
  font-size: 18px;
  color: var(--fc-on-surface-variant);
}

/* Update v3.3.48: Chat-Anhaenge als Projekt-Memory-Suggestion vormerken */
.fc-chat-attachment-memory {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: var(--fc-tertiary);
  font-size: var(--fc-font-body-sm);
  cursor: pointer;
}

.fc-chat-attachment-memory .material-icons-round {
  font-size: 16px;
}

.fc-chat-attachment-memory:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fc-chat-bubble-own .fc-chat-attachment-memory {
  color: #ffffff;
}

/* Update v3.0.3: Attachment-Styles in eigenen (roten) Bubbles → weiß */
.fc-chat-bubble-own .fc-chat-attachment-link {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

.fc-chat-bubble-own .fc-chat-attachment-link:hover {
  background: rgba(255,255,255,0.25);
}

.fc-chat-bubble-own .fc-chat-attachment-icon {
  color: rgba(255,255,255,0.85);
}

.fc-chat-bubble-own .fc-chat-attachment-name {
  color: #ffffff;
}

.fc-chat-bubble-own .fc-chat-attachment-size {
  color: rgba(255,255,255,0.7);
}

.fc-chat-bubble-own .fc-chat-attachment-download {
  color: rgba(255,255,255,0.85);
}

/* Datums-Trenner zwischen Tagen */
.fc-chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.fc-chat-date-separator-label {
  background: var(--fc-surface-container-lowest, #ffffff);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);

  padding: 4px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 3-Punkte-Menü-Trigger in Bubble */
.fc-chat-bubble {
  position: relative;
}

.fc-chat-bubble-menu-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}

.fc-chat-bubble:hover .fc-chat-bubble-menu-trigger {
  opacity: 1;
}

.fc-chat-bubble-menu-trigger .material-icons-round {
  font-size: 22px;
}

.fc-chat-bubble-own .fc-chat-bubble-menu-trigger {
  color: rgba(255,255,255,0.7);
}

.fc-chat-bubble-own .fc-chat-bubble-menu-trigger:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.15);
}

.fc-chat-bubble-other .fc-chat-bubble-menu-trigger {
  color: rgba(0,0,0,0.4);
}

.fc-chat-bubble-other .fc-chat-bubble-menu-trigger:hover {
  color: rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.06);
}

/* Lese-Häkchen */
.fc-chat-read-check {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
}

.fc-chat-read-check .material-icons-round {
  font-size: 18px;
  color: rgba(255,255,255,0.75);
}

.fc-chat-read-check-read .material-icons-round {
  color: #7dd3fc;
}

/* --- Responsive: Mobil nur eine Spalte --- */
@media (max-width: 768px) {
  .fc-chat-page {
    height: calc(100vh - 56px);
  }

  .fc-chat-sidebar-col {
    width: 100%;
    min-width: 100%;
  }

  .fc-chat-hidden-mobile {
    display: none !important;
  }

  .fc-chat-back-btn {
    display: flex;
  }

  .fc-chat-msg {
    max-width: 85%;
  }
}

/* Spin-Animation für Lade-Indikator */
@keyframes fc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fc-spin {
  animation: fc-spin 1s linear infinite;
}

/* =============================================================
   Update v3.0.1: Chat Phase 3 – Neue Styles
   ============================================================= */



/* --- Scroll-Highlight-Animation --- */
@keyframes fc-chat-highlight {
  0% { background: rgba(221,51,51,0.15); }
  100% { background: transparent; }
}

.fc-chat-msg-highlight {
  animation: fc-chat-highlight 2s ease-out;
  border-radius: 8px;
}

/* --- Drag & Drop Overlay --- */
.fc-chat-window-dragover {
  position: relative;
}

.fc-chat-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(221,51,51,0.08);
  border: 2px dashed var(--fc-primary-container, #DD3333);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: var(--fc-primary-container, #DD3333);
  font-size: var(--fc-font-title-md);

}

.fc-chat-drop-overlay .material-icons-round {
  font-size: 48px;
  opacity: 0.7;
}

/* --- Upload-Progress --- */
.fc-chat-upload-progress {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.fc-chat-upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
}

.fc-chat-upload-item .material-icons-round {
  font-size: 18px;
  color: var(--fc-on-surface-variant);
}

.fc-chat-upload-error .material-icons-round {
  color: var(--fc-error, #ba1a1a) !important;
}

.fc-chat-upload-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-chat-upload-bar {
  width: 80px;
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.fc-chat-upload-bar-fill {
  height: 100%;
  background: var(--fc-primary-container, #DD3333);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* --- Lightbox --- */
.fc-chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.fc-chat-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.fc-chat-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}

.fc-chat-lightbox-close .material-icons-round {
  font-size: 24px;
}

.fc-chat-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.fc-chat-lightbox-download {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: var(--fc-font-body-md);
  padding: 8px 16px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

.fc-chat-lightbox-download:hover {
  background: rgba(255,255,255,0.25);
}

.fc-chat-lightbox-download .material-icons-round {
  font-size: 20px;
}

/* --- Nachrichtenformatierung --- */
.fc-chat-code-inline {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}

.fc-chat-bubble-own .fc-chat-code-inline {
  background: rgba(255,255,255,0.2);
}

.fc-chat-code-block {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.06);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.fc-chat-bubble-own .fc-chat-code-block {
  background: rgba(255,255,255,0.15);
}

/* --- Links in Nachrichten --- */
.fc-chat-link {
  text-decoration: underline;
  word-break: break-all;
}

.fc-chat-bubble-own .fc-chat-link {
  color: #ffffff;
}

.fc-chat-bubble-other .fc-chat-link {
  color: var(--fc-primary-container, #DD3333);
}

/* =============================================================
   Update v3.0.2: Typing-Indicator
   ============================================================= */

.fc-chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  align-self: flex-start;
}

.fc-chat-typing-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  background: var(--fc-surface-container-low, #f2f2f2);
  border-radius: 12px;
}

.fc-chat-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fc-on-surface-variant, #5b403d);
  opacity: 0.4;
  animation: fc-typing-bounce 1.4s infinite ease-in-out;
}

.fc-chat-typing-dots span:nth-child(1) { animation-delay: 0s; }
.fc-chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.fc-chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fc-typing-bounce {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.fc-chat-typing-text {
  font-size: var(--fc-font-label-sm);
  color: var(--fc-on-surface-variant);
  font-style: normal;
}


/* =============================================================
   Update v3.0.2: Typing-Indicator in Sidebar
   ============================================================= */

.fc-chat-sidebar-typing {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  font-style: normal;

  display: flex;
  align-items: center;
  gap: 4px;
}

.fc-chat-typing-dots-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.fc-chat-typing-dots-inline span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fc-on-surface-variant);
  opacity: 0.4;
  animation: fc-typing-bounce 1.4s infinite ease-in-out;
}

.fc-chat-typing-dots-inline span:nth-child(1) { animation-delay: 0s; }
.fc-chat-typing-dots-inline span:nth-child(2) { animation-delay: 0.2s; }
.fc-chat-typing-dots-inline span:nth-child(3) { animation-delay: 0.4s; }

.fc-chat-sidebar-preview-hidden {
  display: none;
}

/* =============================================================
   Update v3.0.3: Chat Phase 4 – URL-Sharing & Gast-Zugang
   ============================================================= */

/* --- Share-Button im Chat-Header --- */
.fc-chat-share-btn {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--fc-on-surface-variant);
  display: flex;
  align-items: center;
}

.fc-chat-share-btn:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
  color: var(--fc-on-surface);
}

.fc-chat-share-btn .material-icons-round {
  font-size: 20px;
}

/* --- Share-Dialog (Modal) --- */
.fc-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-share-dialog {
  background: var(--fc-surface-container-lowest, #ffffff);
  border-radius: 4px;
  width: 440px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
}

.fc-share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.fc-share-dialog-header h3 {
  margin: 0;
  font-size: var(--fc-font-title-md);
  font-weight: 600;
}

.fc-share-dialog-close {
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px;
  color: var(--fc-on-surface-variant);
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.fc-share-dialog-close:hover {
  background: var(--fc-surface-container-low);
}

.fc-share-dialog-close .material-icons-round {
  font-size: 20px;
}

.fc-share-dialog-body {
  padding: 20px;
}

/* Toggle-Zeile */
.fc-share-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fc-share-toggle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-share-toggle-label {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
}

.fc-share-toggle-hint {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  line-height: 1.4;
}

/* Toggle-Switch */
.fc-share-toggle-switch {
  width: 44px;
  height: 24px;
  min-width: 44px;
  border-radius: 12px;
  border: 2px solid var(--fc-on-surface-variant);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  margin-top: 2px;
}

.fc-share-toggle-switch.fc-share-toggle-on {
  background: var(--fc-primary-container, #DD3333);
  border-color: var(--fc-primary-container, #DD3333);
}

.fc-share-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fc-on-surface-variant);
  transition: all 0.2s ease;
}

.fc-share-toggle-on .fc-share-toggle-knob {
  left: 23px;
  background: #ffffff;
}

/* URL-Zeile */
.fc-share-url-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  align-items: stretch;
}

.fc-share-url-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  font-size: var(--fc-font-label-md);
  font-family: var(--fc-font-family);
  background: var(--fc-surface-container-low, #f2f2f2);
  color: var(--fc-on-surface);
}

.fc-share-url-input:focus {
  outline: none;
  border-color: var(--fc-primary-container, #DD3333);
}

.fc-share-url-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  cursor: pointer;
  font-size: var(--fc-font-label-md);
  font-family: var(--fc-font-family);
  font-weight: 500;
  white-space: nowrap;
}

.fc-share-url-copy:hover {
  background: var(--fc-primary, #b9151e);
}

.fc-share-url-copy .material-icons-round {
  font-size: 16px;
}

/* --- Shared Chat Page (Standalone) --- */
.fc-shared-chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #E1E1E1;
  font-family: var(--fc-font-family, 'Inter', sans-serif);
}

.fc-shared-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--fc-surface-container-lowest, #ffffff);
  border-bottom: 2px solid #E1E1E1;
  min-height: 56px;
}

.fc-shared-chat-header > .material-icons-round {
  font-size: 24px;
  color: var(--fc-primary-container, #DD3333);
}

.fc-shared-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-shared-chat-header-info h3 {
  margin: 0;
  font-size: var(--fc-font-title-md);
  font-weight: 600;
}

.fc-shared-chat-member-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fc-font-label-sm);
  color: var(--fc-tertiary, #00667b);
  background: rgba(0, 102, 123, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.fc-shared-chat-member-badge .material-icons-round {
  font-size: 14px;
}

/* Fehler-Anzeige */
.fc-shared-chat-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--fc-on-surface-variant);
}

.fc-shared-chat-error .material-icons-round {
  font-size: 48px;
  opacity: 0.4;
}

.fc-shared-chat-error h3 {
  margin: 0;
  font-size: var(--fc-font-title-md);
}

.fc-shared-chat-error p {
  margin: 0;
  font-size: var(--fc-font-body-md);
}

/* --- Gast-Nachrichten --- */
.fc-chat-msg-avatar-guest {
  background: var(--fc-tertiary, #00667b) !important;
}

.fc-chat-msg-sender-guest {
  color: var(--fc-tertiary, #00667b) !important;
}

.fc-chat-bubble-guest {
  background: rgba(0, 102, 123, 0.1);
  color: var(--fc-on-surface);
  border-top-left-radius: 4px;
}

/* --- Name-Input-Dialog (Overlay) --- */
.fc-shared-name-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-shared-name-dialog {
  background: var(--fc-surface-container-lowest, #ffffff);
  border-radius: 4px;
  padding: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
}

.fc-shared-name-dialog h4 {
  margin: 0 0 8px;
  font-size: var(--fc-font-title-md);
  font-weight: 600;
}

.fc-shared-name-dialog p {
  margin: 0 0 16px;
  font-size: var(--fc-font-body-md);
  color: var(--fc-on-surface-variant);
  line-height: 1.4;
}

.fc-shared-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  margin-bottom: 16px;
  box-sizing: border-box;
}

.fc-shared-name-input:focus {
  outline: none;
  border-color: var(--fc-primary-container, #DD3333);
}

.fc-shared-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.fc-shared-name-cancel {
  border: 1px solid rgba(0,0,0,0.15);
  background: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  color: var(--fc-on-surface-variant);
}

.fc-shared-name-cancel:hover {
  background: var(--fc-surface-container-low, #f2f2f2);
}

.fc-shared-name-submit {
  border: none;
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: var(--fc-font-body-md);
  font-family: var(--fc-font-family);
  font-weight: 500;
}

.fc-shared-name-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fc-shared-name-submit:not(:disabled):hover {
  background: var(--fc-primary, #b9151e);
}

/* =========================================================
   Update v3.0.4: Sidebar Unread-Badge
   ========================================================= */

.fc-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  background: var(--fc-primary-container, #DD3333);
  color: var(--fc-on-primary, #ffffff);
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  line-height: 1;
}

/* =========================================================
   Update v3.0.4: Projekt-Chat (kompakte Ansicht im Tab)
   ========================================================= */

.fc-project-chat {
  display: flex;
  height: calc(100vh - 280px);
  min-height: 400px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius, 4px);
  overflow: hidden;
  background: var(--fc-surface-container-lowest, #ffffff);
}

.fc-project-chat-sidebar {
  width: 240px;
  min-width: 200px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--fc-surface-container-lowest, #ffffff);
}

.fc-project-chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Update v3.0.4: "Zur Aufgabe machen" Formular */
.fc-create-task-chat-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-create-task-chat-form .fc-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fc-create-task-chat-form .fc-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-on-surface, #333);
}

.fc-create-task-chat-form .fc-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Update v3.3.80: Chat-Nachricht im Vault speichern */
.fc-chat-vault-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}

.fc-chat-vault-preview {
  display: flex;
  gap: var(--fc-space-3);
  align-items: flex-start;
  padding: var(--fc-space-3);
  background: var(--fc-surface-container-low);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
}

.fc-chat-vault-preview .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
  line-height: 1.3;
}

.fc-chat-vault-preview p {
  margin: 0;
  min-width: 0;
  font-size: var(--fc-font-body-sm);
  line-height: 1.5;
  color: var(--fc-on-surface);
}

.fc-chat-vault-note {
  margin: 0;
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface-variant);
}

.fc-chat-vault-error {
  padding: var(--fc-space-2) var(--fc-space-3);
  border: 1px solid var(--fc-error);
  border-radius: var(--fc-radius);
  background: var(--fc-error-container);
  color: var(--fc-on-error-container);
  font-size: var(--fc-font-body-sm);
}

/* Responsive: Projekt-Chat auf kleinen Bildschirmen */
@media (max-width: 768px) {
  .fc-project-chat-sidebar {
    width: 180px;
    min-width: 160px;
  }
}

/* ═══════════════════════════════════════════════════
   Update v3.0.5: Wiederkehrende Aufgaben (Recurrence)
   ═══════════════════════════════════════════════════ */

/* Update v3.0.6: Kompaktere Positionierung */
.fc-task-recurrence-section {
  padding: 4px 0 2px;
}

.fc-task-recurrence-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--fc-on-surface, #1a1a2e);
  user-select: none;
}

.fc-task-recurrence-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-right: 4px;
  accent-color: var(--fc-primary-container, #DD3333);
  cursor: pointer;
}

.fc-task-recurrence-fields {
  margin-top: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-3);
  background: var(--fc-surface-container-low, #f2f2f2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-task-recurrence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fc-task-recurrence-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-on-surface-variant, #666);
  min-width: 90px;
}

.fc-task-recurrence-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.fc-task-recurrence-interval {
  text-align: center;
}

.fc-task-recurrence-weekdays {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.fc-task-recurrence-weekday-btn {
  width: 32px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background: var(--fc-surface-container-lowest, #fff);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  color: var(--fc-on-surface, #1a1a2e);
}

.fc-task-recurrence-weekday-btn:hover {
  border-color: var(--fc-primary-container, #DD3333);
}

.fc-task-recurrence-weekday-btn.is-active {
  background: var(--fc-primary-container, #DD3333);
  color: #fff;
  border-color: var(--fc-primary-container, #DD3333);
}

/* Update v3.0.6: Timeline – Erledigte Vorgänger-Balken */
.fc-timeline-bar.is-predecessor {
  opacity: 0.35;
  cursor: pointer;
}
.fc-timeline-bar.is-predecessor:hover {
  opacity: 0.55;
}
/* Update v3.0.6: Timeline – Virtuelle wiederkehrende Aufgaben */
.fc-timeline-bar.is-virtual {
  opacity: 0.5;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  cursor: default;
}
.fc-timeline-bar.is-virtual:hover {
  opacity: 0.65;
}
/* Kalender: Virtuelle/wiederkehrende Aufgaben-Markierung */
.fc-calendar-task-card.is-recurring::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DD3333'%3E%3Cpath d='M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.7;
}

.fc-calendar-task-card.is-virtual {
  opacity: 0.6;
  border-style: dashed;
}

/* =========================================================
   AUFGABEN-STATISTIKEN – Task-Dashboard (v3.0.7)
   ========================================================= */

/* Projekt-Dashboard-Tab: Abstände wie andere Karten */
.fc-project-dashboard-tab .fc-metric-section {
  margin-top: 0;
  margin-bottom: var(--fc-space-4);
}
.fc-project-dashboard-tab .fc-task-stats-section {
  margin-top: 0;
}

/* Sektion */
.fc-task-stats-section {
  margin-top: var(--fc-space-6);
}

/* Metrikkarten */
.fc-task-stats-metrics {
  margin-bottom: var(--fc-space-4);
}
.fc-task-stats-metric-value {
  font-size: 2.5rem !important;
}
/* Überfällige-Karte: roter Akzent */
.fc-task-stats-metric-highlight {
  border-left: 3px solid var(--fc-primary-container) !important;
}
.fc-task-stats-metric-highlight .fc-metric-value {
  color: var(--fc-primary-container);
}

/* Charts-Grid: Balken + Donut nebeneinander */
.fc-task-stats-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fc-space-4);
}

/* Einzelne Chart-Karte */
.fc-task-stats-card {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--fc-radius);
  padding: var(--fc-space-4);
}
.fc-task-stats-card-title {
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  color: var(--fc-on-surface);
  margin-bottom: var(--fc-space-3);
}

/* Balkendiagramm */
.fc-task-stats-chart-wrap {
  overflow-x: auto;
  padding-bottom: var(--fc-space-2);
}
.fc-task-stats-bar-svg {
  display: block;
}
.fc-task-stats-bar-value {
  font-size: 11px;
  font-weight: 600;
  fill: var(--fc-on-surface);
  font-family: 'Inter', sans-serif;
}
.fc-task-stats-bar-label {
  font-size: 13px;
  font-weight: 500;
  fill: var(--fc-on-surface-variant);
  font-family: 'Inter', sans-serif;
}
.fc-task-stats-chart-footer {
  font-size: var(--fc-font-label-md);
  color: var(--fc-on-surface-variant);
  margin-top: var(--fc-space-2);
}

/* Donut-Chart */
.fc-task-stats-donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--fc-space-6);
  justify-content: center;
  padding: var(--fc-space-3) 0;
}
.fc-task-stats-donut-svg {
  flex-shrink: 0;
}
.fc-task-stats-donut-center {
  font-size: 28px;
  font-weight: 700;
  fill: var(--fc-on-surface);
  font-family: 'Inter', sans-serif;
}
.fc-task-stats-donut-segment-label {
  font-size: 11px;
  font-weight: 600;
  fill: #fff;
  font-family: 'Inter', sans-serif;
}
.fc-task-stats-donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}
.fc-task-stats-legend-item {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}
.fc-task-stats-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.fc-task-stats-legend-text {
  font-size: var(--fc-font-body-sm);
  color: var(--fc-on-surface);
}

/* Responsive */
@media (max-width: 900px) {
  .fc-task-stats-charts {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .fc-task-stats-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .fc-task-stats-donut-wrap {
    flex-direction: column;
  }
}


/* ─── Update v3.1.7: Termin-Resize-Handle ─── */
.fc-calendar-tg-appointment-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  border-radius: 0 0 var(--fc-radius, 4px) var(--fc-radius, 4px);
  z-index: 4;
  transition: background 0.15s ease;
}
.fc-calendar-tg-appointment:hover .fc-calendar-tg-appointment-resize-handle {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.15));
}
.fc-calendar-tg-appointment-resize-handle:hover {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25)) !important;
}
/* Visuelles Feedback während Resize */
.fc-calendar-tg-appointment.is-resizing {
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 10;
}
/* Endzeit-Label beim Resize (unten rechts im Termin-Block) */
.fc-calendar-tg-appointment-resize-label {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-appt-color, #DD3333);
  background: var(--fc-surface-container-lowest, #fff);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 5;
}
/* =========================================================
   VAULT (v3.2.3) – Frontend-Kern + Erweiterungen
   ========================================================= */

.fc-vault-page {
  display: grid;
  grid-template-columns: var(--fc-vault-tree-width, 250px) minmax(0, 1fr) 280px;
  gap: var(--fc-space-4);
  flex: 1;
  min-height: 0;
}

.fc-vault-page--embedded {
  grid-template-columns: var(--fc-vault-tree-width, 220px) minmax(0, 1fr) 240px;
  gap: var(--fc-space-3);
  min-height: 560px;
}

.fc-vault-page--meta-closed {
  grid-template-columns: var(--fc-vault-tree-width, 250px) minmax(0, 1fr);
}

.fc-vault-page--embedded.fc-vault-page--meta-closed {
  grid-template-columns: var(--fc-vault-tree-width, 220px) minmax(0, 1fr);
}

.fc-vault-tree,
.fc-vault-content,
.fc-vault-meta {
  background: var(--fc-surface-container-lowest);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  min-height: 0;
}

.fc-vault-tree,
.fc-vault-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fc-vault-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fc-vault-loading,
.fc-vault-content-centered {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-vault-tree-header,
.fc-vault-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}

.fc-vault-panel-label {
  margin: 0 0 var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fc-vault-tree-list {
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--fc-space-2);
}

.fc-vault-tree-list.is-sorting {
  cursor: grabbing;
}

.fc-vault-tree-hint {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin: var(--fc-space-2) var(--fc-space-3) 0;
  padding: var(--fc-space-2);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
  line-height: 1.35;
}

.fc-vault-tree-hint .material-icons-round {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--fc-tertiary);
}

.fc-vault-tree-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--fc-space-1);
  min-height: 34px;
  margin: var(--fc-space-2) var(--fc-space-2) 0;
  padding: 0 var(--fc-space-1);
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface);
  flex-shrink: 0;
}

.fc-vault-tree-root:hover,
.fc-vault-tree-root:focus-within {
  background: var(--fc-surface-container-low);
}

.fc-vault-tree-root.is-selected {
  background: color-mix(in srgb, var(--fc-tertiary) 11%, var(--fc-surface-container-lowest));
}

.fc-vault-tree-root-main {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--fc-font-family);
  font-size: var(--fc-font-body-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.fc-vault-tree-root-main span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-tree-root-main .fc-vault-node-icon {
  width: 18px;
  text-align: center;
}

.fc-vault-search {
  position: relative;
  padding: var(--fc-space-3) var(--fc-space-3) 0;
  flex-shrink: 0;
}

.fc-vault-search-input {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
  padding: 0 var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.11);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-search-input .material-icons-round {
  color: var(--fc-on-surface-variant);
  font-size: 18px;
}

.fc-vault-search-input input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fc-on-surface);
  font: inherit;
  font-size: var(--fc-font-body-sm);
}

.fc-vault-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  max-height: 260px;
  overflow: auto;
  margin-top: var(--fc-space-2);
  padding: var(--fc-space-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-search-state {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-vault-search-state.is-error {
  color: var(--fc-error);
}

.fc-vault-search-result {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  width: 100%;
  min-width: 0;
  padding: var(--fc-space-2);
  border: 0;
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface);
  cursor: pointer;
  text-align: left;
}

.fc-vault-search-result:hover {
  background: var(--fc-surface-container-low);
}

.fc-vault-search-result > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fc-vault-search-result strong,
.fc-vault-search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-search-result small {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
}

.fc-vault-tree-row {
  display: grid;
  position: relative;
  grid-template-columns: 18px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--fc-space-1);
  min-height: 32px;
  padding-left: calc(var(--fc-space-1) + (var(--fc-vault-level, 0) * 31px));
  padding-right: var(--fc-space-1);
  border-radius: var(--fc-radius);
  touch-action: none;
  --fc-vault-tree-row-bg: var(--fc-surface-container-lowest);
}

.fc-vault-tree-row.is-dragging {
  opacity: 0.55;
  background: var(--fc-surface-container-low);
  --fc-vault-tree-row-bg: var(--fc-surface-container-low);
}

.fc-vault-tree-row:hover {
  background: var(--fc-surface-container-low);
  --fc-vault-tree-row-bg: var(--fc-surface-container-low);
}

.fc-vault-tree-row.is-selected {
  background: color-mix(in srgb, var(--fc-tertiary) 11%, var(--fc-surface-container-lowest));
  --fc-vault-tree-row-bg: color-mix(in srgb, var(--fc-tertiary) 11%, var(--fc-surface-container-lowest));
}

.fc-vault-tree-row.is-drop-target::before {
  content: "";
  position: absolute;
  left: calc(var(--fc-space-1) + (var(--fc-vault-level, 0) * 31px));
  right: var(--fc-space-2);
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--fc-tertiary);
  pointer-events: none;
}

.fc-vault-tree-row.is-drop-target.is-drop-after::before {
  top: auto;
  bottom: -1px;
}

.fc-vault-tree-row.is-node-drop-target {
  border: 1px solid color-mix(in srgb, var(--fc-tertiary) 46%, transparent);
  background: color-mix(in srgb, var(--fc-tertiary) 15%, var(--fc-surface-container-lowest));
  --fc-vault-tree-row-bg: color-mix(in srgb, var(--fc-tertiary) 15%, var(--fc-surface-container-lowest));
}

.fc-vault-tree-row.is-node-drop-blocked {
  border: 1px solid color-mix(in srgb, var(--fc-error) 44%, transparent);
  background: color-mix(in srgb, var(--fc-error) 10%, var(--fc-surface-container-lowest));
  --fc-vault-tree-row-bg: color-mix(in srgb, var(--fc-error) 10%, var(--fc-surface-container-lowest));
}

.fc-vault-tree-row.is-node-drop-blocked::before {
  background: var(--fc-error);
}

.fc-vault-tree-toggle,
.fc-vault-tree-add,
.fc-vault-tree-root-main,
.fc-vault-tree-main {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--fc-font-family);
}

.fc-vault-tree-toggle,
.fc-vault-tree-add {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fc-radius);
  color: var(--fc-on-surface-variant);
  cursor: pointer;
}

.fc-vault-tree-toggle .material-icons-round,
.fc-vault-tree-add .material-icons-round {
  font-size: 18px;
}

.fc-vault-tree-toggle {
  width: 18px;
}

.fc-vault-tree-add {
  width: 22px;
}

.fc-vault-tree-add {
  opacity: 0;
}

.fc-vault-tree-row .fc-vault-tree-add {
  grid-column: 3;
}

.fc-vault-tree-row:hover .fc-vault-tree-add,
.fc-vault-tree-row:focus-within .fc-vault-tree-add,
.fc-vault-tree-root:hover .fc-vault-tree-add,
.fc-vault-tree-root:focus-within .fc-vault-tree-add {
  opacity: 1;
}

.fc-vault-tree-toggle:not(:disabled):hover,
.fc-vault-tree-add:hover {
  background: var(--fc-surface-container-high);
}

.fc-vault-tree-toggle {
  grid-column: 1;
}

.fc-vault-tree-main {
  grid-column: 1 / 3;
  display: flex;
  position: relative;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
  cursor: pointer;
  text-align: left;
  padding: 2px var(--fc-space-2) 2px 0;
}

.fc-vault-tree-main::after {
  content: none;
}

.fc-vault-tree-row.has-children .fc-vault-tree-main {
  grid-column: 2 / 3;
}

.fc-vault-node-icon {
  color: var(--fc-tertiary);
  flex-shrink: 0;
}

.fc-vault-tree-main .fc-vault-node-icon {
  width: 18px;
  font-size: 18px;
  text-align: center;
}

.fc-vault-tree-text {
  display: block;
  min-width: 0;
  padding-right: var(--fc-space-1);
  overflow: hidden;
}

.fc-vault-tree-text.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), rgba(0, 0, 0, 0.82) calc(100% - 7px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), rgba(0, 0, 0, 0.82) calc(100% - 7px), transparent 100%);
}

.fc-vault-tree-title {
  display: block;
  width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.fc-vault-tree-title {
  font-size: var(--fc-font-body-md);
  font-weight: 500;
  color: var(--fc-on-surface);
}

.fc-vault-tree-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-on-surface-variant);
  padding: var(--fc-space-8) var(--fc-space-3);
  text-align: center;
}

.fc-vault-tree-empty .material-icons-round {
  font-size: 32px;
}

.fc-vault-tree-resize {
  position: absolute;
  top: 0;
  right: -7px;
  bottom: 0;
  width: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 3;
}

.fc-vault-tree-resize::after {
  content: "";
  position: absolute;
  top: var(--fc-space-3);
  right: 6px;
  bottom: var(--fc-space-3);
  width: 1px;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity var(--fc-transition);
}

.fc-vault-tree-resize:hover::after,
.fc-vault-tree-resize:focus-visible::after,
.fc-vault-tree-is-resizing .fc-vault-tree-resize::after {
  opacity: 1;
}

.fc-vault-tree-is-resizing {
  cursor: col-resize;
  user-select: none;
}

.fc-vault-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-4);
  padding: var(--fc-space-5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}

.fc-vault-content-title-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  min-width: 0;
  flex: 1;
}

.fc-vault-content-title-row .fc-vault-node-icon {
  font-size: 28px;
}

.fc-vault-icon-picker {
  position: relative;
  flex-shrink: 0;
}

.fc-vault-icon-trigger {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-tertiary);
  cursor: pointer;
}

.fc-vault-icon-trigger:disabled {
  cursor: default;
  opacity: 0.75;
}

.fc-vault-icon-trigger .material-icons-round {
  font-size: 24px;
}

.fc-vault-icon-popover {
  position: absolute;
  top: calc(100% + var(--fc-space-2));
  left: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 40px));
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.11);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-icon-search {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: 0 var(--fc-space-2);
  border: 1px solid rgba(0, 0, 0, 0.11);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-icon-search input {
  width: 100%;
  height: 34px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fc-font-body-sm);
}

.fc-vault-icon-colors,
.fc-vault-color-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
}

.fc-vault-icon-colors {
  margin-top: var(--fc-space-3);
}

.fc-vault-color-swatch {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: var(--fc-radius);
  background: var(--fc-swatch-color);
  color: var(--fc-on-surface-variant);
  cursor: pointer;
}

.fc-vault-color-swatch.is-active {
  outline: 2px solid var(--fc-tertiary);
  outline-offset: 1px;
}

.fc-vault-color-swatch .material-icons-round {
  font-size: 16px;
  color: var(--fc-on-surface-variant);
}

.fc-vault-icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--fc-space-1);
  max-height: 252px;
  overflow: auto;
  margin-top: var(--fc-space-3);
}

.fc-vault-icon-grid button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface);
  cursor: pointer;
}

.fc-vault-icon-grid button:hover,
.fc-vault-icon-grid button.is-active {
  background: var(--fc-surface-container-low);
  color: var(--fc-tertiary);
}

.fc-vault-icon-empty {
  grid-column: 1 / -1;
  padding: var(--fc-space-3);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-vault-content-title-row h2 {
  margin: 0;
  font-size: var(--fc-font-headline-md);
  line-height: 1.25;
  overflow-wrap: anywhere;
  min-width: 0;
}

.fc-vault-title-input {
  font-size: var(--fc-font-title-lg);
  font-weight: 600;
  min-width: 0;
}

.fc-vault-content-actions,
.fc-vault-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.fc-vault-content-actions .fc-icon-btn {
  width: 36px;
  height: 36px;
  border-color: rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-lowest);
  color: var(--fc-on-surface-variant);
}

.fc-vault-content-actions .fc-icon-btn:hover,
.fc-vault-content-actions .fc-icon-btn.is-active {
  border-color: var(--fc-tertiary);
  background: var(--fc-surface-container-low);
  color: var(--fc-tertiary);
}

.fc-vault-content-actions .fc-icon-btn.danger:hover {
  border-color: var(--fc-error);
  color: var(--fc-error);
}

.fc-vault-content-actions .fc-icon-btn .material-icons-round {
  font-size: 20px;
}

.fc-vault-content-actions .fc-vault-memory-btn .material-icons-round {
  font-size: 20px;
}

.fc-vault-content-actions .fc-icon-btn:disabled,
.fc-vault-comment-actions .fc-icon-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fc-vault-meta-toggle.is-active {
  border-color: var(--fc-tertiary);
  color: var(--fc-tertiary);
  background: var(--fc-surface-container-low);
}

.fc-vault-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  flex-shrink: 0;
  width: max-content;
  max-width: 160px;
  padding: var(--fc-space-1) var(--fc-space-2);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
  font-weight: 600;
  white-space: nowrap;
}

.fc-vault-type-badge .material-icons-round {
  font-size: 16px;
}

.fc-vault-content-body {
  padding: var(--fc-space-5);
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.fc-vault-document-view {
  max-width: 920px;
  color: var(--fc-on-surface);
}

.fc-vault-editor {
  max-width: 920px;
}

.fc-vault-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-3);
  min-height: 280px;
  padding: var(--fc-space-8);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  text-align: center;
  color: var(--fc-on-surface-variant);
}

.fc-vault-placeholder .material-icons-round {
  font-size: 44px;
  color: var(--fc-tertiary);
}

.fc-vault-placeholder h3 {
  margin: 0;
  color: var(--fc-on-surface);
  font-size: var(--fc-font-title-lg);
}

.fc-vault-placeholder p {
  max-width: 460px;
  margin: 0;
  overflow-wrap: anywhere;
}

.fc-vault-folder {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}

.fc-vault-folder-dropzone {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fc-space-3);
  min-height: 82px;
  padding: var(--fc-space-4);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
}

.fc-vault-folder-dropzone.is-dragging {
  border-color: var(--fc-tertiary);
  background: color-mix(in srgb, var(--fc-tertiary) 10%, var(--fc-surface-container-lowest));
}

.fc-vault-folder-dropzone > .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 32px;
}

.fc-vault-folder-dropzone strong,
.fc-vault-folder-dropzone p {
  display: block;
  margin: 0;
}

.fc-vault-folder-dropzone p {
  margin-top: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
  overflow-wrap: anywhere;
}

.fc-vault-folder-dropzone input[type="file"] {
  display: none;
}

.fc-vault-child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--fc-space-3);
}

.fc-vault-child-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-space-2);
  padding: var(--fc-space-4);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.fc-vault-child-card:hover {
  border-color: rgba(0, 102, 123, 0.35);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-child-card .material-icons-round {
  color: var(--fc-tertiary);
}

.fc-vault-child-card strong,
.fc-vault-child-card small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-child-card small {
  color: var(--fc-on-surface-variant);
}

.fc-vault-file,
.fc-vault-bookmark-edit {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
  max-width: 920px;
}

.fc-vault-dropzone {
  position: relative;
  display: flex;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-8);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  text-align: center;
  color: var(--fc-on-surface-variant);
}

.fc-vault-dropzone.is-dragging {
  border-color: var(--fc-tertiary);
  background: color-mix(in srgb, var(--fc-tertiary) 8%, var(--fc-surface-container-lowest));
}

.fc-vault-dropzone > .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 44px;
}

.fc-vault-dropzone strong {
  color: var(--fc-on-surface);
}

.fc-vault-dropzone p {
  margin: 0;
}

.fc-vault-dropzone input[type="file"] {
  display: none;
}

.fc-vault-file-card,
.fc-vault-bookmark-card {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  overflow: hidden;
}

.fc-vault-file-card {
  padding: var(--fc-space-4);
}

.fc-vault-file-preview {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-file-preview-head {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-on-surface);
  font-size: var(--fc-font-label-md);
}

.fc-vault-file-preview-head .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
}

.fc-vault-file-preview-image-btn {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
  cursor: zoom-in;
}

.fc-vault-file-preview-image-btn > img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-file-preview.is-pdf {
	padding: var(--fc-space-2);
}

.fc-vault-pdf-viewer {
	display: flex;
	flex-direction: column;
	min-height: 560px;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--fc-radius);
	background: var(--fc-surface-container-lowest);
	overflow: hidden;
}

.fc-vault-pdf-toolbar {
	display: flex;
	align-items: center;
	gap: var(--fc-space-2);
	padding: var(--fc-space-2) var(--fc-space-3);
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	background: var(--fc-surface-container-lowest);
	color: var(--fc-on-surface);
}

.fc-vault-pdf-toolbar-spacer {
	flex: 1 1 auto;
}

.fc-vault-pdf-toolbar .fc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--fc-radius);
	background: var(--fc-surface-container-lowest);
	color: var(--fc-on-surface);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--fc-transition), border-color var(--fc-transition), color var(--fc-transition);
}

.fc-vault-pdf-toolbar .fc-icon-btn:hover:not(:disabled):not(.is-disabled),
.fc-vault-pdf-toolbar .fc-icon-btn.is-active {
	border-color: var(--fc-tertiary);
	color: var(--fc-tertiary);
	background: var(--fc-surface-container-low);
}

.fc-vault-pdf-toolbar .fc-icon-btn:disabled,
.fc-vault-pdf-toolbar .fc-icon-btn.is-disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.fc-vault-pdf-toolbar .fc-icon-btn .material-icons-round {
	font-size: 20px;
}

.fc-vault-pdf-page-label {
	white-space: nowrap;
	color: var(--fc-on-surface-variant);
	font-size: var(--fc-font-label-md);
	font-weight: 600;
}

.fc-vault-pdf-canvas-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex: 1;
	min-height: 520px;
	padding: var(--fc-space-4);
	background: var(--fc-surface-container-low);
	overflow: auto;
}

.fc-vault-pdf-canvas {
	display: block;
	max-width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--fc-radius);
	background: #ffffff;
}

.fc-vault-pdf-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--fc-space-2);
	min-height: 280px;
	color: var(--fc-on-surface-variant);
	text-align: center;
}

.fc-vault-pdf-state.is-rendering {
	position: absolute;
	left: var(--fc-space-4);
	bottom: var(--fc-space-4);
	min-height: 0;
	padding: var(--fc-space-2) var(--fc-space-3);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--fc-radius);
	background: var(--fc-surface-container-lowest);
	color: var(--fc-on-surface-variant);
	font-size: var(--fc-font-label-md);
}

.fc-vault-pdf-state .material-icons-round {
	color: var(--fc-tertiary);
	font-size: 36px;
}

.fc-vault-pdf-state.is-error .material-icons-round {
	color: var(--fc-error);
}

.fc-vault-file-preview.is-empty {
	align-items: center;
	justify-content: center;
  min-height: 180px;
  color: var(--fc-on-surface-variant);
  text-align: center;
}

.fc-vault-file-preview.is-empty > .material-icons-round {
  color: var(--fc-on-surface-variant);
  font-size: 36px;
}

.fc-vault-file-preview.is-empty p {
  max-width: 360px;
  margin: 0;
  font-size: var(--fc-font-body-sm);
  overflow-wrap: anywhere;
}

.fc-vault-file-meta-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  min-width: 0;
}

.fc-vault-file-meta-row > .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 32px;
}

.fc-vault-file-card strong,
.fc-vault-file-card small {
  display: block;
  overflow-wrap: anywhere;
}

.fc-vault-file-card small {
  color: var(--fc-on-surface-variant);
}

.fc-vault-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fc-space-6);
  background: rgba(0, 0, 0, 0.82);
}

.fc-vault-lightbox-inner {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  width: min(1120px, 96vw);
  max-height: 94vh;
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
}

.fc-vault-lightbox-toolbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-lightbox-toolbar > div {
  display: flex;
  gap: var(--fc-space-2);
  flex-shrink: 0;
}

.fc-vault-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 76px);
  object-fit: contain;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-bookmark-url-row {
  display: flex;
  gap: var(--fc-space-2);
  align-items: center;
}

.fc-vault-bookmark-url-row .fc-input {
  min-width: 0;
}

.fc-vault-bookmark-card {
  max-width: 720px;
}

.fc-vault-bookmark-card > img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  background: var(--fc-surface-container-lowest);
}

.fc-vault-bookmark-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
}

.fc-vault-bookmark-domain {
  color: var(--fc-tertiary);
  font-size: var(--fc-font-label-md);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fc-vault-bookmark-card h3 {
  margin: 0;
  font-size: var(--fc-font-title-lg);
  overflow-wrap: anywhere;
}

.fc-vault-bookmark-card p {
  margin: 0;
  color: var(--fc-on-surface-variant);
  overflow-wrap: anywhere;
}

.fc-vault-type-selector {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
  flex: 1;
  min-height: 0;
  padding: var(--fc-space-5);
  overflow: auto;
}

.fc-vault-type-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-space-4);
}

.fc-vault-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fc-space-3);
}

.fc-vault-type-card {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-space-2);
  padding: var(--fc-space-4);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
  cursor: pointer;
  text-align: left;
}

.fc-vault-type-card:hover,
.fc-vault-type-card.is-active {
  border-color: var(--fc-tertiary);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-type-card .material-icons-round {
  font-size: 28px;
  color: var(--fc-tertiary);
}

.fc-vault-type-card strong {
  font-size: var(--fc-font-title-sm);
}

.fc-vault-type-card small {
  color: var(--fc-on-surface-variant);
  line-height: 1.4;
}

.fc-vault-title-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.fc-vault-title-input-wrap .material-icons-round {
  position: absolute;
  left: var(--fc-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fc-tertiary);
  font-size: 20px;
  pointer-events: none;
}

.fc-vault-title-input-wrap .fc-input {
  width: 100%;
}

.fc-vault-title-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
}

.fc-vault-create-panel {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  max-width: 920px;
}

.fc-vault-create-panel .fc-vault-editor {
  max-width: none;
}

.fc-vault-create-actions {
  margin: 0;
  padding: var(--fc-space-3) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-actions-spacer {
  flex: 1 1 auto;
}

.fc-vault-create-file-hint {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4);
  border: 1px dashed var(--fc-outline-variant);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
}

.fc-vault-create-file-hint > .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 32px;
}

.fc-vault-create-file-hint strong,
.fc-vault-create-file-hint p {
  display: block;
  margin: 0;
}

.fc-vault-create-file-hint p {
  margin-top: var(--fc-space-1);
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
  overflow-wrap: anywhere;
}

.fc-vault-preview-action {
  align-self: flex-start;
}

.fc-vault-create-bookmark-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--fc-space-3);
  max-width: 720px;
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-create-bookmark-preview.has-no-image {
  grid-template-columns: 1fr;
}

.fc-vault-create-bookmark-preview img {
  width: 120px;
  height: 82px;
  object-fit: cover;
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-create-bookmark-preview > div {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  min-width: 0;
}

.fc-vault-create-bookmark-preview span {
  color: var(--fc-tertiary);
  font-size: var(--fc-font-label-md);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fc-vault-create-bookmark-preview strong,
.fc-vault-create-bookmark-preview p {
  margin: 0;
  overflow-wrap: anywhere;
}

.fc-vault-create-bookmark-preview p {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-body-sm);
}

.fc-vault-recent {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  max-width: 920px;
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-vault-recent-header {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-on-surface);
}

.fc-vault-recent-header .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
}

.fc-vault-recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--fc-space-2);
}

.fc-vault-recent-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fc-space-2);
  min-width: 0;
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
  color: var(--fc-on-surface);
  cursor: pointer;
  text-align: left;
}

.fc-vault-recent-item:hover {
  border-color: rgba(0, 102, 123, 0.35);
  background: var(--fc-surface-container-lowest);
}

.fc-vault-recent-item .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
}

.fc-vault-recent-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-recent-item small {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
  white-space: nowrap;
}

.fc-vault-meta {
  padding-bottom: var(--fc-space-4);
  overflow: auto;
}

.fc-vault-meta-header {
  justify-content: flex-start;
}

.fc-vault-meta-header .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
}

.fc-vault-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--fc-space-4);
  padding: var(--fc-space-3);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-meta-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: start;
  gap: var(--fc-space-2);
  padding: var(--fc-space-1) 0;
}

.fc-vault-meta-row + .fc-vault-meta-row {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-vault-meta-row span,
.fc-vault-meta-placeholder {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
}

.fc-vault-meta-row strong {
  color: var(--fc-on-surface);
  font-size: var(--fc-font-label-md);
  font-weight: 700;
}

.fc-vault-meta-row span {
  font-weight: 400;
  overflow-wrap: anywhere;
}

.fc-vault-meta-placeholder {
  margin: 0;
  padding: var(--fc-space-4);
  line-height: 1.5;
}

.fc-vault-side-section {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3) var(--fc-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-vault-side-title {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-vault-side-title .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 20px;
}

.fc-vault-side-state,
.fc-vault-empty-note {
  margin: 0;
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-md);
  line-height: 1.5;
}

.fc-vault-side-state.is-error {
  color: var(--fc-error);
}

.fc-vault-tag-list,
.fc-vault-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-1);
}

.fc-vault-tag,
.fc-vault-tag-option {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--fc-tag-color, #00667b) 42%, transparent);
  border-radius: var(--fc-radius);
  background: color-mix(in srgb, var(--fc-tag-color, #00667b) 10%, var(--fc-surface-container-lowest));
  color: var(--fc-on-surface);
  font-size: var(--fc-font-label-sm);
}

.fc-vault-tag span:first-child,
.fc-vault-tag-option span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-vault-tag button,
.fc-vault-tag-option {
  cursor: pointer;
}

.fc-vault-tag button {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fc-radius);
  background: transparent;
  color: var(--fc-on-surface-variant);
}

.fc-vault-tag button:hover {
  background: rgba(0, 0, 0, 0.07);
}

.fc-vault-tag button .material-icons-round,
.fc-vault-tag-option .material-icons-round {
  font-size: 14px;
}

.fc-vault-tag-option {
  border-style: dashed;
}

.fc-vault-tag-form,
.fc-vault-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-vault-tag-attach-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: var(--fc-space-1);
  align-items: center;
}

.fc-vault-tag-select {
  height: 32px;
  min-width: 0;
}

.fc-vault-tag-create,
.fc-vault-tag-admin {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  padding-top: var(--fc-space-2);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.fc-vault-tag-create > summary,
.fc-vault-tag-admin > summary {
  display: flex;
  align-items: center;
  gap: var(--fc-space-1);
  cursor: pointer;
  list-style: none;
  color: var(--fc-on-surface);
  font-size: var(--fc-font-label-md);
  font-weight: 700;
}

.fc-vault-tag-create > summary::-webkit-details-marker,
.fc-vault-tag-admin > summary::-webkit-details-marker {
  display: none;
}

.fc-vault-tag-create > summary .material-icons-round {
  color: var(--fc-tertiary);
  font-size: 18px;
}

.fc-vault-tag-create .fc-vault-tag-form {
  margin-top: var(--fc-space-2);
}

.fc-vault-tag-create .fc-vault-color-row {
  gap: var(--fc-space-1);
}

.fc-vault-tag-admin > div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--fc-space-2);
  min-height: 30px;
}

.fc-vault-tag-admin > div > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fc-font-label-md);
}

.fc-vault-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fc-tag-color, #00667b);
}

.fc-vault-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-vault-comment {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius);
  background: var(--fc-surface-container-low);
}

.fc-vault-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-2);
}

.fc-vault-comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fc-space-2);
}

.fc-vault-comment-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fc-font-label-md);
}

.fc-vault-comment-content {
  color: var(--fc-on-surface);
  font-size: var(--fc-font-body-sm);
  overflow-wrap: anywhere;
}

.fc-vault-comment-content p {
  margin: 0 0 var(--fc-space-2);
}

.fc-vault-comment-content p:last-child {
  margin-bottom: 0;
}

.fc-vault-comment time {
  color: var(--fc-on-surface-variant);
  font-size: var(--fc-font-label-sm);
}

@media (max-width: 1180px) {
  .fc-vault-page {
    grid-template-columns: var(--fc-vault-tree-width, 250px) minmax(0, 1fr);
  }

  .fc-vault-page--embedded {
    grid-template-columns: var(--fc-vault-tree-width, 220px) minmax(0, 1fr);
  }

  .fc-vault-meta {
    display: none;
  }

  .fc-vault-page--meta-open .fc-vault-meta {
    display: flex;
    grid-column: 1 / -1;
    max-height: 320px;
  }

  .fc-vault-page--embedded .fc-vault-meta {
    display: flex;
    grid-column: 1 / -1;
    max-height: 280px;
  }
}

@media (max-width: 900px) {
  .fc-vault-page {
    grid-template-columns: 1fr;
  }

  .fc-vault-tree {
    max-height: 280px;
  }

  .fc-vault-tree-resize {
    display: none;
  }

  .fc-vault-page--embedded {
    min-height: 0;
  }

  .fc-vault-page--embedded .fc-vault-meta {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .fc-vault-tree-header,
  .fc-vault-content-header,
  .fc-vault-type-header {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-vault-tree-header .fc-icon-btn {
    align-self: flex-start;
  }

  .fc-vault-content-actions,
  .fc-vault-actions {
    justify-content: flex-start;
  }

  .fc-vault-actions-spacer {
    display: none;
  }

  .fc-vault-content-actions .fc-btn,
  .fc-vault-actions .fc-btn,
  .fc-vault-bookmark-url-row .fc-btn {
    width: 100%;
    white-space: normal;
  }

  .fc-vault-type-grid {
    grid-template-columns: 1fr;
  }

  .fc-vault-bookmark-url-row {
    flex-direction: column;
    align-items: stretch;
  }

  .fc-vault-folder-dropzone {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .fc-vault-create-file-hint,
  .fc-vault-create-bookmark-preview,
  .fc-vault-recent-item {
    grid-template-columns: 1fr;
  }

  .fc-vault-create-bookmark-preview img {
    width: 100%;
    height: auto;
    max-height: 180px;
  }

  .fc-vault-folder-dropzone .fc-btn {
    width: 100%;
    white-space: normal;
  }

  .fc-vault-pdf-viewer {
    min-height: 420px;
  }

  .fc-vault-pdf-toolbar {
    flex-wrap: wrap;
  }

  .fc-vault-pdf-toolbar-spacer {
    flex-basis: 100%;
    height: 0;
  }

  .fc-vault-pdf-canvas-wrap {
    min-height: 360px;
    padding: var(--fc-space-2);
  }

  .fc-vault-icon-popover {
    left: -4px;
  }

  .fc-vault-tree-row {
    grid-template-columns: 18px minmax(0, 1fr) 24px;
    padding-left: calc(var(--fc-space-1) + (var(--fc-vault-level, 0) * 31px));
  }

  .fc-vault-tree-row.is-drop-target::before {
    left: calc(var(--fc-space-1) + (var(--fc-vault-level, 0) * 31px));
  }
}