/* =========================================================
   MALERPLUS • ARBEITSANWEISUNG — PAPIER-STIL (interaktiv)
   -------------------------------------------------------
   2026-07-24 (Marcel): Die Gesellen-Ansicht der Arbeitsanweisung
   soll wie ein Dokument aussehen — "nicht mehr dieser ganze
   UI-Kram". Reines CSS-Reskin der bestehenden interaktiven
   Ansicht (#projWorkerCard): weißes Blatt, Typo-Kopf, dünne
   Trennlinien statt Karten/Chips. Checkboxen + Live-Sync
   bleiben unverändert (Markup/JS unangetastet).
   Ergänzt die reine A4-Druckansicht (mp-arbeitsanweisung-doc).
   ========================================================= */

/* ── Das "Blatt": Shell wird Papier ── */
#projWorkerCard .mp-worker-brief-shell {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 12px 32px rgba(15, 23, 42, .08) !important;
  padding: 26px 30px 24px !important;
  max-width: 860px;
  margin: 10px auto 4px;
}

/* ── Kopf: Dokument-Typografie statt Hero-Karte ── */
#projWorkerCard .mp-worker-brief-head {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

/* Eyebrow "ARBEITSANWEISUNG" über dem Projektnamen */
#projWorkerCard .mp-worker-brief-meta::before {
  content: "Arbeitsanweisung";
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 4px;
}
#projWorkerCard .mp-worker-brief-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -.014em !important;
  color: rgb(var(--mp-t1-0f172a)) !important;
  text-align: left !important;
  margin: 0 !important;
}
#projWorkerCard .mp-worker-brief-title-wrap {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Chips → schlichte Textzeile mit Punkt-Trennern */
#projWorkerCard .mp-worker-brief-sub {
  display: block !important;
  text-align: left !important;
  margin-top: 6px !important;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgb(var(--mp-t2-475569));
}
#projWorkerCard .mp-worker-brief-chip {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgb(var(--mp-t2-475569)) !important;
}
#projWorkerCard .mp-worker-brief-chip + .mp-worker-brief-chip::before {
  content: "·";
  margin: 0 7px;
  color: #CBD5E1;
}
/* Status dezent farbig, aber ohne Pill */
#projWorkerCard .mp-worker-brief-chip.is-status { font-weight: 700 !important; }
#projWorkerCard .mp-worker-brief-chip.is-status[data-status="laufend"],
#projWorkerCard .mp-worker-brief-chip.is-status[data-status="offen"] { color: #1f9eef !important; }
#projWorkerCard .mp-worker-brief-chip.is-status[data-status="abgeschlossen"] { color: #15803d !important; }
#projWorkerCard .mp-worker-brief-chip.is-status[data-status="pausiert"] { color: #b45309 !important; }

/* ── Fortschritt: schlanke Dokument-Zeile statt Panel ── */
#projWorkerCard .mp-worker-brief-progress {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(15, 23, 42, .1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 0 !important;
  margin: 12px 0 0 !important;
}
#projWorkerCard .mp-worker-progress-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px;
  margin-bottom: 6px !important;
}
#projWorkerCard .mp-worker-progress-title strong {
  font-size: 12px;
  font-weight: 800;
  color: rgb(var(--mp-t1-0f172a));
}
#projWorkerCard .mp-worker-progress-title span {
  font-size: 12px;
  color: rgb(var(--mp-t3-64748b));
  margin-left: 6px;
}
#projWorkerCard .mp-worker-progress-percent {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: rgb(var(--mp-t1-0f172a)) !important;
  background: transparent !important;
}
#projWorkerCard .mp-worker-progress-percent small {
  font-weight: 500;
  color: #94A3B8;
  margin-left: 3px;
}
#projWorkerCard .mp-worker-progressbar {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .08) !important;
  overflow: hidden;
}
#projWorkerCard .mp-worker-progressbar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1f9eef !important;
  background-image: none !important;
}

