/* =====================================================================
   DASH_ALTA – système de design commun (mobile-first)
   Chargé après app.css. Les sélecteurs "html body …" servent à passer
   devant les <style> propres à chaque page sans généraliser !important.
   Ordre : jetons → base → composants → états → tablette → ordinateur.
   ===================================================================== */

/* Jetons : voir tokens.css (source unique, chargé avant ce fichier). */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body {
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html body { background: var(--background); color: var(--text-primary); overflow-x: hidden; line-height: 1.5; }
h1, h2, h3, h4 { letter-spacing: -.01em; }
img, svg, video, canvas { max-width: 100%; }
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .45) transparent; }

.layout-content > * { min-width: 0; }
.e-grid, .e-chart, .e-accumulationchart, .e-card, .e-control-wrapper { max-width: 100%; }

/* ---------- Animations ---------- */
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

.layout-content > * { animation: ui-fade-in var(--ui-med) ease both; }

/* ---------- Accessibilité ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; border-radius: var(--ui-radius-sm); }
h1:focus { outline: none; }

/* ---------- Boutons ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ui-ctl); padding: 0 14px; border-radius: var(--ui-radius-sm);
    border: 1px solid transparent; font: inherit; font-weight: 600; font-size: var(--ui-fs); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ui-btn-primary { background: var(--ui-solid); color: #fff; }
.ui-btn-primary:hover { background: var(--ui-primary-hover); color: #fff; }
.ui-btn-secondary { background: var(--ui-card); color: var(--ui-text); border-color: var(--ui-border); }
.ui-btn-secondary:hover { border-color: var(--ui-border-strong); background: var(--ui-card-2); color: var(--ui-text); }
.ui-btn-ghost { background: transparent; color: var(--ui-text); border-color: var(--ui-border); }
.ui-btn-ghost:hover { background: var(--ui-primary-soft); color: var(--ui-text); }
.ui-btn-quiet { background: transparent; color: var(--ui-muted); }
.ui-btn-quiet:hover { background: var(--ui-seg); color: var(--ui-text); }
.ui-btn-danger { background: var(--ui-err-bg); color: var(--ui-err-text); }
.ui-btn-sm { min-height: 32px; padding: 0 10px; font-size: var(--ui-fs-sm); }
.ui-btn-icon { width: var(--ui-ctl); padding: 0; }
@media (pointer: coarse) { .ui-btn { min-height: var(--ui-tap); } .ui-btn-sm { min-height: 36px; } .ui-btn-icon { width: var(--ui-tap); } }

html body button, html body .btn, html body .e-btn, html body .ui-btn, html body [class*="btn-alta"],
html body .btn-export, html body .btn-clear, html body .page-btn, html body .btn-detail {
    transition: transform var(--ui-fast) var(--ui-ease), box-shadow var(--ui-fast) var(--ui-ease),
                background-color var(--ui-fast) ease, border-color var(--ui-fast) ease, color var(--ui-fast) ease, opacity var(--ui-fast) ease;
}
html body button:not(:disabled):active, html body .btn:not(:disabled):active, html body .e-btn:not(:disabled):active { transform: scale(.97); }
html body button:disabled, html body .btn:disabled { cursor: not-allowed; opacity: .55; }

/* Boutons de page : couleur principale unifiée, cibles tactiles */
html body .btn-alta, html body .btn-alta-primary, html body .btn-alta-secondary, html body .btn-export, html body .btn-clear,
html body .btn-detail, html body .btn-icon-toggle { min-height: var(--ui-tap); border-radius: var(--ui-radius-sm); font-family: inherit; }
html body .btn-alta-primary, html body .btn-primary:not(.e-btn), html body .btn-export, html body .btn-alta.btn-primary, html body .page-btn.active { background: var(--ui-solid); border-color: var(--ui-solid); color: #fff; }

/* ---------- Cartes ---------- */
html body .card, html body .card-grid, html body .alta-mini-card, html body .alta-chart-card,
html body .alta-main-card-table, html body .livreur-card, html body .kpi-card {
    background: var(--ui-card);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
    transition: border-color var(--ui-fast) ease, background-color var(--ui-med) ease;
}

/* ---------- Champs ---------- */
html body .form-control, html body .alta-input-search, html body .alta-date-input, html body .alta-select-compact, html body .search-input,
html body .e-input-group, html body .e-input-group.e-control-wrapper, html body select {
    min-height: var(--ui-tap); border-radius: var(--ui-radius-sm); font-family: inherit; font-size: 16px;
    transition: border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease, background-color var(--ui-fast) ease;
}
html body input.e-input, html body .e-input-group input.e-input { font-size: 16px; }
html body .form-control:focus, html body .alta-input-search:focus, html body .alta-date-input:focus, html body .search-input:focus,
html body .e-input-group.e-input-focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }

html body input[type="date"], html body input[type="month"] { background: var(--ui-input); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: 0 12px; font-family: inherit; }
html body.dark { color-scheme: dark; }

/* ---------- En-têtes de page ---------- */
html body .alta-topbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.25rem; }
html body .alta-topbar-actions, html body .filters-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
html body .alta-topbar-actions > *, html body .filters-actions > * { flex: 1 1 auto; justify-content: center; }
html body .alta-title-section h1{ font-size: clamp(1.3rem, 5.5vw, 1.75rem); font-weight: 700; margin: 0; }
html body .filters-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

/* ---------- Statistiques / KPI : 2 colonnes sur téléphone ---------- */
html body .alta-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 1.25rem; }
html body .alta-charts-row, html body .livreurs-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
html body .livreur-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .alta-mcard-value { font-size: 20px; }
@media (max-width: 767.98px) { html body .kpi-row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; } }
html body .kpi-card { height: auto; padding: 14px; }
html body .kpi-card .kpi-value { font-size: 1.3rem; }

