/*
 * FoxTask Redesign – Designschicht (Phase 2, 26.10.2026)
 * Wird NACH styles.css geladen und gilt nur im hellen Modus (data-theme="light").
 * Der Dunkelmodus bleibt unverändert. Zum Zurückrollen genügt es, diese Datei
 * in app/index.html nicht mehr einzubinden.
 */

:root[data-theme="light"] {
  --ft-bg: #f6f7f9;
  --ft-surface: #ffffff;
  --ft-surface-2: #f9fafb;
  --ft-border: #e4e7ec;
  --ft-border-strong: #d0d5dd;
  --ft-text: #101828;
  --ft-text-2: #344054;
  --ft-text-3: #475467;
  --ft-brand: #f26b1d;
  --ft-primary: #c2410c;
  --ft-primary-hover: #9a3412;
  --ft-primary-soft: #fff4ed;
  --ft-focus: rgba(194, 65, 12, 0.28);
  --ft-radius: 8px;
  --ft-radius-card: 12px;
  --ft-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ft-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
  --ft-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Status (Text / Fläche) */
  --ft-s-new: #1d4ed8;      --ft-s-new-bg: #eff4ff;
  --ft-s-assigned: #4338ca; --ft-s-assigned-bg: #eef2ff;
  --ft-s-work: #b54708;     --ft-s-work-bg: #fffaeb;
  --ft-s-wait: #6d28d9;     --ft-s-wait-bg: #f5f3ff;
  --ft-s-review: #0e7490;   --ft-s-review-bg: #ecfeff;
  --ft-s-done: #067647;     --ft-s-done-bg: #ecfdf3;
  --ft-s-crit: #b42318;     --ft-s-crit-bg: #fef3f2;
  --ft-s-neutral: #475467;  --ft-s-neutral-bg: #f2f4f7;

  /* Bestehende Tokens auf das neue System umlenken */
  --font-ui: var(--ft-font);
  --color-bg: var(--ft-bg);
  --bg-canvas: var(--ft-bg);
  --color-sidebar: var(--ft-surface);
  --bg-sidebar: var(--ft-surface);
  --bg-sidebar-accent: var(--ft-primary-soft);
  --color-surface: var(--ft-surface);
  --color-surface-solid: var(--ft-surface);
  --color-surface-soft: var(--ft-surface-2);
  --bg-surface: var(--ft-surface);
  --bg-muted: #f2f4f7;
  --color-border: var(--ft-border);
  --color-border-strong: var(--ft-border-strong);
  --border-subtle: var(--ft-border);
  --color-text: var(--ft-text);
  --text-primary: var(--ft-text);
  --color-text-muted: var(--ft-text-3);
  --text-secondary: var(--ft-text-3);
  --color-label: var(--ft-text-3);
  --color-primary: var(--ft-primary);
  --bg-primary: var(--ft-primary);
  --bg-primary-hover: var(--ft-primary-hover);
  --color-accent: var(--ft-brand);
  --danger: var(--ft-s-crit);
  --warning: var(--ft-s-work);
  --success: var(--ft-s-done);
  --neutral: var(--ft-s-neutral);
  --shadow-soft: var(--ft-shadow);
  --shadow-panel: var(--ft-shadow-pop);
  --radius-card: var(--ft-radius-card);
  --radius-button: var(--ft-radius);
}

/* ---------- Grundlagen ---------- */
:root[data-theme="light"] body {
  font-family: var(--ft-font) !important;
  color: var(--ft-text);
  background: var(--ft-bg) !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4 {
  color: var(--ft-text);
  letter-spacing: -0.01em;
}
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .card-label,
:root[data-theme="light"] .panel-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ft-text-3) !important;
}
:root[data-theme="light"] .field-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ft-text-2) !important;
}
:root[data-theme="light"] .supporting-copy,
:root[data-theme="light"] .detail-copy {
  color: var(--ft-text-3);
}
:root[data-theme="light"] :focus-visible {
  outline: 2px solid var(--ft-primary);
  outline-offset: 2px;
}

/* ---------- App-Rahmen ---------- */
:root[data-theme="light"] .main-shell {
  background: var(--ft-bg) !important;
}

/* ---------- Seitenleiste (hell) ---------- */
:root[data-theme="light"] .sidebar {
  background: var(--ft-surface) !important;
  border-right: 1px solid var(--ft-border) !important;
  box-shadow: none !important;
  padding: 18px 12px !important;
  gap: 12px !important;
  color: var(--ft-text);
}
:root[data-theme="light"] .sidebar::before,
:root[data-theme="light"] .sidebar::after {
  display: none !important;
}
:root[data-theme="light"] .brand-block {
  padding: 0 8px 6px !important;
  margin: 0 !important;
  min-height: 0 !important;
}
:root[data-theme="light"] .fixfox-logo-sidebar {
  width: 148px !important;
  max-height: 48px !important;
}
:root[data-theme="light"] .nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
:root[data-theme="light"] .nav-group-label {
  display: block;
  padding: 14px 10px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #667085;
}
:root[data-theme="light"] .nav-group-label:first-child {
  padding-top: 4px;
}
:root[data-theme="light"] .sidebar .nav-item {
  min-height: 36px !important;
  padding: 0 10px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: var(--ft-radius) !important;
  background: transparent !important;
  color: var(--ft-text-2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: left;
  width: 100%;
}
:root[data-theme="light"] .sidebar .nav-item:hover {
  background: #f2f4f7 !important;
  color: var(--ft-text) !important;
}
:root[data-theme="light"] .sidebar .nav-item.is-active {
  background: var(--ft-primary-soft) !important;
  color: var(--ft-text) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--ft-brand) !important;
}
:root[data-theme="light"] .sidebar .nav-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #667085 !important;
  font-size: 16px !important;
}
:root[data-theme="light"] .sidebar .nav-item.is-active .nav-icon {
  color: var(--ft-primary) !important;
}
:root[data-theme="light"] .sidebar .nav-icon .ui-icon,
:root[data-theme="light"] .bottom-nav .nav-icon .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-theme="light"] .nav-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
:root[data-theme="light"] .nav-caret {
  display: none !important;
}
:root[data-theme="light"] .nav-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f2f4f7;
  color: var(--ft-text-2);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 18px;
  text-align: center;
}
:root[data-theme="light"] .nav-item.is-active .nav-count {
  background: #ffffff;
}
:root[data-theme="light"] .nav-ticket-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
:root[data-theme="light"] .nav-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px 30px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
:root[data-theme="light"] .nav-ticket-group.is-active .nav-submenu {
  display: flex;
}
:root[data-theme="light"] .nav-subitem {
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ft-text-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left;
  border: 0 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .nav-subitem.is-active {
  background: #f2f4f7 !important;
  color: var(--ft-text) !important;
  font-weight: 600 !important;
}
/* Sitzungsbereich unten in der Seitenleiste */
:root[data-theme="light"] .sidebar-panel {
  margin-top: auto !important;
  padding: 12px 8px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ft-text);
}
:root[data-theme="light"] .sidebar-panel .panel-label {
  display: none !important;
}
:root[data-theme="light"] .sidebar-copy {
  color: var(--ft-text-3) !important;
  font-size: 12px !important;
}