/* ── Aufgaben: Dokument-Zeilen statt Karten ── */
#projWorkerCard .mp-worker-brief-scroll {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#projWorkerCard .mp-worker-task-list {
  display: block !important;
  gap: 0 !important;
  margin-top: 4px;
}
#projWorkerCard .mp-worker-task-item {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 13px 2px !important;
  margin: 0 !important;
  transform: none !important;
  transition: background .12s ease;
}
#projWorkerCard .mp-worker-task-item:last-child {
  border-bottom: none !important;
}
#projWorkerCard .mp-worker-task-item:hover {
  background: rgba(31, 158, 239, .035) !important;
  transform: none !important;
  box-shadow: none !important;
}
#projWorkerCard .mp-worker-task-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
#projWorkerCard .mp-worker-task-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.008em;
  color: rgb(var(--mp-t1-0f172a)) !important;
}
#projWorkerCard .mp-worker-task-desc {
  font-size: 13px !important;
  color: rgb(var(--mp-t2-475569)) !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
}
#projWorkerCard .mp-worker-task-item.is-done .mp-worker-task-title {
  color: #94A3B8 !important;
  text-decoration: line-through;
}
#projWorkerCard .mp-worker-task-item.is-done .mp-worker-task-desc {
  color: #94A3B8 !important;
}

/* Erledigt-Zeile: klein & grau, kein Pill-Look */
#projWorkerCard .mp-worker-task-done-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 3px;
  font-size: 11.5px !important;
}
#projWorkerCard .mp-worker-task-done-by {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #15803d !important;
  font-weight: 700 !important;
}
#projWorkerCard .mp-worker-task-done-time {
  color: #94A3B8 !important;
  font-weight: 500 !important;
}

/* Mengen/Stunden-Badges → schlichter Text ("1 lfm · ⏱ 6 h") */
#projWorkerCard .mp-worker-task-meta {
  display: block !important;
  margin-top: 3px !important;
}
#projWorkerCard .mp-worker-task-meta .mp-badge {
  display: inline !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: rgb(var(--mp-t3-64748b)) !important;
}
#projWorkerCard .mp-worker-task-meta .mp-badge + .mp-badge::before {
  content: "·";
  margin: 0 6px;
  color: #CBD5E1;
}

/* ── Dark Mode: das Blatt bleibt Papier (hell), wie ein PDF-Viewer ── */
html.dark #projWorkerCard .mp-worker-brief-shell {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important;
}
html.dark #projWorkerCard .mp-worker-brief-title,
html.dark #projWorkerCard .mp-worker-task-title,
html.dark #projWorkerCard .mp-worker-progress-percent {
  color: rgb(var(--mp-t1-0f172a)) !important;
}
html.dark #projWorkerCard .mp-worker-brief-sub,
html.dark #projWorkerCard .mp-worker-brief-chip,
html.dark #projWorkerCard .mp-worker-task-desc {
  color: rgb(var(--mp-t2-475569)) !important;
}
html.dark #projWorkerCard .mp-worker-task-item {
  background: transparent !important;
  border-bottom-color: rgba(15, 23, 42, .1) !important;
}

/* Mobile: Blatt randlos nutzen, gleiche Dokument-Optik (MP-20261004-008: Header-Clearance & Spacing) */
@media (max-width: 640px) {
  #projWorkerCard {
    margin-top: 14px !important;
  }
  #projWorkerCard .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  #projWorkerCard .card-header h2 {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  #projWorkerCard #projWorkerBriefDocBtn {
    flex-shrink: 0 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    height: 32px !important;
  }
  #projWorkerCard .mp-worker-brief-shell {
    padding: 16px 14px 14px !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
  }
  #projWorkerCard .mp-worker-brief-title { font-size: 18px !important; }
}

/* =========================================================
   MATERIAL VERBRAUCHEN (Gesellen-Buchung) — gleicher Papier-Stil
   2026-07-24: "das hier meinte ich" — die interaktive
   Material-Buchungsansicht wird ebenfalls zum ruhigen Blatt.
   Scoped via #mpWorkerMaterialMount (ID schlägt die im JS
   injizierten Klassen-Styles aus mp-worker-material.js).
   Buchen-Logik/Markup unangetastet.
   ========================================================= */

#mpWorkerMaterialMount .mp-wm-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #E5E7EB !important;
  border-top: 1px solid #E5E7EB !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 12px 32px rgba(15, 23, 42, .08) !important;
  max-width: 860px;
  margin: 14px auto 4px !important;
}

/* Kopf: Dokument-Typo, kein Farbverlauf, kein Sticky-Tint */
#mpWorkerMaterialMount .mp-wm-head {
  background: rgb(var(--mp-flaeche-rgb)) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .1) !important;
  padding: 22px 30px 12px !important;
  position: static !important;
}
#mpWorkerMaterialMount .mp-wm-head > div:first-child::before {
  content: "Materialliste";
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 4px;
}
#mpWorkerMaterialMount .mp-wm-head h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.014em !important;
  color: rgb(var(--mp-t1-0f172a)) !important;
}
#mpWorkerMaterialMount .mp-wm-head p {
  font-size: 12.5px !important;
  color: rgb(var(--mp-t3-64748b)) !important;
}

