/* mage-picker-plus.css — MagePickerPlus inline dropdown selection with add/search */

/* =============================================
   MagePickerPlus - Inline Dropdown
   ============================================= */

/* Wrapper: positioning context for trigger + dropdown */
.mpp-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Dropdown panel: appears below trigger */
.mpp-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    min-width: 100%;
    /* Nie breiter als der Viewport, mit kleinem Sicherheitsabstand */
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    z-index:var(--z-popover);
    background: var(--surface);
    border: 1px solid var(--grey-200);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    margin-top:var(--sp-0);
    max-height:var(--sz-320);
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
}
.mpp-dropdown.open { display: flex; }

/* Flip: dropdown opens upward when near bottom */
.mpp-dropdown.mpp-flip {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom:var(--sp-0);
}

/* Add row (new value input + button) */
.mpp-add-row {
    display: flex;
    align-items: center;   /* + -Button vertikal mittig zum Eingabefeld (war top-aligned → wirkte verrutscht) */
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--grey-200);
    flex-shrink: 0;
}
.mpp-add-input {
    flex: 1;
    padding:var(--sp-2) var(--sp-4);
    border: 1px solid var(--grey-200);
    border-radius:var(--radius);
    font-size:var(--fs-base);
    color: var(--grey-700);
    outline:none;box-shadow:var(--focus);
}
.mpp-add-input:focus { border-color: var(--info); }
.mpp-add-input::placeholder { color: var(--muted); font-style: italic; }
/* Kompaktes oranges Plus-Icon (kein breiter Textbutton — schoss sonst rechts über das Dropdown hinaus) */
.mpp-add-btn {
    background: var(--o);
    border: none;
    color: var(--surface);
    width: var(--sz-32);
    height: var(--sz-32);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius);
}
.mpp-add-btn:hover { background: var(--o-h); }

/* Search input */
.mpp-search {
    padding:var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--grey-200);
    flex-shrink: 0;
}
.mpp-search input {
    width: 100%;
    padding:var(--sp-2) var(--sp-4);
    border: 1px solid var(--grey-200);
    border-radius:var(--radius);
    font-size:var(--fs-base);
    color: var(--grey-700);
    outline:none;box-shadow:var(--focus);
    box-sizing: border-box;
}
.mpp-search input:focus { border-color: var(--info); }
.mpp-search input::placeholder { color: var(--muted); font-style: italic; }

/* Scrollable body */
.mpp-body {
    flex: 1;
    overflow-y: auto;
    min-height:var(--sz-56);
}

/* Table list */
.mpp-table {
    width: 100%;
    border-collapse: collapse;
    font-size:var(--fs-base);
}
.mpp-table tbody td {
    padding:var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--grey-100);
    color: var(--grey-800);
}
.mpp-table tbody tr {
    cursor: pointer;
    transition: background var(--dur-fast);
}
/* ZEIGEN und AUSGEWÄHLT sind zwei verschiedene Zustände und müssen verschieden aussehen. Vorher trugen
   beide dieselbe blaue Fläche (--info-bg): in der Mehrfachauswahl wirkte damit jede Zeile dauerhaft
   „blau hinterlegt", Zeigen änderte nichts und eine angeklickte Zeile war nicht zu erkennen
   (Florian 12.09.2026). Jetzt: Zeigen = neutraler Grauton, Ausgewählt = Markenfarbe mit Kante links
   und fetter Schrift, Zeigen auf einer ausgewählten Zeile etwas kräftiger. */
.mpp-table tbody tr:hover { background: var(--grey-100) !important; }
/* Kante als echter Rahmen an der ersten Zelle — ein eigener box-shadow fällt im Design-Audit
   (css-shadow: nur die Kern-Skala var(--shadow-*)), und die Kern-Skala hat keinen Kantenschatten. */
.mpp-table tbody tr.mpp-selected { background: color-mix(in srgb, var(--o) 10%, transparent) !important; }
.mpp-table tbody tr.mpp-selected td:first-child { border-left: 3px solid var(--o); }
.mpp-table tbody tr.mpp-selected td { color: var(--ink); font-weight: var(--fw-bold); }
.mpp-table tbody tr.mpp-selected:hover { background: color-mix(in srgb, var(--o) 18%, transparent) !important; }

.mpp-value-cell { flex: 1; }

/* Subtitle column (optional second cell) */
.mpp-table tbody td.mpp-subtitle {
    color: var(--grey-500);
    font-size:var(--fs-sm);
    text-align: right;
    white-space: nowrap;
    max-width:var(--sz-140);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline badge (colored label next to label text) */
.mpp-inline-badge {
    display: inline-block; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
    padding:var(--sp-0) var(--sp-2); border-radius:var(--radius); line-height: 1.6;
    color: var(--surface); margin-left:var(--sp-3); vertical-align: middle;
}

/* HINTEN angestelltes Label (item.badge — z.B. Freifeld-/Lookup-Verknüpfung): rechtsbündige
   schmale letzte Zelle; neutraler Grundton, eine Datenfarbe (badge_color) überschreibt ihn. */
.mpp-tail-cell { text-align: right; white-space: nowrap; width: 1%; }
.mpp-tail-cell .mpp-inline-badge { background: var(--muted); }

/* Stacked layout: subtitle below label in same cell */
.mpp-subtitle-stacked {
    font-size:var(--fs-sm);
    color: var(--grey-500);
    margin-top:var(--sp-0);
    line-height: 1.3;
}
.mpp-subtitle-stacked .badge-type { margin-right:var(--sp-1); }
.mpp-script-desc {
    font-size:var(--fs-xs); color: var(--muted); line-height: 1.4;
    margin-bottom:var(--sp-1);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.mpp-script-badges { display: flex; flex-wrap: wrap; gap:var(--sp-1); }

/* Empty state */
.mpp-empty {
    padding:var(--sp-8) var(--sp-6);
    text-align: center;
    color: var(--muted);
    font-size:var(--fs-base);
}

/* Footer with count */
.mpp-footer {
    padding:var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--grey-200);
    font-size:var(--fs-sm);
    color: var(--grey-500);
    text-align: right;
    flex-shrink: 0;
}

/* MagePickerPlus Trigger (in modals/forms)
   Border, border-radius, padding, font-size, color, background → forms.css (global)
*/
.mpp-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    gap:var(--sp-3);
    user-select: none;
}
/* hover → forms.css (global) */
.mpp-trigger .mpp-trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpp-trigger .mpp-trigger-arrow {
    font-size:var(--fs-2xs);
    color: var(--grey-600);
    flex-shrink: 0;
}