/* ---------- Kopfzeile ---------- */
:root[data-theme="light"] .topbar {
  background: var(--ft-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .topbar-title .eyebrow {
  display: none !important;
}
:root[data-theme="light"] .topbar-title h2,
:root[data-theme="light"] #view-title {
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  color: var(--ft-text) !important;
  margin: 0 !important;
}
:root[data-theme="light"] .topbar-profile .profile-avatar {
  background: #ffe6d5 !important;
  color: #9c2a10 !important;
  border: 0 !important;
}
:root[data-theme="light"] .demo-mode-banner {
  background: #101828 !important;
  border: 0 !important;
  border-radius: var(--ft-radius-card) !important;
  box-shadow: none !important;
}

/* ---------- Buttons ---------- */
:root[data-theme="light"] .primary-action {
  min-height: 36px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: var(--ft-radius) !important;
  background: var(--ft-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}
:root[data-theme="light"] .primary-action:hover {
  background: var(--ft-primary-hover) !important;
}
:root[data-theme="light"] .secondary-action,
:root[data-theme="light"] .date-picker-action,
:root[data-theme="light"] .theme-toggle {
  min-height: 36px;
  padding: 0 12px !important;
  border: 1px solid var(--ft-border-strong) !important;
  border-radius: var(--ft-radius) !important;
  background: var(--ft-surface) !important;
  background-image: none !important;
  color: var(--ft-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
}
:root[data-theme="light"] .secondary-action:hover,
:root[data-theme="light"] .date-picker-action:hover {
  background: var(--ft-surface-2) !important;
  color: var(--ft-text) !important;
}
:root[data-theme="light"] .danger-action {
  border-radius: var(--ft-radius) !important;
  background: var(--ft-surface) !important;
  border: 1px solid #fecdca !important;
  color: var(--ft-s-crit) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .link-action {
  color: var(--ft-primary) !important;
  font-weight: 500 !important;
}
:root[data-theme="light"] .icon-action {
  border-radius: var(--ft-radius) !important;
  border: 1px solid var(--ft-border-strong) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text-2) !important;
  box-shadow: none !important;
}

/* ---------- Eingabefelder ---------- */
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .select-input,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="date"],
:root[data-theme="light"] input[type="time"],
:root[data-theme="light"] input[type="datetime-local"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  border: 1px solid var(--ft-border-strong) !important;
  border-radius: var(--ft-radius) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: none !important;
  font-family: var(--ft-font) !important;
  font-size: 14px !important;
}
:root[data-theme="light"] .search-input:focus,
:root[data-theme="light"] .select-input:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus {
  outline: none !important;
  border-color: var(--ft-primary) !important;
  box-shadow: 0 0 0 3px var(--ft-focus) !important;
}

/* ---------- Karten und Panels ---------- */
:root[data-theme="light"] .surface-card,
:root[data-theme="light"] .dashboard-panel,
:root[data-theme="light"] .detail-card,
:root[data-theme="light"] .settings-panel,
:root[data-theme="light"] .qr-section-card,
:root[data-theme="light"] .object-card,
:root[data-theme="light"] .task-detail-card,
:root[data-theme="light"] .wide-card {
  background: var(--ft-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: var(--ft-radius-card) !important;
  box-shadow: var(--ft-shadow) !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .dashboard-panel-head h3,
:root[data-theme="light"] .section-head h3,
:root[data-theme="light"] .surface-card h3 {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .modal-card {
  border: 1px solid var(--ft-border) !important;
  border-radius: 16px !important;
  background: var(--ft-surface) !important;
  box-shadow: var(--ft-shadow-pop) !important;
}

/* Kennzahl-Kacheln: neutral, Farbe nur als Punkt */
:root[data-theme="light"] .dashboard-v2-status-card,
:root[data-theme="light"] .dashboard-kpi-card {
  background: var(--ft-surface) !important;
  border: 1px solid var(--ft-border) !important;
  border-left-width: 1px !important;
  border-radius: var(--ft-radius-card) !important;
  box-shadow: var(--ft-shadow) !important;
  position: relative;
}
:root[data-theme="light"] .dashboard-v2-status-card::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ft-s-neutral);
}
:root[data-theme="light"] .dashboard-v2-status-card.tone-danger::before { background: #d92d20; }
:root[data-theme="light"] .dashboard-v2-status-card.tone-warning::before { background: #dc6803; }
:root[data-theme="light"] .dashboard-v2-status-card.tone-success::before { background: #079455; }
:root[data-theme="light"] .dashboard-v2-status-card.tone-info::before { background: #1d4ed8; }
:root[data-theme="light"] .dashboard-v2-status-card span {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ft-text-3) !important;
}
:root[data-theme="light"] .dashboard-v2-status-card strong {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ft-text) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- Chips / Status ---------- */
:root[data-theme="light"] .status-pill,
:root[data-theme="light"] .priority-chip {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  background: var(--ft-s-neutral-bg) !important;
  color: var(--ft-s-neutral) !important;
}
:root[data-theme="light"] .status-pill.success,
:root[data-theme="light"] .priority-chip.success { background: var(--ft-s-done-bg) !important; color: var(--ft-s-done) !important; }
:root[data-theme="light"] .status-pill.warning,
:root[data-theme="light"] .priority-chip.warning { background: var(--ft-s-work-bg) !important; color: var(--ft-s-work) !important; }
:root[data-theme="light"] .status-pill.danger,
:root[data-theme="light"] .priority-chip.danger,
:root[data-theme="light"] .priority-chip.critical,
:root[data-theme="light"] .priority-chip.high { background: var(--ft-s-crit-bg) !important; color: var(--ft-s-crit) !important; }
:root[data-theme="light"] .status-pill.info,
:root[data-theme="light"] .priority-chip.info,
:root[data-theme="light"] .priority-chip.new { background: var(--ft-s-new-bg) !important; color: var(--ft-s-new) !important; }
:root[data-theme="light"] .filter-chip {
  border: 1px solid var(--ft-border) !important;
  border-radius: 999px !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .filter-chip.is-active {
  background: var(--ft-text) !important;
  border-color: var(--ft-text) !important;
  color: #ffffff !important;
}

/* ---------- Tabellen ---------- */
:root[data-theme="light"] table {
  border-collapse: separate;
  border-spacing: 0;
}
:root[data-theme="light"] th {
  background: var(--ft-surface-2) !important;
  color: var(--ft-text-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--ft-border) !important;
}
:root[data-theme="light"] td {
  border-bottom: 1px solid #f2f4f7 !important;
  color: var(--ft-text);
}

/* ---------- Mobile Navigation ---------- */
:root[data-theme="light"] .bottom-nav {
  background: var(--ft-surface) !important;
  border-top: 1px solid var(--ft-border) !important;
  box-shadow: 0 -1px 2px rgba(16, 24, 40, 0.04) !important;
}
:root[data-theme="light"] .bottom-nav .nav-item {
  background: transparent !important;
  color: var(--ft-text-3) !important;
  box-shadow: none !important;
  border: 0 !important;
}
:root[data-theme="light"] .bottom-nav .nav-item.is-active {
  color: var(--ft-primary) !important;
  background: transparent !important;
}

/* ---------- Feinschliff nach erster Vorschau ---------- */
:root[data-theme="light"] .fixfox-logo-sidebar {
  width: auto !important;
  height: 52px !important;
  max-height: 52px !important;
  max-width: 190px !important;
}
:root[data-theme="light"] p.nav-group-label {
  margin: 0 !important;
}
:root[data-theme="light"] .topbar-nav:empty,
:root[data-theme="light"] .topbar-nav:has(> .is-hidden:only-child) {
  display: none !important;
}
:root[data-theme="light"] .global-search-box {
  width: 300px !important;
  max-width: 100%;
}
:root[data-theme="light"] .global-search-box .search-input {
  height: 36px !important;
  padding: 0 12px 0 34px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center !important;
}
:root[data-theme="light"] #reload-button,
:root[data-theme="light"] .page-help-button,
:root[data-theme="light"] .date-picker-action,
:root[data-theme="light"] .theme-toggle {
  height: 36px !important;
  min-height: 36px !important;
  white-space: nowrap;
}
:root[data-theme="light"] .theme-toggle .theme-toggle-icon {
  display: none !important;
}
:root[data-theme="light"] .topbar-profile {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--ft-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .topbar-profile strong {
  font-size: 13px !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .topbar-profile small {
  font-size: 12px !important;
  color: var(--ft-text-3) !important;
}
:root[data-theme="light"] .profile-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}

/* Demo-Banner ruhiger */
:root[data-theme="light"] .demo-role-button {
  min-height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .demo-role-button.is-active {
  background: #ffffff !important;
  color: var(--ft-text) !important;
}
:root[data-theme="light"] .demo-signup-link {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Ereignis-Karten im Dashboard */
:root[data-theme="light"] .dashboard-event-group-head,
:root[data-theme="light"] .dashboard-event-group-head * {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] .dashboard-event-group-head {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ft-text-2) !important;
}
:root[data-theme="light"] .dashboard-event-row {
  background: var(--ft-surface) !important;
  border: 1px solid var(--ft-border) !important;
  border-left: 3px solid var(--ft-s-new) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .dashboard-event-type {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .dashboard-event-meta,
:root[data-theme="light"] .dashboard-event-meta * {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] .dashboard-empty {
  border: 1px dashed var(--ft-border) !important;
  background: transparent !important;
  color: var(--ft-text-3) !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .fixfox-logo-sidebar {
  height: auto !important;
  width: 150px !important;
  max-height: none !important;
}
/* Kopfzeile kompakt: Hilfsaktionen als Symbol-Buttons */
:root[data-theme="light"] .global-search-box {
  width: 260px !important;
}
:root[data-theme="light"] #reload-button,
:root[data-theme="light"] .page-help-button,
:root[data-theme="light"] .theme-toggle {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  position: relative;
}
:root[data-theme="light"] .theme-toggle > * {
  display: none !important;
}
:root[data-theme="light"] #reload-button::before,
:root[data-theme="light"] .page-help-button::before,
:root[data-theme="light"] .theme-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--ft-text-2);
  -webkit-mask: var(--ft-icon) center / contain no-repeat;
  mask: var(--ft-icon) center / contain no-repeat;
}
:root[data-theme="light"] #reload-button {
  --ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.5-4.5L4 8'/%3E%3Cpath d='M4 4v4h4'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.5 4.5L20 16'/%3E%3Cpath d='M20 20v-4h-4'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .page-help-button {
  --ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .theme-toggle {
  --ft-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .date-picker-action {
  min-width: 0 !important;
  width: auto !important;
}

/* ---------- Einheitliches Statussystem (Tickets, Dashboard) ---------- */
:root[data-theme="light"] .ticket-status-badge,
:root[data-theme="light"] .dashboard-object-status-badge,
:root[data-theme="light"] .dashboard-status-badge,
:root[data-theme="light"] .resident-answer-badge,
:root[data-theme="light"] .ticket-new-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 22px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  background: var(--ft-s-neutral-bg) !important;
  color: var(--ft-s-neutral) !important;
  white-space: nowrap;
}
:root[data-theme="light"] .ticket-status-badge::before,
:root[data-theme="light"] .dashboard-object-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
:root[data-theme="light"] .ticket-status-new,
:root[data-theme="light"] .ticket-new-badge,
:root[data-theme="light"] .dashboard-object-status-badge.tone-info { background: var(--ft-s-new-bg) !important; color: var(--ft-s-new) !important; }
:root[data-theme="light"] .ticket-status-assigned { background: var(--ft-s-assigned-bg) !important; color: var(--ft-s-assigned) !important; }
:root[data-theme="light"] .ticket-status-progress,
:root[data-theme="light"] .dashboard-object-status-badge.tone-warning { background: var(--ft-s-work-bg) !important; color: var(--ft-s-work) !important; }
:root[data-theme="light"] .ticket-status-question,
:root[data-theme="light"] .ticket-status-waiting { background: var(--ft-s-wait-bg) !important; color: var(--ft-s-wait) !important; }
:root[data-theme="light"] .ticket-status-review { background: var(--ft-s-review-bg) !important; color: var(--ft-s-review) !important; }
:root[data-theme="light"] .ticket-status-done,
:root[data-theme="light"] .dashboard-object-status-badge.tone-success { background: var(--ft-s-done-bg) !important; color: var(--ft-s-done) !important; }
:root[data-theme="light"] .dashboard-object-status-badge.tone-danger { background: var(--ft-s-crit-bg) !important; color: var(--ft-s-crit) !important; }
:root[data-theme="light"] .resident-answer-badge { background: var(--ft-s-wait-bg) !important; color: var(--ft-s-wait) !important; }

/* Beschriftungen in Detailansichten ohne Versalien */
:root[data-theme="light"] dt,
:root[data-theme="light"] .detail-grid dt,
:root[data-theme="light"] .detail-grid span:first-child {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ft-text-3) !important;
}
:root[data-theme="light"] .ticket-message-card {
  background: var(--ft-surface-2) !important;
  border: 1px solid var(--ft-border) !important;
  border-left: 3px solid var(--ft-brand) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .ticket-message-card strong,
:root[data-theme="light"] .ticket-message-card p:not(.field-label) {
  font-weight: 500 !important;
  font-size: 15px !important;
}

/* ---------- Desktop-Layout (ab 821 px; darunter greift das bestehende Mobil-Layout) ---------- */
@media (min-width: 821px) {
  :root[data-theme="light"] .app-shell {
    grid-template-columns: 248px minmax(0, 1fr) !important;
    background: var(--ft-bg) !important;
  }
  :root[data-theme="light"] .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 16px !important;
    padding: 14px 28px !important;
    min-height: 0 !important;
  }
  :root[data-theme="light"] .topbar-title {
    flex: 1 1 220px !important;
    min-width: 0;
  }
  :root[data-theme="light"] .topbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }
  :root[data-theme="light"] .topbar-actions {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  :root[data-theme="light"] .view-section {
    padding-left: 28px;
    padding-right: 28px;
  }
  :root[data-theme="light"] .demo-mode-banner {
    margin: 12px 28px 0 !important;
    padding: 10px 16px !important;
  }
}

/* Formularfelder dürfen ihre Karte nie überragen (z. B. Kalender-Seitenpanel) */
:root[data-theme="light"] .surface-card input,
:root[data-theme="light"] .surface-card select,
:root[data-theme="light"] .surface-card textarea,
:root[data-theme="light"] .detail-stack input,
:root[data-theme="light"] .detail-stack select,
:root[data-theme="light"] .detail-stack textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Gruppenbeschriftung und Zähler auch im Dunkelmodus lesbar */
:root[data-theme="dark"] .nav-group-label {
  margin: 0;
  padding: 14px 14px 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
:root[data-theme="dark"] .nav-count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
:root[data-theme="light"] .detail-stack {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* =====================================================================
   Phase 3: Dashboard V3 (Handlungsbedarf, Team heute, ruhiger Tagesplan)
   ===================================================================== */
#view-dashboard.has-dashboard-v3 #dashboard-v2-status-strip { display: none !important; }
#view-dashboard.has-dashboard-v3:not(.is-legacy-open) .dashboard-v2-grid { display: none !important; }
.ft-legacy-toggle-row { display: flex; justify-content: center; margin: 4px 0 8px; }
#view-dashboard:not(.has-dashboard-v3) .ft-legacy-toggle-row { display: none; }

.ft-dashboard { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.ft-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ft-kpi {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 16px 18px; border: 1px solid var(--ft-border, #e4e7ec); border-radius: 12px;
  background: var(--ft-surface, #fff); box-shadow: var(--ft-shadow, 0 1px 2px rgba(16,24,40,.06));
  color: var(--ft-text, #101828); font: inherit;
}
.ft-kpi:hover { border-color: var(--ft-border-strong, #d0d5dd); }
.ft-kpi.is-active { border-color: var(--ft-text, #101828); box-shadow: 0 0 0 1px var(--ft-text, #101828); }
.ft-kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ft-text-3, #475467); }
.ft-kpi-value { font-size: 30px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-kpi-value.is-critical { color: var(--ft-s-crit, #b42318); }
.ft-kpi-hint { font-size: 12px; color: var(--ft-text-3, #475467); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #98a2b3; }
.ft-dot.tone-critical { background: #d92d20; }
.ft-dot.tone-new { background: #1d4ed8; }
.ft-dot.tone-progress { background: #dc6803; }
.ft-dot.tone-review { background: #0e7490; }

.ft-dash-columns { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ft-card {
  background: var(--ft-surface, #fff); border: 1px solid var(--ft-border, #e4e7ec); border-radius: 12px;
  box-shadow: var(--ft-shadow, 0 1px 2px rgba(16,24,40,.06)); min-width: 0; overflow: hidden;
}
.ft-work-card { flex: 999 1 560px; }
.ft-team-card { flex: 1 1 320px; }
.ft-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ft-border, #e4e7ec); }
.ft-card-head > div:first-child { flex: 1 1 180px; }
.ft-card-head h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.ft-card-head p { margin: 0; font-size: 13px; color: var(--ft-text-3, #475467); }
.ft-card-foot { padding: 12px 20px; }
.ft-card-foot .link-action { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }

.ft-seg-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: #f2f4f7; }
.ft-seg { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ft-text-3, #475467); cursor: pointer; }
.ft-seg span { color: inherit; opacity: .8; }
.ft-seg.is-active { background: #fff; color: var(--ft-text, #101828); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.1); }

.ft-work-scroll { overflow-x: auto; }
.ft-work-head, .ft-work-row {
  display: grid; grid-template-columns: 84px minmax(160px, 1fr) 124px 128px 150px; gap: 12px; align-items: center;
  min-width: 680px; padding: 0 20px;
}
.ft-work-head { height: 36px; font-size: 12px; font-weight: 500; color: var(--ft-text-3, #475467); background: var(--ft-surface-2, #f9fafb); border-bottom: 1px solid var(--ft-border, #e4e7ec); }
.ft-work-row { min-height: 60px; border-bottom: 1px solid #f2f4f7; cursor: pointer; }
.ft-work-row:hover { background: var(--ft-surface-2, #f9fafb); }
.ft-work-row:focus-visible { outline: 2px solid var(--ft-primary, #c2410c); outline-offset: -2px; }
.ft-work-main { min-width: 0; display: flex; flex-direction: column; }
.ft-work-main strong { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-work-main small { font-size: 12px; color: var(--ft-text-3, #475467); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-work-due { font-size: 13px; color: var(--ft-text-2, #344054); font-variant-numeric: tabular-nums; }
.ft-work-due.is-late { color: var(--ft-s-crit, #b42318); font-weight: 600; }
.ft-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ft-text-2, #344054); }
.ft-prio.is-critical { color: var(--ft-s-crit, #b42318); }
.ft-prio-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ft-prio-bars i { width: 3px; border-radius: 1px; background: #d0d5dd; }
.ft-prio-bars i:nth-child(1) { height: 5px; } .ft-prio-bars i:nth-child(2) { height: 8px; } .ft-prio-bars i:nth-child(3) { height: 12px; }
.ft-prio-bars i.is-on { background: currentColor; }
.ft-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ft-text-2, #344054); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ft-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 10px; font-weight: 600; background: #f2f4f7; color: #344054; }
.ft-avatar.is-large { width: 36px; height: 36px; font-size: 13px; }
.ft-avatar.tone-done { background: #ecfdf3; color: #067647; }
.ft-avatar.tone-progress { background: #fffaeb; color: #b54708; }
.ft-avatar.tone-critical { background: #fef3f2; color: #b42318; }
.ft-assign-button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; cursor: pointer;
  border: 1px dashed #f9b37e; border-radius: 8px; background: #fff; color: var(--ft-primary, #c2410c);
  font: inherit; font-size: 13px; font-weight: 600;
}
.ft-assign-button:hover { background: var(--ft-primary-soft, #fff4ed); }
.ft-empty { margin: 0; padding: 24px 20px; font-size: 14px; color: var(--ft-text-3, #475467); }

.ft-team-row { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f2f4f7; }
.ft-team-row:last-child { border-bottom: 0; }
.ft-team-row.is-muted { opacity: .72; }
.ft-team-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ft-team-head { display: flex; align-items: center; gap: 8px; }
.ft-team-head strong { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-team-main small { font-size: 13px; color: var(--ft-text-3, #475467); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-load { display: flex; align-items: center; gap: 8px; }
.ft-load-bar { flex: 1; height: 4px; border-radius: 2px; background: #f2f4f7; overflow: hidden; }
.ft-load-bar i { display: block; height: 100%; background: #98a2b3; border-radius: 2px; }
.ft-load em { font-style: normal; font-size: 12px; color: var(--ft-text-3, #475467); min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }

:root .ticket-status-badge.ticket-status-critical,
:root[data-theme="light"] .ticket-status-badge.ticket-status-critical { background: #fef3f2 !important; color: #b42318 !important; }

.ft-assign-popover {
  position: absolute; z-index: 2000; width: 280px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.16);
  font-family: var(--ft-font, system-ui, sans-serif); color: #101828;
}
.ft-assign-popover select { width: 100%; height: 38px; }
.ft-assign-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Dunkelmodus: neue Bausteine passend einfärben */
:root[data-theme="dark"] .ft-kpi,
:root[data-theme="dark"] .ft-card { background: #0f1d31; border-color: #22324a; color: #e6edf6; box-shadow: none; }
:root[data-theme="dark"] .ft-card-head,
:root[data-theme="dark"] .ft-work-head { border-color: #22324a; background: transparent; }
:root[data-theme="dark"] .ft-work-row,
:root[data-theme="dark"] .ft-team-row { border-color: #1b2a40; }
:root[data-theme="dark"] .ft-work-row:hover { background: #13243b; }
:root[data-theme="dark"] .ft-kpi-label,
:root[data-theme="dark"] .ft-kpi-hint,
:root[data-theme="dark"] .ft-card-head p,
:root[data-theme="dark"] .ft-work-main small,
:root[data-theme="dark"] .ft-team-main small,
:root[data-theme="dark"] .ft-work-head,
:root[data-theme="dark"] .ft-load em { color: #9fb0c5; }
:root[data-theme="dark"] .ft-seg-group { background: #13243b; }
:root[data-theme="dark"] .ft-seg.is-active { background: #22324a; color: #fff; }
:root[data-theme="dark"] .ft-assign-button { background: transparent; }
:root[data-theme="dark"] .ft-person, :root[data-theme="dark"] .ft-prio, :root[data-theme="dark"] .ft-work-due { color: #d3dcea; }

/* Tagesplan ruhiger: "frei"-Beschriftung nur beim Überfahren, Plus erst bei Hover */
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-right: 1px solid #f2f4f7 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot:not(.is-disabled) span,
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot:not(.is-disabled) i {
  opacity: 0;
  transition: opacity .12s;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot:not(.is-disabled):hover {
  background: var(--ft-primary-soft) !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot:not(.is-disabled):hover span,
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot:not(.is-disabled):hover i {
  opacity: 1;
  color: var(--ft-primary) !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot.is-disabled {
  background: repeating-linear-gradient(135deg, #f2f4f7 0 6px, #f9fafb 6px 12px) !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-panel-head h3::after {
  content: "";
}
.ft-person.is-absent { color: var(--ft-s-crit, #b42318); }
.ft-absent-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: #fef3f2; color: #b42318; }

/* Reihenfolge im neuen Dashboard: Überblick → Tagesplan → Ereignisse → Details → Einrichtung */
#view-dashboard.has-dashboard-v3 > #dashboard-v3 { order: 0 !important; }
#view-dashboard.has-dashboard-v3 > #dashboard-v2-calendar-card { order: 1 !important; }
#view-dashboard.has-dashboard-v3 > #dashboard-v2-events-card { order: 2 !important; }
#view-dashboard.has-dashboard-v3 > .ft-legacy-toggle-row { order: 3 !important; }
#view-dashboard.has-dashboard-v3 > .dashboard-v2-grid { order: 4 !important; }
#view-dashboard.has-dashboard-v3 > #dashboard-setup-assistant { order: 5 !important; }

/* Tagesplan: Mitarbeiterspalte bleibt beim Querscrollen stehen */
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-corner,
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-employee {
  position: sticky !important;
  left: 0 !important;
  z-index: 6 !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 var(--ft-border) !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-employee strong { color: var(--ft-text) !important; font-weight: 600 !important; }
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-employee small { color: var(--ft-text-3) !important; }
:root[data-theme="light"] .unconfirmed-task-panel *,
:root[data-theme="light"] .dashboard-compact-row * {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-grid {
  overflow: visible !important;
}
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-planner .dashboard-now-line span { display: none !important; }
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot.is-disabled span,
:root[data-theme="light"] #dashboard-v2-calendar-card .dashboard-timeline-free-slot.is-disabled i { display: none !important; }
#dashboard-v3, #dashboard-v3 .ft-card { min-width: 0; max-width: 100%; }
:root[data-theme="dark"] .ft-load-bar { background: #22324a; }
:root[data-theme="dark"] .ft-load-bar i { background: #7d8ea6; }

/* Handlungsbedarf auf schmalen Bildschirmen als Karten */
@media (max-width: 820px) {
  .ft-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ft-kpi { padding: 12px 14px; }
  .ft-kpi-value { font-size: 24px; line-height: 30px; }
  .ft-kpi-hint { display: none; }
  .ft-card-head { padding: 14px 16px; }
  .ft-seg-group { width: 100%; overflow-x: auto; }
  .ft-seg { flex: 1 0 auto; }
  .ft-work-scroll { overflow: visible; }
  .ft-work-head { display: none; }
  .ft-work-row {
    min-width: 0; padding: 12px 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main status" "due person" "prio prio";
    row-gap: 6px;
  }
  .ft-work-main { grid-area: main; }
  .ft-work-status { grid-area: status; justify-self: end; }
  .ft-work-due { grid-area: due; font-size: 12px; }
  .ft-work-person { grid-area: person; justify-self: end; }
  .ft-work-prio { grid-area: prio; display: none; }
  .ft-team-row { padding: 12px 16px; }
}

/* =====================================================================
   Phase 3b: Mitarbeiter-Ansicht (Heute)
   ===================================================================== */
:root[data-theme="light"] .employee-dashboard-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:root[data-theme="light"] .employee-dashboard-card > .dashboard-panel-head > div:first-child { display: none !important; }
:root[data-theme="light"] .employee-dashboard-card > .dashboard-panel-head {
  display: block !important; padding: 0 !important; margin: 0 0 14px !important; border: 0 !important; background: transparent !important;
}
:root[data-theme="light"] .employee-dashboard-sections {
  display: flex !important; flex-direction: column !important; gap: 16px !important;
  background: transparent !important; padding: 0 !important;
}
.ft-emp-progress { background: #fff; border: 1px solid var(--ft-border, #e4e7ec); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ft-emp-progress-head { display: flex; justify-content: space-between; font-size: 14px; }
.ft-emp-progress-head span { color: var(--ft-text-3, #475467); }
.ft-emp-progress-bar { height: 6px; border-radius: 3px; background: #f2f4f7; overflow: hidden; }
.ft-emp-progress-bar i { display: block; height: 100%; background: #079455; border-radius: 3px; }
.employee-dashboard-sections .ft-emp-greeting { order: -1; }
.ft-emp-greeting p { margin: 0; font-size: 13px; color: var(--ft-text-3, #475467); }
.ft-emp-greeting h3 { margin: 2px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; }

:root[data-theme="light"] .employee-current-card.ft-emp-card {
  background: #fff !important; color: var(--ft-text) !important;
  border: 1px solid var(--ft-border) !important; border-left: 1px solid var(--ft-border) !important;
  border-radius: 16px !important; box-shadow: 0 1px 3px rgba(16,24,40,.08) !important;
  padding: 0 !important; overflow: hidden;
}
.ft-emp-card-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ft-emp-card-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ft-emp-kicker { font-size: 12px; font-weight: 600; color: var(--ft-primary, #c2410c); }
.ft-emp-card h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ft-text, #101828) !important; }
.ft-emp-place { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ft-text-2, #344054); line-height: 1.4; }
.ft-emp-place span span { color: var(--ft-text-3, #475467); }
.ft-emp-meta { margin: 0; font-size: 13px; color: var(--ft-text-3, #475467) !important; }
.ft-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-emp-steps { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ft-emp-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ft-text-3, #475467); }
.ft-emp-steps li i { display: block; height: 4px; border-radius: 2px; background: #e4e7ec; }
.ft-emp-steps li.is-done { color: #067647; }
.ft-emp-steps li.is-done i { background: #079455; }
.ft-emp-steps li.is-current { color: var(--ft-text, #101828); font-weight: 600; }
.ft-emp-steps li.is-current i { background: #dc6803; }
.ft-emp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: 4px; }
.ft-emp-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px;
  border: 1px solid var(--ft-border, #e4e7ec); border-radius: 12px; background: #fff; color: var(--ft-text-2, #344054);
  font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.ft-emp-tool:hover { background: var(--ft-surface-2, #f9fafb); }
.ft-emp-card-action { padding: 0 16px 16px; }
:root[data-theme="light"] .ft-emp-primary,
.ft-emp-primary { width: 100%; min-height: 52px !important; border-radius: 12px !important; font-size: 16px !important; }
.ft-emp-wide { width: 100%; min-height: 44px; }
.ft-emp-section h4 { margin: 4px 0 8px; font-size: 14px; font-weight: 600; color: var(--ft-text-2, #344054); }
.ft-emp-list { display: flex; flex-direction: column; gap: 8px; }
.ft-emp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--ft-border, #e4e7ec); border-radius: 12px; font: inherit; color: var(--ft-text, #101828);
}
.ft-emp-row-time { width: 48px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.ft-emp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ft-emp-row-main strong { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-emp-row-main small { font-size: 12px; color: var(--ft-text-3, #475467); }
.ft-emp-row .ft-ico { color: #98a2b3; }
.ft-emp-row.is-done { color: var(--ft-text-3, #475467); }
.ft-emp-row.is-done .ft-ico { color: #067647; }

/* Dunkelmodus */
:root[data-theme="dark"] .ft-emp-progress,
:root[data-theme="dark"] .ft-emp-card,
:root[data-theme="dark"] .ft-emp-row,
:root[data-theme="dark"] .ft-emp-tool { background: #0f1d31 !important; border-color: #22324a !important; color: #e6edf6 !important; }
:root[data-theme="dark"] .ft-emp-card h3 { color: #fff !important; }
:root[data-theme="dark"] .ft-emp-place,
:root[data-theme="dark"] .ft-emp-meta,
:root[data-theme="dark"] .ft-emp-row-main small,
:root[data-theme="dark"] .ft-emp-greeting p { color: #9fb0c5 !important; }
:root[data-theme="dark"] .ft-emp-progress-bar,
:root[data-theme="dark"] .ft-emp-steps li i { background: #22324a; }
.ft-dashboard.is-hidden { display: none !important; }
:root[data-theme="light"] .employee-dashboard-card,
:root[data-theme="light"] .employee-dashboard-sections,
:root[data-theme="light"] .employee-dashboard-sections > *,
:root[data-theme="light"] .employee-dashboard-summary { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
:root[data-theme="light"] .employee-dashboard-summary {
  display: block !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: 0 !important;
}
:root[data-theme="light"] .employee-dashboard-summary span,
:root[data-theme="light"] .ft-emp-progress span {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  color: var(--ft-text-3) !important; font-weight: 400 !important; min-height: 0 !important;
}
:root[data-theme="light"] .ft-emp-progress strong,
:root[data-theme="light"] .ft-emp-place strong,
:root[data-theme="light"] .ft-emp-row-main strong,
:root[data-theme="light"] .ft-emp-row-time,
:root[data-theme="light"] .ft-emp-section h4,
:root[data-theme="light"] .ft-emp-greeting h3 { color: var(--ft-text) !important; }
:root[data-theme="light"] .ft-emp-place span span { color: var(--ft-text-3) !important; font-weight: 400 !important; }
:root[data-theme="light"] .ft-emp-progress-bar i { background: #079455 !important; }

/* =====================================================================
   Phase 3d: Tickets (kompakte Liste, ruhiges Detail-Panel)
   ===================================================================== */
@media (min-width: 821px) {
  :root[data-theme="light"] #view-tickets .content-grid { gap: 20px !important; align-items: start !important; }
  :root[data-theme="light"] #ticket-list { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 -20px -20px !important; border-top: 1px solid var(--ft-border); }
  :root[data-theme="light"] #ticket-list .ticket-row {
    display: block !important; position: relative;
    margin: 0 !important; padding: 12px 20px !important;
    border: 0 !important; border-bottom: 1px solid #f2f4f7 !important; border-radius: 0 !important;
    background: #fff !important; box-shadow: none !important; transform: none !important;
  }
  :root[data-theme="light"] #ticket-list .ticket-row:hover { background: var(--ft-surface-2) !important; }
  :root[data-theme="light"] #ticket-list .ticket-row.is-selected { background: #fff8f3 !important; box-shadow: inset 3px 0 0 var(--ft-brand) !important; }
  :root[data-theme="light"] #ticket-list .ticket-row::before,
  :root[data-theme="light"] #ticket-list .ticket-row::after { display: none !important; }
  :root[data-theme="light"] #ticket-list .mobile-ticket-card-icon,
  :root[data-theme="light"] #ticket-list .mobile-ticket-card-chevron,
  :root[data-theme="light"] #ticket-list .supporting-copy,
  :root[data-theme="light"] #ticket-list .ticket-new-badge { display: none !important; }
  :root[data-theme="light"] #ticket-list .ticket-top { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 !important; }
  :root[data-theme="light"] #ticket-list .ticket-top > div { flex: 1; min-width: 0; }
  :root[data-theme="light"] #ticket-list .card-label { font-size: 12px !important; margin: 0 !important; }
  :root[data-theme="light"] #ticket-list .ticket-title { margin: 1px 0 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; color: var(--ft-text) !important; }
  :root[data-theme="light"] #ticket-list .ticket-subline { margin: 1px 0 0 !important; font-size: 13px !important; color: var(--ft-text-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-theme="light"] #ticket-list .ticket-meta { display: flex !important; flex-wrap: wrap; align-items: center !important; gap: 10px !important; margin: 8px 0 0 !important; font-size: 13px !important; color: var(--ft-text-3) !important; }
  :root[data-theme="light"] #ticket-list .priority-chip { background: transparent !important; padding: 0 !important; color: var(--ft-text-3) !important; font-size: 12px !important; }
  :root[data-theme="light"] #ticket-list .priority-chip.warning,
  :root[data-theme="light"] #ticket-list .priority-chip.danger { color: var(--ft-s-crit) !important; font-weight: 600 !important; }
  :root[data-theme="light"] #view-tickets .detail-card { position: sticky; top: 16px; }
}
/* Reiter im Detail als Unterstreichung */
:root[data-theme="light"] .segmented-tabs {
  display: flex !important; gap: 20px !important; padding: 0 !important; margin: 4px 0 12px !important;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ft-border) !important; border-radius: 0 !important; box-shadow: none !important;
}
:root[data-theme="light"] .segmented-tab {
  flex: 0 0 auto !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--ft-text-3) !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px !important;
}
:root[data-theme="light"] .segmented-tab.is-active { color: var(--ft-text) !important; font-weight: 600 !important; border-bottom-color: var(--ft-text) !important; }
:root[data-theme="light"] .ticket-confirmation-note {
  background: var(--ft-primary-soft) !important; border: 1px solid #f9dbc6 !important; border-left: 1px solid #f9dbc6 !important; border-radius: 10px !important; box-shadow: none !important;
}
:root[data-theme="light"] .ticket-confirmation-note strong { color: var(--ft-text) !important; font-size: 14px !important; font-weight: 600 !important; }
:root[data-theme="light"] .contractor-ticket-card,
:root[data-theme="light"] .detail-card .detail-grid > div,
:root[data-theme="light"] .detail-card dl > div {
  background: #fff !important; border: 1px solid var(--ft-border) !important; border-radius: 10px !important; box-shadow: none !important;
}
:root[data-theme="light"] .detail-card dd,
:root[data-theme="light"] .detail-card .detail-grid strong { font-size: 14px !important; font-weight: 500 !important; color: var(--ft-text) !important; }
:root[data-theme="light"] .ticket-message-card .ticket-message-text { font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--ft-text) !important; }
:root[data-theme="light"] .ticket-message-card .field-label::before,
:root[data-theme="light"] .ticket-message-card > .field-label > span:first-child { display: none !important; }

/* =====================================================================
   Phase 3e: Objekte und Kunden (kompakte Listen)
   ===================================================================== */
.object-color-code { color: var(--ft-text-3, #475467); font-size: 13px; }
.object-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; border: 1px solid rgba(15,23,42,.2); }
@media (min-width: 821px) {
  :root[data-theme="light"] #object-list,
  :root[data-theme="light"] #customer-list { display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 -20px -20px !important; border-top: 1px solid var(--ft-border); }
  :root[data-theme="light"] #object-list .object-card,
  :root[data-theme="light"] #customer-list .object-card {
    margin: 0 !important; padding: 12px 20px !important; border: 0 !important; border-bottom: 1px solid #f2f4f7 !important;
    border-radius: 0 !important; background: #fff !important; box-shadow: none !important; transform: none !important;
  }
  :root[data-theme="light"] #object-list .object-card:hover,
  :root[data-theme="light"] #customer-list .object-card:hover { background: var(--ft-surface-2) !important; }
  :root[data-theme="light"] #object-list .object-card.is-selected,
  :root[data-theme="light"] #customer-list .object-card.is-selected { background: #fff8f3 !important; box-shadow: inset 3px 0 0 var(--ft-brand) !important; }
  :root[data-theme="light"] .object-card-header { margin: 0 !important; gap: 12px !important; }
  :root[data-theme="light"] .object-card-header h4 { margin: 1px 0 0 !important; font-size: 14px !important; font-weight: 600 !important; }
  :root[data-theme="light"] .object-card .card-label { margin: 0 !important; }
  :root[data-theme="light"] .object-card-meta { margin: 2px 0 0 !important; font-size: 13px !important; color: var(--ft-text-3) !important; }
  :root[data-theme="light"] #view-objects .detail-card,
  :root[data-theme="light"] #view-customers .detail-card { position: sticky; top: 16px; }
}

/* Allgemeine Layout-Korrekturen (auch bestehende Fehler der alten Oberfläche) */
:root[data-theme="light"] .main-shell { align-content: start !important; align-items: start !important; min-width: 0 !important; }
:root[data-theme="light"] .view-section { min-width: 0 !important; box-sizing: border-box !important; }
:root[data-theme="light"] .view-section > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
:root[data-theme="light"] .activity-filter-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
:root[data-theme="light"] .activity-filter-grid > * { flex: 1 1 160px !important; min-width: 0 !important; }
:root[data-theme="light"] #calendar-grid.calendar-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
}
:root[data-theme="light"] #calendar-grid .calendar-cell { min-width: 0 !important; }

/* =====================================================================
   Phase 4: Disposition (Wochenplan) und Auswertungen
   ===================================================================== */
.ft-dispatch, .ft-reports { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ft-dispatch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft-week-nav { display: inline-flex; gap: 6px; }
.ft-week-nav .secondary-action { min-height: 34px; }
.ft-week-label { font-size: 15px; font-weight: 600; }
.ft-spacer { flex: 1; }
.ft-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ft-text-2, #344054); }
.ft-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #f2f4f7; font-size: 12px; font-weight: 600; text-align: center; }
.ft-dispatch-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ft-backlog { flex: 1 1 260px; max-width: 300px; }
.ft-backlog-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; max-height: 70vh; overflow: auto; }
.ft-backlog-card { display: flex; flex-direction: column; border: 1px solid var(--ft-border, #e4e7ec); border-left: 3px solid #98a2b3; border-radius: 10px; background: #fff; cursor: grab; }
.ft-backlog-card.tone-critical { border-left-color: #d92d20; }
.ft-backlog-card.tone-new { border-left-color: #1d4ed8; }
.ft-backlog-card.is-dragging { opacity: .5; }
.ft-backlog-open { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 6px; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.ft-backlog-open strong { font-size: 13px; font-weight: 600; color: var(--ft-text, #101828); }
.ft-backlog-open small { font-size: 12px; color: var(--ft-text-3, #475467); }
.ft-backlog-open em { font-style: normal; font-size: 12px; color: var(--ft-text-3, #475467); }
.ft-backlog-card.tone-critical em { color: #b42318; font-weight: 500; }
.ft-backlog-plan { align-self: flex-start; margin: 0 12px 10px; padding: 4px 10px; border: 1px solid var(--ft-border-strong, #d0d5dd); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--ft-primary, #c2410c); cursor: pointer; }
.ft-week { flex: 999 1 640px; }
.ft-week-scroll { overflow-x: auto; }
.ft-week-grid { display: grid; grid-template-columns: 156px repeat(var(--ft-days), minmax(118px, 1fr)); min-width: calc(156px + var(--ft-days) * 118px); }
.ft-week-corner, .ft-week-day { padding: 10px 12px; font-size: 12px; font-weight: 500; color: var(--ft-text-3, #475467); background: var(--ft-surface-2, #f9fafb); border-bottom: 1px solid var(--ft-border, #e4e7ec); }
.ft-week-day { border-left: 1px solid var(--ft-border, #e4e7ec); }
.ft-week-day.is-today { color: var(--ft-primary, #c2410c); font-weight: 600; }
.ft-week-corner, .ft-week-person { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--ft-border, #e4e7ec); }
.ft-week-corner { background: var(--ft-surface-2, #f9fafb); z-index: 3; }
.ft-week-person { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-bottom: 1px solid #f2f4f7; }
.ft-week-person strong { display: block; font-size: 13px; font-weight: 600; }
.ft-week-person small { font-size: 12px; color: var(--ft-text-3, #475467); }
.ft-week-cell { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 6px 6px 22px; border-left: 1px solid #f2f4f7; border-bottom: 1px solid #f2f4f7; transition: background .1s; }
.ft-week-cell.is-today { background: #fffcfa; }
.ft-week-cell.is-absent { background: repeating-linear-gradient(135deg, #f2f4f7 0 6px, #f9fafb 6px 12px); }
.ft-week-cell.is-drop-target { background: var(--ft-primary-soft, #fff4ed); box-shadow: inset 0 0 0 2px var(--ft-primary, #c2410c); }
.ft-dispatch.is-dragging .ft-week-cell:not(.is-absent) { background-color: #fcfcfd; }
.ft-absence { font-size: 12px; font-weight: 600; color: #475467; }
.ft-job { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 4px 8px; border: 0; border-left: 3px solid #4338ca; border-radius: 6px; background: #eef2ff; font: inherit; text-align: left; cursor: grab; color: var(--ft-text, #101828); }
.ft-job span { font-size: 11px; color: var(--ft-text-3, #475467); font-variant-numeric: tabular-nums; }
.ft-job strong { font-size: 12px; font-weight: 600; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-job.tone-progress { background: #fffaeb; border-left-color: #b54708; }
.ft-job.tone-done { background: #ecfdf3; border-left-color: #067647; }
.ft-job.tone-review { background: #ecfeff; border-left-color: #0e7490; }
.ft-job.tone-critical { background: #fef3f2; border-left-color: #b42318; }
.ft-cell-add { position: absolute; left: 6px; bottom: 4px; width: 22px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: transparent; font-size: 14px; line-height: 18px; cursor: pointer; }
.ft-week-cell:hover .ft-cell-add, .ft-cell-add:focus-visible { color: var(--ft-primary, #c2410c); background: var(--ft-primary-soft, #fff4ed); }
.ft-cell-load { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: var(--ft-text-3, #475467); font-variant-numeric: tabular-nums; }

.ft-dialog-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(16, 24, 40, .45); }
.ft-dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px rgba(16,24,40,.24); color: #101828; font-family: var(--ft-font, system-ui, sans-serif); }
.ft-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ft-dialog h3 { margin: 0; font-size: 18px; font-weight: 600; }
.ft-dialog-sub { margin: 0; font-size: 13px; color: #475467; }
.ft-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #344054; }
.ft-field input, .ft-field select { height: 40px; width: 100%; box-sizing: border-box; }
.ft-span-2 { grid-column: 1 / -1; }
.ft-dialog-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff4ed; font-size: 13px; color: #9a3412; }
.ft-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }

.ft-kpi.is-static { cursor: default; }
.ft-dot.tone-done { background: #079455; }
.ft-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ft-text-3, #475467); }
.ft-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.ft-legend i.is-in, .ft-bar.is-in { background: #98a2b3; }
.ft-legend i.is-out, .ft-bar.is-out { background: var(--ft-primary, #c2410c); }
.ft-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; height: 240px; padding: 28px 20px 16px; }
.ft-bar-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft-bar-pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--ft-border-strong, #d0d5dd); }
.ft-bar { position: relative; width: 40%; max-width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; }
.ft-bar em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--ft-text-3, #475467); }
.ft-bar-group small { text-align: center; font-size: 11px; color: var(--ft-text-3, #475467); }
.ft-catbars { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
.ft-catbar { display: grid; grid-template-columns: minmax(0, 130px) 1fr 32px; gap: 10px; align-items: center; font-size: 13px; }
.ft-catbar span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ft-text-2, #344054); }
.ft-catbar-track { height: 10px; border-radius: 3px; background: #f2f4f7; overflow: hidden; }
.ft-catbar-track i { display: block; height: 100%; background: #475467; border-radius: 3px; }
.ft-catbar strong { text-align: right; font-variant-numeric: tabular-nums; }
.ft-table-scroll { overflow-x: auto; }
.ft-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ft-table th { text-align: left; padding: 10px 20px; font-size: 12px; font-weight: 500; color: var(--ft-text-3, #475467); background: var(--ft-surface-2, #f9fafb); border-bottom: 1px solid var(--ft-border, #e4e7ec); white-space: nowrap; }
.ft-table td { padding: 10px 20px; border-bottom: 1px solid #f2f4f7; font-variant-numeric: tabular-nums; }
.ft-table td:first-child { font-weight: 500; }
.ft-footnote { margin: 0; font-size: 12px; color: var(--ft-text-3, #475467); }
@media print {
  .sidebar, .topbar, .demo-mode-banner, .bottom-nav, .ft-dispatch-toolbar button, .ft-seg-group { display: none !important; }
  .app-shell { display: block !important; }
}
@media (max-width: 820px) {
  .ft-backlog { max-width: none; }
  .ft-dialog-grid { grid-template-columns: 1fr; }
}
/* Dunkelmodus */
:root[data-theme="dark"] .ft-backlog-card, :root[data-theme="dark"] .ft-backlog-plan, :root[data-theme="dark"] .ft-week-person, :root[data-theme="dark"] .ft-week-corner { background: #0f1d31; border-color: #22324a; color: #e6edf6; }
:root[data-theme="dark"] .ft-week-day, :root[data-theme="dark"] .ft-table th { background: #13243b; border-color: #22324a; color: #9fb0c5; }
:root[data-theme="dark"] .ft-week-cell, :root[data-theme="dark"] .ft-table td { border-color: #1b2a40; }
:root[data-theme="dark"] .ft-backlog-open strong, :root[data-theme="dark"] .ft-job strong { color: #e6edf6; }
:root[data-theme="dark"] .ft-job { background: #1b2a40; }
.ft-team-card .ft-table th, .ft-team-card .ft-table td { padding-left: 12px; padding-right: 12px; }
.ft-team-card .ft-table td:first-child { white-space: nowrap; }
.ft-field { min-width: 0; }
.ft-dialog .ft-field input, .ft-dialog .ft-field select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; line-height: normal !important; box-sizing: border-box !important; }

/* Phase 5: Reiter im Objekt-Detail */
.ft-tab-panel { display: none; }
.ft-tab-panel.is-active { display: flex; flex-direction: column; gap: 16px; }
.ft-object-tabs { position: sticky; top: 0; z-index: 2; background: inherit; }
:root[data-theme="light"] .ft-object-tabs { background: #fff !important; }

/* Phase 5b: Einstellungen mit seitlicher Unternavigation */
@media (min-width: 821px) {
  :root[data-theme="light"] .settings-shell { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; gap: 0 24px !important; align-items: start !important; }
  :root[data-theme="light"] .settings-shell > * { grid-column: 2; min-width: 0; }
  :root[data-theme="light"] .settings-shell > .settings-tabs {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 16px;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important;
  }
}
:root[data-theme="light"] .settings-tab {
  justify-content: flex-start !important; text-align: left !important; min-height: 36px !important; padding: 0 12px !important;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important;
  color: var(--ft-text-2) !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; white-space: nowrap;
}
:root[data-theme="light"] .settings-tab:hover { background: #f2f4f7 !important; }
:root[data-theme="light"] .settings-tab.is-active { background: #fff !important; border-color: var(--ft-border) !important; color: var(--ft-text) !important; font-weight: 600 !important; box-shadow: var(--ft-shadow) !important; }
:root[data-theme="light"] .settings-panel { padding: 20px 24px !important; }
:root[data-theme="light"] .settings-form-grid { gap: 14px 16px !important; }
@media (max-width: 820px) {
  :root[data-theme="light"] .settings-tabs { display: flex !important; overflow-x: auto !important; gap: 4px !important; padding-bottom: 4px !important; }
}
:root[data-theme="light"] .settings-shell > .settings-tabs { align-items: stretch !important; justify-content: flex-start !important; }
:root[data-theme="light"] .settings-tab { width: 100% !important; display: flex !important; align-items: center !important; border-bottom-width: 1px !important; }
:root[data-theme="light"] .settings-tab::before, :root[data-theme="light"] .settings-tab::after { display: none !important; }

/* ---------- Phase 5: Mobile-Feinschliff (Bottom-Navigation, Kopfzeile) ---------- */
@media (max-width: 760px) {
  :root[data-theme="light"] .bottom-nav {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ft-border) !important;
    min-height: 64px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 2px !important;
  }
  :root .bottom-nav .nav-item[data-action="more"]::before { content: none !important; display: none !important; }
  :root[data-theme="light"] .bottom-nav .nav-item {
    position: relative !important;
    min-height: 50px !important;
    padding: 6px 2px !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
  }
  :root[data-theme="light"] .bottom-nav .nav-icon { width: 24px !important; height: 24px !important; background: transparent !important; }
  :root[data-theme="light"] .bottom-nav .nav-icon .ui-icon { width: 22px !important; height: 22px !important; }
  :root[data-theme="light"] .bottom-nav .nav-label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
  :root .bottom-nav .nav-item .nav-count {
    position: absolute !important;
    top: 2px !important; left: calc(50% + 6px) !important; right: auto !important;
    margin: 0 !important;
    min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
    border-radius: 999px !important;
    background: var(--ft-crit, #b42318) !important; color: #fff !important;
    font-size: 0.68rem !important; font-weight: 700 !important; line-height: 18px !important;
    box-shadow: 0 0 0 2px var(--ft-surface, #fff) !important;
  }
  :root[data-theme="dark"] .bottom-nav .nav-item .nav-count { box-shadow: 0 0 0 2px #111827 !important; }
  /* Kopfzeile: Suche nimmt den Platz, Zusatzknoepfe ausblenden */
  .topbar .topbar-actions { flex-wrap: nowrap !important; gap: 8px !important; min-width: 0 !important; width: 100% !important; }
  .topbar .topbar-actions .global-search-box { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  .topbar .topbar-actions #page-help-button,
  .topbar .topbar-actions #reload-button { display: none !important; }
  .main-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Mitarbeiter-Start: Begruessung zuerst, dann "Dein Tag", dann Auftraege */
.dashboard-panel.employee-dashboard-card:not(.is-hidden) { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.dashboard-panel.employee-dashboard-card > .employee-dashboard-sections { display: contents !important; }
.dashboard-panel.employee-dashboard-card > .employee-dashboard-sections > * { order: 3 !important; }
.dashboard-panel.employee-dashboard-card > .employee-dashboard-sections > .ft-emp-greeting { order: 0 !important; margin: 0 !important; }
.dashboard-panel.employee-dashboard-card > .dashboard-panel-head { order: 1 !important; margin: 0 !important; }
@media (max-width: 760px) {
  .topbar .topbar-profile > :not(:first-child) { display: none !important; }
  .topbar .topbar-profile { padding-left: 8px !important; border-left: 0 !important; flex: 0 0 auto !important; }
  :root .bottom-nav .nav-item[data-action="more"] .ui-icon { stroke-width: 3.2 !important; }
}

@media (min-width: 1024px) {
  .dashboard-panel.employee-dashboard-card { max-width: 880px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; }
}

/* ---------- Phase 6: Aufgabenliste ---------- */
/* Kennzahl-Kacheln: nur Bezeichnung + Zahl, keine Dopplungen */
:root[data-theme] .tasks-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 12px !important; }
:root[data-theme] .tasks-kpi-card { min-height: 0 !important; padding: 14px 16px !important; border-radius: 12px !important; box-shadow: none !important; }
:root[data-theme] .tasks-kpi-card .task-kpi-short,
:root[data-theme] .tasks-kpi-card small { display: none !important; }
:root[data-theme] .tasks-kpi-card .task-kpi-label { font-size: 0.85rem !important; font-weight: 600 !important; }
:root[data-theme] .tasks-kpi-card strong { margin: 4px 0 0 !important; font-size: 1.6rem !important; line-height: 1.1 !important; }
:root[data-theme="light"] .tasks-kpi-card.is-active { border-color: var(--ft-brand) !important; background: #fff7f2 !important; box-shadow: inset 0 0 0 1px var(--ft-brand) !important; }

/* Leere Gruppen ausblenden, solange irgendeine Gruppe Eintraege hat */
.task-status-groups:has(.task-list-row) .task-status-section:not(:has(.task-list-row)) { display: none !important; }

/* Tabelle: schmalere Spalten, damit nichts abgeschnitten wird */
:root[data-theme] .task-list-row,
:root[data-theme] .task-table {
  --task-list-columns: 28px minmax(200px, 2fr) 88px minmax(130px, 1fr) minmax(110px, 0.8fr) 112px minmax(150px, auto) !important;
}
.task-action-cell { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-end !important; }

/* Prioritaet farbig */
:root .task-priority-badge.ft-prio-crit { background: #fef3f2 !important; color: #b42318 !important; }
:root .task-priority-badge.ft-prio-high { background: #fffaeb !important; color: #b54708 !important; }
:root .task-priority-badge.ft-prio-mid  { background: #eff4ff !important; color: #1d4ed8 !important; }
:root .task-priority-badge.ft-prio-low  { background: #f2f4f7 !important; color: #475467 !important; }
:root[data-theme="dark"] .task-priority-badge.ft-prio-crit { background: rgba(240,68,56,.16) !important; color: #fda29b !important; }
:root[data-theme="dark"] .task-priority-badge.ft-prio-high { background: rgba(247,144,9,.16) !important; color: #fec84b !important; }
:root[data-theme="dark"] .task-priority-badge.ft-prio-mid  { background: rgba(83,138,255,.16) !important; color: #a4bcfd !important; }
:root[data-theme="dark"] .task-priority-badge.ft-prio-low  { background: rgba(152,162,179,.16) !important; color: #d0d5dd !important; }

@media (max-width: 760px) {
  /* Status-Filter als ruhige Chips in einer Zeile */
  :root[data-theme] .tasks-kpi-grid {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 8px !important; margin: 0 -16px !important; padding: 2px 16px 6px !important;
    scrollbar-width: none !important;
  }
  :root[data-theme] .tasks-kpi-grid::-webkit-scrollbar { display: none; }
  :root[data-theme] .tasks-kpi-card {
    flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
    width: auto !important; min-width: 0 !important; height: 36px !important; padding: 0 14px !important;
    border-radius: 999px !important;
  }
  :root[data-theme] .tasks-kpi-card::before, :root[data-theme] .tasks-kpi-card::after { content: none !important; display: none !important; }
  :root[data-theme] .tasks-kpi-card .task-kpi-label { display: none !important; }
  :root[data-theme] .tasks-kpi-card .task-kpi-short { display: inline !important; font-size: 0.875rem !important; font-weight: 600 !important; color: inherit !important; }
  :root[data-theme] .tasks-kpi-card strong { margin: 0 !important; font-size: 0.8rem !important; min-width: 20px; height: 20px; line-height: 20px !important; padding: 0 6px; border-radius: 999px; background: #f2f4f7; text-align: center; }
  :root[data-theme="light"] .tasks-kpi-card.is-active { background: var(--ft-text) !important; border-color: var(--ft-text) !important; color: #fff !important; box-shadow: none !important; }
  :root[data-theme="light"] .tasks-kpi-card.is-active .task-kpi-short { color: #fff !important; }
  :root[data-theme="light"] .tasks-kpi-card.is-active strong { background: rgba(255,255,255,.2) !important; color: #fff !important; }

  /* Gruppenkopf schlanker, Tabellenkopf weg */
  .task-status-section .task-table-head { display: none !important; }
  .task-status-section { border-radius: 12px !important; overflow: hidden !important; }
  .task-status-header { padding: 12px 14px !important; }
  .task-status-header h3 { font-size: 0.95rem !important; }
  .task-table-body { max-height: none !important; }

  /* Aufgabe als kompakte Karte */
  :root[data-theme] .task-list-row {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 6px 10px !important; padding: 14px 14px 14px 18px !important;
    margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--ft-border, #e4e7ec) !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  :root[data-theme] .task-list-row::before { width: 4px !important; }
  .task-list-row .task-select-cell:has(input:disabled) { display: none !important; }
  .task-list-row .task-title-cell { flex: 1 1 100% !important; display: block !important; }
  .task-list-row .task-title-cell strong { display: block !important; font-size: 1rem !important; line-height: 1.3 !important; }
  .task-list-row .task-title-cell small { display: block !important; margin-top: 2px !important; color: var(--ft-text-3, #475467) !important;
    overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .task-list-row .task-title-cell .task-status-badge { display: none !important; }
  .task-list-row .task-priority-cell,
  .task-list-row .task-object-cell,
  .task-list-row .task-owner-cell,
  .task-list-row .task-due-cell { flex: 0 0 auto !important; font-size: 0.85rem !important; color: var(--ft-text-2, #344054) !important; }
  .task-list-row .task-due-cell { font-weight: 600 !important; }
  .task-list-row.is-own-task .task-owner-cell { display: none !important; }
  .task-list-row .task-action-cell { flex: 1 1 100% !important; justify-content: stretch !important; margin-top: 6px !important; }
  .task-list-row .task-action-cell > * { flex: 1 1 0 !important; min-height: 44px !important; }

  /* Seitenkarten unten: Objektfarben am Handy unnoetig */
  .tasks-side-panel .tasks-side-card:has(.task-object-legend) { display: none !important; }
}

/* Aufgaben am PC: Liste volle Breite, Zusatzkarten darunter */
:root[data-theme] .tasks-content-layout { grid-template-columns: minmax(0, 1fr) !important; }
:root[data-theme] .tasks-side-panel { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
@media (min-width: 761px) {
  :root[data-theme] .task-list-row,
  :root[data-theme] .task-table {
    --task-list-columns: 28px minmax(200px, 2fr) 84px minmax(130px, 1fr) minmax(110px, 0.9fr) 104px minmax(130px, auto) !important;
  }
}

/* Aufgaben bei mittlerer Breite (Tablet, kleiner Laptop): Karten statt Tabelle, nichts laeuft ueber */
:root[data-theme] .tasks-page-shell { grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; }
@media (max-width: 1180px) {
  .task-status-section .task-table-head { display: none !important; }
  :root[data-theme] .task-list-row {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 6px 14px !important; padding: 14px 16px 14px 20px !important;
  }
  .task-list-row .task-title-cell { flex: 1 1 100% !important; display: block !important; }
  .task-list-row .task-title-cell strong { display: block !important; }
  .task-list-row .task-title-cell .task-status-badge { display: none !important; }
  .task-list-row .task-priority-cell,
  .task-list-row .task-object-cell,
  .task-list-row .task-owner-cell,
  .task-list-row .task-due-cell { flex: 0 0 auto !important; font-size: 0.875rem !important; }
  .task-list-row .task-due-cell { font-weight: 600 !important; }
  .task-list-row .task-action-cell { margin-left: auto !important; }
  .task-list-row .task-select-cell { order: -1; }
  :root[data-theme] .tasks-filter-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  :root[data-theme] .tasks-filter-bar > * { min-width: 0 !important; width: 100% !important; }
  .task-archive-toolbar { flex-wrap: wrap !important; gap: 8px !important; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .task-list-row .task-select-cell { flex: 0 0 auto !important; }
  .task-list-row .task-title-cell { flex: 1 1 0 !important; min-width: 70% !important; }
}

/* Dashboard-Liste "Handlungsbedarf" bei mittlerer Breite schmaler */
@media (min-width: 761px) and (max-width: 1180px) {
  .ft-work-head, .ft-work-row { grid-template-columns: 68px minmax(0, 1fr) 118px 96px 124px !important; gap: 10px !important; }
  .ft-work-person, .ft-work-row .ft-person { min-width: 0 !important; overflow: hidden !important; }
  .ft-work-person span:last-child, .ft-work-row .ft-person span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.dashboard-panel.employee-dashboard-card.is-hidden { display: none !important; }
@media (min-width: 761px) { #dashboard-v3-kpis.ft-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

.ticket-subline .ft-unassigned { color: var(--ft-crit, #b42318); font-weight: 600; }

/* ---------- Phase 7: Kalender ---------- */
@media (min-width: 1281px) {
  #view-calendar .content-grid { grid-template-columns: minmax(0, 1fr) 340px !important; }
}
@media (max-width: 1280px) {
  #view-calendar .content-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
:root[data-theme] #calendar-grid.calendar-grid[data-mode="month"],
:root[data-theme] #calendar-grid.calendar-grid[data-mode="week"] {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--ft-border, #e4e7ec) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--ft-border, #e4e7ec) !important;
}
#calendar-grid[data-mode="month"] .calendar-weekday {
  padding: 8px 10px; background: var(--ft-surface-2, #f9fafb);
  font-size: 12px; font-weight: 600; color: var(--ft-text-3, #475467);
  border-bottom: 1px solid var(--ft-border, #e4e7ec);
}
#calendar-grid[data-mode="month"] .calendar-cell,
#calendar-grid[data-mode="week"] .calendar-cell {
  min-height: 112px !important; margin: 0 !important; padding: 6px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-right: 1px solid var(--ft-border, #e4e7ec) !important; border-bottom: 1px solid var(--ft-border, #e4e7ec) !important;
  background: var(--ft-surface, #fff) !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important; overflow: hidden !important;
}
#calendar-grid[data-mode="week"] .calendar-cell { min-height: 360px !important; }
#calendar-grid .calendar-cell.is-filler { background: var(--ft-surface-2, #f9fafb) !important; min-height: 0 !important; }
#calendar-grid .calendar-cell-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 2px !important; }
#calendar-grid[data-mode="month"] .calendar-cell-head strong {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px;
  font-size: 13px !important; font-weight: 600 !important; color: var(--ft-text-2, #344054) !important;
}
#calendar-grid .calendar-cell.is-current .calendar-cell-head strong { background: var(--ft-primary, #c2410c); color: #fff !important; }
#calendar-grid[data-mode="week"] .calendar-cell.is-current .calendar-cell-head strong { padding: 2px 8px; border-radius: 999px; }
#calendar-grid .calendar-cell.is-current { background: #fffaf5 !important; }
#calendar-grid .calendar-cell.is-selected-day { box-shadow: inset 0 0 0 2px var(--ft-brand, #f26b1d) !important; }
#calendar-grid .calendar-day-create {
  width: 22px !important; height: 22px !important; min-height: 0 !important; padding: 0 !important;
  border-radius: 6px !important; font-size: 14px !important; line-height: 1 !important;
  background: transparent !important; color: var(--ft-text-3, #667085) !important; border: 0 !important; box-shadow: none !important;
  opacity: 0; transition: opacity .15s;
}
#calendar-grid .calendar-cell:hover .calendar-day-create,
#calendar-grid .calendar-day-create:focus-visible { opacity: 1; background: var(--ft-surface-2, #f2f4f7) !important; }
#calendar-grid .calendar-cell-count { margin: 0 !important; font-size: 12px !important; color: var(--ft-text-3, #667085) !important; }
#calendar-grid[data-mode="month"] .calendar-chip,
#calendar-grid[data-mode="week"] .calendar-chip {
  position: relative; display: flex !important; align-items: center !important; gap: 4px !important; width: 100% !important;
  min-height: 0 !important; margin: 0 !important; padding: 2px 6px !important;
  border: 0 !important; border-left: 3px solid var(--ft-chip, #98a2b3) !important; border-radius: 4px !important;
  background: var(--ft-surface-2, #f2f4f7) !important; box-shadow: none !important;
  font-size: 12px !important; line-height: 1.35 !important; text-align: left !important; color: var(--ft-text, #101828) !important;
  white-space: nowrap !important; overflow: hidden !important;
}
#calendar-grid .calendar-chip.calendar-type-ticket { --ft-chip: #1d4ed8; background: #eff4ff !important; }
#calendar-grid .calendar-chip.calendar-type-appointment { --ft-chip: #f26b1d; background: #fff4ed !important; }
#calendar-grid .calendar-chip.calendar-type-recurring { --ft-chip: #067647; background: #ecfdf3 !important; }
#calendar-grid .calendar-chip.calendar-type-emergency { --ft-chip: #b42318; background: #fef3f2 !important; }
#calendar-grid .calendar-chip.is-reassignment-required { --ft-chip: #b42318; }
#calendar-grid[data-mode="month"] .calendar-chip-icon,
#calendar-grid[data-mode="month"] .task-status-stack,
#calendar-grid[data-mode="month"] .task-reassignment-badge,
#calendar-grid[data-mode="month"] .calendar-chip-dot,
#calendar-grid[data-mode="week"] .calendar-chip-icon,
#calendar-grid[data-mode="week"] .calendar-chip-dot { display: none !important; }
#calendar-grid .calendar-chip-time { flex: none; font-variant-numeric: tabular-nums; color: var(--ft-text-3, #475467); font-weight: 600; }
#calendar-grid .calendar-chip-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#calendar-grid[data-mode="week"] .calendar-chip { flex-wrap: wrap !important; white-space: normal !important; padding: 4px 6px !important; }
#calendar-grid[data-mode="week"] .task-status-stack { flex-basis: 100%; }
#calendar-grid .calendar-more-button {
  min-height: 0 !important; padding: 2px 6px !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--ft-primary, #c2410c) !important; text-align: left !important;
}
/* Doppelte Terminliste unter Monats-/Wochenraster ausblenden (Tagesansicht behaelt sie) */
#calendar-grid[data-mode="month"] + #calendar-list,
#calendar-grid[data-mode="week"] + #calendar-list { display: none !important; }
/* Legende ohne Emojis, ruhiger */
#view-calendar .calendar-legend { display: flex !important; flex-wrap: wrap; gap: 12px !important; }
#view-calendar .calendar-legend-item { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; color: var(--ft-text-3, #475467) !important; display: inline-flex; align-items: center; gap: 6px; }
#view-calendar .calendar-legend-item > span[aria-hidden] { display: none; }
#view-calendar .calendar-legend-item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #98a2b3; }
#view-calendar .calendar-legend-item.calendar-type-ticket::before { background: #1d4ed8; }
#view-calendar .calendar-legend-item.calendar-type-appointment::before { background: #f26b1d; }
#view-calendar .calendar-legend-item.calendar-type-recurring::before { background: #067647; }
#view-calendar .calendar-legend-item.calendar-type-emergency::before { background: #b42318; }
#view-calendar .calendar-admin-filter-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 8px !important; }
#view-calendar .calendar-admin-filter-bar.is-hidden { display: none !important; }
#view-calendar .calendar-admin-filter-bar select { width: 100% !important; min-width: 0 !important; }
:root[data-theme="dark"] #calendar-grid .calendar-cell { background: #111827 !important; }
:root[data-theme="dark"] #calendar-grid .calendar-chip { background: #1f2937 !important; color: #f2f4f7 !important; }
@media (max-width: 760px) {
  #calendar-grid[data-mode="month"] .calendar-cell { min-height: 64px !important; padding: 3px !important; }
  #calendar-grid[data-mode="month"] .calendar-chip-title, #calendar-grid[data-mode="month"] .calendar-chip-time { display: none; }
  #calendar-grid[data-mode="month"] .calendar-chip { height: 6px !important; padding: 0 !important; border-left-width: 0 !important; background: var(--ft-chip) !important; }
  #calendar-grid[data-mode="week"] { grid-template-columns: minmax(0, 1fr) !important; }
  #calendar-grid[data-mode="week"] .calendar-cell { min-height: 0 !important; }
}

#calendar-form-card .button-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
#calendar-form-card .button-row > * { flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important; }
#calendar-form-card .button-row > .primary-action { flex-basis: 100% !important; }

/* ---------- Phase 7: Tickets am Handy kompakt ---------- */
@media (max-width: 760px) {
  #ticket-filters.filter-row {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important;
    margin: 0 -16px !important; padding: 2px 16px 8px !important; scrollbar-width: none;
  }
  #ticket-filters.filter-row::-webkit-scrollbar { display: none; }
  #ticket-filters .filter-chip { flex: 0 0 auto !important; min-height: 36px !important; padding: 0 14px !important; font-size: 0.875rem !important; }
  :root[data-theme] #ticket-list .ticket-row {
    display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 4px !important;
    padding: 14px 14px 14px 16px !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--ft-border, #e4e7ec) !important; border-radius: 0 !important; box-shadow: none !important;
  }
  :root[data-theme] #ticket-list .ticket-row.is-selected { background: #fffaf5 !important; box-shadow: inset 3px 0 0 var(--ft-brand, #f26b1d) !important; }
  #ticket-list .mobile-ticket-card-icon {
    grid-row: 1 / span 3; width: 36px !important; height: 36px !important; margin: 0 !important;
    border-radius: 10px !important; display: grid !important; place-items: center !important; font-size: 18px !important;
  }
  #ticket-list .ticket-row > :not(.mobile-ticket-card-icon) { grid-column: 2 !important; }
  #ticket-list .ticket-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; }
  #ticket-list .ticket-top .card-label { margin: 0 !important; font-size: 12px !important; }
  #ticket-list .ticket-top .ticket-title { margin: 2px 0 !important; font-size: 1rem !important; line-height: 1.3 !important; }
  #ticket-list .ticket-subline { margin: 0 !important; font-size: 0.85rem !important; }
  #ticket-list .ticket-row > .supporting-copy { margin: 0 !important; font-size: 0.85rem !important; color: var(--ft-text-3, #475467) !important;
    overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #ticket-list .ticket-meta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; margin: 4px 0 0 !important; }
  #ticket-list .ticket-meta > span:not(.ticket-status-badge) { background: none !important; padding: 0 !important; font-size: 0.85rem !important; font-weight: 600 !important; color: var(--ft-text-2, #344054) !important; }
  #ticket-list .mobile-ticket-card-chevron { display: none !important; }
  #ticket-list .resident-answer-badge { justify-self: start; }
}
@media (max-width: 760px) {
  #ticket-list .ticket-top { flex-direction: row !important; }
  #ticket-list .ticket-top > div { min-width: 0 !important; flex: 1 1 auto !important; }
  #ticket-list .ticket-top .priority-chip { flex: none !important; margin: 0 !important; }
  #ticket-list .ticket-meta { justify-content: flex-start !important; text-align: left !important; }
  #ticket-list .site-visit-badge { display: inline-block !important; margin: 2px 0 !important; padding: 2px 8px !important; border-radius: 999px !important; font-size: 12px !important; }
}

/* Mitarbeiter-Startseite: betriebsweite Ereignisliste gehoert in die Disposition */
#view-dashboard:not(.has-dashboard-v3) #dashboard-v2-events-card { display: none !important; }
@media (max-width: 760px) {
  #ticket-list .ticket-meta > * { margin: 0 !important; }
  #ticket-list .ticket-meta { justify-items: start !important; place-content: start !important; width: 100% !important; }
}

:root[data-theme="dark"] #calendar-grid.calendar-grid[data-mode] { background: #1f2a3a !important; border-color: #1f2a3a !important; }
:root[data-theme="dark"] #calendar-grid .calendar-weekday { background: #0f1b2b !important; color: #98a2b3 !important; border-color: #1f2a3a !important; }
:root[data-theme="dark"] #calendar-grid .calendar-cell { border-color: #1f2a3a !important; }
:root[data-theme="dark"] #calendar-grid .calendar-cell.is-filler { background: #0b1522 !important; }
:root[data-theme="dark"] #calendar-grid .calendar-cell.is-current { background: #1d1a17 !important; }
:root[data-theme="dark"] #calendar-grid .calendar-cell-head strong { color: #d0d5dd !important; }
:root[data-theme="dark"] #calendar-grid .calendar-chip-time { color: #98a2b3; }
:root[data-theme="dark"] .tasks-kpi-card.is-active { background: rgba(242,107,29,.12) !important; border-color: #f26b1d !important; }

.ft-work-row > * { min-width: 0; }
.ft-work-row .ticket-status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* Mitarbeiterkarte: Seitenliste */
#view-employee-map .button-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#view-employee-map .button-row > * { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; text-decoration: none !important; text-align: center !important; }
#view-employee-map img[src*="tile"] { color: transparent; }

/* Tagesplan: beim Hinscrollen (Tastatur/Fokus) nicht unter der festen Mitarbeiterspalte landen */
#dashboard-v2-timeline.dashboard-timeline { scroll-padding-left: 180px; }
@media (max-width: 760px) { #dashboard-v2-timeline .dashboard-timeline-employee { width: 120px !important; min-width: 120px !important; max-width: 120px !important; } #dashboard-v2-timeline.dashboard-timeline { scroll-padding-left: 130px; } }

/* Aufgabenfilter fuer Mitarbeiter: kein Mitarbeiter-Filter, am Handy ganz ausgeblendet (Status-Chips genuegen) */
.tasks-filter-bar.is-employee-view #task-filter-employee { display: none !important; }
@media (max-width: 760px) { :root[data-theme] section.tasks-filter-bar.is-employee-view { display: none !important; } }

/* Mitarbeiterkarte: Die Regel ".employee-map-marker span" (styles.css) dreht den Marker-Buchstaben,
   traf aber auch die Auftragseintraege im Hinweisfenster (schraeg und ueberlagert). Fuer den Hinweis zuruecksetzen. */
.employee-map-marker .employee-map-tooltip span {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  place-items: normal !important;
}
.employee-map-marker .employee-map-tooltip .employee-map-object-ticket { display: grid !important; gap: 2px !important; text-align: left; }

/* Karten: Kacheln sanft einblenden, nie das Symbol fuer kaputte Bilder zeigen, heller Kartenhintergrund statt Schwarz */
.employee-map-tile { opacity: 0; transition: opacity .18s ease-out; background: transparent; }
.employee-map-tile.is-loaded { opacity: 1; }
.employee-map-tile.is-failed { visibility: hidden; }
:root[data-theme] .employee-map-canvas,
:root[data-theme] .employee-map-tiles,
:root[data-theme] [class*="geo-map"] .employee-map-tiles { background-color: #ece8e1 !important; }
:root[data-theme="dark"] .employee-map-canvas { background-color: #d9d5ce !important; }

/* =====================================================================
   Vorlagen-Editor (QR-Aushaenge) - Redesign 2026-10-27, hell und dunkel
   ===================================================================== */
#view-qr-posters .qr-editor-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }

/* 1) Objektwahl: eine ruhige Zeile */
#view-qr-posters .qr-reference-sidebar {
  padding: 12px 16px !important; border-radius: 12px !important; box-shadow: none !important;
  background: var(--ft-surface) !important; border: 1px solid var(--ft-border) !important;
}
#view-qr-posters .qr-sidebar-object-picker {
  display: grid !important; grid-template-columns: auto minmax(160px, 280px) minmax(0, 1fr) !important;
  align-items: center !important; gap: 10px !important; margin: 0 !important;
}
#view-qr-posters .qr-sidebar-object-picker .field-label { margin: 0 !important; white-space: nowrap; font-weight: 600 !important; color: var(--ft-text) !important; font-size: 14px !important; }
#view-qr-posters .qr-sidebar-object-picker input,
#view-qr-posters .qr-sidebar-object-picker select { height: 38px !important; min-height: 38px !important; width: 100% !important; margin: 0 !important; }

/* 2) Editor-Kopf */
#view-qr-posters .qr-editor-shell {
  padding: 0 !important; overflow: hidden !important; border-radius: 12px !important;
  border: 1px solid var(--ft-border) !important; box-shadow: none !important; background: var(--ft-surface) !important;
}
#view-qr-posters .qr-editor-topbar {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important;
  gap: 12px 20px !important; padding: 16px 20px !important; margin: 0 !important;
  border-bottom: 1px solid var(--ft-border) !important; background: var(--ft-surface) !important;
}
#view-qr-posters .qr-editor-topbar-main { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 10px !important; min-width: 0 !important; }
#view-qr-posters #qr-editor-object-title { margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; color: var(--ft-text) !important; }
#view-qr-posters .qr-template-toolbar {
  flex: 1 1 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important;
  margin: 6px 0 0 !important; padding: 10px 12px !important; border-radius: 10px !important;
  background: var(--ft-surface-2) !important; border: 1px solid var(--ft-border) !important;
}
#view-qr-posters .qr-template-toolbar > label.detail-stack { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
#view-qr-posters .qr-template-toolbar .field-label { margin: 0 !important; white-space: nowrap; font-size: 13px !important; color: var(--ft-text-2) !important; }
#view-qr-posters #qr-template-select { width: 220px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; }
#view-qr-posters .qr-template-toolbar .button-row { display: flex !important; flex: 1 1 auto !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; }
#view-qr-posters .qr-template-toolbar .button-row button {
  height: 34px !important; min-height: 34px !important; padding: 0 12px !important; font-size: 13px !important; white-space: nowrap !important;
  background: var(--ft-surface) !important;
}
#view-qr-posters #qr-template-delete { margin-left: auto !important; border-color: transparent !important; background: transparent !important; color: var(--ft-s-crit, #b42318) !important; }
#view-qr-posters #qr-template-delete:hover { background: var(--ft-s-crit-bg, #fef3f2) !important; }
#view-qr-posters .qr-editor-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
#view-qr-posters .qr-editor-actions button { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; white-space: nowrap !important; width: auto !important; }
#view-qr-posters .qr-editor-actions .qr-close-button { width: 38px !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; }

/* 3) Arbeitsbereich: links bearbeiten, rechts Blatt-Vorschau */
#view-qr-posters .qr-editor-workspace {
  display: grid !important; grid-template-columns: minmax(380px, 480px) minmax(0, 1fr) !important; gap: 0 !important;
  height: max(560px, calc(100vh - 300px)) !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important;
}
#view-qr-posters .qr-editor-column {
  height: 100% !important; overflow: auto !important; padding: 0 20px 28px !important;
  background: var(--ft-surface) !important; border-right: 1px solid var(--ft-border) !important;
}
#view-qr-posters .qr-editor-tabbar {
  position: sticky !important; top: 0 !important; z-index: 3 !important; display: flex !important; gap: 4px !important;
  height: auto !important; min-height: 48px !important; overflow-x: auto !important; overflow-y: visible !important;
  margin: 0 -20px 16px !important; padding: 0 20px !important; align-items: stretch !important;
  background: var(--ft-surface) !important; border-bottom: 1px solid var(--ft-border) !important;
}
#view-qr-posters .qr-editor-tab {
  flex: 0 0 auto !important; height: auto !important; min-height: 48px !important; padding: 0 12px !important; margin: 0 !important;
  border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font-size: 14px !important; font-weight: 500 !important; color: var(--ft-text-3) !important;
}
#view-qr-posters .qr-editor-tab:hover { color: var(--ft-text) !important; }
#view-qr-posters .qr-editor-tab.is-active,
#view-qr-posters .qr-editor-tab[aria-selected="true"] { color: var(--ft-primary) !important; border-bottom-color: var(--ft-primary) !important; font-weight: 600 !important; }
:root[data-theme="dark"] #view-qr-posters .qr-editor-tab.is-active { color: #fb9a5b !important; border-bottom-color: #f26b1d !important; }

#view-qr-posters .qr-tab-panel.is-active { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
#view-qr-posters .qr-tab-panel > * { grid-column: 1 / -1 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; }
#view-qr-posters .qr-section-card {
  padding: 16px !important; border-radius: 12px !important; box-shadow: none !important;
  background: var(--ft-surface) !important; border: 1px solid var(--ft-border) !important;
}
#view-qr-posters .qr-section-card .section-head { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; }
#view-qr-posters .qr-section-card .card-label { display: none !important; }
#view-qr-posters .qr-section-card h3 { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--ft-text) !important; }
#view-qr-posters .qr-section-card .section-head .filter-chip { display: none !important; }
#view-qr-posters .qr-field-grid,
#view-qr-posters .qr-control-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px !important; }
#view-qr-posters .qr-field-grid > *, #view-qr-posters .qr-control-grid > * { min-width: 0 !important; margin: 0 !important; }
#view-qr-posters .qr-section-card label,
#view-qr-posters .qr-section-card .field-label { font-size: 13px !important; font-weight: 500 !important; color: var(--ft-text-2) !important; }
#view-qr-posters .qr-section-card input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
#view-qr-posters .qr-section-card select { width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; margin-top: 4px !important; }
#view-qr-posters .qr-section-card textarea { width: 100% !important; min-height: 96px !important; margin-top: 4px !important; resize: vertical !important; }
#view-qr-posters .qr-richtext-input {
  min-height: 150px !important; max-height: 320px !important; overflow: auto !important; padding: 10px 12px !important;
  border: 1px solid var(--ft-border-strong) !important; border-radius: 8px !important; background: var(--ft-surface) !important;
  color: var(--ft-text) !important; font-size: 14px !important; line-height: 1.5 !important;
}
#view-qr-posters .qr-richtext-input:focus { outline: 2px solid var(--ft-focus) !important; border-color: var(--ft-primary) !important; }
/* Formatierungsknoepfe als kompakte Leiste ueber dem Textfeld */
#view-qr-posters .qr-section-card .button-row:has(+ .qr-richtext-input),
#view-qr-posters .qr-richtext-toolbar {
  display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 0 6px !important;
}
#view-qr-posters .qr-section-card .button-row:has(+ .qr-richtext-input) button,
#view-qr-posters .qr-richtext-toolbar button { height: 30px !important; min-height: 30px !important; padding: 0 10px !important; font-size: 13px !important; }

/* Vorschau: graue Arbeitsflaeche mit weissem Blatt */
#view-qr-posters .qr-preview-column {
  height: 100% !important; overflow: auto !important; padding: 20px 24px 32px !important;
  background: #eef0f3 !important; background-image: radial-gradient(rgba(16,24,40,.06) 1px, transparent 1px) !important; background-size: 16px 16px !important;
}
:root[data-theme="dark"] #view-qr-posters .qr-preview-column { background-color: #0b0f17 !important; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) !important; }
#view-qr-posters .qr-preview-card { width: min(100%, 640px) !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#view-qr-posters .qr-preview-card > .section-head { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; }
#view-qr-posters .qr-preview-card > .section-head h3,
#view-qr-posters .qr-preview-card > .section-head .card-label { font-size: 12px !important; font-weight: 500 !important; color: var(--ft-text-3) !important; margin: 0 !important; text-transform: none !important; }
#view-qr-posters .qr-preview-card > .button-row { justify-content: center !important; margin: 14px 0 0 !important; }
#view-qr-posters #qr-action-helper { text-align: center !important; font-size: 12px !important; color: var(--ft-text-3) !important; }
#view-qr-posters #qr-preview-paper { box-shadow: 0 1px 3px rgba(16,24,40,.12), 0 12px 32px rgba(16,24,40,.14) !important; border-radius: 4px !important; overflow: hidden !important; }

/* Handy / Tablet */
@media (max-width: 1100px) {
  #view-qr-posters .qr-editor-topbar { grid-template-columns: minmax(0, 1fr) !important; }
  #view-qr-posters .qr-editor-actions { flex-wrap: wrap !important; }
  #view-qr-posters .qr-editor-workspace { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; overflow: visible !important; }
  #view-qr-posters .qr-editor-column, #view-qr-posters .qr-preview-column { height: auto !important; overflow: visible !important; border-right: 0 !important; }
  #view-qr-posters .qr-mobile-tabs { display: flex !important; gap: 6px !important; grid-column: 1 / -1 !important; }
}
@media (max-width: 760px) {
  #view-qr-posters .qr-sidebar-object-picker { grid-template-columns: minmax(0, 1fr) !important; }
  #view-qr-posters #qr-template-select { width: 100% !important; }
  #view-qr-posters .qr-template-toolbar > label.detail-stack { flex: 1 1 100% !important; }
  #view-qr-posters .qr-field-grid, #view-qr-posters .qr-control-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #view-qr-posters .qr-editor-actions button:not(.qr-close-button) { flex: 1 1 auto !important; }
  #view-qr-posters .qr-preview-column { padding: 12px !important; }
}

/* =====================================================================
   Kontrast-Korrekturen 2026-10-27 (heller Modus; der Dunkelmodus wird daraus abgeleitet)
   ===================================================================== */
/* Orange als Schrift immer im dunklen Markenorange (Kontrast >= 4,5:1) */
:root[data-theme="light"] .employee-detail-tabs > button.is-active,
:root[data-theme="light"] .tasks-tabs > button.is-active,
:root[data-theme="light"] .dashboard-timeline-hour.is-new-day,
:root[data-theme="light"] .dashboard-timeline-hour.is-new-day small,
:root[data-theme="light"] .employee-map-list-assignment > span { color: #9a3412 !important; }
:root[data-theme="light"] .employee-map-list-assignment-dummy,
:root[data-theme="light"] .dashboard-setup-card span { color: #c2410c !important; }
:root[data-theme="light"] .tasks-tabs > button.is-active { border-color: #c2410c !important; }
:root[data-theme="light"] .tasks-tabs > button:not(.is-active),
:root[data-theme="light"] .employee-absence-info > span,
:root[data-theme="light"] .employee-month-day.is-muted span { color: #475467 !important; }
:root[data-theme="light"] .employee-month-day span { color: inherit; }
:root[data-theme="light"] .dashboard-event-dismiss { color: #b42318 !important; }
:root[data-theme="light"] .task-status-badge { color: #b54708 !important; }
:root[data-theme="light"] .employee-calendar-fab { background: #c2410c !important; color: #fff !important; }
/* Status-Etiketten weich statt grell (weisse Schrift auf Hellgruen/-orange war zu schwach) */
:root[data-theme="light"] .worker-status-label.active,
:root[data-theme="light"] .worker-status-label.online { background: #ecfdf3 !important; color: #067647 !important; border-color: #abefc6 !important; }
:root[data-theme="light"] .worker-status-label.away,
:root[data-theme="light"] .worker-status-label.unterwegs { background: #fffaeb !important; color: #b54708 !important; border-color: #fedf89 !important; }
:root[data-theme="light"] .worker-status-label.inactive,
:root[data-theme="light"] .worker-status-label.offline { background: #f2f4f7 !important; color: #344054 !important; border-color: #e4e7ec !important; }
:root[data-theme="light"] .timeline-lead-bell,
:root[data-theme="light"] .dashboard-timeline-lead > strong,
:root[data-theme="light"] .task-confirmation-badge.is-confirmed { background-color: #067647 !important; color: #fff !important; }
/* Mitarbeiter-Kalender: Tagesliste hell statt dunkelblau */
:root[data-theme="light"] .employee-calendar-details { background: var(--ft-surface) !important; border: 1px solid var(--ft-border) !important; color: var(--ft-text) !important; }
:root[data-theme="light"] .employee-calendar-item { background: var(--ft-surface-2) !important; border: 1px solid var(--ft-border) !important; color: var(--ft-text) !important; box-shadow: none !important; }
:root[data-theme="light"] .employee-calendar-item .employee-work-main strong { color: var(--ft-text) !important; }
:root[data-theme="light"] .employee-calendar-item .employee-work-main p,
:root[data-theme="light"] .employee-calendar-item .employee-work-main small,
:root[data-theme="light"] .employee-calendar-item .employee-work-meta,
:root[data-theme="light"] .employee-calendar-item .employee-work-meta span { color: var(--ft-text-2) !important; }
:root[data-theme="light"] .employee-calendar-item .employee-work-type { color: var(--ft-text-3) !important; }
:root[data-theme="light"] .employee-month-day.is-today { background: #fff4ed !important; color: #9a3412 !important; border: 2px solid #f26b1d !important; box-shadow: none !important; }

/* ---------- Live-Demo: Rückweg zur Website (beide Themes) ---------- */
html .demo-mode-banner .demo-home-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--ft-radius, 8px);
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
}
html .demo-mode-banner .demo-home-link:hover,
html .demo-mode-banner .demo-home-link:focus-visible {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
html .demo-mode-banner .demo-home-link:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
html.ft-demo .brand-block a.ft-brand-home { display: block; border-radius: 8px; }
html.ft-demo .brand-block a.ft-brand-home:focus-visible { outline: 2px solid #f26b1d; outline-offset: 3px; }

/* ---------- Mitarbeiterkarte im Vollbild (beide Themes) ---------- */
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .app-shell {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 100vh !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .sidebar,
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .topbar,
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .demo-mode-banner,
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .bottom-nav,
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .employee-map-list-card {
  display: none !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .main-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode #view-employee-map {
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .employee-map-shell {
  display: block !important;
  height: 100vh !important;
  max-width: none !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .employee-map-card {
  position: relative !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode #employee-map-canvas {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .employee-map-card > .section-head {
  position: absolute !important;
  z-index: 6 !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  width: auto !important;
  max-width: min(560px, calc(100vw - 96px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
:root body.employee-map-fullscreen-mode.employee-map-fullscreen-mode .employee-map-card > .section-head h3 { white-space: nowrap; }

/* ---------- Leere Dateiliste: Text untereinander statt Raster ---------- */
:root .photo-list > li.photo-list-empty {
  display: block !important;
  grid-template-columns: none !important;
}
:root .photo-list > li.photo-list-empty strong { display: block; margin-bottom: 2px; }
:root .photo-list > li.photo-list-empty p { margin: 0; color: var(--ft-text-3); }

/* ---------- Karten-Popup „Aktiver Auftrag“ (hell + dunkel über Tokens) ---------- */
:root body .employee-map-assignment-modal .employee-map-assignment-card {
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  border-color: var(--ft-border) !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-head { border-bottom-color: var(--ft-border) !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-head h3 { color: var(--ft-text) !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-head p { color: var(--ft-text-3) !important; font-weight: 600 !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-status {
  background: var(--ft-s-work-bg) !important;
  color: var(--ft-s-work) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-summary {
  background: var(--ft-primary-soft) !important;
  border: 1px solid var(--ft-border) !important;
  border-left: 3px solid var(--ft-brand) !important;
  border-radius: var(--ft-radius) !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-summary .card-label {
  color: var(--ft-text-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-summary strong { color: var(--ft-text) !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-summary h4 { color: var(--ft-text-2) !important; font-weight: 600 !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-details div {
  background: var(--ft-surface-2) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: var(--ft-radius) !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-details dt {
  color: var(--ft-text-3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
:root body .employee-map-assignment-modal .employee-map-assignment-details dd { color: var(--ft-text) !important; font-weight: 600 !important; }
:root body .employee-map-assignment-modal .employee-map-assignment-description {
  background: var(--ft-surface-2) !important;
  border: 1px solid var(--ft-border) !important;
  color: var(--ft-text-2) !important;
}

/* ---------- Demo-Hinweis „Nur zum Ansehen“ (hell + dunkel über Tokens) ---------- */
:root body .demo-readonly-backdrop { background: rgba(16, 24, 40, 0.45) !important; backdrop-filter: blur(3px); }
:root body .demo-readonly-panel {
  width: min(440px, calc(100vw - 32px)) !important;
  padding: 24px !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: var(--ft-radius-card) !important;
  box-shadow: var(--ft-shadow-pop) !important;
}
:root body .demo-readonly-panel .eyebrow {
  margin: 0 0 4px !important;
  color: #c2410c !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
:root body .demo-readonly-panel h3 { margin: 0 0 8px !important; color: var(--ft-text) !important; font-size: 18px !important; font-weight: 600 !important; }
:root body .demo-readonly-panel p:not(.eyebrow) { color: var(--ft-text-2) !important; font-size: 15px !important; }
:root body .demo-readonly-panel .demo-readonly-close {
  width: 32px !important; height: 32px !important; min-height: 32px !important;
  top: 14px !important; right: 14px !important;
  background: transparent !important;
  border: 1px solid var(--ft-border) !important;
  color: var(--ft-text-3) !important;
  border-radius: var(--ft-radius) !important;
}
:root body .demo-readonly-panel .demo-readonly-close:hover { background: var(--ft-surface-2) !important; color: var(--ft-text) !important; }
:root body .demo-readonly-panel .demo-readonly-actions { gap: 8px !important; margin-top: 20px !important; }
:root body .demo-readonly-panel .demo-readonly-actions a,
:root body .demo-readonly-panel .demo-readonly-actions a:hover { text-decoration: none !important; display: inline-flex !important; align-items: center !important; }
:root[data-theme="dark"] body .demo-readonly-panel .eyebrow { color: #fb923c !important; }