@media (max-width: 767.98px) {
    html body .row.g-4 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    html body .kpi-card .kpi-label { font-size: 11px; gap: 6px !important; }
}

/* Pages "alta-*" : le conteneur de page ne double plus les marges de la coque */
html body .alta-page { padding: 0; min-height: 0; background: transparent; font-family: inherit; min-width: 0; }
html body .alta-page .btn-secondary, html body .alta-page .btn-detail { color: var(--ui-text); }
html body .alta-page button[style*="alta-purple-light"] { color: var(--ui-primary) !important; }
html body .input-search, html body .search-input, html body .alta-input-search {
    color: var(--ui-text); background: var(--ui-input); border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm); width: 100%; min-width: 0; box-sizing: border-box;
}
html body .search-wrapper { position: relative; flex: 1 1 180px; min-width: 0; }
html body .alta-filter-container > div, html body .alta-filter-bar > div { min-width: 0; flex-wrap: wrap; }

/* ---------- Filtres, onglets, pagination ---------- */
html body .alta-filter-container, html body .alta-filter-bar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
html body .alta-search-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
html body .alta-search-wrapper { flex: 1 1 100%; width: 100%; }
html body .alta-tabs { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
html body .alta-tabs::-webkit-scrollbar { display: none; }
html body .alta-tab { white-space: nowrap; flex: 0 0 auto; min-height: var(--ui-tap); }
html body .alta-table-footer { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
html body .alta-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
html body .page-btn { min-width: var(--ui-tap); min-height: var(--ui-tap); border-radius: var(--ui-radius-sm); }

/* ---------- Grilles Syncfusion ---------- */
html body .e-grid { border-radius: var(--ui-radius); overflow: hidden; font-family: var(--ui-font); }
html body .e-grid .e-headercell, html body .e-grid .e-rowcell, html body .e-grid .e-summarycell { padding: 8px 10px; font-size: 12.5px; white-space: normal; word-break: break-word; }
html body .e-grid .e-headercell .e-headertext { white-space: normal; font-weight: 600; }
html body .e-grid .e-row, html body .e-grid .e-rowcell { transition: background-color var(--ui-fast) ease; }
html body .e-grid .e-toolbar, html body .e-grid .e-toolbar .e-toolbar-items { flex-wrap: wrap; height: auto; min-height: 40px; }
html body .e-grid .e-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
html body .e-grid .e-pager .e-pagerexternalmsg, html body .e-grid .e-pager .e-parentmsgbar { display: none; }
html body .e-chart, html body .e-accumulationchart { width: 100% !important; }

/* ---------- Tableaux HTML : cartes empilées par défaut (mobile) ---------- */
html body .alta-data-table, html body .detail-table, html body .pr-table { width: 100%; border-collapse: collapse; }
html body .rc-table, html body .rc-table thead, html body .rc-table tbody, html body .rc-table tr, html body .rc-table td { display: block; width: 100%; box-sizing: border-box; }
html body .rc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html body .rc-table tbody tr {
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-card);
    padding: 6px 14px; margin-bottom: 12px; box-shadow: var(--ui-shadow-sm);
}
html body .rc-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 9px 0 !important; text-align: right; min-width: 0;
    border-bottom: 1px dashed var(--ui-border) !important;
}
html body .rc-table td:last-child { border-bottom: none !important; }
html body .rc-table td::before {
    content: attr(data-label); flex: 0 0 38%; text-align: left;
    font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-muted);
}
html body .rc-table td[colspan] { display: block; text-align: center; }
html body .rc-table td[colspan]::before { content: none; }
html body .rc-table td:empty { display: none; }

/* ---------- Badges ---------- */
html body [class*="badge-"] { white-space: nowrap; }

/* ---------- États : chargement / vide / erreur ---------- */
.app-loading { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; font-family: var(--ui-font); color: #64748b; animation: ui-fade-in var(--ui-med) ease both; }
.app-loading .spinner-ring, .ui-spinner { width: 36px; height: 36px; border: 3px solid rgba(100, 116, 139, .25); border-top-color: var(--ui-primary); border-radius: 50%; animation: ui-spin .8s linear infinite; }

.ui-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
    padding: 36px 20px; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-card); color: var(--ui-muted);
    animation: ui-fade-in var(--ui-med) ease both;
}
.ui-state.is-compact { padding: 18px 14px; }
.ui-state-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-state-body strong { display: block; color: var(--ui-text); font-weight: 600; }
.ui-state-body p { margin: 4px 0 0; font-size: 13.5px; max-width: 42ch; }
.ui-state-error { border-style: solid; border-color: rgba(220, 38, 38, .35); }
.ui-state-error .ui-state-icon { background: rgba(220, 38, 38, .12); color: var(--ui-danger); }
.ui-state-loading { flex-direction: row; justify-content: center; border-style: solid; }

.ui-notice {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin: 0 0 14px;
    border-radius: var(--ui-radius-sm); border: 1px solid transparent; font-size: 14px; animation: ui-fade-up var(--ui-med) var(--ui-ease) both;
}
.ui-notice-text { flex: 1 1 200px; }
.ui-notice-close { border: 0; background: transparent; color: inherit; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; opacity: .7; }
.ui-notice-close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.ui-notice-error   { background: var(--ui-err-bg);  color: var(--ui-err-text); }
.ui-notice-warning { background: var(--ui-warn-bg); color: var(--ui-warn-text); }
.ui-notice-success { background: var(--ui-ok-bg);   color: var(--ui-ok-text); }
.ui-notice-info    { background: var(--ui-info-bg); color: var(--ui-info-text); }

.ui-skeleton { position: relative; overflow: hidden; background: rgba(148, 163, 184, .22); border-radius: var(--ui-radius-sm); min-height: 16px; }
.ui-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: ui-shimmer 1.3s infinite; }

