/*
 * fcp-organigramm.css — Organigramm-Panel (S41, 05.09.2026, ROSCCX-Auftrag:
 * Pixelabgleich gegen Owner-Vorlage nach Ablehnung "sieht nicht mal
 * annaehernd so aus wie unsere Vorlage")
 * /app/mitgliederverwaltung/#club_settings_organigramm
 * (public/js/fcp-organigramm-panel.js registriert den Renderer).
 *
 * Pixelziel: SYSTEM/FCP/ZIELBILDER/MUSTER/OrganigrammWeb.dc.html
 * (Owner-Artboard, Inhaltsbereich "Organigramm" bis "Amt und Rechte").
 * Diesmal: Optik uebernehmen, nicht neu interpretieren — Abstaende, Radien,
 * Schriftgroessen, Farbwerte 1:1 aus der Vorlage.
 *
 * Farb-Tokens: --org-* buendeln je EINMAL die Kaskade "exakt passender
 * App-Token -> Vorlage-Wert als Fallback" (Detail je Zeile unten). Ab da
 * referenzieren alle Regeln nur noch var(--org-*) — kein Hex ausserhalb
 * von Kommentaren (Testregel), deshalb rgb()/rgba() statt Hex ueberall
 * im aktiven Code; Hex nur in Kommentaren als Herkunftsbeleg. Kein
 * !important, keine zweite Regel-Ebene ueber Bestehendes.
 *
 * Dunkelmodus: eigener Block unter html[data-fcp-theme="dark"] .fcp-org-root
 * (Muster src/pages/app/einstellungen/index.astro, Abschnitt "Dunkel-
 * Variante (seitenlokal)") — Literalwerte aus dem Dunkel-Tokensatz
 * .is-redesign[data-rd-theme="dark"] (redesign.css Z.64-85), wo kein
 * Pendant existiert eine eigene, kommentierte Ableitung.
 */

.fcp-org-root {
  display: flex;
  flex-direction: column;
  gap: 18px;

  /* ---- Farb-Tokens (hell/Standard) ---- */
  --org-ink:          var(--rd-ink, rgb(42, 45, 36));            /* = --rd-ink hell (redesign.css Z.19); Vorlage #2a2d24 */
  --org-ink-2:        var(--rd-ink-2, rgb(74, 78, 64));          /* = --rd-ink-2 hell (Z.20); Vorlage #4a4e40 */
  --org-muted:        var(--rd-muted, rgb(122, 124, 104));       /* = --rd-muted hell (Z.21); Vorlage #7a7c68 */
  --org-surface:      var(--rd-surface, var(--surface, rgb(251, 247, 238))); /* = --rd-surface hell (Z.11) bzw. fcp_tactical --surface (main.css); Vorlage #fbf7ee */
  --org-surface-hi:   var(--rd-surface-hi, rgb(255, 255, 255)); /* = --rd-surface-hi hell (Z.13); Vorlage #ffffff */
  --org-line:         rgba(var(--tint-rgb), 0.20);                  /* kein exaktes Token-Pendant ausserhalb .is-redesign — Vorlage-Wert */
  --org-line-strong:  rgba(var(--tint-rgb), 0.38);                  /* kein Token-Pendant — Vorlage-Wert (Pill-/Dashed-Rahmen) */
  --org-accent:       var(--rd-gold, rgb(212, 106, 32));         /* = :root --rd-gold (app-shell-redesign.css Z.33), exakt Vorlage #d46a20 */
  --org-accent-lo:    var(--rd-gold-lo, rgb(192, 88, 24));       /* = :root --rd-gold-lo (Z.34), exakt Vorlage #c05818 */
  --org-accent-hi:    var(--rd-gold-hi, rgb(191, 84, 20));       /* = :root --rd-gold-hi (Z.35), exakt Vorlage #bf5414 */
  --org-accent-soft:  rgba(212, 106, 32, 0.10);                  /* Menue-Akzentzeile, Basis = --rd-gold */
  --org-dark:         rgb(45, 53, 39);                           /* kein Token-Pendant — Vorlage #2d3527 (Nummernkreis/Avatar-Grund) */
  --org-dark-fg:      rgb(241, 239, 232);                        /* kein Token-Pendant — Vorlage #f1efe8 (Avatar-Schrift) */
  --org-gold-num:     rgb(214, 178, 94);                         /* kein Token-Pendant — Vorlage #d6b25e (Ziffer im Ebenen-Kreis) */
  --org-chip-bg:      rgba(45, 53, 39, 0.10);                    /* kein Token-Pendant — Vorlage-Wert (Kartentyp-Chip) */
  --org-chip-fg:      rgb(45, 53, 39);                           /* = --org-dark; Vorlage #2d3527 */
  --org-dot:          rgb(59, 109, 17);                          /* kein Token-Pendant — Vorlage #3b6d11 ("immer"-Punkt) */
  --org-shadow-card:  0 1px 3px rgba(42, 45, 36, 0.07);          /* Vorlage-Kartenschatten */
  --org-menu-shadow:  0 12px 32px rgba(42, 45, 36, 0.20);        /* = .fcp-dt-menu Schatten (app-shell-redesign.css Z.2826) */
  --org-menu-border:  rgba(var(--tint-rgb), 0.28);                  /* = .fcp-dt-menu Rahmen (Z.2825) */
  --org-hover:        rgba(var(--tint-rgb), 0.10);                  /* = .fcp-dt-menu__item:hover (Z.2868) */
}

