/* ═══════════════════════════════════════════════════════════════ POS / CAISSE — Global CSS variables (cannot be in .razor.css because Blazor scopes :root selectors with [b-xxxx] attribute, which never matches . Always define POS tokens here.) ═══════════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --pos-bg: #FFF7ED; --pos-sidebar-bg: #1a0f0a; --pos-topbar-bg: #14110e; --pos-white: #FFFFFF; --pos-surface: #FFFBF5; /* Accent */ --pos-accent: #f97316; --pos-accent-lt: rgba(249,115,22,.1); --pos-accent-glow: rgba(249,115,22,.35); /* Text */ --pos-text: #111827; --pos-text2: #374151; --pos-sub: #6B7280; --pos-muted: #9CA3AF; --pos-on-dk: #E2E8F0; --pos-on-dk-sub: #94A3B8; /* Status */ --pos-green: #10b981; --pos-green-lt: rgba(16,185,129,.1); --pos-yellow: #f59e0b; --pos-red: #ef4444; --pos-blue: #ea580c; --pos-rose: #ec4899; --pos-teal: #14b8a6; /* UI */ --pos-border: #E5E7EB; --pos-border-dk: rgba(255,255,255,.07); --pos-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.04); --pos-shadow: 0 4px 16px rgba(0,0,0,.1); --pos-shadow-lg: 0 8px 32px rgba(0,0,0,.15); /* Radii */ --r6: 6px; --r8: 8px; --r10: 10px; --r12: 12px; --r16: 16px; --r999: 999px; --tr: 160ms ease; /* Grid size control (changed by JS class on pos-grid) */ --pos-grid-min: 164px; --pos-card-img-h: 115px; } /* Mode clair — POS / caisse aligné orange & blanc */ html[data-theme="light"] { --pos-bg: #fffdfb; --pos-sidebar-bg: #ffffff; --pos-topbar-bg: #ffffff; --pos-surface: #ffffff; --pos-text: #431407; --pos-text2: #7c2d12; --pos-sub: #b45309; --pos-muted: #ca8a04; --pos-border: #fed7aa; --pos-shadow-sm: 0 1px 3px rgba(154,52,18,.06), 0 1px 8px rgba(154,52,18,.04); --pos-shadow: 0 4px 16px rgba(154,52,18,.09); --pos-shadow-lg: 0 8px 32px rgba(154,52,18,.12); } /* Mode sombre (défaut ERP) — POS / caisse : plus de blocs blancs, aligné sur --ds-* */ html[data-theme="dark"] { --pos-bg: var(--ds-bg-app); --pos-sidebar-bg: var(--ds-bg-sidebar); --pos-topbar-bg: var(--ds-bg-topbar); --pos-white: var(--ds-bg-surface); --pos-surface: var(--ds-bg-elevated); --pos-text: var(--ds-text); --pos-text2: var(--ds-text-sub); --pos-sub: var(--ds-text-muted); --pos-muted: var(--ds-text-muted); --pos-on-dk: var(--ds-text); --pos-on-dk-sub: var(--ds-text-muted); --pos-border: var(--ds-border); --pos-accent-lt: var(--ds-accent-dim); --pos-accent-glow: rgba(249, 115, 22, 0.35); --pos-shadow-sm: var(--ds-shadow-sm); --pos-shadow: var(--ds-shadow); --pos-shadow-lg: var(--ds-shadow-lg); } /* ── App integration ── */ /* Typography uses design-system tokens set in design-system.css */ html, body { font-family: var(--ds-font-sans, "Inter", "Segoe UI", system-ui, sans-serif); background: var(--ds-bg-app, #0d1117); color: var(--ds-text, #e6edf3); max-width: 100%; overflow-x: clip; } /* Préchargement Blazor — index.html : sans taille explicite, le SVG peut occuper tout l’écran (cercle géant en coin). */ #app > .loading-progress { display: block; width: 5rem; height: 5rem; margin: 42vh auto 1rem auto; animation: app-blazor-spin 0.85s linear infinite; } #app > .loading-progress circle { fill: none; stroke: rgba(249, 115, 22, 0.55); stroke-width: 7; stroke-linecap: round; } #app > .loading-progress circle:nth-child(2) { stroke: rgba(249, 115, 22, 0.95); opacity: 0.9; } #app > .loading-progress-text { text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--ds-text-muted, #9ca3af); margin-bottom: 2rem; } @keyframes app-blazor-spin { to { transform: rotate(360deg); } } /* Auth « prêt » : le spinner doit rester centré dans toute la fenêtre */ #app .ds-login-page { width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; } h1:focus { outline: none; } a, .btn-link { color: var(--ds-accent, #f97316); } /* VOLCHIC — menu latéral en mode clair (CSS global obligatoire). Avec l’isolation CSS Blazor, « html[data-theme="light"] ::deep .vnav-link » devient « html[data-theme="light"][b-xxxx] .vnav-link » : l’attribut [b-xxxx] n’existe pas sur , donc les onglets restaient blancs sur fond blanc. */ html[data-theme="light"] .ds-sidebar a.vnav-link, html[data-theme="light"] .ds-sidebar .vnav-link { color: #431407; } html[data-theme="light"] .ds-sidebar a.vnav-link:hover, html[data-theme="light"] .ds-sidebar .vnav-link:hover { background: #fff7ed; color: #9a3412; border-color: rgba(253, 186, 116, .6); box-shadow: 0 0 20px rgba(234, 88, 12, .12); } html[data-theme="light"] .ds-sidebar a.vnav-link.vnav-link-active, html[data-theme="light"] .ds-sidebar .vnav-link.vnav-link-active { background: linear-gradient(135deg, rgba(255, 247, 237, 1), rgba(255, 237, 213, .65)); color: #9a3412; border-color: rgba(234, 88, 12, .35); box-shadow: inset 3px 0 0 #ea580c, 0 0 0 1px rgba(234, 88, 12, .08), 0 4px 22px rgba(234, 88, 12, .16); } html[data-theme="light"] .ds-sidebar .vnav-link.vnav-link-active .vnav-link-icon { color: #ea580c; } html[data-theme="light"] .ds-sidebar .vnav-link .vnav-link-icon { color: #a16207; } html[data-theme="light"] .ds-sidebar .vnav-link:hover .vnav-link-icon { color: #ea580c; } html[data-theme="light"] .ds-sidebar a.vnav-bottom-active, html[data-theme="light"] .ds-sidebar .vnav-bottom-active { background: rgba(249, 115, 22, .12); color: #ea580c; border: 1px solid #fed7aa; box-shadow: 0 0 16px rgba(234, 88, 12, .14); } /* Focus ring */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: var(--ds-shadow-focus); } /* Table base */ .table { color: var(--ds-text); } .table > :not(caption) > * > * { background-color: transparent; border-color: var(--ds-border); } .table-hover tbody tr:hover > * { background-color: var(--ds-bg-elevated); } /* Legacy content padding */ .content { padding-top: 1.1rem; } /* Validation states */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ds-success); } .invalid { outline: 1px solid var(--ds-danger); } .validation-message { color: var(--ds-danger); font-size: 12px; } /* Blazor error UI */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41IDUxQzI0OC4zMzYgNTEgMjM1IDY0LjMzNiAyMzUgNzkuNSAyMzUgOTQuNjY0IDI0OC4zMzYgMTA4IDI2My41IDEwOCAyNzguNjY0IDEwOCAyOTIgOTQuNjY0IDI5MiA3OS41IDI5MiA2NC4zMzYgMjc4LjY2NCA1MSAyNjMuNSA1MVpNMjYzLjUgNTcuNEMyNzUuMTQ4IDU3LjQgMjg1LjYgNjcuODUgMjg1LjYgNzkuNSAyODUuNiA5MS4xNDggMjc1LjE0OCAxMDEuNiAyNjMuNSAxMDEuNiAyNTEuODUgMTAxLjYgMjQxLjQgOTEuMTQ4IDI0MS40IDc5LjUgMjQxLjQgNjcuODUgMjUxLjg1IDU3LjQgMjYzLjUgNTcuNFpNMjYzLjUgNjQuNEMyNTUuNzE2IDY0LjQgMjQ5LjQgNzAuNzE2IDI0OS40IDc4LjUgMjQ5LjQgODYuMjg0IDI1NS43MTYgOTIuNiAyNjMuNSA5Mi42IDI3MS4yODQgOTIuNiAyNzcuNiA4Ni4yODQgMjc3LjYgNzguNSAyNzcuNiA3MC43MTYgMjcxLjI4NCA2NC40IDI2My41IDY0LjRaTTI2My41IDcwQzI2OC4xOTEgNzAgMjcyIDczLjgwOSAyNzIgNzguNSAyNzIgODMuMTkxIDI2OC4xOTEgODcgMjYzLjUgODcgMjU4LjgwOSA4NyAyNTUgODMuMTkxIDI1NSA3OC41IDI1NSA3My44MDkgMjU4LjgwOSA3MCAyNjMuNSA3MFoiIGZpbGw9IiNGRjY3MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #fff2e9; padding: 1rem 1rem 1rem 3.7rem; } /* Home.razor dashboard — inline styles use these vars (global; not scoped). */ .home-dash { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; --home-surface: #111827; --home-border: #1f2937; --home-row-border: #1a2030; --home-bar-track: #1f2937; --home-heading: #f9fafb; --home-title: #e5e7eb; --home-muted: #6b7280; --home-dim: #9ca3af; --home-secondary: #d1d5db; --home-input-bg: #1f2937; --home-input-border: #374151; --home-select-text: #d1d5db; --home-link-muted: #4b5563; --home-stat-muted: #374151; --home-empty-icon: #374151; --home-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); --home-header-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); --home-soft: rgba(255, 255, 255, 0.03); --home-icon-muted-bg: rgba(255, 255, 255, 0.05); } html[data-theme="light"] .home-dash { --home-surface: #ffffff; --home-border: #fed7aa; --home-row-border: #ffedd5; --home-bar-track: #ffedd5; --home-heading: #431407; --home-title: #7c2d12; --home-muted: #a16207; --home-dim: #b45309; --home-secondary: #57534e; --home-input-bg: #fff7ed; --home-input-border: #fdba74; --home-select-text: #431407; --home-link-muted: #9a3412; --home-stat-muted: #78716c; --home-empty-icon: #fdba74; --home-card-shadow: 0 2px 12px rgba(154, 52, 18, 0.08); --home-header-shadow: 0 4px 20px rgba(154, 52, 18, 0.1); --home-soft: rgba(249, 115, 22, 0.08); --home-icon-muted-bg: rgba(249, 115, 22, 0.1); } /* Dashboard Home — grilles fluides (évite colonnes fixes et débordements) */ .rsp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(10px, 2vw, 14px); margin-bottom: clamp(16px, 3vw, 22px); width: 100%; min-width: 0; } .rsp-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(100%, 260px), 360px); gap: clamp(12px, 2vw, 18px); align-items: start; width: 100%; min-width: 0; } @media (max-width: 1360px) { .rsp-main-grid { grid-template-columns: minmax(0, 1fr); } } .home-dash .rsp-main-col { display: flex; flex-direction: column; gap: clamp(14px, 2.5vw, 18px); min-width: 0; } .home-dash .home-genre-row { display: grid; grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) minmax(2rem, auto) minmax(2rem, auto); align-items: center; gap: clamp(4px, 1.2vw, 10px); min-width: 0; } .home-dash .home-health-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; border-top: 1px solid var(--home-border); padding-top: 14px; } @media (min-width: 640px) { .home-dash .home-health-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } } .home-dash .home-health-item { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; } @media (max-width: 639px) { .home-dash .home-health-item { padding: 10px 8px; border-radius: 12px; background: var(--home-soft); border: 1px solid var(--home-border); } } @media (min-width: 640px) { .home-dash .home-health-item:not(:first-child) { border-left: 1px solid var(--home-border); padding-left: 8px; } } .home-dash .home-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; padding: 14px; box-sizing: border-box; } .home-dash .home-top-parfum-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; min-width: 0; } .home-dash .home-parfum-name { max-width: min(200px, 50vw); } /* Centre de supervision — shell + colonne droite (ManagerSupervision.razor.css) */ html[data-theme="light"] .sup-page, html[data-theme="light"] .sup-access-denied { --s-void: #fffdfb; --s-black: #ffffff; --s-surface: #fff7ed; --s-elevated: #ffffff; --s-overlay: #fff7ed; --s-border: #ffedd5; --s-border-mid: #fed7aa; --s-border-vis: #fdba74; --s-text: #431407; --s-text-sub: #7c2d12; --s-text-dim: #a16207; --s-gold-pale: #7c2d12; } /* Supervision — ombres et en-têtes encore trop « sombres » en mode clair */ html[data-theme="light"] .sup-page .sup-live-header { box-shadow: 0 2px 12px rgba(154, 52, 18, 0.08); } html[data-theme="light"] .sup-page .sup-header { box-shadow: inset 0 1px 0 rgba(249, 115, 22, 0.2), 0 1px 0 rgba(254, 215, 170, 0.9), 0 4px 20px rgba(154, 52, 18, 0.06); } html[data-theme="light"] .sup-from-me .sup-msg-bubble { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: var(--s-border-mid); color: var(--s-text); box-shadow: 0 2px 8px rgba(154, 52, 18, 0.08); } /* RH Center (Employees.razor.css — variables sur .hr-page) */ html[data-theme="light"] .hr-page { --hr-black: #fffdfb; --hr-surface: #ffffff; --hr-elevated: #fff7ed; --hr-border: #fed7aa; --hr-text: #431407; --hr-text-sub: #7c2d12; --hr-text-dim: #a16207; } html[data-theme="light"] .hr-profile-header { background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%); } /* Rôles & permissions — onglets et panneau droit lisibles en mode clair */ html[data-theme="light"] .rp-tab.active { color: #4338ca; border-bottom-color: #6366f1; } html[data-theme="light"] .rp-count-badge { background: rgba(99, 102, 241, 0.12); color: #4f46e5; } html[data-theme="light"] .rp-matrix-table tbody td { background: var(--ds-bg-surface); } html[data-theme="light"] .rp-form-error { color: #b91c1c; } /* Saisie sorties — pied de page récap (évite bandeau gris très foncé) */ html[data-theme="light"] .saisie-sorties-container .summary-footer { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); box-shadow: 0 4px 16px rgba(154, 52, 18, 0.08); border: 1px solid #fed7aa; } html[data-theme="light"] .saisie-sorties-container .summary-label { color: #7c2d12; } html[data-theme="light"] .saisie-sorties-container .summary-value:not(.summary-global):not(.summary-femme):not(.summary-homme) { color: #431407; } /* Saisie sorties — mode sombre (aligné shell VOLCHIC) */ html[data-theme="dark"] .saisie-sorties-container { --ss-text: var(--ds-text, #e6edf3); --ss-text-muted: var(--ds-text-muted, #9c948a); --ss-femme-1: #2a2018; --ss-femme-2: #3d2a1c; --ss-femme-3: #4a3424; --ss-homme-1: #1c1916; --ss-homme-2: #252119; --ss-homme-3: #2e2924; background: linear-gradient(160deg, var(--ds-bg-app, #14110e) 0%, #1a1714 45%, var(--ds-bg-surface, #1c1916) 100%); } html[data-theme="dark"] .saisie-sorties-container .input-card, html[data-theme="dark"] .saisie-sorties-container .parfums-list-card, html[data-theme="dark"] .saisie-sorties-container .category-card, html[data-theme="dark"] .saisie-sorties-container .stock-list-card { background: var(--ds-bg-surface, #1c1916); border: 1px solid var(--ds-border, #3d342c); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .saisie-sorties-container .input-label { color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .form-control-custom { background: var(--ds-bg-elevated, #252119); border-color: var(--ds-border, #3d342c); color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .form-control-custom::placeholder { color: var(--ds-text-muted, #9c948a); } html[data-theme="dark"] .saisie-sorties-container .batch-hint { color: var(--ds-text-muted, #9c948a); } html[data-theme="dark"] .saisie-sorties-container .parfum-list-item { border-bottom-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .parfum-list-item:hover { background-color: var(--ds-bg-elevated, #252119); } html[data-theme="dark"] .saisie-sorties-container .parfum-id { color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .parfum-name { color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .quantite-display { color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .parfums-list-header-label { color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .parfums-list-header .btn-light { background: var(--ds-bg-elevated, #252119); border-color: var(--ds-border, #3d342c); color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .parfums-list-header .btn-light:hover { background: var(--ds-bg-surface, #1c1916); border-color: var(--ds-accent, #f97316); color: var(--ds-accent-hover, #fb923c); } html[data-theme="dark"] .saisie-sorties-container .homme-list-header { border-bottom-color: #78716c; } html[data-theme="dark"] .saisie-sorties-container .category-header { border-bottom-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .status-ready .status-bar { background: linear-gradient(135deg, rgba(63, 185, 80, 0.2) 0%, rgba(63, 185, 80, 0.08) 100%); border-color: var(--ds-success, #3fb950); } html[data-theme="dark"] .saisie-sorties-container .status-missing .status-bar { background: linear-gradient(135deg, rgba(248, 81, 73, 0.22) 0%, rgba(248, 81, 73, 0.08) 100%); border-color: var(--ds-danger, #f85149); } html[data-theme="dark"] .saisie-sorties-container .status-count { color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .status-label { color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .stock-details { border-top-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .empty-message { color: var(--ds-text-muted, #9c948a); } html[data-theme="dark"] .saisie-sorties-container .stock-item { background: var(--ds-bg-elevated, #252119); border-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .stock-item:hover { background: var(--ds-bg-surface, #1c1916); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .saisie-sorties-container .stock-name { color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .missing-item { background: var(--ds-bg-elevated, #252119); } html[data-theme="dark"] .saisie-sorties-container .missing-item:hover { background: var(--ds-bg-surface, #1c1916); } html[data-theme="dark"] .saisie-sorties-container .missing-item .stock-info { color: var(--ds-text-muted, #9c948a); } html[data-theme="dark"] .saisie-sorties-container .missing-item input[type="number"] { background: var(--ds-bg-app, #14110e); border-color: var(--ds-border, #3d342c); color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .missing-list .stock-name { color: #fca5a5; } html[data-theme="dark"] .saisie-sorties-container .btn-filter { background: var(--ds-bg-elevated, #252119); border-color: var(--ds-border, #3d342c); color: var(--ds-text-sub, #d6cfc7); } html[data-theme="dark"] .saisie-sorties-container .btn-filter:hover { background: var(--ds-bg-surface, #1c1916); border-color: var(--ds-accent, #f97316); color: var(--ds-text, #e6edf3); } html[data-theme="dark"] .saisie-sorties-container .stock-table-container { border-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .stock-table { background: var(--ds-bg-surface, #1c1916); } html[data-theme="dark"] .saisie-sorties-container .stock-table thead { background: var(--ds-bg-elevated, #252119); } html[data-theme="dark"] .saisie-sorties-container .stock-table th { color: var(--ds-text-sub, #d6cfc7); border-bottom-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .stock-table td { color: var(--ds-text, #e6edf3); border-bottom-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .stock-table tbody tr:hover { background: var(--ds-bg-elevated, #252119); } html[data-theme="dark"] .saisie-sorties-container .badge-femme { background: linear-gradient(135deg, rgba(249, 115, 22, 0.22) 0%, rgba(249, 115, 22, 0.1) 100%); color: #fdba74; border-color: rgba(249, 115, 22, 0.45); } html[data-theme="dark"] .saisie-sorties-container .badge-homme { background: linear-gradient(135deg, rgba(214, 207, 197, 0.1) 0%, rgba(214, 207, 197, 0.04) 100%); color: var(--ds-text-sub, #d6cfc7); border-color: var(--ds-border, #3d342c); } html[data-theme="dark"] .saisie-sorties-container .badge-stock { background: rgba(63, 185, 80, 0.18); color: #86efac; } html[data-theme="dark"] .saisie-sorties-container .badge-stock-zero { background: rgba(248, 81, 73, 0.18); color: #fca5a5; } html[data-theme="dark"] .saisie-sorties-container .summary-homme { color: #a8a29e; } html[data-theme="dark"] .saisie-sorties-container .summary-global { color: var(--ds-success, #3fb950); } /* ═══════════════════════════════════════════════════════════════════ WhatsApp mini FAB (layout global — hors page CRM Chat) ═══════════════════════════════════════════════════════════════════ */ .wa-widget { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 600; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; } .wa-widget .wa-float-btn { pointer-events: auto; } .wa-float-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--ds-bg-surface, #161b22); border: 2px solid #25d366; color: #25d366; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; box-shadow: none; transition: transform .15s, box-shadow .15s, background .15s; } .wa-float-btn:hover { transform: scale(1.08); background: rgba(37, 211, 102, 0.12); box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35); } .wa-float-badge { position: absolute; top: -3px; right: -3px; background: var(--ds-danger, #f85149); color: #fff; font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 10px; min-width: 18px; text-align: center; border: 2px solid var(--ds-bg-app, #0d1117); line-height: 1.3; } @media (max-width: 660px) { .wa-widget { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; } } /* Intelligence Parfum : marge bas pour FAB WhatsApp + encoche (le défilement principal est dans .ds-main) */ @media (max-width: 900px) { .ds-content:has(.ip-layout) { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); } } /* Caisse : pleine largeur dans la zone principale (même shell que le reste de l’ERP) */ .ds-content:has(.caisse-page) { max-width: none; padding: clamp(12px, 2vw, 20px) clamp(10px, 2vw, 24px) 24px; width: 100%; } /* Caisse : occuper la hauteur utile du
pour que catalogue + panier/paiement défilent en interne sans devoir scroller toute la page jusqu’au bouton de validation. */ .ds-main:has(.caisse-page) { display: flex; flex-direction: column; min-height: 0; } .ds-main:has(.caisse-page) .ds-content { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* API backend unreachable (Blazor WASM + separate API on 5287) */ .ds-api-offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 12px 16px; background: linear-gradient(135deg, #b42318 0%, #da3633 100%); color: #fff; font-size: 0.88rem; line-height: 1.45; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .ds-api-offline-banner__text { flex: 1; min-width: min(100%, 280px); } .ds-api-offline-banner__en { font-size: 0.82rem; opacity: 0.92; margin-bottom: 6px; font-weight: 600; } .ds-api-offline-banner__hint { margin-top: 6px; font-size: 0.8rem; opacity: 0.95; color: rgba(255, 255, 255, 0.92); } .ds-api-offline-banner__hint code { font-size: 0.78em; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(0, 0, 0, 0.25); color: #fff; word-break: break-all; } .ds-api-offline-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-shrink: 0; } .ds-api-offline-banner__retry { flex-shrink: 0; align-self: center; padding: 0.45rem 1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; font-size: 0.82rem; cursor: pointer; } .ds-api-offline-banner__dismiss { padding: 0.45rem 1rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 0.8rem; cursor: pointer; } .ds-api-offline-banner__dismiss:hover { background: rgba(255, 255, 255, 0.1); } /* Bandeau minimal quand l'utilisateur a masque l'alerte detaillee */ .ds-api-offline-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 14px; font-size: 0.8rem; background: rgba(60, 20, 20, 0.92); color: #fecaca; border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .ds-api-offline-strip--login { background: rgba(80, 55, 10, 0.92); color: #fef3c7; } .ds-api-offline-strip__msg { flex: 1; min-width: min(100%, 200px); } .ds-api-offline-strip__actions { display: flex; gap: 8px; } .ds-api-offline-strip__btn { padding: 0.25rem 0.65rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); color: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .ds-api-offline-strip__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); } .ds-api-offline-strip__btn:disabled { opacity: 0.6; } .ds-api-offline-banner__retry:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); } .ds-api-offline-banner__retry:disabled { opacity: 0.65; cursor: not-allowed; } /* Sur /login : message moins alarmant (connexion locale possible) */ .ds-api-offline-banner--login { background: linear-gradient(135deg, #8a5a0f 0%, #c28a1a 100%); border-bottom-color: rgba(255, 255, 255, 0.2); } .ds-api-offline-banner--login .ds-api-offline-banner__hint code { background: rgba(0, 0, 0, 0.2); }