/* =============================================================================
   AVAILABLE SUPPLIERS PARTIAL
   Использует токены из /css/filament/tokens.css.
   Поддерживает dark mode через класс .dark (Filament native).
   Подключается через panel assets всех трёх панелей.
   ============================================================================= */

.ps-available-suppliers {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface-default);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-5);
}

.dark .ps-available-suppliers {
    border-color: var(--color-dark-border);
    background: var(--color-dark-surface);
}

/* --- Title / subtitle --- */

.ps-available-suppliers__title {
    margin: 0;
    color: var(--color-text-default);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.dark .ps-available-suppliers__title {
    color: var(--color-dark-text);
}

.ps-available-suppliers__subtitle {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.dark .ps-available-suppliers__subtitle {
    color: var(--color-dark-text-muted);
}

/* --- Alert --- */

.ps-available-suppliers__alert {
    margin-top: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    padding: 0.75rem var(--space-4);
}

.dark .ps-available-suppliers__alert {
    border-color: var(--color-dark-amber-border);
    background: var(--color-dark-amber-bg);
    color: var(--color-dark-amber-text);
}

/* --- Chips --- */

.ps-available-suppliers__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ps-available-suppliers__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-default);
    background: var(--color-surface-subtle);
    padding: 0.3rem 0.65rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background var(--duration-fast) var(--easing-default),
                border-color var(--duration-fast) var(--easing-default);
}

.ps-available-suppliers__chip:focus-visible {
    outline: 2px solid var(--color-brand-buyer);
    outline-offset: 2px;
}

.ps-available-suppliers__chip--active {
    color: var(--color-text-default);
}

.ps-available-suppliers__chip--active:hover {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.ps-available-suppliers__chip--inactive {
    color: var(--color-text-muted);
    opacity: 0.75;
}

.ps-available-suppliers__chip--inactive:hover {
    opacity: 1;
    background: var(--color-surface-default);
}

.dark .ps-available-suppliers__chip {
    border-color: var(--color-dark-border);
    background: var(--color-dark-surface-row);
    color: var(--color-dark-text);
}

.dark .ps-available-suppliers__chip--inactive {
    color: var(--color-dark-text-muted);
}

.dark .ps-available-suppliers__chip--active:hover {
    background: var(--color-dark-green-bg);
    border-color: var(--color-dark-green-border);
}

/* --- Dot indicator --- */

.ps-available-suppliers__dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.ps-available-suppliers__chip--active .ps-available-suppliers__dot {
    background: var(--color-success-text);
}

.ps-available-suppliers__chip--inactive .ps-available-suppliers__dot {
    background: var(--color-gray-400);
}

.dark .ps-available-suppliers__chip--active .ps-available-suppliers__dot {
    background: var(--color-dark-green-text);
}

.dark .ps-available-suppliers__chip--inactive .ps-available-suppliers__dot {
    background: var(--color-dark-text-muted);
}