/* Erreur de page (boundary) */
.ui-crash { min-height: 60vh; display: grid; place-items: center; padding: 16px; }
.ui-crash-card { max-width: 460px; text-align: center; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); padding: 32px 24px; box-shadow: var(--ui-shadow); }
.ui-crash-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 30px; background: rgba(220, 38, 38, .12); color: var(--ui-danger); margin-bottom: 12px; }
.ui-crash-card h2 { font-size: 1.2rem; margin: 0 0 8px; }
.ui-crash-card p { color: var(--ui-muted); font-size: 14px; margin: 0 0 20px; }
.ui-crash-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Erreur Blazor non gérée : bandeau discret, texte français, aucun détail technique */
#blazor-error-ui {
    display: none; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5000;
    padding: 12px 44px 12px 16px; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg);
    background: var(--ui-card, #fff); color: var(--ui-text, #0f172a); border: 1px solid rgba(220, 38, 38, .35); border-left: 4px solid var(--ui-danger);
    font-family: var(--ui-font); font-size: 14px; width: auto;
}
#blazor-error-ui .reload { color: var(--ui-primary); font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss { right: 14px; top: 10px; opacity: .6; }
#blazor-error-ui .dismiss:hover { opacity: 1; }
.blazor-error-boundary { background: rgba(220, 38, 38, .1) !important; color: var(--ui-danger); border-radius: var(--ui-radius); padding: 1rem !important; }
.blazor-error-boundary::before { content: none !important; }
.blazor-error-boundary::after { content: "Une erreur est survenue sur cette partie de la page." !important; }

/* Fenêtres modales maison : feuille plein écran en bas sur téléphone */
html body .alta-modal-overlay { align-items: flex-end; padding: 0; }
html body .alta-modal { max-width: 100%; max-height: 92dvh; border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; padding: 1.1rem; animation: ui-fade-up var(--ui-med) var(--ui-ease) both; }
@media (min-width: 768px) {
    html body .alta-modal-overlay { align-items: center; padding: 1rem; }
    html body .alta-modal { max-width: 860px; max-height: 88vh; border-radius: var(--ui-radius-lg); padding: 1.5rem; }
}

/* ---------- Dialogues ---------- */
html body .e-dialog { max-width: 96vw; border-radius: var(--ui-radius-lg); }
html body .e-dialog.e-popup-open { animation: ui-fade-up var(--ui-med) var(--ui-ease) both; }

/* =====================================================================
   TABLETTE  (≥ 768 px)
   ===================================================================== */
