/* ============================================================
   Projekte/Bauherren (source/templates/admin_projects.html)
   Tokens identisch zu 01-tokens.css. Gleiche Konvention wie
   09-abwesenheiten.css: alles unter .projects-page verschachtelt,
   damit nichts auf andere Seiten ausstrahlt. .sheet-back/.sheet
   tragen die Klasse projects-page direkt auf sich selbst (kein
   umschliessendes Wrapper-Element, siehe Kommentar dort).

   .block/.block-head/.tbl/.chip/.stamm-box/.edit-zustand heissen
   bewusst nicht .panel/.table/.badge o. ae.: [class*="panel"],
   [class*="table"], [class*="badge"]/[class*="status"]/[class*="pill"]
   in 03-layout-und-komponenten.css erzwingen sonst Farben/Rahmen/
   radius per !important. Vor weiteren neuen Klassennamen auf dieser
   Seite ebenfalls gegen die Wildcard-Liste dort pruefen (badge, card,
   metric, panel, pill, stat, status, table).

   .btn-ghost/.icon-btn/.seg-btn (Filter)/.chev-btn sind bewusst
   <span role="button">, kein <button>: der blosse Element-Selektor
   "button" in 03-layout-und-komponenten.css erzwingt Hausfarbe/weisse
   Schrift per !important, das wuerde jeden Ghost-/Icon-Look
   zerstoeren. .btn-primary-Knoepfe, die wirklich ein Formular
   abschicken muessen (Speichern, Projekt/Bauherr anlegen), bleiben
   echte <button type="submit"> - die erzwungene Hausfarbe ist dort
   ohnehin der gewuenschte Look. */

.projects-page {
  --touch: 44px;
}
.projects-page [hidden] {
  display: none !important;
}

/* ---------- Buttons ---------- */
.projects-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-size: 0.94rem;
  line-height: 1;
  padding: 11px 18px;
  min-height: var(--touch);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.projects-page .btn:focus-visible,
.projects-page .icon-btn:focus-visible,
.projects-page .seg-btn:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}
.projects-page .btn-primary {
  background: var(--taupe-dark);
  color: #fff;
}
.projects-page .btn-primary:hover {
  background: var(--taupe-hover);
}
.projects-page .btn-primary:disabled {
  background: var(--border-strong);
  color: #fff;
  cursor: not-allowed;
}
.projects-page .btn-ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
}
.projects-page .btn-ghost:hover {
  border-color: var(--taupe);
  color: var(--taupe-dark);
}
.projects-page .btn-ghost[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}
.projects-page .btn-sm {
  padding: 7px 13px;
  min-height: 36px;
  font-size: 0.88rem;
}
.projects-page .icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
}
.projects-page .icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* ---------- Textfelder/Selects ausserhalb von .sheet ----------
   .sheet .in/.sheet select.in stehen bereits unscoped in
   09-abwesenheiten.css, gelten also fuer die Sheets dieser Seite
   automatisch mit. Suchfelder und die Ausklapp-Zeile brauchen dieselbe
   Optik ausserhalb eines Sheets. */
