/* Kundenverzeichnis (Einstellungen > Arbeitsweise). Nutzt nur vorhandene Farb-Variablen mit Rückfallwerten. */
#customer-directory-settings {
  display: grid;
  gap: 0.75rem;
}
.customer-directory-add {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
}
.customer-directory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.customer-directory-item {
  border: 1px solid var(--line, rgba(127, 127, 127, 0.35));
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  display: grid;
  gap: 0.25rem;
}
.customer-directory-head {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.customer-directory-origin,
.customer-directory-meta,
.customer-directory-message {
  font-size: 0.85em;
  opacity: 0.8;
  margin: 0;
}
.customer-directory-actions,
.customer-directory-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.customer-directory-similar h4 {
  margin: 0.5rem 0;
}
@media (max-width: 640px) {
  .customer-directory-add {
    grid-template-columns: 1fr;
  }
}

/* Projekte unter dem Kunden */
.customer-directory-projects { font-size: .9em; min-width: 0; }
.customer-directory-projects summary { cursor: pointer; opacity: .85; }
.customer-directory-project-list { list-style: none; margin: 0.25rem 0; padding: 0 0 0 0.75rem; display: grid; gap: 0.35rem; border-left: 2px solid var(--line, rgba(127, 127, 127, 0.35)); }
.customer-directory-project { display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
.customer-directory-project-add { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.customer-directory-project-add input { flex: 1 1 10rem; min-width: 0; }
.customer-directory-check { display: flex; gap: 0.4rem; align-items: center; }
.customer-directory-item, .customer-directory-meta { overflow-wrap: anywhere; min-width: 0; }
.customer-directory-editor select, .customer-directory-editor input { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .customer-directory-head { flex-wrap: wrap; }
  .customer-directory-list { max-height: none; }
}
@media print {
  .customer-directory-actions, .customer-directory-add, .customer-directory-project-add { display: none !important; }
  .customer-directory-list { max-height: none; overflow: visible; }
}

/* Meine Rollen (Einstellungen > Arbeitsweise): Karten je Eintrag, auf schmalen Geräten einspaltig */
#my-roles-settings { display: grid; gap: .75rem; min-width: 0; }
#my-roles-settings p { margin: 0; overflow-wrap: anywhere; }
.my-roles-person { color: var(--muted, #6b6560); font-size: .82rem; }
.my-roles-person[hidden] { display: none; }
.my-roles-form, .my-roles-body { display: grid; gap: .75rem; min-width: 0; }
.my-roles-empty { color: var(--muted, #6b6560); font-size: .9rem; }
.my-roles-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.my-roles-entry { display: grid; gap: .5rem; min-width: 0; padding: .6rem .75rem .75rem; border: 1px solid var(--line, #ece8e4); border-radius: 10px; background: #fff; }
.my-roles-entry-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.my-roles-entry-title { color: var(--muted, #6b6560); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.my-roles-remove { min-height: 30px; padding: 0 10px; font-size: .8rem; }
.my-roles-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; min-width: 0; }
.my-roles-field { display: grid; align-content: start; gap: .25rem; min-width: 0; }
.my-roles-field-note { grid-column: 1 / -1; }
.my-roles-field label { margin: 0; font-size: .8rem; }
.my-roles-field .optional { color: var(--muted, #6b6560); font-weight: 400; }
.my-roles-field select, .my-roles-field input { width: 100%; max-width: 100%; min-width: 0; margin: 0; }
.my-roles-field [aria-invalid="true"] { border-color: var(--danger, #b42318); }
.my-roles-counter { color: var(--muted, #6b6560); font-size: .75rem; text-align: right; }
#my-roles-settings .my-roles-error { padding: 6px 10px; border-radius: 8px; background: #fdeeee; color: #8f1c12; font-size: .82rem; }
.my-roles-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.my-roles-limit { margin-right: auto; color: var(--muted, #6b6560); font-size: .78rem; }
.my-roles-status:empty { display: none; }
#my-roles-settings .my-roles-status { font-size: .85rem; }
.my-roles-status[data-tone="ok"] { color: var(--done, #2f7d5b); }
.my-roles-status[data-tone="error"] { color: #8f1c12; }
@media (max-width: 640px) {
  .my-roles-fields { grid-template-columns: minmax(0, 1fr); }
  .my-roles-actions > button { flex: 1 1 100%; }
  .my-roles-limit { flex: 1 1 100%; order: 3; margin-right: 0; }
}