/**
 * MIP — List / Search / Filter UX (MAIN + TENANTS)
 * Couche légère : clarté recherche, filtres actifs, compteur, empty vs no-result.
 * Ne réécrit pas les thèmes ni la pagination existante.
 */

:root {
    --mip-list-ux-bg: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    --mip-list-ux-border: var(--border-color, var(--border, #e2e8f0));
    --mip-list-ux-fg: var(--text, #0f172a);
    --mip-list-ux-muted: var(--text-muted, #64748b);
    --mip-list-ux-accent: var(--primary, #0d9488);
    --mip-list-ux-chip-bg: color-mix(in srgb, var(--primary, #0d9488) 12%, #fff);
    --mip-list-ux-warn-bg: color-mix(in srgb, #f59e0b 12%, #fff);
    --mip-list-ux-warn-fg: #92400e;
}

/* ---------- Search + clear ---------- */
.mip-list-ux-search {
    position: relative;
    display: block;
    min-width: 0;
    flex: 1 1 180px;
    max-width: 100%;
}
.mip-list-ux-search > input {
    width: 100%;
    box-sizing: border-box;
    padding-inline-end: 2.4rem;
}
.mip-list-ux-clear {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 0.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mip-list-ux-muted);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    z-index: 2;
}
.mip-list-ux-clear:hover,
.mip-list-ux-clear:focus-visible {
    color: var(--mip-list-ux-fg);
    background: color-mix(in srgb, var(--mip-list-ux-accent) 12%, transparent);
    outline: none;
}
.mip-list-ux-clear[hidden] {
    display: none !important;
}

/* ---------- Active filters / count ---------- */
.list-filters-bar:has(.mip-list-ux-meta),
.mip-list-filters-bar:has(.mip-list-ux-meta),
.filters-bar:has(.mip-list-ux-meta) {
    flex-wrap: wrap;
}
.mip-list-ux-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 0.55rem;
    min-width: 0;
}
.mip-list-ux-meta[hidden] {
    display: none !important;
}
.mip-list-ux-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mip-list-ux-fg);
    white-space: nowrap;
}
.mip-list-ux-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}
.mip-list-ux-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-height: 28px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mip-list-ux-accent) 28%, var(--mip-list-ux-border));
    background: var(--mip-list-ux-chip-bg);
    color: var(--mip-list-ux-fg);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;
}
.mip-list-ux-chip__k {
    color: var(--mip-list-ux-muted);
    font-weight: 600;
}
.mip-list-ux-chip__v {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}
.mip-list-ux-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--mip-list-ux-border);
    background: var(--surface, #fff);
    color: var(--mip-list-ux-fg);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.mip-list-ux-reset:hover,
.mip-list-ux-reset:focus-visible {
    border-color: var(--mip-list-ux-accent);
    outline: none;
}

/* ---------- No-result / empty / loading ---------- */
.mip-list-ux-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin: 0.65rem 0 0.35rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--mip-list-ux-border));
    background: var(--mip-list-ux-warn-bg);
    color: var(--mip-list-ux-warn-fg);
    font-size: 0.86rem;
    line-height: 1.4;
}
.mip-list-ux-banner[hidden] {
    display: none !important;
}
.mip-list-ux-banner__copy {
    min-width: 0;
    flex: 1 1 16rem;
}
.mip-list-ux-banner__title {
    font-weight: 800;
    margin: 0 0 0.15rem;
}
.mip-list-ux-banner__hint {
    margin: 0;
    opacity: 0.92;
}

[data-mip-list-state="no-result"] {
    color: var(--mip-list-ux-muted) !important;
    font-weight: 600;
}
[data-mip-list-state="empty"] {
    color: var(--mip-list-ux-muted);
}
[data-mip-list-state="loading"] {
    color: var(--mip-list-ux-accent);
}

/* ---------- Tables : overflow + actions visibles ---------- */
.table-container,
.inventory-table-wrap,
.cds-patients-table-wrap,
.mip-list-ux-surface .data-table,
.products-table-wrap {
    max-width: 100%;
}
.table-container,
.inventory-table-wrap,
.cds-patients-table-wrap {
    overflow-x: auto;
}
.data-table td:last-child,
.cds-table-pro td.actions-col,
.cds-table-pro th.actions-col,
.data-table th:last-child {
    white-space: nowrap;
}
.data-table td:last-child > div,
.data-table td:last-child .mip-drugs-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

@media (max-width: 768px) {
    .mip-list-ux-search {
        flex: 1 1 100%;
        max-width: none;
    }
    .mip-list-ux-chip__v {
        max-width: 9rem;
    }
    .mip-list-ux-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .data-table td:last-child,
    .cds-table-pro td.actions-col {
        position: sticky;
        inset-inline-end: 0;
        background: var(--surface, #fff);
        box-shadow: -6px 0 10px -8px rgba(15, 23, 42, 0.25);
        z-index: 1;
    }
    [dir="rtl"] .data-table td:last-child,
    [dir="rtl"] .cds-table-pro td.actions-col {
        box-shadow: 6px 0 10px -8px rgba(15, 23, 42, 0.25);
    }
}

[data-theme="dark"] .mip-list-ux-chip {
    background: color-mix(in srgb, var(--mip-list-ux-accent) 22%, #0f172a);
}
[data-theme="dark"] .mip-list-ux-banner {
    background: color-mix(in srgb, #f59e0b 18%, #1e293b);
    color: #fde68a;
}
[data-theme="dark"] .data-table td:last-child,
[data-theme="dark"] .cds-table-pro td.actions-col {
    background: var(--bg-panel, #1e293b);
}