@media (min-width: 768px) {
    :root { --ui-page-pad: 22px; }

    html body .alta-topbar { flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
    html body .alta-topbar-actions, html body .filters-actions { width: auto; }
    html body .alta-topbar-actions > *, html body .filters-actions > * { flex: 0 0 auto; }
    html body .filters-header { flex-direction: row; align-items: center; justify-content: space-between; }

    html body .alta-stats-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
    html body .alta-mcard-value { font-size: 24px; }
    html body .livreurs-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    html body .livreur-stats { grid-template-columns: 1fr 1fr 1fr auto; }
    html body .kpi-card { padding: 20px; }
    html body .kpi-card .kpi-value { font-size: 1.6rem; }

    html body .alta-filter-container, html body .alta-filter-bar { flex-direction: row; align-items: center; justify-content: space-between; }
    html body .alta-search-actions { width: auto; flex-wrap: nowrap; }
    html body .alta-search-wrapper { flex: 0 1 280px; width: auto; }
    html body .input-search, html body .search-input { width: 280px; }
    html body .alta-table-footer { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }

    html body .e-grid .e-headercell, html body .e-grid .e-rowcell, html body .e-grid .e-summarycell { padding: 10px 14px; font-size: 13.5px; }
    html body .e-grid .e-pager .e-pagerexternalmsg, html body .e-grid .e-pager .e-parentmsgbar { display: inline-block; }

    /* Tableaux HTML : vrai tableau */
    html body .rc-table { display: table; }
    html body .rc-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
    html body .rc-table tbody { display: table-row-group; }
    html body .rc-table tr { display: table-row; width: auto; }
    html body .rc-table tbody tr { border: 0; border-radius: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
    html body .rc-table td, html body .rc-table th { display: table-cell; width: auto; text-align: left; padding: 12px 14px !important; border-bottom: 1px solid var(--ui-border) !important; }
    html body .rc-table td::before { content: none; }
    html body .rc-table td[colspan] { display: table-cell; text-align: center; }
    html body .rc-table td:empty { display: table-cell; }
    html body .rc-table tbody tr { transition: background-color var(--ui-fast) ease; }
}

@media (min-width: 768px) and (hover: hover) {
    html body .rc-table tbody tr:hover { background: var(--ui-primary-soft); }
}

/* =====================================================================
   ORDINATEUR  (≥ 992 px)
   ===================================================================== */
@media (min-width: 992px) {
    :root { --ui-page-pad: 28px; }
    html body .alta-charts-row { grid-template-columns: 1fr 1.2fr 1fr; gap: 1.25rem; }
    html body .alta-mcard-value { font-size: 26px; }
    html body .form-control, html body .alta-input-search, html body .alta-date-input, html body .alta-select-compact, html body .search-input,
    html body .e-input-group, html body select { min-height: 40px; font-size: 14px; }
    html body input.e-input, html body .e-input-group input.e-input { font-size: 14px; }
}
@media (min-width: 1600px) {
    .layout-content > * { max-width: 1680px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 340px) {
    html body .alta-stats-row { grid-template-columns: 1fr; }
    html body .kpi-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* Connexion : sur mobile, le formulaire passe avant la présentation */

/* =====================================================================
   Réglage système « réduire les animations »
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .app-loading .spinner-ring, .ui-spinner { animation: ui-spin 2.4s linear infinite !important; }
}

/* =====================================================================
   LOGO
   ===================================================================== */
.brand-link { display: inline-flex; align-items: center; flex: 1; min-width: 0; text-decoration: none; }
.brand-logo { display: block; height: 18px; width: auto; user-select: none; }
.brand-logo-dark { display: none; }
html body.dark .brand-logo-light { display: none; }
html body.dark .brand-logo-dark { display: block; }

/* =====================================================================
   TOASTS
   ===================================================================== */
.ui-toasts {
    position: fixed; z-index: 6000; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
}
.ui-toast {
    pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--ui-card, #fff); color: var(--ui-text, #0f172a);
    border: 1px solid var(--ui-border, #e2e8f0); border-left-width: 4px; border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg); font-size: 14px; animation: ui-toast-in var(--ui-med) var(--ui-ease) both;
}
.ui-toast > i:first-child { font-size: 18px; flex: 0 0 auto; }
.ui-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-toast-action { border: 0; background: var(--ui-primary-soft); color: var(--ui-primary); font-weight: 600; border-radius: 8px; padding: 6px 12px; min-height: 34px; cursor: pointer; }
.ui-toast-action:hover { filter: brightness(1.1); }
.ui-toast-close { border: 0; background: transparent; color: var(--ui-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.ui-toast-close:hover { background: var(--ui-primary-soft); }
.ui-toast-success { border-left-color: var(--ui-success); } .ui-toast-success > i:first-child { color: var(--ui-success); }
.ui-toast-error   { border-left-color: var(--ui-danger); }  .ui-toast-error > i:first-child   { color: var(--ui-danger); }
.ui-toast-warning { border-left-color: var(--ui-warning); } .ui-toast-warning > i:first-child { color: var(--ui-warning); }
.ui-toast-info    { border-left-color: var(--ui-info); }    .ui-toast-info > i:first-child    { color: var(--ui-info); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .ui-toasts { left: auto; right: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px)); } }

/* Barre de progression fine (recherche en cours) */
.ui-progress { position: relative; height: 3px; margin-top: 14px; border-radius: 3px; overflow: hidden; background: var(--ui-primary-soft); }
.ui-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: var(--ui-primary); animation: ui-indeterminate 1s ease-in-out infinite; }
@keyframes ui-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* =====================================================================
   PAGES ARTICLES / INGRÉDIENTS
   ===================================================================== */
.art-filters .filters-header { align-items: center; }
.art-count { font-size: 13px; color: var(--ui-muted); font-weight: 500; }
.art-filter-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.art-field label { display: block; font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-muted); margin-bottom: 6px; }
.art-combo { display: flex; align-items: stretch; gap: 8px; }
.art-combo > :first-child { flex: 1 1 auto; min-width: 0; }
.art-combo .btn-clear { flex: 0 0 auto; width: var(--ui-tap); min-height: var(--ui-tap); padding: 0; display: inline-grid; place-items: center; }
html body .btn-clear { background: var(--ui-input); color: var(--ui-muted); border: 1px solid var(--ui-border); }
html body .btn-clear:hover { color: var(--ui-danger); border-color: var(--ui-danger); background: var(--ui-input); }

.art-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.art-results-head .card-title { margin: 0; }
.art-hint { font-size: 12.5px; color: var(--ui-muted); }
.art-skeletons { display: grid; gap: 10px; }
.art-skeleton { height: 64px; }
.is-busy { opacity: .55; transition: opacity var(--ui-fast) ease; pointer-events: none; }

.art-only-desktop { display: none; }
.art-only-mobile { display: block; }
@media (min-width: 768px) { .art-filter-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; } }
/* La grille n'apparaît que lorsqu'elle tient sans défilement horizontal (menu fixe + 9 colonnes) ; sinon : cartes. */
@media (min-width: 1280px) {
    .art-only-desktop { display: block; }
    .art-only-mobile { display: none; }
}
.art-cat { display: flex; flex-direction: column; line-height: 1.3; }
.art-sub { font-size: 12px; color: var(--ui-muted); opacity: .85; }

.art-name { font-weight: 600; color: var(--ui-text); }
.art-id { color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.art-fam { color: var(--ui-muted); }
.price-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; }
.price-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.price-val.is-empty, .art-price-value.is-empty { color: var(--ui-muted); font-weight: 400; }

.avail-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.avail-pill.is-on  { background: rgba(22, 163, 74, .14); color: #15803d; }
.avail-pill.is-off { background: rgba(220, 38, 38, .12); color: #b91c1c; }
body.dark .avail-pill.is-on  { background: rgba(34, 197, 94, .16); color: #86efac; }
body.dark .avail-pill.is-off { background: rgba(248, 113, 113, .16); color: #fca5a5; }

.art-cards { display: grid; gap: 12px; }
.art-card { background: var(--ui-input); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: 14px; animation: ui-fade-up var(--ui-med) var(--ui-ease) both; }
.art-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.art-card-title { min-width: 0; }
.art-card-title h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ui-text); overflow-wrap: anywhere; }
.art-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ui-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.art-meta i { font-size: 10px; }
.art-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.art-price { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ui-card); border: 1px solid var(--ui-border); }
.art-price-label { font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-muted); }
.art-price-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-text); }
.art-more { width: 100%; margin-top: 12px; }

/* Fenêtre de demande de prix */

html body .art-filters { display: block; }
html body .art-filters .filters-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
html body .art-filters .filters-header h2 { font-size: 17px; }
html body .art-filters .e-input-group, html body .art-filters .e-control-wrapper { width: 100%; }

/* =====================================================================
   COMPOSANTS SYNCFUSION : habillage unique clair / sombre
   (les couleurs viennent des variables --ui-* définies plus haut)
   ===================================================================== */

