/* Modul C – Verwaltung & Konto (Kunden, Projekte, Leistungsbereiche, Team, Einstellungen, Konto, Einladung).
   Präfix ad-. Nur Tokens aus theme.css. Mobile first. */

/* ------------------------------------------------------------------ Allgemein */
.ad-page { gap: 14px; }
.ad-card-lead { margin: -4px 0 12px; display: flex; gap: 6px; align-items: flex-start; }
.ad-card-lead .icon { margin-top: 2px; }
.ad-note { display: flex; align-items: center; gap: 8px; margin: 0; }
.ad-danger-text { color: var(--danger); }
.ad-form-alert { margin-bottom: 2px; }
.ad-modal-lead { margin: 0 0 14px; }
.ad-hint-warn { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--warning); }
.ad-callout { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-strong); }
.ad-callout .icon { margin-top: 1px; }
.ad-readonly { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; }
.ad-readonly .field-hint { font-weight: 400; }
.ad-input-short { max-width: 200px; }
.ad-input-error { border-color: var(--danger); }

/* Touch-Ziele ≥ 44 px auf Touch-Geräten und schmalen Bildschirmen (inkl. Modals dieser Seiten) */
@media (max-width: 899px), (pointer: coarse) {
  .ad-page .btn, .ad-invite-card .btn { min-height: var(--tap); }
  .ad-page .btn-icon { width: var(--tap); min-width: var(--tap); }
  .ad-page .input, .ad-invite-card .input { min-height: var(--tap); }
  .ad-page .segmented-item { min-height: var(--tap); padding-left: 14px; padding-right: 14px; }
  .ad-page .ad-svc-name { min-height: var(--tap); white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .ad-page .toggle { min-height: var(--tap); }
  .ad-invite-card .check { min-height: var(--tap); }
}

/* Segmentierte Auswahl in Formularen: am schmalen Handy volle Breite, Optionen nach Textlänge verteilt und mit
   weniger Innenabstand (sonst wird z.B. «Abrunden» bei 360 px abgeschnitten und der Container scrollt ohne Hinweis) */
@media (max-width: 420px) {
  .ad-page .segmented { display: flex; width: 100%; }
  .ad-page .segmented-item { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
}
.ad-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ad-fieldset:disabled .segmented { opacity: .5; }
.ad-fieldset:disabled .segmented-item { cursor: not-allowed; }

/* ------------------------------------------------------------------ Werkzeugleiste */
.ad-toolbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.ad-search { flex: 1 1 240px; min-width: 0; max-width: 460px; }

/* ------------------------------------------------------------------ Listen */
.ad-list { overflow: hidden; }
.ad-list-head { display: none; }
.ad-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main end";
  align-items: center; gap: 4px 10px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--border);
  min-height: 60px;
}
.ad-row:last-child { border-bottom: 0; }
.ad-row.is-archived .ad-row-title { color: var(--text-muted); }
.ad-row-main {
  grid-area: main; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 44px;
  padding: 4px 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left;
}
button.ad-row-main { cursor: pointer; border-radius: var(--radius-sm); }
button.ad-row-main:hover .ad-row-title > .ellipsis { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.ad-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ad-row-sub { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ad-row-end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ad-cell { display: none; font-size: var(--fs-sm); min-width: 0; }
.ad-list-flat { border-top: 1px solid var(--border); margin: 0 -16px -16px; }
@media (hover: hover) { .ad-row:hover { background: var(--surface-2); } }
@media (max-width: 899px) {
  /* Am Handy lange Namen umbrechen statt abschneiden */
  .ad-row-title > .ellipsis { white-space: normal; overflow-wrap: anywhere; }
}

.ad-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ad-avatars { display: inline-flex; align-items: center; margin-left: 2px; }
.ad-avatars .avatar { border: 2px solid var(--surface); margin-left: -6px; }
.ad-avatars .avatar:first-child { margin-left: 0; }
.ad-avatar-more { font-size: var(--fs-xs); color: var(--text-muted); margin-left: 4px; font-weight: 600; }

/* Gruppen (Projekte nach Kunde) */
.ad-group { display: flex; flex-direction: column; gap: 8px; }
.ad-group-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
.ad-group-count { margin-left: auto; font-weight: 600; color: var(--text-faint); letter-spacing: 0; }

/* Projekte */
.ad-cols-projects { grid-template-areas: "main end" "budget rate"; grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 10px; }
.ad-cols-projects.no-rate { grid-template-areas: "main end" "budget budget"; }
.ad-cols-projects .ad-row-main { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; }
.ad-cols-projects .ad-row-title { max-width: 100%; }
.ad-budget { grid-area: budget; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 4px; }
.ad-budget-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-sm); }
.ad-hours { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ad-over { color: var(--danger); font-weight: 650; }
.ad-cell-rate { grid-area: rate; display: block; padding-right: 8px; align-self: end; white-space: nowrap; }
.ad-cell-rate small { display: block; font-size: var(--fs-xs); }
.ad-progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ad-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .3s; }
.ad-progress-warning > span { background: var(--warning); }
.ad-progress-danger > span { background: var(--danger); }

