/**
 * Utilitaires UI — remplacent les styles inline répétitifs
 * Dépend de design-tokens.css
 */

/* ——— Espacements ——— */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-xs { margin-bottom: var(--space-xs) !important; }
.u-mb-sm { margin-bottom: var(--space-sm) !important; }
.u-mb-md { margin-bottom: var(--space-md) !important; }
.u-mb-lg { margin-bottom: var(--space-lg) !important; }
.u-mb-xl { margin-bottom: var(--space-xl) !important; }
.u-mt-md { margin-top: var(--space-md) !important; }
.u-mt-lg { margin-top: var(--space-lg) !important; }
.u-mt-xl { margin-top: var(--space-xl) !important; }
.u-mr-sm { margin-right: var(--space-sm) !important; }
.u-mr-md { margin-right: var(--space-md) !important; }
.u-ml-sm { margin-left: var(--space-sm) !important; }
.u-ml-md { margin-left: var(--space-md) !important; }
.u-p-sm { padding: var(--space-sm) !important; }
.u-p-md { padding: var(--space-md) !important; }
.u-p-lg { padding: var(--space-lg) !important; }
.u-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.u-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }

/* ——— Flex / grid ——— */
.u-flex { display: flex !important; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-items-center { align-items: center; }
.u-items-end { align-items: flex-end; }
.u-justify-end { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-gap-xs { gap: var(--space-xs) !important; }
.u-gap-sm { gap: var(--space-sm) !important; }
.u-gap-md { gap: var(--space-md) !important; }
.u-gap-lg { gap: var(--space-lg) !important; }
.u-gap-xl { gap: var(--space-xl) !important; }
.u-gap-2xl { gap: var(--space-2xl) !important; }
.u-grid { display: grid; }
.u-grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

@media (max-width: 40rem) {
    .u-grid-2 { grid-template-columns: 1fr; }
}

/* ——— Typo / liens ——— */
.u-link-inherit {
    text-decoration: none;
    color: inherit;
}
.u-text-muted {
    color: var(--color-text-secondary);
    font-size: var(--text-body);
}
.u-text-label {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-label);
}
.u-font-medium { font-weight: var(--font-weight-medium); }
.u-w-100 { width: 100%; }
.u-relative { position: relative; }

/* ——— Cartes / alertes ——— */
.u-card {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
}
.u-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.04);
}
.u-alert-warn {
    background: #fff3cd;
    color: #856404;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid #ffeaa7;
}
.u-alert-info {
    background: #e3f2fd;
    color: #0d47a1;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: var(--border-width-thin) solid #bbdefb;
}
.u-badge {
    display: inline-block;
    padding: 0.125rem var(--space-sm);
    border-radius: var(--radius-lg);
    font-size: var(--text-label);
    font-weight: var(--font-weight-medium);
    margin-left: var(--space-sm);
}
.u-badge-success { background: var(--color-success); color: #fff; }
.u-badge-warning { background: var(--color-warning); color: #000; }

.u-scroll-y {
    max-height: 25rem;
    overflow-y: auto;
    padding-right: var(--space-sm);
}

.u-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-weight: var(--font-weight-medium);
}

.u-btn-pad {
    padding: var(--space-sm) var(--space-lg) !important;
}

.u-btn-muted {
    background: #6c757d;
    color: #fff;
    padding: var(--space-sm) var(--space-lg);
}

/* Résultats recherche AJAX (JS templates) */
.search-result-item {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--text-body);
}
.search-result-item:hover {
    background: var(--color-primary-light);
}
.search-result-empty {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-secondary);
}
.search-result-error {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-danger);
}

/* Formulaire traitement (overlay) */
.treatment-form-panel {
    background: #f7fbff;
    border: var(--border-width-thin) solid #e3eaf3;
    box-shadow: 0 0.5rem 2rem rgba(30, 41, 59, 0.1);
}
.treatment-form-panel h2,
.treatment-form-title {
    color: #1565c0;
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-medium);
}
.treatment-form-cols {
    display: flex;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}
.treatment-form-card {
    flex: 1;
    min-width: 20rem;
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
    box-shadow: 0 0.125rem 0.5rem rgba(30, 41, 59, 0.06);
    padding: var(--space-lg) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.treatment-form-card h3,
.treatment-form-card-title {
    color: #1976d2;
    font-size: var(--text-section);
    margin: var(--space-lg) 0 var(--space-md);
    border-bottom: var(--border-width-thin) solid #e3eaf3;
    padding-bottom: var(--space-xs);
    font-weight: var(--font-weight-medium);
}

.u-grid-span-2 { grid-column: 1 / -1; }
.u-flex-basis-full { flex-basis: 100%; }
.u-empty-state {
    text-align: center;
    color: var(--color-text-secondary);
    padding: var(--space-2xl) 0;
}
.u-empty-state i {
    font-size: 3em;
    opacity: 0.3;
    margin-bottom: var(--space-lg);
    display: block;
}

.ajax-dropdown-results {
    position: absolute;
    z-index: 9999;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm) rgba(0, 0, 0, 0.08);
    max-height: 13.75rem;
    overflow: auto;
    display: none;
    width: 20rem;
}

.u-timeline-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.u-timeline-dot-primary { background: var(--color-primary); }
.u-timeline-dot-muted { background: #6c757d; }
.u-timeline-dot i { font-size: 0.8em; }