/* ---- Dunkelmodus: Literalwerte aus .is-redesign[data-rd-theme="dark"]
   (redesign.css Z.64-85), eigene Ableitung wo kein Pendant existiert. ---- */
html[data-fcp-theme="dark"] .fcp-org-root {
  --org-ink:          rgb(236, 234, 217);   /* = --rd-ink dunkel (redesign.css Z.72), #ecead9 */
  --org-ink-2:        rgb(196, 194, 176);   /* = --rd-ink-2 dunkel (Z.73), #c4c2b0 */
  --org-muted:        rgb(138, 137, 118);   /* = --rd-muted dunkel (Z.74), #8a8976 */
  --org-surface:      rgb(34, 38, 32);      /* = --rd-surface dunkel (Z.67), #222620 */
  --org-surface-hi:   rgb(50, 56, 47);      /* = --rd-surface-hi dunkel (Z.68), #32382f */
  --org-line:         rgba(232, 217, 181, 0.10); /* = --rd-line dunkel (Z.69) */
  --org-line-strong:  rgba(232, 217, 181, 0.20); /* = --rd-line-strong dunkel (Z.70) */
  --org-accent:       rgb(198, 173, 103);   /* = --rd-gold dunkel (Z.76), #c6ad67 */
  --org-accent-lo:    rgb(168, 139, 79);    /* = --rd-gold-lo dunkel (Z.78), #a88b4f */
  --org-accent-hi:    rgb(217, 192, 122);   /* = --rd-gold-hi dunkel (Z.77), #d9c07a */
  --org-accent-soft:  rgba(198, 173, 103, 0.16); /* = --rd-gold-soft dunkel (Z.79) */
  --org-dark:         rgb(74, 94, 60);      /* eigene Ableitung, aufgehellt fuer Kontrast auf dunkler Kartenflaeche — kein Token-Pendant */
  --org-dark-fg:      rgb(236, 234, 217);   /* = --org-ink dunkel */
  --org-gold-num:     rgb(217, 192, 122);   /* = --org-accent-hi dunkel */
  --org-chip-bg:      rgba(107, 143, 76, 0.18); /* eigene Ableitung, gleiche Gruen-Familie aufgehellt — kein Token-Pendant */
  --org-chip-fg:      rgb(196, 214, 176);   /* eigene Ableitung, aufgehellt fuer Kontrast — kein Token-Pendant */
  --org-dot:          rgb(139, 179, 92);    /* eigene Ableitung, aufgehellt fuer Kontrast — kein Token-Pendant */
  --org-menu-border:  rgba(232, 217, 181, 0.20);
  --org-hover:        rgba(232, 217, 181, 0.08);
}