.projects-page .in {
  width: auto;
  font-family: var(--f-body);
  font-size: 0.9rem;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 0;
  color: var(--text);
  min-height: 38px;
}
.projects-page .in:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(134, 124, 114, 0.16);
}
.projects-page .in::placeholder {
  color: var(--muted);
}
.projects-page select.in {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 8px 30px 8px 10px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.projects-page .edit .in,
.projects-page .stamm-box .in {
  width: 100%;
}

/* ---------- Block-Container (Projekte, Bauherren) ---------- */
.projects-page .block {
  border: 1px solid var(--border);
  margin-bottom: var(--s5);
  background: #fff;
}
.projects-page .block-head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
}
.projects-page .block-head h2 {
  margin: 0;
}
.projects-page .block-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.projects-page .block-note-inline {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- Filter ---------- */
.projects-page .filters {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: flex-end;
}
.projects-page .fl {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.projects-page .fl-lab {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.projects-page .fl-search {
  min-width: 280px;
}
.projects-page .fl-search .in {
  width: 100%;
}

/* Segment-Umschalter: dient zweimal - als Status-Filter (Klick auf
   <span role="button">, JS toggelt .is-on) und als Aktiv/Inaktiv-
   Auswahl in der Ausklapp-Zeile (<input type="radio"> visuell
   versteckt, Optik ueber :checked + label). Beide teilen sich
   .seg/.seg-btn, reine Browser-Checkboxen/-Radios sonst nirgends in
   der App - hier bewusst als radio, weil es echte Formulardaten sind,
   keine reine Ansichtssache. */
.projects-page .seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
}
.projects-page .seg-btn {
  background: #fff;
  font-family: var(--f-ui);
  font-size: 0.86rem;
  padding: 8px 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  border-right: 1px solid var(--border-strong);
  user-select: none;
}
.projects-page .seg > .seg-btn:last-child {
  border-right: 0;
}
.projects-page .seg-btn.is-on {
  background: var(--taupe-dark);
  color: #fff;
}
.projects-page .seg-btn:hover:not(.is-on) {
  background: var(--taupe-wash);
}
.projects-page .seg-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.projects-page .seg-radio:checked + .seg-btn {
  background: var(--taupe-dark);
  color: #fff;
}
.projects-page .seg-radio:hover:not(:checked) + .seg-btn {
  background: var(--taupe-wash);
}
.projects-page .seg-radio:focus-visible + .seg-btn {
  outline: 2px solid var(--taupe);
  outline-offset: -2px;
}

/* ---------- Zeilenliste (CSS-Grid mit ARIA role=table/row/cell) ---------- */
.projects-page .tbl {
  --cols: minmax(220px, 1.6fr) 172px 120px 44px;
}
.projects-page .tbl.tbl-bauherren {
  --cols: minmax(200px, 1.3fr) 190px 210px 108px 44px;
}
.projects-page .truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-page .trow {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.projects-page .trow:last-child {
  border-bottom: 0;
}
.projects-page .thead {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-strong);
}
.projects-page .thead .tc {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px var(--s3);
}
.projects-page .trow.tbody {
  cursor: pointer;
}
.projects-page .trow.tbody:hover,
.projects-page .trow.tbody.is-open {
  background: var(--taupe-wash);
}
.projects-page .tc {
  padding: 11px var(--s3);
  font-size: 0.93rem;
  min-width: 0;
}
.projects-page .tc-num {
  font-variant-numeric: tabular-nums;
}
.projects-page .tc-num strong {
  font-family: var(--f-bold);
  font-weight: normal;
}
.projects-page .tc-akt {
  display: flex;
  justify-content: flex-end;
}
.projects-page .p-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-page .p-client {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.projects-page .st {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--f-ui);
  font-size: 0.78rem;
  border: 1px solid;
}
.projects-page .st-active {
  color: var(--pos);
  border-color: var(--pos);
  background: var(--pos-wash);
}
.projects-page .st-inactive {
  color: var(--muted);
  border-color: var(--border-strong);
  background: var(--surface-soft);
}
.projects-page .trow.tbody.is-inactive .tc:not(.tc-akt) {
  opacity: 0.62;
}
.projects-page .chev-btn {
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.projects-page .trow.tbody.is-open .chev-btn {
  transform: rotate(180deg);
}
.projects-page .empty {
  padding: var(--s7) var(--s5);
  text-align: center;
}
.projects-page .empty p {
  margin: 0 0 5px;
}
.projects-page .empty .e1 {
  font-family: var(--f-ui);
}
.projects-page .empty .e2 {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Ausklapp-Zeile (Bearbeiten) ---------- */
.projects-page .edit {
  border-top: 1px solid var(--border-strong);
  background: var(--surface-soft);
  padding: var(--s5);
}
.projects-page .readonly-phases-label {
  margin-bottom: var(--s2);
}
.projects-page .readonly-zeile {
  font-size: 0.95rem;
  margin: 0 0 var(--s2);
}
/* .stamm-link/.stamm-box statt .stamm-status o.ae.: siehe Hinweis
   oben zur Wildcard-Liste in 03-layout-und-komponenten.css. */
.projects-page .stamm-details {
  margin-bottom: var(--s4);
}
.projects-page .stamm-link {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 0.86rem;
  color: var(--taupe-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
.projects-page .stamm-link::-webkit-details-marker {
  display: none;
}
.projects-page .stamm-link:hover {
  color: var(--taupe-hover);
}
.projects-page .stamm-box {
  border: 1px solid var(--border-strong);
  background: #fff;
  padding: var(--s4);
  margin-top: var(--s3);
}
.projects-page .edit-grid {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.projects-page .stamm-actions {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
}
.projects-page .fld-lab {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
/* .edit-zustand heisst bewusst nicht .edit-status, siehe Wildcard-Hinweis
   oben. */
.projects-page .edit-zustand {
  margin-bottom: var(--s4);
}
.projects-page .phase-group {
  margin-bottom: var(--s4);
}
.projects-page .phase-group h4 {
  font-family: var(--f-ui);
  font-weight: normal;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.projects-page .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.projects-page .chip-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.projects-page .chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  font-size: 0.87rem;
  font-family: var(--f-body);
  user-select: none;
}
.projects-page .chip-check:checked + .chip {
  border-color: var(--taupe-dark);
  background: var(--taupe-wash);
  font-family: var(--f-ui);
}
.projects-page .chip-check:focus-visible + .chip {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}
.projects-page .chip-view {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  background: #fff;
  font-size: 0.87rem;
  color: var(--text);
}
.projects-page .edit-default {
  max-width: 360px;
  margin-bottom: var(--s4);
}
.projects-page .fld-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
}
.projects-page .edit-warn {
  font-size: 0.86rem;
  color: var(--neg);
  margin-bottom: var(--s3);
}
.projects-page .edit-actions {
  display: flex;
  gap: var(--s3);
  justify-content: flex-end;
}
.projects-page .bauherr-select-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
}
.projects-page .bauherr-select-row .in {
  flex: 1;
}

/* ---------- Sheets (Neues Projekt / Neuer Bauherr) ----------
   .sheet-back/.sheet selbst stehen bereits unscoped in
   09-abwesenheiten.css (position:fixed, z-index 60/61) und gelten
   damit auch hier, da beide Elemente die Klasse projects-page direkt
   auf sich selbst tragen. Nur Inhalte/Feinheiten hier ergaenzen. */
/* Die Sheet-Bausteine werden auch vom Honorarrechner benutzt (Bauherr und
   Projekt "im Vorbeigehen" anlegen). Statt die Regeln dort zu wiederholen,
   sind die Selektoren um .honorar-page erweitert - die Basis von .sheet und
   .sheet-back steht ohnehin ungescoped in 09-abwesenheiten.css. */
.projects-page .sheet-body,
.honorar-page .sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s5);
}
.projects-page .sheet-head,
.honorar-page .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.projects-page .sheet-foot,
.honorar-page .sheet-foot {
  display: flex;
  gap: var(--s3);
  justify-content: flex-end;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.projects-page .fld {
  margin-bottom: var(--s4);
}
.projects-page .fld-row,
.honorar-page .fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.projects-page .sheet-note,
.honorar-page .sheet-note {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: var(--s4);
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.projects-page .sheet-warn,
.honorar-page .sheet-warn {
  font-size: 0.86rem;
  color: var(--neg);
  margin: 0 0 var(--s3);
}

/* Der Bauherr-Sheet kann von der Bauherren-Liste, aber auch von
   innerhalb des Projekt-Sheets oder der Projekt-Bearbeitung heraus
   geoeffnet werden ("Neu"). Hoehere z-index-Ebene, damit er sich in
   dem Fall vor das bereits offene Sheet legt statt dahinter zu
   verschwinden. */
#bauherr-sheet-back {
  z-index: 70;
}
#bauherr-sheet {
  z-index: 71;
}

@media (prefers-reduced-motion: reduce) {
  .projects-page *,
  .projects-page *::before,
  .projects-page *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MOBIL (Breakpoint identisch zu den uebrigen Seiten)
   ============================================================ */
@media (max-width: 760px) {
  .projects-page .block-head {
    padding: var(--s3) var(--s4);
  }
  .projects-page .block-head-row {
    flex-direction: column;
    align-items: stretch;
  }
  .projects-page .block-head-row .btn {
    width: 100%;
  }
  .projects-page .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .projects-page .fl-search {
    min-width: 0;
  }
  .projects-page .in {
    font-size: 16px;
    min-height: var(--touch);
  }
  .projects-page .seg {
    width: 100%;
  }
  .projects-page .seg-btn {
    flex: 1;
    justify-content: center;
  }

  /* Zeilen werden zu Karten */
  .projects-page .trow.thead {
    display: none;
  }
  .projects-page .trow.tbody {
    display: block;
    border: 1px solid var(--border);
    margin: var(--s3) var(--s4) 0;
    padding: var(--s3);
    position: relative;
  }
  .projects-page .tc {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: 5px 0;
    text-align: right;
    border-bottom: 1px solid var(--border);
  }
  .projects-page .tc:last-child {
    border-bottom: 0;
  }
  .projects-page .tc::before {
    content: attr(data-label);
    font-family: var(--f-ui);
    font-size: 0.78rem;
    color: var(--muted);
    text-align: left;
    flex: 0 0 auto;
  }
  .projects-page .p-name,
  .projects-page .p-client {
    text-align: right;
  }
  .projects-page .tc-akt {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    border-bottom: 0;
    padding: 0;
  }
  .projects-page .tc-akt::before {
    content: none;
  }
  .projects-page .edit {
    margin: 0 var(--s4) var(--s3);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border-strong);
  }
  .projects-page .edit-grid {
    grid-template-columns: 1fr;
  }
  .projects-page .edit-actions {
    flex-direction: column-reverse;
  }
  .projects-page .edit-actions .btn {
    width: 100%;
  }
  .projects-page .stamm-actions {
    flex-direction: column-reverse;
  }
  .projects-page .stamm-actions .btn,
  .projects-page .btn-sm {
    width: 100%;
    min-height: var(--touch);
  }
  .projects-page .bauherr-select-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sheet {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
  .projects-page .sheet-foot,
  .honorar-page .sheet-foot {
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  }
}