/* =====================================================================================
   Umweltbüro – SaaS · Gestaltung der neuen Seiten: Dashboard, Mein Chatbot, Benachrichtigungen, Planung (Wochenraster),
   Beurteilung, Fakturierung, Auswertungen, Kapazität. Baut auf styles.css (Marke) und crud.css (Fenster, Formulare) auf.
   ===================================================================================== */

/* ---------- Gemeinsames ---------- */
.mark.is-warn { --mark-base: #d48a16; }
.ueber { color: #b8382c; }
td.ueber, b.ueber { font-weight: 700; }
.chip { height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--petrol-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--hover-soft); border-color: var(--sage); }
.modul-kopf { padding: 10px 16px; }
.modul-kopf .card-head { margin: 0; }
.modul-notiz { margin: 8px 0 0; font-size: 13px; white-space: pre-wrap; color: var(--text); }
.sub-item.verrechnung { color: var(--petrol-text); }
.sub-item.verrechnung:hover { filter: brightness(.985); }
.notes li.gelesen b { font-weight: 500; color: var(--text-muted); }
.notes li .mark { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; }
.drawer-nav li[hidden], .drawer-sub li[hidden] { display: none; }
#btnBell .dot[hidden] { display: none; }

/* ---------- Dashboard ---------- */
.db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.db-kachel { min-height: 120px; }
.db-kachel .card-head h3 { font-size: 13.5px; }
.db-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; }
.db-kz { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 2px solid var(--line-soft); }
.db-kz .kpi-value { font-size: 17px; }
.db-kz.rot { border-top-color: #b8382c; }
.db-kz.gelb { border-top-color: #d48a16; }
.db-kz.gruen { border-top-color: var(--bar-olive); }
.db-hinweis { margin: 8px 0 0; }
.db-wahl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.db-wahl:hover { background: var(--hover-soft); }
.db-wahl .f-check { margin: 0; }

/* ---------- Benachrichtigungen, Zwischenfenster ---------- */
.bn-liste li { padding: 8px 4px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.bn-liste li:last-child { border-bottom: 0; }
.bn-liste li.neu .bn-titel { font-weight: 700; }
.bn-text { flex: 1 1 auto; min-width: 0; }
.bn-titel { text-align: left; font-size: 13px; text-decoration: none; }
.bn-titel:hover { text-decoration: underline; }
.bn-body { margin: 2px 0 3px; white-space: pre-wrap; }
.ub-list.ziele li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ub-list.ziele li:last-child { border-bottom: 0; }
.ub-list.unter { margin: 6px 0 0 4px; gap: 4px; }
.ub-list.unter li { font-size: 12px; }
.ub-list .link { text-align: left; text-decoration: none; }
.ub-list .link:hover { text-decoration: underline; }
.zf-text { flex: 1 1 auto; min-width: 0; }
.zf-haupt { margin: 0 0 10px; font-size: 13px; white-space: pre-wrap; line-height: 1.5; }

/* ---------- Mein Chatbot ---------- */
.chat-seite { display: flex; flex-direction: column; gap: 10px; }
.chat-karte { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - 260px); min-height: 420px; }
.chat-verlauf { flex: 1 1 auto; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fafbfb; }
.chat-blase { display: flex; gap: 10px; max-width: 100%; }
.chat-blase.ich { justify-content: flex-end; }
.chat-blase.ich .chat-inhalt { background: var(--petrol); color: #fff; border-radius: 14px 14px 4px 14px; }
.chat-blase.ki .chat-inhalt { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; }
.chat-inhalt { max-width: min(760px, 86%); padding: 10px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-sm); }
.chat-inhalt p { margin: 0 0 8px; }
.chat-inhalt p:last-child { margin-bottom: 0; }
.chat-inhalt > div > .note { margin-top: 8px; }
.chat-avatar { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 4px; }
.chat-link { color: var(--petrol-text); font-weight: 600; }
.chat-blase.ich .chat-link { color: var(--lime); }
.chat-wartet { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
.chat-wartet .mark { width: 18px; height: 18px; }
.chat-spur { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.chat-spur summary { cursor: pointer; font-weight: 600; }
.chat-spur code { font-size: 11px; word-break: break-all; }
.chat-spur pre { margin: 4px 0 8px; padding: 6px 8px; background: #f1f4f3; border-radius: 6px; font-size: 11px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }
.chat-dauer { margin-top: 6px; }
.chat-vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px 0; border-top: 1px solid var(--line-soft); background: var(--surface); }
.chat-eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 12px; background: var(--surface); }
.chat-eingabe textarea { flex: 1 1 auto; min-height: 44px; max-height: 160px; resize: none; }
.chat-eingabe .btn { height: 40px; }
.chat-status { display: flex; align-items: center; gap: 6px; }
.chat-status .mark { width: 12px; height: 12px; }
.chat-vorschau { margin-top: 10px; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: 8px; padding: 10px 12px; background: #fbfdf5; }
.cv-kopf { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.cv-kopf .mark { width: 18px; height: 18px; margin-top: 2px; }
.cv-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cv-tabelle th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 3px 10px 3px 0; width: 10rem; vertical-align: top; }
.cv-tabelle td { padding: 3px 0; vertical-align: top; }
.cv-aktionen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ---------- Planung: Wochenraster ---------- */
.pl-leiste { align-items: center; }
.pl-zeitraum { display: flex; align-items: center; gap: 6px; }
.pl-zeitraum label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pl-zeitraum input[type="date"] { width: 9.5rem; height: 30px; font-size: 12px; }
.pl-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-height: 70vh; }
.pl-tabelle { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
.pl-tabelle th, .pl-tabelle td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 4px 4px; vertical-align: bottom; }
.pl-tabelle thead th { position: sticky; top: 0; z-index: 2; background: #f4f6f5; text-align: center; font-weight: 600; }
.pl-tabelle thead .pl-monate th { top: 0; background: #e9eeec; font-size: 11.5px; color: var(--petrol-text); border-bottom: 0; }
.pl-tabelle thead tr:nth-child(2) th { top: 24px; }
.pl-tabelle .pl-kw b { display: block; font-size: 11.5px; }
.pl-tabelle .pl-kw small { color: var(--text-muted); font-size: 10.5px; }
.pl-tabelle .pl-fix { position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left; min-width: 15rem; max-width: 20rem; vertical-align: top; box-shadow: 2px 0 0 var(--line-soft); }
.pl-tabelle thead .pl-fix { z-index: 4; background: #f4f6f5; }
.pl-tabelle thead .pl-monate .pl-fix { background: #e9eeec; }
.pl-tabelle tbody tr:hover td { background: #fbfcfc; }
.pl-tabelle tbody tr:hover td.pl-fix { background: #fbfcfc; }
.pl-pos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pl-personen { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pl-personen .tag { font-size: 10.5px; }
.pl-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.pl-aktionen .ibtn { width: 22px; height: 22px; }
.pl-zelle { width: 3.6rem; min-width: 3.4rem; text-align: center; padding: 3px 3px 4px; }
.pl-zelle.vergangen { background: #f7f8f8; }
.pl-zelle.heute, .pl-tabelle th.heute, .pl-summen td.heute { background: #f3f8e4; }
.pl-zelle.zusatz { box-shadow: inset 0 3px 0 #d48a16; }
.pl-balken { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 40px; margin-bottom: 3px; }
.pl-balken i { display: block; width: 10px; min-height: 0; border-radius: 2px 2px 0 0; }
.pl-balken .plan { background: transparent; border: 1.5px solid var(--petrol); border-bottom: 0; box-sizing: border-box; }
.pl-balken .ist { background: var(--petrol); }
.pl-balken .ist.ueber { background: #b8382c; }
.pl-input { width: 100%; height: 24px; padding: 0 3px; border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: center; font: inherit; font-size: 12px; color: var(--text); }
.pl-input:hover:not(:disabled) { border-color: var(--line); background: var(--surface); }
.pl-input:focus { border-color: var(--petrol); background: var(--surface); outline: none; box-shadow: 0 0 0 2px rgba(46, 107, 99, .18); }
.pl-ist { display: block; color: var(--text-muted); font-size: 10.5px; line-height: 1.2; }
.pl-summe { text-align: right; font-weight: 600; white-space: nowrap; }
.pl-summen th, .pl-summen td { position: sticky; bottom: 0; background: #f4f6f5; text-align: center; font-size: 11.5px; border-top: 1px solid var(--line); }
.pl-summen .pl-fix { text-align: left; z-index: 4; }
.pl-summen small { color: var(--text-muted); }
.pl-besetzung { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: 6px; font-size: 12.5px; }

/* ---------- Bewertung ---------- */
.bw-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bw-tabelle th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.bw-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.bw-tabelle .f-input { height: 28px; font-size: 12.5px; text-align: right; }
.bw-h4 { margin: 14px 0 6px; font-size: 12.5px; }

/* ---------- Beurteilung ---------- */
.be-kopf { border-left: 5px solid var(--sage); }
.be-kopf.rot { border-left-color: #b8382c; }
.be-kopf.gelb { border-left-color: #d48a16; }
.be-kopf.gruen { border-left-color: var(--bar-olive); }
.be-gesamt { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.be-gesamt .mark { width: 34px; height: 34px; }
.be-gesamt h3 { margin: 0; font-size: 15px; }
.be-ampeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 14px; margin-bottom: 10px; }
.be-ampel { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fafbfb; font-size: 12.5px; }
.be-ampel .mark { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }

/* ---------- Kapazität ---------- */
.kap-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.kap-tabelle th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.kap-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.kap-tabelle tfoot td, .kap-tabelle tfoot th { border-top: 1px solid var(--line); border-bottom: 0; background: #f4f6f5; }
.kap-zelle { text-align: center; min-width: 6.5rem; border-left: 1px solid var(--line-soft); }
.kap-zelle b { display: block; font-size: 13px; }
.kap-zelle small { color: var(--text-muted); font-size: 10.5px; }
.kap-zelle.gruen { background: #f1f7ea; }
.kap-zelle.gelb { background: #fdf2df; }
.kap-zelle.rot { background: #fbe4e1; }
.kap-zelle.rot b { color: #8f2a20; }

/* ---------- Fakturierung, Auswertungen ---------- */
.f-grid.g3 > .card { min-width: 0; }
.row-actions .btn { height: 26px; padding: 0 8px; font-size: 11.5px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .db-grid { grid-template-columns: 1fr; }
  .chat-karte { height: calc(100vh - 230px); min-height: 360px; }
  .chat-inhalt { max-width: 92%; }
  .chat-vorschlaege { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: thin; }
  .pl-tabelle .pl-fix { min-width: 11rem; max-width: 12rem; }
  .pl-zelle { min-width: 3rem; }
  .f-grid.g3 { grid-template-columns: 1fr; }
  .be-ampeln { grid-template-columns: 1fr 1fr; }
  .cv-tabelle th { width: 7rem; }
}
@media (max-width: 600px) {
  .be-ampeln { grid-template-columns: 1fr; }
  .pl-zeitraum { flex-wrap: wrap; }
  .chat-eingabe { padding: 8px 10px 10px; }
}

/* ---------- Blätterleiste: höchstens 30 Zeilen je Seite, Vor/Zurück, „Seite x von y“ ---------- */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-muted); }
.pager[hidden] { display: none; }
.pager .pager-bereich { margin-right: auto; }
.pager .pager-info { min-width: 7.5rem; text-align: center; font-weight: 600; color: var(--text); }
.pager .ibtn { width: 28px; height: 28px; }
.pager .ibtn:disabled, .pager .pager-link:disabled { opacity: .35; cursor: default; }
.pager-link { padding: 0 6px; height: 28px; border: 0; background: none; color: var(--petrol-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.pager-link:hover:not(:disabled) { background: var(--hover-soft); }
.card > .pager { margin: 8px -16px -14px; padding-left: 16px; padding-right: 16px; }
.pl-scroll + .pager { border-top: 0; padding-top: 4px; }
@media (max-width: 600px) { .pager { justify-content: center; } .pager .pager-bereich { flex-basis: 100%; text-align: center; margin: 0 0 4px; } }