.fcp-org-error {
  color: var(--org-accent-lo);
}

/* ═══ Kopfleiste: Titel, Untertitel, Aktionen ══════════════════════════ */

.fcp-org-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.fcp-org-header__titlewrap {
  flex: 1;
  min-width: 220px;
}

.fcp-org-header__title {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  color: var(--org-ink);
}

.fcp-org-header__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--org-muted);
}

.fcp-org-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fcp-org-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--org-line-strong);
  background: var(--org-surface-hi);
  color: var(--org-ink);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.fcp-org-btn:hover {
  border-color: var(--org-accent-lo);
}

.fcp-org-btn--primary {
  border: none;
  background: var(--org-accent);
  color: var(--org-dark-fg);
}

.fcp-org-btn--primary:hover {
  background: var(--org-accent-hi);
  border-color: transparent;
}

.fcp-org-btn__plus {
  font-size: 17px;
  line-height: 1;
}

/* ═══ Rahmenbox mit den drei Ebenen ════════════════════════════════════ */

.fcp-org-levels {
  background: var(--org-surface-hi);
  border: 1px solid var(--org-line);
  border-radius: 14px;
  padding: 2px 20px;
}

.fcp-org-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--org-line);
  align-items: start;
}

.fcp-org-row:last-child {
  border-bottom: 0;
}

.fcp-org-row__lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fcp-org-row__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--org-dark);
  color: var(--org-gold-num);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.fcp-org-row__title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--org-ink);
}

.fcp-org-row__hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--org-muted);
}

.fcp-org-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

/* ═══ Amtskarte ═════════════════════════════════════════════════════════ */

.fcp-org-card {
  width: 256px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px;
  background: var(--org-surface);
  border: 1px solid var(--org-line);
  border-radius: 12px;
  box-shadow: var(--org-shadow-card);
  box-sizing: border-box;
  position: relative;
}

.fcp-org-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fcp-org-card__label {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  font-size: 14px;
  color: var(--org-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fcp-org-badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 5px;
  border: 1px solid var(--org-line);
  border-radius: 4px;
  color: var(--org-muted);
}

.fcp-org-card__menu-btn {
  all: unset;
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--org-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.fcp-org-card__menu-btn:hover,
.fcp-org-card__menu-btn:focus-visible {
  background: var(--org-hover);
  color: var(--org-ink);
}

.fcp-org-card__holder {
  display: flex;
  align-items: center;
  gap: 9px;
}

.fcp-org-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--org-dark-fg);
  background: var(--org-dark);
}

.fcp-org-avatar--empty {
  background: transparent;
  border: 1px dashed var(--org-line-strong);
  color: var(--org-muted);
  font-size: 14px;
}

.fcp-org-card__holder-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fcp-org-card__holder-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--org-ink);
}

.fcp-org-card__term {
  font-size: 10.5px;
  color: var(--org-muted);
  white-space: nowrap;
}

.fcp-org-card__assign {
  all: unset;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--org-accent-lo);
  cursor: pointer;
}

.fcp-org-card__assign:hover {
  color: var(--org-accent-hi);
}

.fcp-org-card__empty {
  font-size: 11px;
  color: var(--org-muted);
}

.fcp-org-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fcp-org-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--org-line-strong);
  color: var(--org-ink);
  background: var(--org-surface-hi);
  white-space: nowrap;
}

.fcp-org-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--org-chip-bg);
  color: var(--org-chip-fg);
  white-space: nowrap;
}

/* Dashed "Amt hinzufuegen" / "Fachbereich hinzufuegen" — Ebenenende */
.fcp-org-add {
  all: unset;
  width: 256px;
  flex: none;
  min-height: 104px;
  border: 1px dashed var(--org-line-strong);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--org-accent-lo);
  font-size: 13.5px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}

