/* mage-combo-input.css — MageComboInput global component
 *
 * Unified combo input: optional prefix + divider + value input +
 * MagePickerPlus label dropdown + add button, with records below.
 *
 * Used by: kontakt-edit (Telefon, E-Mail, Social Media), any future combo fields.
 * Global component — defined ONCE, never duplicated in page CSS.
 */

/* ── Container ── */
.mage-multi-combo{display:flex;flex-direction:column;}

/* ── The single unified input bar — positioning context for dropdown ── */
.mage-multi-combo-input{
    display:flex;align-items:stretch;
    border:1px solid var(--grey-200);border-radius:var(--radius);
    background:var(--surface);position:relative;
    transition:border-color var(--dur-fast);
}
.mage-multi-combo-input:focus-within{border-color:var(--muted);}

/* First and last child get border-radius to round the bar without overflow:hidden */
.mage-multi-combo-input > *:first-child{border-radius:var(--radius) 0 0 2px;}
.mage-multi-combo-input > *:last-child{border-radius:0 var(--radius) var(--radius) 0;}

/* ── Country prefix (small, fixed width) ── */
.mage-multi-combo-input .mc-prefix{
    width:var(--sz-52);flex-shrink:0;
    border:none !important;border-radius:0 !important;outline:none !important;box-shadow:none !important;
    padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4) !important;font-size:var(--fs-md) !important;color:var(--grey-800) !important;
    background:transparent !important;text-align:center;
}

/* ── Thin vertical divider between sections ── */
.mage-multi-combo-input .mc-divider{
    width:1px;background:var(--grey-200);flex-shrink:0;margin:var(--sp-2) 0;
}

/* ── Value input (fills remaining space) ── */
.mage-multi-combo-input .mc-value{
    flex:1;min-width:0;
    border:none !important;border-radius:0 !important;outline:none !important;box-shadow:none !important;
    padding:var(--sp-3) var(--sp-4) !important;font-size:var(--fs-md) !important;color:var(--grey-800) !important;
    background:transparent !important;
}
.mage-multi-combo-input .mc-value::placeholder{color:var(--muted);}

/* ── Label picker container — hosts the MagePickerPlus trigger inline ── */
.mage-multi-combo-input .mc-label-trigger{
    display:flex;align-items:stretch;
    border-left:1px solid var(--grey-200);
    flex-shrink:0;
}
/* Override MagePickerPlus styles to blend into the combo input */
.mage-multi-combo-input .mc-label-trigger .mpp-wrap{
    display:flex;align-items:stretch;
    position:static;/* dropdown escapes via .mage-multi-combo-input positioning */
    width:auto;
}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger{
    border:none !important;border-radius:0 !important;box-shadow:none !important;
    padding:0 var(--sp-5) !important;font-size:var(--fs-base) !important;font-weight:var(--fw-med) !important;
    color:var(--grey-600) !important;background:transparent !important;
    display:flex !important;align-items:center !important;gap:var(--sp-1) !important;
    white-space:nowrap;cursor:pointer;min-width:auto;width:auto !important;
    transition:background var(--dur-fast);
}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger:hover{background:var(--grey-100) !important;}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger-arrow{font-size:var(--fs-2xs);color:var(--muted);}
.mage-multi-combo-input .mc-label-trigger .mpp-trigger-text{font-size:var(--fs-base);}
/* Dropdown: position relative to .mage-multi-combo-input, allow wider than trigger */
.mage-multi-combo-input .mc-label-trigger .mpp-dropdown{
    position:absolute;right:0;left:auto;
    min-width:var(--sz-260);width:auto;
}

/* ── Add button — gray toolbar style, rounded right side ── */
.mage-multi-combo-input .mc-btn-add{
    display:flex;align-items:center;justify-content:center;
    width:var(--sz-36);flex-shrink:0;
    border:none;border-left:1px solid var(--grey-200);
    background:var(--grey-100);color:var(--grey-600);
    font-size:var(--fs-md);cursor:pointer;
    transition:all var(--dur-fast);padding:0;
}
.mage-multi-combo-input .mc-btn-add:hover{background:var(--grey-200);color:var(--grey-700);}
.mage-multi-combo-input .mc-btn-add i{font-size:var(--fs-lg);line-height:1;}

/* ── Records list (with gap below input) ── */
.mage-multi-combo-records{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);}

/* ── Single record row ── */
.mage-multi-combo-record{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--sp-2) var(--sp-5);
    border:1px solid var(--grey-100);border-radius:var(--radius);
    background:var(--grey-50);font-size:var(--fs-base);
    transition:background var(--dur-fast);
}
.mage-multi-combo-record:hover{background:var(--info-bg);}
.mage-multi-combo-record .mc-rec-value{font-weight:var(--fw-bold);color:var(--grey-800);}
.mage-multi-combo-record .mc-rec-label{font-size:var(--fs-xs);color:var(--grey-500);margin-left:var(--sp-3);background:var(--grey-100);padding:var(--sp-0) var(--sp-3);border-radius:var(--radius);}
.mage-multi-combo-record .mc-rec-star{cursor:pointer;font-size:var(--fs-lg);color:var(--grey-300);transition:color var(--dur-fast);flex-shrink:0;}
.mage-multi-combo-record .mc-rec-star.is-primary{color:var(--warn);}
.mage-multi-combo-record .mc-rec-delete{display:flex;align-items:center;justify-content:center;width:var(--sz-36);flex-shrink:0;border:none;border-left:1px solid var(--grey-100);background:var(--grey-100);color:var(--muted);font-size:var(--fs-md);cursor:pointer;padding:0;margin:calc(-1 * var(--sp-2)) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-2)) 0;border-radius:0 var(--radius) var(--radius) 0;align-self:stretch;transition:all var(--dur-fast);}
.mage-multi-combo-record .mc-rec-delete:hover{background:var(--grey-200);color:var(--grey-600);}

/* ── Empty state ── */
.mage-multi-combo-empty{padding:var(--sp-4);text-align:center;color:var(--grey-500);font-size:var(--fs-sm);border:1px dashed var(--grey-200);border-radius:var(--radius);margin-top:var(--sp-3);}

/* Datensatz-Zeile: Layout (früher als inline cssText im JS gesetzt). */
.mc-rec-left{flex:1;display:flex;align-items:center}
.mc-rec-right{display:flex;align-items:center;gap:var(--sp-2)}