/* Champs (texte, date, liste déroulante, numérique) */
html body .e-input-group, html body .e-input-group.e-control-wrapper, html body .e-float-input,
html body .e-float-input.e-control-wrapper, html body .e-ddl.e-input-group {
    background: var(--ui-input) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important;
}
html body .e-input-group input.e-input, html body .e-input-group .e-input, html body input.e-input, html body textarea.e-input,
html body .e-float-input input, html body .e-float-input textarea {
    background: transparent !important; color: var(--ui-text) !important; caret-color: var(--ui-text);
}
html body .e-input-group input.e-input::placeholder, html body .e-input::placeholder { color: var(--ui-muted) !important; opacity: .85; }
html body .e-input-group .e-input-group-icon, html body .e-input-group .e-icons { color: var(--ui-muted) !important; background: transparent !important; }
html body .e-input-group.e-disabled, html body .e-input-group.e-control-wrapper.e-disabled { opacity: .55; }
html body .e-input-group:not(.e-disabled):hover { border-color: var(--ui-primary) !important; }
html body .e-input-group.e-input-focus { border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px var(--ui-primary-soft); }

/* Listes déroulantes, calendriers, fenêtres */
html body .e-popup, html body .e-ddl.e-popup, html body .e-calendar, html body .e-dropdownbase, html body .e-dialog,
html body .e-dialog .e-dlg-header-content, html body .e-dialog .e-footer-content, html body .e-datepicker.e-popup-wrapper {
    background: var(--ui-card) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important;
}
html body .e-popup .e-list-item, html body .e-dropdownbase .e-list-item { color: var(--ui-text) !important; background: transparent; }
html body .e-popup .e-list-item:hover, html body .e-dropdownbase .e-list-item.e-hover { background: var(--ui-hover) !important; }
html body .e-popup .e-list-item.e-active, html body .e-dropdownbase .e-list-item.e-active { background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; }
html body .e-calendar .e-header, html body .e-calendar .e-content, html body .e-calendar .e-footer-container, html body .e-calendar table td,
html body .e-calendar .e-title, html body .e-calendar .e-day { color: var(--ui-text) !important; background: transparent !important; }
html body .e-calendar td.e-selected span.e-day, html body .e-calendar td.e-today span.e-day { background: var(--ui-primary) !important; color: #fff !important; }
html body .e-calendar td.e-other-month span.e-day, html body .e-calendar td.e-disabled span.e-day { color: var(--ui-muted) !important; opacity: .6; }
html body .e-calendar .e-header .e-day.e-title, html body .e-calendar .e-header .e-icon-container .e-btn { color: var(--ui-text) !important; background: transparent !important; }

/* Grilles de données */
html body .e-grid, html body .e-grid .e-gridcontent, html body .e-grid .e-content, html body .e-grid .e-table, html body .e-grid .e-gridheader,
html body .e-grid .e-toolbar, html body .e-grid .e-toolbar .e-toolbar-items, html body .e-grid .e-pager, html body .e-grid .e-summarycontent {
    background: var(--ui-card) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important;
}
html body .e-grid .e-headercell, html body .e-grid .e-gridheader .e-headercontent, html body .e-grid .e-columnheader {
    background: var(--ui-head-bg) !important; color: var(--ui-head-text) !important; border-color: var(--ui-border) !important;
}
html body .e-grid .e-headercell .e-headertext, html body .e-grid .e-headercell .e-sortfilterdiv, html body .e-grid .e-headercell .e-icons { color: var(--ui-head-text) !important; }
html body .e-grid .e-headercell .e-headertext { font-size: var(--ui-fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0; }
html body .e-grid td.e-rowcell, html body .e-grid .e-row, html body .e-grid .e-summarycell { background: transparent !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html body .e-grid .e-altrow td.e-rowcell { background: var(--ui-row-alt) !important; }
html body .e-grid .e-row:hover td.e-rowcell { background: var(--ui-hover) !important; }
html body .e-grid .e-rowcell * { color: inherit; }
html body .e-grid .e-rowcell .art-fam, html body .e-grid .e-rowcell .art-id, html body .e-grid .e-rowcell .price-val.is-empty { color: var(--ui-muted) !important; }
html body .e-grid .e-rowcell .avail-pill.is-on { color: #15803d !important; } html body.dark .e-grid .e-rowcell .avail-pill.is-on { color: #86efac !important; }
html body .e-grid .e-rowcell .avail-pill.is-off { color: #b91c1c !important; } html body.dark .e-grid .e-rowcell .avail-pill.is-off { color: #fca5a5 !important; }
html body .e-grid .e-emptyrow td { color: var(--ui-muted) !important; }
html body .e-grid .e-toolbar .e-tbar-btn, html body .e-grid .e-toolbar .e-btn { background: transparent !important; color: var(--ui-text) !important; }
html body .e-grid .e-toolbar .e-tbar-btn:hover { background: var(--ui-hover) !important; }
html body .e-grid .e-toolbar .e-tbar-btn-text, html body .e-grid .e-toolbar .e-icons { color: var(--ui-text) !important; }

/* Pagination */
html body .e-pager { background: var(--ui-card) !important; }
html body .e-pager div.e-icons, html body .e-pager .e-numericitem, html body .e-pager .e-pagercontainer .e-numericitem { color: var(--ui-text) !important; background: transparent !important; border-radius: 8px; }
html body .e-pager .e-currentitem, html body .e-pager .e-currentitem:hover { background: var(--ui-solid) !important; color: #fff !important; }
html body .e-pager .e-numericitem:hover:not(.e-currentitem), html body .e-pager div.e-icons:hover { background: var(--ui-hover) !important; }
html body .e-pager .e-pagerexternalmsg, html body .e-pager .e-pagenomsg { color: var(--ui-muted) !important; }
html body .e-pager .e-disable, html body .e-pager .e-disable:hover { opacity: .4; }

/* Squelettes de chargement */
html body .e-skeleton { background-color: rgba(148, 163, 184, .22) !important; border-radius: var(--ui-radius-sm); }
html body.dark .e-skeleton { background-color: rgba(148, 163, 184, .14) !important; }
html body.dark .e-skeleton.e-shimmer-wave::after, html body.dark .e-skeleton .e-shimmer-wave { opacity: .25; }

/* Boutons Syncfusion et infobulles */
html body .e-btn.e-primary, html body .e-btn.e-info { background: var(--ui-solid); border-color: var(--ui-solid); color: #fff; }
html body .e-tooltip-wrap { background: var(--ui-card) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html body .e-tooltip-wrap .e-tip-content { color: var(--ui-text) !important; }

/* Graphiques : textes et grilles lisibles en sombre */
html body.dark .e-chart text, html body.dark .e-accumulationchart text, html body.dark .e-sparkline text { fill: var(--ui-text) !important; }
html body.dark .e-chart .e-axis-line, html body.dark .e-chart [id$="MajorGridLine"], html body.dark .e-chart path[id*="MajorGridLines"] { stroke: var(--ui-border) !important; }
html body.dark .e-chart svg, html body.dark .e-accumulationchart svg { background: transparent !important; }
html body.dark [id$="_ChartBorder"], html body.dark [id$="_ChartAreaBorder"], html body.dark [id$="_ChartBackground"] { fill: transparent !important; }

/* Éléments HTML génériques en mode sombre */
html body.dark input:not([type="checkbox"]):not([type="radio"]), html body.dark select, html body.dark textarea {
    background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border);
}
html body.dark .form-control { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html body.dark .form-control::placeholder { color: var(--ui-muted); }
html body.dark .form-control:disabled, html body.dark .form-control[readonly] { background: rgba(255, 255, 255, .04); color: var(--ui-muted); }
html body.dark label, html body.dark .form-group label { color: var(--ui-muted); }
html body.dark hr { border-color: var(--ui-border); opacity: 1; }
html body.dark a:not(.nav-item):not(.ui-btn):not(.brand-link) { color: var(--ui-primary); }
html body.dark .text-muted, html body.dark small { color: var(--ui-muted) !important; }
html body.dark .card-title, html body.dark .card h2, html body.dark .card h3, html body.dark h1, html body.dark h2, html body.dark h3 { color: var(--ui-text); }
html body.dark .btn-light, html body.dark .btn-outline-secondary { background: var(--ui-input); color: var(--ui-text); border-color: var(--ui-border); }
html body.dark .btn-clear { background: var(--ui-input); }
html body.dark .empty-state, html body.dark .detail-empty { color: var(--ui-muted); }
html body.dark .table, html body.dark table { color: var(--ui-text); }
html body.dark .alta-modal{ background: var(--ui-card); color: var(--ui-text); }

/* =====================================================================
   FENÊTRE MODALE + FORMULAIRES (réutilisables)
   ===================================================================== */
.ui-modal-backdrop {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(2, 6, 23, .6); backdrop-filter: blur(3px); animation: ui-fade-in var(--ui-fast) ease both;
}
.ui-modal {
    width: 100%; max-height: 94dvh; display: flex; flex-direction: column; outline: none;
    background: var(--ui-card); color: var(--ui-text); border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; box-shadow: var(--ui-shadow-lg);
    animation: ui-sheet-in var(--ui-med) var(--ui-ease) both;
}
@keyframes ui-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ui-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--ui-border); }
.ui-modal-title h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.ui-modal-title p { margin: 4px 0 0; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-modal-x { color: var(--ui-muted); flex: 0 0 auto; margin: -6px -6px 0 0; }
.ui-modal-x:hover { background: var(--ui-primary-soft); }
.ui-modal-body { padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.ui-modal-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-border); background: var(--ui-card);
}
.ui-modal-actions { display: flex; gap: 10px; margin-left: auto; width: 100%; }
.ui-modal-actions .ui-btn { flex: 1 1 0; }
.ui-foot-count { font-size: 12.5px; }
@media (min-width: 640px) {
    .ui-modal-backdrop { align-items: center; padding: 20px; }
    .ui-modal { width: min(620px, 100%); border-radius: var(--ui-radius-lg); }
    .ui-modal-actions { width: auto; }
    .ui-modal-actions .ui-btn { flex: 0 0 auto; min-width: 130px; }
}

.ui-form-section { margin-bottom: 18px; }
.ui-form-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text); }
.ui-form-section h4 i { color: var(--ui-primary); font-size: 15px; }
.ui-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ui-form-grid { grid-template-columns: 1fr 1fr; } .ui-form-grid.ui-grid-3 { grid-template-columns: repeat(3, 1fr); } .ui-span-2 { grid-column: span 2; } }

.ui-field label:not(.ui-switch) { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ui-text); }
.ui-req { color: var(--ui-danger); }
.ui-field input:not([type="checkbox"]):not([type="radio"]), .ui-field select, .ui-field textarea {
    width: 100%; min-height: var(--ui-tap); padding: 0 14px; font: inherit; font-size: 16px; color: var(--ui-text);
    background: var(--ui-input); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); box-sizing: border-box;
    transition: border-color var(--ui-fast) ease, box-shadow var(--ui-fast) ease;
}
.ui-field input:hover:not(:disabled) { border-color: var(--ui-primary); }
.ui-field input:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }
.ui-field input:disabled { opacity: .6; cursor: not-allowed; }
.ui-field.has-error input { border-color: var(--ui-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
/* Champ avec unité affichée à droite (ex. taux de TVA « % ») : le suffixe est posé sur le champ, la saisie lui laisse la place. */
.ui-input-suffix { position: relative; }
.ui-input-suffix input { padding-right: 40px; }
.ui-input-suffix .ui-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 600; color: var(--ui-muted); pointer-events: none; }
.ui-field-msg { margin: 6px 0 0; font-size: 12.5px; color: var(--ui-muted); display: flex; gap: 6px; align-items: flex-start; }
.ui-field-msg.is-error { color: var(--ui-danger); font-weight: 500; }
html body.dark .ui-field-msg.is-error { color: #fca5a5; }
.ui-muted { color: var(--ui-muted); }
.ui-note { display: flex; gap: 8px; margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-primary-soft); color: var(--ui-text); font-size: 12.5px; }
.ui-note i { color: var(--ui-primary); margin-top: 2px; }

/* Interrupteurs */
.ui-switches { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: var(--ui-tap); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ui-text); }
.ui-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.ui-switch-track { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: var(--ui-border); transition: background-color var(--ui-fast) ease; }
.ui-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--ui-fast) var(--ui-ease); }
.ui-switch input:checked + .ui-switch-track { background: var(--ui-solid); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(18px); }
.ui-switch input:focus-visible + .ui-switch-track { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.ui-switch input:disabled + .ui-switch-track { opacity: .5; }

.ui-spinner-sm { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
.art-card-actions { margin-top: 12px; }
.art-card-actions .ui-btn { width: 100%; }

/* =====================================================================
   CONNEXION / CRÉATION DE COMPTE
   ===================================================================== */
.auth-page {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
    padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
    background: radial-gradient(900px 520px at 85% -10%, rgba(29, 91, 240, .08), transparent 60%), var(--ui-bg);
    animation: ui-fade-in var(--ui-med) ease both;
}
html body.dark .auth-page { background: radial-gradient(900px 520px at 85% -10%, rgba(79, 139, 255, .14), transparent 60%), var(--ui-bg); }
.auth-wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }

.auth-brand { text-align: center; }
.auth-brand .auth-logo { height: 30px; margin: 0 auto 14px; }
.auth-brand h1 { margin: 0 0 8px; font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--ui-text); }
.auth-brand h1 span { display: inline-block; color: var(--ui-primary); }
.auth-brand p { margin: 0 auto; max-width: 42ch; font-size: 14.5px; color: var(--ui-muted); }
.auth-points { display: none; list-style: none; margin: 22px 0 0; padding: 0; gap: 12px; text-align: left; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ui-text); }
.auth-points i { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 17px; }