@media (min-width: 900px) {
  .ad-list-head {
    display: grid; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  }
  .ad-list-head .num { text-align: right; }
  .ad-cell { display: block; }
  .ad-cols-clients { grid-template-columns: minmax(0, 2.4fr) minmax(90px, 1fr) 80px 140px 44px; grid-template-areas: none; }
  .ad-cols-clients > * { grid-area: auto; }
  .ad-cols-projects { grid-template-columns: minmax(0, 1.8fr) minmax(200px, 1.2fr) 150px 44px; grid-template-areas: "main budget rate end"; padding-bottom: 6px; }
  .ad-cols-projects.no-rate { grid-template-columns: minmax(0, 1.8fr) minmax(200px, 1.2fr) 44px; grid-template-areas: "main budget end"; }
  .ad-cell-rate { align-self: center; text-align: right; }
}

/* ------------------------------------------------------------------ Formular-Bausteine */
.ad-affix { display: flex; align-items: stretch; min-width: 0; }
.ad-affix .input { flex: 1 1 auto; min-width: 0; border-radius: 0; }
.ad-affix .input:focus { position: relative; z-index: 1; }
.ad-affix .input:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.ad-affix .input:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.ad-affix-pre, .ad-affix-post {
  display: inline-flex; align-items: center; padding: 0 10px; background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
}
.ad-affix-pre { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ad-affix-post { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.has-error .ad-affix-pre, .has-error .ad-affix-post { border-color: var(--danger); }

.ad-toggle-row { display: flex; align-items: center; min-height: 44px; }

.ad-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-swatch {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--sw, var(--surface-3)); color: #fff; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.ad-swatch.is-active { box-shadow: 0 0 0 2px var(--text); }
.ad-swatch:focus-visible { outline-color: var(--text); border-radius: 50%; }
.ad-swatch-custom { background: var(--sw, var(--surface-2)); color: var(--text-muted); overflow: hidden; }
.ad-swatch-custom.is-active { color: #fff; }
.ad-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 899px), (pointer: coarse) { .ad-swatch { width: 44px; height: 44px; } }

/* Mitglieder im Projekt */
.ad-members { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 4px; }
.ad-member { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.ad-member:last-child { border-bottom: 0; }
.ad-member.is-on { background: var(--brand-soft); }
.ad-member-check { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; min-height: 44px; cursor: pointer; }
.ad-member-check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.ad-member-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ad-member-rate { flex: 0 1 220px; min-width: 160px; margin-left: auto; }
.ad-members .ad-hint-warn { padding: 8px 10px; margin: 0; }

/* ------------------------------------------------------------------ Leistungsbereiche */
.ad-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.ad-add .input { flex: 1 1 220px; min-width: 0; }
.ad-add-error { flex-basis: 100%; }
.ad-add-flat { margin-top: 14px; }
.ad-svc { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; padding-left: 4px; }
.ad-svc > * { grid-area: auto; }
.ad-svc-move { display: flex; gap: 0; }
.ad-svc-move .btn-icon:disabled { opacity: .25; }
.ad-svc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 4px 0; }
.ad-svc-name {
  max-width: 100%; min-height: 36px; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: var(--radius-sm);
  background: none; font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-svc-name:hover { background: var(--surface-2); }
.ad-svc-input { font-weight: 600; }
.ad-svc .toggle { font-size: var(--fs-sm); color: var(--text-muted); }
.ad-svc .toggle-track { transform: scale(.85); transform-origin: left center; margin-right: -4px; }
.ad-svc.is-editing { background: var(--brand-soft); }
@media (min-width: 900px) {
  .ad-svc-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .ad-svc-body .ad-svc-name, .ad-svc-body .ad-svc-input { flex: 1 1 auto; }
  .ad-svc-input { max-width: 420px; }
}
.ad-archived-card .ad-row-end .btn-sm { display: none; }
@media (min-width: 600px) { .ad-archived-card .ad-row-end .btn-sm { display: inline-flex; } }

/* ------------------------------------------------------------------ Team */
.ad-team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .ad-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ad-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ad-mc { display: flex; flex-direction: column; gap: 12px; padding: 14px 10px 14px 14px; }
.ad-mc.is-inactive { opacity: .72; background: var(--surface-2); }
.ad-mc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ad-mc-id {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 2px 0; border: 0; background: none;
  font: inherit; color: var(--text); text-align: left;
}
button.ad-mc-id { cursor: pointer; min-height: 44px; justify-content: center; }
.ad-mc-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--fs-lg); min-width: 0; }
.ad-mc-mail { font-size: var(--fs-sm); color: var(--text-muted); }
.ad-mc-head-modal { padding-bottom: 4px; }
.ad-perms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.ad-perm { display: flex; align-items: center; gap: 8px; }
.ad-perm.is-on .icon { color: var(--success); }
.ad-perm.is-off { color: var(--text-muted); }
.ad-perm.is-off .icon { color: var(--text-faint); }
.ad-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
.ad-facts dt { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ad-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; }

/* Link teilen */
.ad-invite-done { display: flex; flex-direction: column; gap: 14px; }
.ad-share { display: flex; flex-direction: column; gap: 10px; }
.ad-share-url { position: relative; }
.ad-share-url .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.ad-share-url .input { padding-left: 34px; font-size: var(--fs-sm); text-overflow: ellipsis; background: var(--surface-2); }
/* iOS Safari zoomt bei Eingabefeldern unter 16 px beim Fokussieren – am Handy 16 px wie app.css */
@media (max-width: 899px) { .ad-share-url .input { font-size: 16px; } }
.ad-share-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ad-share-actions .btn { width: 100%; min-height: var(--tap); }
@media (min-width: 600px) { .ad-share-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ad-share-actions .btn { white-space: normal; } }

/* ------------------------------------------------------------------ Einstellungen */
.ad-settings { display: flex; flex-direction: column; gap: 14px; }
.ad-section .card-head { margin-bottom: 8px; }
.ad-savebar { display: flex; align-items: center; justify-content: flex-end; gap: 8px 10px; flex-wrap: wrap; padding-top: 4px; }
.ad-savebar > .muted { margin-right: auto; }
.ad-brand-preview {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: #fff; color: #222;
  display: flex; flex-direction: column; gap: 8px; max-width: 520px;
}
.ad-brand-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-bottom: 6px; border-bottom: 2px solid var(--brand-pdf); font-size: var(--fs-xs); color: #555; }
.ad-brand-head strong { color: var(--brand-pdf); font-size: var(--fs); }
.ad-brand-title { font-size: var(--fs-lg); font-weight: 700; }
.ad-brand-table { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding: 6px 8px; background: var(--brand-pdf); color: #fff; font-size: var(--fs-xs); font-weight: 600; border-radius: 3px; }
.ad-section-super { border-style: dashed; }
.ad-ws-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ad-ws { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--border); }
.ad-ws:last-child { border-bottom: 0; }
.ad-ws .icon { color: var(--text-muted); }
.ad-created { margin-top: 12px; align-items: center; flex-wrap: wrap; }
.ad-created > span { flex: 1 1 200px; }
.ad-backup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ad-backup > div { flex: 1 1 260px; min-width: 0; }
.ad-backup p { margin: 2px 0 0; }
/* zwei Sicherungen (nur Datenbank | ZIP mit Dokumenten) untereinander; lange Beschriftungen umbrechen, am Handy volle Breite */
.ad-backup-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ad-backup .btn { white-space: normal; text-align: left; justify-content: flex-start; }
@media (max-width: 599px) { .ad-backup-actions { flex: 1 1 100%; } }

/* ------------------------------------------------------------------ Mein Konto */
.ad-profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ad-profile-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) { .ad-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-me { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ad-me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-me-ws { display: flex; flex-direction: column; gap: 6px; }
.ad-mail-hint { margin: -6px 0 0; }
@media (min-width: 600px) { .ad-field-short { flex: 0 0 140px; } }

.ad-format { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ad-format-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; min-height: 76px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  font: inherit; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer;
}
.ad-format-opt:hover { background: var(--surface-2); }
.ad-format-opt.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); box-shadow: 0 0 0 1px var(--brand); font-weight: 600; }
.ad-format-sample { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }

.ad-2fa-text { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.ad-2fa-text .icon { margin-top: 1px; color: var(--brand); }
.ad-2fa-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ad-2fa-qr { display: flex; justify-content: center; }
.ad-qr { display: block; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border); max-width: 100%; height: auto; }
.ad-qr-error { padding: 16px; color: var(--text-muted); }
.ad-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.ad-otp-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; min-height: 32px; }
@media (pointer: coarse), (max-width: 899px) { .ad-otp-link { min-height: var(--tap); } }
.ad-badges .badge { white-space: normal; text-align: left; max-width: 100%; }
.ad-secret-wrap { display: block; margin-top: 4px; color: var(--text-muted); }
.ad-secret { display: inline-block; margin-top: 2px; font-size: var(--fs-sm); letter-spacing: .06em; word-spacing: .2em; user-select: all; overflow-wrap: anywhere; }
.ad-2fa-confirm { display: flex; flex-direction: column; gap: 10px; }
.ad-2fa-confirm .input-code { max-width: 220px; }
@media (min-width: 600px) {
  .ad-2fa-setup { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 20px; }
  .ad-2fa-setup > .ad-form-alert, .ad-2fa-setup > .ad-2fa-confirm { grid-column: 1 / -1; }
}

.ad-sessions { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ad-session { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; min-height: 60px; border-bottom: 1px solid var(--border); }
.ad-session:last-child { border-bottom: 0; }
.ad-session.is-current { background: var(--success-soft); }
.ad-session-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); flex: none; }
.ad-session-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ad-session-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; }

/* ------------------------------------------------------------------ Einladung (öffentlich) */
.ad-invite-card { gap: 14px; }
.ad-invite-lead { margin: 0; }
.ad-invite-card input[readonly] { background: var(--surface-2); color: var(--text-muted); }
.ad-invite-inline { display: flex; justify-content: center; padding: 12px 0; }