/* Liste: Zeilen mit Trennlinien statt Karten-Boxen */
#mpWorkerMaterialMount .mp-wm-list {
  padding: 4px 30px 20px !important;
  gap: 0 !important;
}
#mpWorkerMaterialMount .mp-wm-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 0 !important;
  padding: 14px 2px !important;
  gap: 9px !important;
  box-shadow: none !important;
}
#mpWorkerMaterialMount .mp-wm-row:last-child { border-bottom: none !important; }
#mpWorkerMaterialMount .mp-wm-row:hover {
  border-color: rgba(15, 23, 42, .08) !important;
  background: rgba(31, 158, 239, .035) !important;
  box-shadow: none !important;
}
#mpWorkerMaterialMount .mp-wm-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.008em;
}

/* Soll/Ist/Δ-Chips → schlichte Textzeile */
#mpWorkerMaterialMount .mp-wm-meta { gap: 0 !important; margin-top: 2px !important; }
#mpWorkerMaterialMount .mp-wm-chip {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgb(var(--mp-t3-64748b)) !important;
}
#mpWorkerMaterialMount .mp-wm-chip + .mp-wm-chip::before {
  content: "·";
  margin: 0 7px;
  color: #CBD5E1;
}
#mpWorkerMaterialMount .mp-wm-chip.is-ist { color: #15803d !important; }
#mpWorkerMaterialMount .mp-wm-chip.is-delta { color: #ea580c !important; }

/* Eingabe + Buchen: kompakt, mp-blue statt Orange-CTA */
#mpWorkerMaterialMount .mp-wm-input {
  height: 42px !important;
  max-width: 200px;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: rgb(var(--mp-flaeche-rgb)) !important;
  font-size: 15px !important;
}
#mpWorkerMaterialMount .mp-wm-input:focus {
  border-color: #1f9eef !important;
  box-shadow: 0 0 0 3px rgba(31, 158, 239, .16) !important;
}
#mpWorkerMaterialMount .mp-wm-add {
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #2bb0ff 0%, #1f9eef 100%) !important;
  box-shadow: 0 4px 12px rgba(43, 176, 255, .22) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}

/* Schnell-Chips + Notiz: ruhige Ghost-Buttons */
#mpWorkerMaterialMount .mp-wm-quick-btn,
#mpWorkerMaterialMount .mp-wm-toggle-btn {
  background: rgb(var(--mp-flaeche-rgb)) !important;
  border: 1px solid #ECEEF2 !important;
  border-radius: 9px !important;
  color: rgb(var(--mp-t3-6b7280)) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
  min-height: 36px;
}
#mpWorkerMaterialMount .mp-wm-quick-btn:hover,
#mpWorkerMaterialMount .mp-wm-toggle-btn:hover {
  border-color: rgba(43, 176, 255, .35) !important;
  color: #1f9eef !important;
}
#mpWorkerMaterialMount .mp-wm-note {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: rgb(var(--mp-flaeche-rgb)) !important;
}

/* Dark Mode: Blatt bleibt hell (wie Arbeitsanweisung) */
html.dark #mpWorkerMaterialMount .mp-wm-card {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important;
}
html.dark #mpWorkerMaterialMount .mp-wm-head { background: rgb(var(--mp-flaeche-rgb)) !important; }
html.dark #mpWorkerMaterialMount .mp-wm-head h3,
html.dark #mpWorkerMaterialMount .mp-wm-name { color: rgb(var(--mp-t1-0f172a)) !important; }
html.dark #mpWorkerMaterialMount .mp-wm-input,
html.dark #mpWorkerMaterialMount .mp-wm-note {
  background: rgb(var(--mp-flaeche-rgb)) !important;
  color: rgb(var(--mp-t1-0f172a)) !important;
  border-color: #E5E7EB !important;
}

/* Mobile: kompaktes Blatt, große Touch-Ziele bleiben */
@media (max-width: 640px) {
  #mpWorkerMaterialMount .mp-wm-head { padding: 16px 16px 10px !important; }
  #mpWorkerMaterialMount .mp-wm-list { padding: 2px 16px 14px !important; }
  #mpWorkerMaterialMount .mp-wm-head h3 { font-size: 17px !important; }
  #mpWorkerMaterialMount .mp-wm-input { max-width: none; }
  #mpWorkerMaterialMount .mp-wm-quick-btn,
  #mpWorkerMaterialMount .mp-wm-toggle-btn { min-height: 40px; }
}