/* ==========================================================================
   Theme-Anbindung (ab 0.15.5): Farben, Flaechen, Rahmen und Radien dieser
   Erweiterung kommen aus den Variablen des aktiven CiviCRM-Themes (Riverlea:
   Minetta, Walbrook, Hackney Brook, Thames - jeweils inkl. Dark Mode). Beim
   Umschalten des Themes zieht die Oberflaeche dadurch automatisch mit.
   Schema: var(--crm-<variable>, <bisheriger Wert>) - der zweite Wert greift
   nur, wenn ein Theme ohne diese Variablen aktiv ist (z. B. Greenwich) oder
   die Seite ohne CiviCRM-Stylesheets ausgeliefert wird; dann sieht alles
   aus wie vor der Umstellung. Bewusst NICHT umgestellt: frei waehlbare bzw.
   inhaltliche Farben (Kategorien, Diagramm-Serien, Kartenfarben).
   ========================================================================== */

.crm-ldapadmin-warning {
  background: var(--crm-alert-warning-bg-color, #fff8e1);
  border: 1px solid var(--crm-alert-warning-border-color, #f0c36d);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 1.2em;
  color: var(--crm-alert-warning-text-color, inherit);
}

table.crm-ldapadmin-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  margin-bottom: 0.6em;
}

table.crm-ldapadmin-table th,
table.crm-ldapadmin-table td {
  border: 1px solid var(--crm-border-color, #ddd);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: middle;
}

table.crm-ldapadmin-table thead th {
  background: var(--crm-layer1-bg-color, #f4f4f4);
}

table.crm-ldapadmin-table input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

table.crm-ldapadmin-fieldmap-table {
  max-width: 980px;
}

table.crm-ldapadmin-fieldmap-table input.fm-synology-name {
  /* frei aenderbare Merk-Beschriftung; Vorschlaege (nicht selbst
     bearbeitet) etwas gedaempft, eigener Text normal */
  color: color-mix(in srgb, var(--crm-text-color, #333) 72%, transparent);
}
table.crm-ldapadmin-fieldmap-table input.fm-synology-name[data-touched="1"] {
  color: inherit;
}

.crm-ldapadmin-remove-row {
  color: var(--crm-danger-ink-color, #a94442);
  white-space: nowrap;
}

.crm-ldapadmin-settings-actions {
  margin-top: 1.2em;
}

/* Mehrere Buttons in einer .crm-ldapadmin-settings-actions-Gruppe (z. B.
   "Anzeigen" + "Kopieren" beim DMZ-Schluessel) sollen immer sauber
   nebeneinander stehen statt untereinander umzubrechen - unabhaengig davon,
   wie CiviCRM's eigenes .button-Grundstyling das einzelne Element anzeigt. */
.crm-ldapadmin-settings-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
}

.crm-ldapadmin-settings-actions-row .button {
  margin: 0;
}

/*
 * Der Speichern-Button nutzt die uebliche CiviCRM-Button-Auszeichnung
 * (<button><span><i class="crm-i ..."></i> Text</span></button>), die
 * normalerweise nur INNERHALB des CiviCRM-eigenen
 * ".crm-submit-buttons"-Containers automatisch nebeneinander (Icon+Text)
 * ausgerichtet wird. Auf unseren eigenen Seiten fehlt dieser Container,
 * wodurch das umgebende WordPress-Theme Icon und Text untereinander
 * fallen lassen kann - daher hier explizit erzwungen.
 */
.crm-ldapadmin-settings-actions .button,
.crm-ldapadmin-settings-actions .button span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}

table.crm-ldapadmin-syncconfig-table {
  max-width: 640px;
}

table.crm-ldapadmin-syncconfig-table td:first-child {
  width: 45%;
}

table.crm-ldapadmin-syncconfig-table input[type="text"],
table.crm-ldapadmin-syncconfig-table input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

.crm-ldapadmin-help {
  color: color-mix(in srgb, var(--crm-text-color, #333) 72%, transparent);
  cursor: help;
}

.crm-ldapadmin-tabs {
  display: flex;
  gap: 0.2em;
  border-bottom: 1px solid var(--crm-border-color, #ccc);
  margin-bottom: 1.2em;
}

.crm-ldapadmin-tab-btn {
  display: inline-block;
  padding: 0.6em 1.1em;
  border: 1px solid var(--crm-border-color, #ccc);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--crm-tab-bg-color, #f4f4f4);
  color: var(--crm-tab-color, #333);
  text-decoration: none;
  position: relative;
  top: 1px;
}

.crm-ldapadmin-tab-btn.active {
  background: var(--crm-tab-bg-active, #fff);
  border-bottom: 1px solid var(--crm-tab-bg-active, #fff);
  font-weight: bold;
}

.crm-ldapadmin-tab-panel {
  display: none;
}

.crm-ldapadmin-tab-panel.active {
  display: block;
}

.crm-ldapadmin-success {
  background: var(--crm-alert-success-bg-color, #e6f4ea);
  border: 1px solid var(--crm-alert-success-border-color, #8bc68f);
  border-radius: 4px;
  padding: 0.8em 1em;
  margin-bottom: 1.2em;
  color: var(--crm-alert-success-text-color, inherit);
}

table.crm-ldapadmin-password-table {
  max-width: 480px;
}

table.crm-ldapadmin-password-table td:first-child {
  width: 55%;
}

table.crm-ldapadmin-password-table input[type="text"],
table.crm-ldapadmin-password-table input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

/* Durchgaengiger Rahmen statt der vom Theme vorgegebenen Unterstrich-Optik
   (manche Themes zeigen Textfelder standardmaessig nur mit einer Linie
   unten an). */
body.civicrm-ecb-ldapadmin-password table.crm-ldapadmin-password-table input[type="text"],
body.civicrm-ecb-ldapadmin-password table.crm-ldapadmin-password-table input[type="password"] {
  border: 1px solid var(--crm-input-border-color, #c4c4c4) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: var(--crm-input-bg-color, #fff) !important;
}

/* Label und Eingabefeld untereinander statt nebeneinander (gilt fuer alle
   Zustaende - change/forgot/reset - der Passwort-Self-Service-Seite). */
table.crm-ldapadmin-password-table tr {
  display: flex;
  flex-direction: column;
}

table.crm-ldapadmin-password-table td {
  display: block;
  width: 100% !important;
  border: none;
  padding: 0.2em 0;
}

table.crm-ldapadmin-password-table td:first-child {
  padding-top: 0.6em;
  padding-bottom: 0.2em;
}

table.crm-ldapadmin-password-table tr:first-child td:first-child {
  padding-top: 0;
}

/* Mobile Kopfzeile (Logo + "Passwort verwalten") - per Default ausgeblendet,
   wird nur auf Mobilgeraeten eingeblendet (siehe Media-Query weiter unten). */
.crm-ldapadmin-mobile-header {
  display: none;
}

/* Logo-Upload auf der Einstellungsseite (gleiches Muster wie in den
   Schwester-Erweiterungen, z. B. de.ecb.tontechnikplaner). */
.crm-ldapadmin-settings-field {
  margin-bottom: 1.2em;
}

.crm-ldapadmin-settings-hint {
  color: color-mix(in srgb, var(--crm-text-color, #333) 72%, transparent);
  font-size: 0.9em;
  margin-top: 0.3em;
}

.crm-ldapadmin-checkbox-label {
  display: block;
  margin: 0.4em 0;
  font-weight: normal;
}

.crm-ldapadmin-logo-preview {
  margin: 6px 0;
}

.crm-ldapadmin-logo-preview img {
  max-height: 60px;
  max-width: 220px;
  display: block;
}

/*
 * Ab hier: Seiten-spezifische Anpassungen NUR fuer die oeffentliche
 * Passwort-Self-Service-Seite. WordPress setzt auf dieser Route die
 * Body-Klasse "civicrm-ecb-ldapadmin-password" (siehe hook_civicrm_alterMenu
 * -> Routenname), daher wirkt sich nichts davon auf andere Seiten der
 * WordPress-Installation aus - auch nicht auf die Settings-Seite dieser
 * Erweiterung.
 */

/* 1. Alle anderen Navigationspunkte im Kopfbereich ausblenden, nur den
   aktuellen ("Password Self-Service") stehen lassen. */
body.civicrm-ecb-ldapadmin-password .wp-block-navigation .wp-block-pages-list__item:not(.current-menu-item) {
  display: none;
}

/* 2. "Benutzername oder E-Mail"-Feld auf der "Passwort vergessen"-Seite
   verkuerzen (greift nur auf #identifier, nicht auf die anderen Felder). */
body.civicrm-ecb-ldapadmin-password table.crm-ldapadmin-password-table input#identifier {
  width: 210px;
  max-width: 210px;
}

/* 3. Logo oberhalb des Seiteninhalts (siehe <img class="crm-ldapadmin-logo">
   in Password.tpl). */
body.civicrm-ecb-ldapadmin-password .crm-ldapadmin-logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 0 1.2em 0;
}

/* 4. Mobile Ansicht: Kopf- UND Fusszeile des Theme komplett ausblenden,
   stattdessen eine eigene kompakte Kopfzeile (Logo + "Passwort verwalten",
   wie beim TT-Plugin) einblenden, und die grosszuegigen Theme-Abstaende auf
   10px reduzieren. */
@media (max-width: 600px) {
  body.civicrm-ecb-ldapadmin-password header.wp-block-template-part,
  body.civicrm-ecb-ldapadmin-password footer.wp-block-template-part {
    display: none;
  }

  body.civicrm-ecb-ldapadmin-password main.wp-block-group {
    margin-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.civicrm-ecb-ldapadmin-password main.wp-block-group > .wp-block-group {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.civicrm-ecb-ldapadmin-password table.crm-ldapadmin-password-table input#identifier {
    width: 100%;
    max-width: 100%;
  }

  /* Fallback-Platzhalter, falls das JS (siehe Password.tpl) den Seitentitel
     nicht findet und das Logo dort nicht einhaengen kann. */
  body.civicrm-ecb-ldapadmin-password .crm-ldapadmin-mobile-header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
  }

  /* Logo, Groesse 110 x 74px - gilt sowohl fuer den Fallback-Platzhalter
     oben als auch fuer den (per JS) in den Seitentitel verschoben Fall. */
  body.civicrm-ecb-ldapadmin-password .crm-ldapadmin-mobile-header-logo {
    width: 110px;
    height: 74px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  /* Seitentitel ("Passwort verwalten"): Logo + Text nebeneinander, sobald
     das JS das Logo per insertBefore() dort eingehaengt hat. */
  body.civicrm-ecb-ldapadmin-password .crm-ldapadmin-title-with-logo {
    display: flex !important;
    align-items: center;
    gap: 0.6em;
  }

  /* ... und dafuer das separate Standalone-Logo ueber dem Inhalt ausblenden
     (sonst waere das Logo doppelt zu sehen). */
  body.civicrm-ecb-ldapadmin-password .crm-ldapadmin-logo {
    display: none;
  }
}

/* Drag-&-Drop-Griff der sortierbaren Zeilen (Einstellungsseite) */
td.crm-ldapadmin-handle {
  width: 26px;
  text-align: center;
  cursor: grab;
  color: color-mix(in srgb, var(--crm-text-color, #333) 60%, transparent);
  user-select: none;
  font-weight: bold;
}
td.crm-ldapadmin-handle:hover { color: var(--crm-text-color, #222); }
tr.crm-ldapadmin-dragging { opacity: 0.4; background: color-mix(in srgb, var(--crm-focus-color, #2f7ed8) 12%, transparent); }

/* Erweitert-Bereich (Login-Feldmapping): standardmaessig gesperrt */
details.crm-ldapadmin-advanced { margin: 1em 0; border: 1px solid var(--crm-border-color, #ddd); border-radius: 4px; padding: 0.6em 1em; }
details.crm-ldapadmin-advanced > summary { cursor: pointer; }
details.crm-ldapadmin-advanced fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
details.crm-ldapadmin-advanced fieldset.fm-locked { opacity: 0.6; pointer-events: none; }

/* Logo im Seitentitel der Administrationsseiten (wie im Predigtplaner) */
.crm-ldapadmin-page-title-with-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.crm-ldapadmin-page-title-logo {
  width: 110px;
  height: 70px;
  max-width: 110px;
  max-height: 70px;
  object-fit: contain;
  vertical-align: middle;
}