/**
 * Multi-Picklist Component Styles
 */

.multi-picklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chips area */
.mp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(91, 203, 207, 0.15);
    border: 1px solid rgba(91, 203, 207, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--primary-color, #5bcbcf);
    font-weight: 500;
    white-space: nowrap;
}

.mp-chip-remove {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.mp-chip-remove:hover {
    opacity: 1;
}

/* Input wrapper */
.mp-input-wrapper {
    position: relative;
}

.mp-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--dark-bg-tertiary, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.mp-input:focus {
    outline: none;
    border-color: var(--primary-color, #5bcbcf);
}

.mp-input::placeholder {
    color: var(--text-muted, #666);
}

/* Dropdown */
.mp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark-bg-tertiary, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.mp-dropdown.mp-visible {
    display: block;
}

.mp-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary, #a0a0b0);
    transition: background 0.15s;
}

.mp-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
}

.mp-dropdown-item.mp-selected {
    color: var(--primary-color, #5bcbcf);
    background: rgba(91, 203, 207, 0.08);
}

.mp-check {
    width: 18px;
    font-size: 0.75rem;
    text-align: center;
    flex-shrink: 0;
}

.mp-item-label {
    flex: 1;
}

.mp-dropdown-empty {
    padding: 12px 14px;
    color: var(--text-muted, #666);
    font-size: 0.85rem;
    text-align: center;
}

/* ==========================================================================
   Typed chips / dots — colour-code entity kinds (account, location,
   manufacturer, product, platform). Used e.g. by the approval "+ Add levels".
   ========================================================================== */
.mp-type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* Chips and dots take the role palette from portal-common.css (--role-*). The chip is the
   picked scope, the dot is the same scope in the legend above the picker, and both used to
   run on a private copy of the colours — `account` on amber, which is the attention status
   tone, and `location` on the pink now reserved for agencies. */
.mp-chip--platform      { background: rgba(167, 139, 250, 0.15); border-color: rgba(167, 139, 250, 0.45); color: var(--role-platform); }
.mp-chip--manufacturer  { background: rgba(96, 165, 250, 0.15);  border-color: rgba(96, 165, 250, 0.45);  color: var(--role-manufacturer); }
.mp-chip--product       { background: rgba(147, 197, 253, 0.15); border-color: rgba(147, 197, 253, 0.45); color: var(--role-product); }
.mp-chip--account       { background: rgba(45, 212, 191, 0.15);  border-color: rgba(45, 212, 191, 0.45);  color: var(--role-operator); }
.mp-chip--location      { background: rgba(94, 234, 212, 0.15);  border-color: rgba(94, 234, 212, 0.45);  color: var(--role-location); }

.mp-type-dot--platform     { background: var(--role-platform); }
.mp-type-dot--manufacturer { background: var(--role-manufacturer); }
.mp-type-dot--product      { background: var(--role-product); }
.mp-type-dot--account      { background: var(--role-operator); }
.mp-type-dot--location     { background: var(--role-location); }