.auth-card {
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
    padding: 22px 18px; box-shadow: var(--ui-shadow-sm);
    animation: ui-fade-up var(--ui-med) var(--ui-ease) both;
}
.auth-card h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--ui-text); }
.auth-sub { margin: 4px 0 18px; font-size: 14px; color: var(--ui-muted); }
.auth-form { display: grid; gap: 16px; }
.auth-form .ui-form-grid { gap: 16px; }
.auth-switch { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--ui-muted); }
.auth-switch a { color: var(--ui-primary); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-legal { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--ui-muted); }
.auth-legal img { height: 16px; width: auto; opacity: .8; }
html body.dark .auth-legal img { filter: brightness(1.8); }

.auth-success { text-align: center; padding: 8px 0; display: grid; gap: 6px; justify-items: center; }
.auth-success-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--ui-ok-text); background: var(--ui-ok-bg); margin-bottom: 8px; }
.auth-success h2 { margin: 0; }

.ui-btn-block { display: flex; width: 100%; min-height: 48px; font-size: 15px; }
.ui-input-wrap { position: relative; }
.ui-input-wrap input { padding-right: 52px !important; }
.ui-input-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); font-size: 18px; cursor: pointer; }
.ui-input-toggle:hover { color: var(--ui-primary); background: var(--ui-primary-soft); }