.fcp-org-add:hover {
  border-color: var(--org-accent-lo);
  background: var(--org-accent-soft);
}

.fcp-org-empty-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--org-muted);
}

/* ═══ "…"-Aktionsmenue (Optik von .fcp-dt-menu, app-shell-redesign.css) ══ */

.fcp-org-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: transparent;
}

.fcp-org-menu {
  position: absolute;
  min-width: 208px;
  background: var(--org-surface-hi);
  border: 1px solid var(--org-menu-border);
  border-radius: 12px;
  box-shadow: var(--org-menu-shadow);
  padding: 6px;
  box-sizing: border-box;
}

.fcp-org-menu__item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--org-ink);
  cursor: pointer;
}

.fcp-org-menu__item:hover,
.fcp-org-menu__item:focus-visible {
  background: var(--org-hover);
}

.fcp-org-menu__item--danger {
  color: var(--org-accent-lo);
}

/* ═══ Fussbereich: zweispaltig (Kartentyp-Tabelle / Amt und Rechte) ══════ */

.fcp-org-footer {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 899px) {
  .fcp-org-footer {
    grid-template-columns: 1fr;
  }
}

.fcp-org-cardtypes {
  background: var(--org-surface);
  border: 1px solid var(--org-line);
  border-radius: 12px;
  overflow: hidden;
}

.fcp-org-cardtypes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--org-line);
}

.fcp-org-cardtypes__title {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--org-muted);
  font-weight: 650;
}

.fcp-org-cardtypes__note {
  font-size: 11.5px;
  font-style: italic;
  color: var(--org-muted);
}

.fcp-org-cardtype-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--org-line);
  align-items: center;
}

.fcp-org-cardtype-row:last-child {
  border-bottom: 0;
}

.fcp-org-cardtype-row__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--org-ink);
}

.fcp-org-cardtype-row__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.fcp-org-always {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--org-ink);
  white-space: nowrap;
}

.fcp-org-always__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--org-dot);
  flex: none;
}

.fcp-org-always em {
  font-style: normal;
  color: var(--org-muted);
}

.fcp-org-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--org-ink);
  padding: 2px 4px;
  border-radius: 6px;
}

.fcp-org-check:hover {
  background: var(--org-hover);
}

.fcp-org-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--org-dark);
}

.fcp-org-check--readonly {
  color: var(--org-muted);
}

.fcp-org-check--readonly .fcp-org-check__mark {
  color: var(--org-dot);
  font-weight: 700;
}

.fcp-org-footnote {
  background: var(--org-surface);
  border: 1px solid var(--org-line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--org-ink-2);
}

.fcp-org-footnote__title {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--org-muted);
  font-weight: 650;
}

.fcp-org-footnote__text {
  margin: 0;
}

.fcp-org-member-results {
  min-height: 120px;
}

.fcp-org-dialog__msg {
  min-height: 1.1em;
  color: var(--org-muted);
}

/* Touch-Regel (Owner-Grundsatz 04.09.2026): ein input/select/textarea zoomt
   iOS beim Fokus, wenn die Schrift unter 16px liegt. Alle Eingabefelder der
   Dialoge (Suche, Datum, Telefon, Bezeichnung, Ebene, Rolle) sitzen im
   wiederverwendeten .qfp-form-field und erben dessen Basis-Font-Size aus
   main.css/redesign.css — nur die panel-eigenen Kontrollen (Trefferliste,
   Checkboxen im Kartentyp-Block, Menue-Items) bekommen hier ihren eigenen
   Zweig fuer Schriftgroesse und Zielflaeche. */
.fcp-org-member-results {
  font-size: 14px;
}

@media (pointer: coarse), (max-width: 899px) {
  .fcp-org-member-results {
    font-size: 16px;
  }

  .fcp-org-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .fcp-org-check {
    padding: 6px 8px;
  }

  .fcp-org-card__menu-btn {
    width: 32px;
    height: 32px;
  }

  .fcp-org-menu__item {
    padding: 11px 12px;
    font-size: 15px;
  }
}