/* =============================================
   Contact Mode — Rich contact rows in dropdown
   ============================================= */

/* Contact mode: ensure enough room for avatar + name + role */
.mpp-dropdown.mpp-contact-mode { min-width:var(--sz-380); }

/* Avatar column */
.mpp-contact-avatar { width:var(--sz-40); padding:var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-4); vertical-align: middle; }
.mpp-contact-avatar img { width:var(--sz-28); height:var(--sz-28); border-radius: 50%; object-fit: cover; display: block; }
.mpp-contact-initials {
    width:var(--sz-28); height:var(--sz-28); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size:var(--fs-xs); font-weight:var(--fw-bold); color: var(--surface);
}

/* Name + Labels column */
.mpp-contact-info { padding:var(--sp-2) var(--sp-3); vertical-align: middle; }
.mpp-contact-name { font-size:var(--fs-base); color: var(--grey-800); font-weight:var(--fw-bold); }
.mpp-contact-labels { display: flex; align-items: center; gap:var(--sp-1); margin-top:var(--sp-0); flex-wrap: wrap; }
.mpp-contact-labels + .mpp-contact-labels { margin-top:var(--sp-0); }
.mpp-contact-address { font-size:var(--fs-xs); color: var(--grey-500); margin-top:var(--sp-0); }

/* Parent org badge */
.mpp-parent-badge {
    font-size:var(--fs-2xs); padding:var(--sp-0) var(--sp-2); border-radius:var(--radius); font-weight:var(--fw-bold);
    background: var(--border); color: var(--grey-600); line-height: 1.6; white-space: nowrap;
}

/* Role column */
.mpp-contact-role {
    font-size:var(--fs-sm); color: var(--grey-600); white-space: nowrap;
    padding:var(--sp-2) var(--sp-3); vertical-align: middle;
}

/* Type badge */
.mpp-type-badge { font-size:var(--fs-2xs); padding:var(--sp-0) var(--sp-3); border-radius:var(--radius); font-weight:var(--fw-bold); }

/* Type badge colors: applied via inline style from window.__lookupColors (same as kontakte table) */

/* =============================================
   Project Mode — Project rows in dropdown
   ============================================= */

.mpp-dropdown.mpp-project-mode { min-width:var(--sz-380); }

/* Owner + Name stacked cell */
.mpp-project-info { padding:var(--sp-2) var(--sp-3); vertical-align: middle; }
.mpp-project-owner { font-size:var(--fs-xs); color: var(--grey-500); margin-bottom:var(--sp-0); }
.mpp-project-name { font-size:var(--fs-base); color: var(--grey-800); font-weight:var(--fw-med); }

/* Labels cell (type + status badges) */
.mpp-project-labels { padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-1); vertical-align: middle; white-space: nowrap; text-align: right; }
.mpp-prj-badge { font-size:var(--fs-2xs); padding:var(--sp-0) var(--sp-3); border-radius:var(--radius); font-weight:var(--fw-bold); background: var(--grey-100); color: var(--grey-700); display: inline-block; }
.mpp-prj-badge + .mpp-prj-badge { margin-left:var(--sp-1); }

/* =============================================
   Monitoring Mode — Monitoring rows in dropdown
   ============================================= */

.mpp-dropdown.mpp-monitoring-mode { min-width:var(--sz-380); }

/* Name + Description column */
.mpp-mon-info { padding:var(--sp-2) var(--sp-4); vertical-align: middle; }
.mpp-mon-name { font-size:var(--fs-base); color: var(--grey-800); font-weight:var(--fw-med); }
.mpp-mon-desc { font-size:var(--fs-xs); color: var(--grey-500); margin-top:var(--sp-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:var(--sz-240); }

/* Type label column (right-aligned) */
.mpp-mon-type { padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-1); vertical-align: middle; white-space: nowrap; text-align: right; }
.mpp-mon-badge { font-size:var(--fs-2xs); padding:var(--sp-0) var(--sp-3); border-radius:var(--radius); font-weight:var(--fw-med); }
.mpp-mon-badge-single { background: var(--info-bg); color: var(--info); }
.mpp-mon-badge-group { background: var(--warn-bg); color: var(--warn); }


/* Trigger sieht aus wie ein Formfeld (aus forms.css hierher geholt: das Design der Komponente
   gehört dem Kernmodul, das sie liefert — sonst stylen mehrere Module dieselbe Klasse). */
/* MagePickerPlus Trigger — sieht aus wie ein Formfeld */
.mpp-trigger {
    border: 1px solid var(--grey-200) !important;
    border-radius:var(--radius) !important;
    padding:var(--sp-3) var(--sp-4) !important;
    font-size:var(--fs-md) !important;
    color: var(--grey-800) !important;
    background: var(--surface) !important;
}
.mpp-trigger:hover {
    border-color: var(--muted) !important;
}