/* Champs InputText Blazor : même habillage que .ui-field */
.auth-form input.form-control, .auth-form .ui-field input { box-sizing: border-box; }
.auth-form input.invalid, .auth-form input.modified.invalid { outline: none; border-color: var(--ui-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.auth-form input.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--ui-success); }

@media (min-width: 640px) {
    .auth-card { padding: 30px 32px; }
    .auth-form .ui-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
    .auth-wrap { max-width: 1040px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; }
    .auth-brand { text-align: left; }
    .auth-brand .auth-logo { height: 38px; margin: 0 0 22px; }
    .auth-brand p { margin: 0; font-size: 16px; }
    .auth-points { display: grid; }
    .auth-card { justify-self: end; width: 100%; max-width: 480px; }
    .auth-legal { grid-column: 1 / -1; }
}

/* =====================================================================
   TUILES KPI (grille responsive : 2 colonnes mobile, 4 à partir de 768 px)
   ===================================================================== */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.kpi-tile {
    --tone: var(--ui-primary); --tone-soft: var(--ui-primary-soft);
    position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px;
    background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-med) var(--ui-ease), box-shadow var(--ui-med) var(--ui-ease), border-color var(--ui-fast) ease;
    animation: ui-fade-up var(--ui-med) var(--ui-ease) both;
}
.kpi-tile::before { content: none; }
.kpi-tile.kpi-success { --tone: var(--ui-success); --tone-soft: rgba(22, 163, 74, .14); }
.kpi-tile.kpi-warning { --tone: var(--ui-warning); --tone-soft: rgba(217, 119, 6, .14); }
.kpi-tile.kpi-danger  { --tone: var(--ui-danger);  --tone-soft: rgba(220, 38, 38, .12); }
.kpi-tile.kpi-info    { --tone: var(--ui-info);    --tone-soft: rgba(2, 132, 199, .12); }
.kpi-tile-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ui-radius-sm); font-size: 15px; color: var(--tone); background: var(--tone-soft); }
.kpi-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-tile-label { font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-muted); overflow-wrap: anywhere; line-height: 1.3; }
.kpi-tile-value { font-size: clamp(20px, 5.5vw, 24px); font-weight: 650; line-height: 1.15; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.kpi-tile-hint { font-size: 12px; color: var(--ui-muted); }
@media (min-width: 640px) { .kpi-grid { gap: 14px; } .kpi-tile { padding: 16px; flex-direction: row; align-items: center; } }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-tile { flex-direction: column; align-items: stretch; } }
@media (min-width: 1280px) { .kpi-tile { flex-direction: row; align-items: center; } }
@media (max-width: 340px) { .kpi-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   CARTES, TITRES ET ÉTATS VIDES : hiérarchie visuelle commune
   ===================================================================== */

/* Cartes / panneaux : surface plate, filet de 1 px, aucune décoration */
html body .card,
html body .card-grid {
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-card);
    box-shadow: var(--ui-shadow-sm);
}
html body .card::before, html body .card-grid::before { content: none; display: none; }
@media (min-width: 768px) { html body .card, html body .card-grid { padding: 18px 20px; } }

/* Titres de carte : icône discrète, sous-titre, plus de filet décoratif */
html body .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: var(--ui-text); }
html body .card-subtitle { margin: 2px 0 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); }
.card-title-icon {
    flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center;
    border-radius: var(--ui-radius-sm); font-size: 15px; color: var(--ui-primary); background: var(--ui-primary-soft);
}

/* Titre de page : « Section → Vue » devient titre + contexte discret */
 html body .alta-title-section h1 { font-size: clamp(20px, 5vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ui-text); }
 html body .alta-title-section h1 span { font-weight: 500; color: var(--ui-muted); }

/* États vides : panneau discret, icône, message et conseil (au lieu d'un grand vide) */
html body .empty-state {
    height: auto !important; min-height: 140px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 20px 16px; text-align: center; font-style: normal !important; font-size: var(--ui-fs); font-weight: 600;
    color: var(--ui-text) !important;
    border: 0; border-radius: var(--ui-radius-sm);
    background: var(--ui-card-2);
}
html body .empty-state::before {
    content: ""; width: 28px; height: 28px; margin-bottom: 6px; background: var(--ui-muted); opacity: .7;
    -webkit-mask: var(--ui-empty-icon) center / contain no-repeat; mask: var(--ui-empty-icon) center / contain no-repeat;
}
html body .empty-state::after {
    content: "Les chiffres s'afficheront ici dès qu'il y aura de l'activité."; max-width: 36ch;
    font-size: 12.5px; font-weight: 400; color: var(--ui-muted);
}
:root { --ui-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z'/%3E%3C/svg%3E"); }
/* Cellules de tableau vides : texte simple, sans décor */
html body td .empty-state, html body .e-emptyrow .empty-state { min-height: 0; border: 0; background: none; padding: 14px; }
html body td .empty-state::before, html body td .empty-state::after { display: none; }

/* Composants EmptyState / ErrorState / LoadingState : même langage visuel */
html body .ui-state { min-height: 150px; gap: 8px; border: 0; border-radius: var(--ui-radius-sm); background: var(--ui-card-2); padding: 20px 16px; }
html body .ui-state.is-compact { min-height: 120px; padding: 16px 14px; }
html body .ui-state-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; background: var(--ui-seg); color: var(--ui-muted); box-shadow: none; }
html body .ui-state-body strong { font-size: var(--ui-fs); }
html body .ui-state-body p { font-size: var(--ui-fs-sm); }
html body .ui-state-error { background: var(--ui-err-bg); border: 0; }
html body .ui-state-error .ui-state-icon { background: transparent; color: var(--ui-err-text); }
html body .ui-state-error .ui-state-body strong, html body .ui-state-error .ui-state-body p { color: var(--ui-err-text); }
html body .ui-state-loading { min-height: 100px; }

html body .kpi-card { border-radius: var(--ui-radius); }

/* Sous-cartes imbriquées : pas de double liseré */
html body .card .card::before, html body .card-grid .card::before, html body .card .card-grid::before { display: none; }

/* ===== Création de catalogue : liste des homonymes dans l'avertissement de doublon ===== */
.ui-dup-list { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.ui-dup-list li { margin: 2px 0; overflow-wrap: anywhere; }

/* =====================================================================
   MISES EN PAGE : Analyse des articles + Tableau de bord
   ===================================================================== */

/* --- Grilles génériques : les cartes se partagent toute la largeur, sans trous --- */
.ana-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.ana-grid > .card{ margin-bottom: 0; }
.ana-grid > .card{ height: 100%; }
.ana-grid > *{ min-width: 0; }

@media (min-width: 768px) {
    .ana-grid-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ana-grid-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .ana-grid-charts { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    .ana-grid-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ana-kpi-skeleton { height: 96px; border-radius: var(--ui-radius); }
.kpi-tile-value.is-text { font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.25; overflow-wrap: anywhere; }
@media (min-width: 768px) { .ana-grid ~ .kpi-grid, .kpi-grid + .ana-grid { margin-top: 0; } }

/* Faits chiffrés (concentration du CA) et classement (valeur par vente) */
.ana-facts, .ana-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ana-facts li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-primary-soft); font-size: 14px; }
.ana-fact-icon { width: 32px; height: 32px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 10px; background: var(--ui-card); color: var(--ui-primary); font-size: 16px; }
.ana-facts li.is-warn { background: rgba(217, 119, 6, .12); }
.ana-facts li.is-warn .ana-fact-icon { color: var(--ui-warning); }
.ana-rank li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--ui-border); font-size: 14px; }
.ana-rank li:last-child { border-bottom: 0; }
.ana-rank-name { min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
.ana-rank b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Filtres de l'analyse : une ligne compacte */
html body .card-filters .filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 768px) { html body .card-filters { padding-top: 14px; padding-bottom: 14px; margin-bottom: 16px !important; } }

/* --- Tableau de bord ------------------------------------------------ */

/* Cartes de graphiques : contenu (graphique ou état vide) centré verticalement ET horizontalement */

/* Insights : sections lisibles */
.dash-insights { display: grid; gap: 14px; align-content: start; }

html body .e-btn.btn-primary, html body .e-btn.btn-primary:focus { background: var(--ui-solid); border-color: var(--ui-solid); color: #fff; }
html body .e-btn.btn-primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }

/* Concentration du CA : bande pleine largeur (3 chiffres côte à côte) */
.ana-concentration { margin-bottom: 16px; }
.ana-facts-row { grid-template-columns: 1fr; }
@media (min-width: 768px) { .ana-facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }