:root { /* Base neutre (blanc / gris / noir) - la couleur (--primary et les teintes d'accent ci-dessous) sert uniquement de repere fonctionnel (bouton principal, lien, indicateur actif, coloration des icones), pas de fond dominant. Rend le logiciel plus sobre et professionnel qu'un habillage tout en degrade colore. */ --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #e0e7ff; --success: #16a34a; --success-light: #dcfce7; --danger: #dc2626; --danger-light: #fee2e2; --warning: #d97706; --warning-light: #fef3c7; --bg: #f5f5f7; --surface: #ffffff; --border: #e4e4e9; --text: #18181b; --text-muted: #71717a; --sidebar-bg: #131316; --sidebar-bg-2: #202024; --sidebar-text: #a1a1aa; --sidebar-active: #4f46e5; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(28,20,60,0.05), 0 6px 16px rgba(28,20,60,0.06); --shadow-lg: 0 14px 36px rgba(28,20,60,0.12), 0 3px 10px rgba(28,20,60,0.06); --focus-ring: 0 0 0 3px rgba(79,70,229,0.22); --row-hover: #f7f7fc; --violet: #7c3aed; --violet-light: #ede9fe; --teal: #0d9488; --teal-light: #ccfbf1; --pink: #db2777; --pink-light: #fce7f3; --orange: #ea580c; --orange-light: #ffedd5; } /* ---------- Mode sombre ---------- Applique via [data-theme="dark"] sur (bascule + preference systeme geree par theme.js). Seules les variables qui doivent changer sont redefinies ici - le reste (rayons, ombres de survol, mise en page) suit automatiquement puisque tout le CSS consomme des variables. */ [data-theme="dark"] { --primary: #818cf8; --primary-dark: #6366f1; --primary-light: rgba(129,140,248,0.18); --success: #4ade80; --success-light: rgba(74,222,128,0.15); --danger: #f87171; --danger-light: rgba(248,113,113,0.15); --warning: #fbbf24; --warning-light: rgba(251,191,36,0.15); --bg: #0c0c0e; --surface: #18181b; --border: #2c2c32; --text: #ececef; --text-muted: #8e8e98; --sidebar-bg: #050506; --sidebar-bg-2: #0d0d10; --row-hover: #202024; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35); --shadow-lg: 0 14px 36px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.32); --focus-ring: 0 0 0 3px rgba(129,140,248,0.32); --violet: #a78bfa; --violet-light: rgba(167,139,250,0.18); --teal: #2dd4bf; --teal-light: rgba(45,212,191,0.15); --pink: #f472b6; --pink-light: rgba(244,114,182,0.15); --orange: #fb923c; --orange-light: rgba(251,146,60,0.15); } [data-theme="dark"] .login-screen { background: radial-gradient(circle at 15% 20%, rgba(129,140,248,0.10), transparent 45%), radial-gradient(circle at 85% 80%, rgba(99,102,241,0.08), transparent 45%), linear-gradient(160deg, #030304, #0c0c0e 60%, #030304); } [data-theme="dark"] tbody tr:hover { background: var(--row-hover); } [data-theme="dark"] .toast { background: #1e2a42; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; } button { font-family: inherit; } a { text-decoration: none; color: inherit; } .hidden { display: none !important; } /* Contour de focus uniforme et discret pour tout element interactif, uniquement visible au clavier (pas au clic souris) - remplace le contour brut du navigateur qui casse le design. */ a, button, input, select, textarea { outline: none; } a:focus-visible, button:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Scrollbars discretes */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); background-clip: padding-box; } .sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); background-clip: padding-box; } .sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); background-clip: padding-box; } /* ---------- Login ---------- Premier ecran vu par quiconque decouvre le logiciel (y compris un acheteur potentiel lors d'une demonstration) - merite un traitement plus soigne qu'un simple formulaire: fond degrade profond, carte flottante avec relief marque, logo en accent degrade. */ .login-screen { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 12% 18%, rgba(99,102,241,0.16), transparent 45%), radial-gradient(circle at 88% 82%, rgba(79,70,229,0.12), transparent 45%), linear-gradient(160deg, #0a0a0d, #17171b 55%, #0a0a0d); } .login-box { background: var(--surface); border-radius: 20px; padding: 42px 40px; width: 372px; box-shadow: var(--shadow-lg), 0 40px 80px rgba(5,5,20,0.45); text-align: center; border: 1px solid rgba(255,255,255,0.08); animation: loginPopIn .35s cubic-bezier(.2,.9,.3,1.1); } @keyframes loginPopIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-logo { font-size: 34px; margin: 0 auto 16px; width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(150deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(79,70,229,0.4), 0 2px 0 rgba(255,255,255,0.15) inset; } .login-box h1 { margin: 0 0 5px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .login-sub { color: var(--text-muted); margin: 0 0 28px; font-size: 13px; } .login-box form { text-align: left; } .login-box label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 5px; color: var(--text-muted); } .login-box input, .login-box textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; transition: border-color .15s, box-shadow .15s; } .login-box input:focus, .login-box textarea:focus { border-color: var(--primary); box-shadow: var(--focus-ring); } #activation-screen .login-box { width: 460px; } .onboarding-box { width: 640px; } .onboarding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; text-align: left; } .onboarding-card { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s, transform .1s; } .onboarding-card:hover { border-color: var(--primary); transform: translateY(-1px); } .onboarding-card.selected { border-color: var(--primary); background: var(--primary-light); } .onboarding-card-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .onboarding-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } @media (max-width: 700px) { .onboarding-box { width: 92vw; } .onboarding-grid { grid-template-columns: 1fr; } } .login-hint { margin-top: 20px; font-size: 12px; color: var(--text-muted); } .error-msg { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 8px; } /* ---------- Layout ---------- */ .app { display: flex; height: 100vh; } .sidebar { width: 244px; background: linear-gradient(190deg, var(--sidebar-bg-2), var(--sidebar-bg) 55%); color: var(--sidebar-text); display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.06); } .brand { display: flex; align-items: center; gap: 10px; padding: 24px 20px 20px; font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -0.015em; } .brand-icon { font-size: 20px; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(150deg, var(--primary), var(--primary-dark)); box-shadow: 0 4px 12px rgba(79,70,229,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-menu { flex: 1; overflow-y: auto; padding: 6px 12px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 9px; border-radius: var(--radius-sm); border-left: 3px solid transparent; cursor: pointer; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--sidebar-text); transition: background .15s, color .15s, transform .1s, border-color .15s; position: relative; } .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .nav-item:active { transform: scale(0.98); } .nav-item.active { background: rgba(255,255,255,0.09); color: #fff; font-weight: 600; border-left-color: var(--primary); } .nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; } /* Icones colorees au repos: rend le menu plus vivant qu'un gris uniforme. Bascule en blanc au survol/actif pour rester lisible sur le degrade bleu. */ .nav-icon-blue { color: #60a5fa; } .nav-icon-violet { color: #a78bfa; } .nav-icon-teal { color: #2dd4bf; } .nav-icon-orange { color: #fb923c; } .nav-icon-pink { color: #f472b6; } .nav-icon-green { color: #4ade80; } .nav-item:hover .nav-icon, .nav-item.active .nav-icon { color: #fff; } /* En-tetes de section (Vente/Stock/Gestion): decoupe le menu en groupes reconnaissables au lieu d'une liste plate de 12 lignes - repere visuel important pour un utilisateur peu a l'aise avec l'informatique. */ .nav-group-label { padding: 14px 12px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,0.35); } .nav-menu > .nav-group-label:first-child { padding-top: 4px; } .sidebar-footer { padding: 14px; margin: 6px 8px 8px; border-top: 1px solid rgba(255,255,255,0.08); } .user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-top: 4px; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 10px rgba(79,70,229,0.3); } .user-name { font-size: 13px; color: #fff; font-weight: 600; } .user-role { font-size: 11px; color: var(--sidebar-text); text-transform: capitalize; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: 62px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; flex-shrink: 0; box-shadow: 0 1px 0 rgba(15,23,42,0.02); } .topbar h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .topbar-right { display: flex; align-items: center; gap: 14px; } .clock { color: var(--text-muted); font-size: 13px; } .content { flex: 1; overflow-y: auto; padding: 26px; } /* ---------- Recherche globale (Ctrl+K) ---------- */ .global-search-trigger { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; width: 220px; } .global-search-trigger:hover { border-color: var(--primary); color: var(--text); } .global-search-trigger span:nth-child(2) { flex: 1; text-align: left; } .global-search-kbd { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .gs-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 10px 0 4px; } .gs-section-label:first-child { margin-top: 0; } .gs-result-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; } .gs-result-item:hover { background: var(--bg); } .gs-result-icon { color: var(--text-muted); flex-shrink: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .12s ease; background: var(--surface); color: var(--text); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.28), 0 1px 0 rgba(255,255,255,0.18) inset; } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(79,70,229,0.38), 0 1px 0 rgba(255,255,255,0.18) inset; transform: translateY(-1px); } .btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,0.25); } .btn-success:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .btn-danger { background: var(--danger); color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,0.25); } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-outline:hover:not(:disabled) { background: var(--bg); border-color: var(--primary); color: var(--primary); } .btn-ghost { background: transparent; color: var(--sidebar-text); border-color: rgba(255,255,255,0.15); } .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 12px; } .btn-block { width: 100%; } .btn-icon { padding: 7px 9px; } .btn:active:not(:disabled) { transform: translateY(1px) !important; } /* ---------- Cards / Grid ---------- */ /* min-width:0 sur chaque carte de grille: sans ca, une grid item ne peut jamais retrecir sous la largeur de son contenu (comportement par defaut de CSS Grid), ce qui fait deborder toute la page au lieu de laisser .table-wrap (overflow-x:auto) absorber le defilement horizontal a l'interieur de la carte, la ou c'est attendu. */ .grid { display: grid; gap: 16px; } .grid > * { min-width: 0; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 700px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } } .card { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); } .stat-card { display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s; border-top: 3px solid var(--border); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stat-card .stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat-card .stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-card .stat-sub { font-size: 12px; color: var(--text-muted); } .stat-icon { font-size: 17px; margin-bottom: 6px; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--text-muted); display: flex; align-items: center; justify-content: center; } /* Une teinte distincte par indicateur: rend le tableau de bord plus lisible d'un coup d'oeil et plus vivant qu'un gris uniforme repete quatre fois - le liseret en haut de la carte reprend la meme teinte que son icone. */ .stat-icon-blue { background: var(--primary-light); color: var(--primary); } .stat-icon-violet { background: var(--violet-light); color: var(--violet); } .stat-icon-teal { background: var(--teal-light); color: var(--teal); } .stat-icon-orange { background: var(--orange-light); color: var(--orange); } .stat-icon-pink { background: var(--pink-light); color: var(--pink); } .stat-icon-green { background: var(--success-light); color: var(--success); } .stat-card:has(.stat-icon-blue) { border-top-color: var(--primary); } .stat-card:has(.stat-icon-violet) { border-top-color: var(--violet); } .stat-card:has(.stat-icon-teal) { border-top-color: var(--teal); } .stat-card:has(.stat-icon-orange) { border-top-color: var(--orange); } .stat-card:has(.stat-icon-pink) { border-top-color: var(--pink); } .stat-card:has(.stat-icon-green) { border-top-color: var(--success); } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .panel-header h3 { margin: 0; font-size: 15px; font-weight: 700; } .panel-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- Table ---------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } thead th { text-align: left; padding: 12px; background: var(--bg); color: var(--text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } thead th:first-child { border-top-left-radius: var(--radius-sm); } thead th:last-child { border-top-right-radius: var(--radius-sm); } tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr { transition: background .1s; } tbody tr:hover { background: var(--row-hover); } tbody tr:last-child td { border-bottom: none; } .text-right { text-align: right; } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .empty-row { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; } .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .01em; } .badge-success { background: var(--success-light); color: var(--success); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-muted { background: var(--bg); color: var(--text-muted); } /* ---------- Forms ---------- */ .form-group { margin-bottom: 14px; } .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } label.field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); } input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="date"], input[type="search"], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s; } textarea { resize: vertical; min-height: 60px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); } .search-bar { display: flex; gap: 8px; margin-bottom: 16px; } .search-bar input { max-width: 320px; } /* ---------- Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fadeIn .18s ease; } .modal-overlay.is-closing { animation: fadeOut .15s ease forwards; } .modal-box { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg), 0 30px 70px rgba(0,0,0,0.25); animation: popIn .18s cubic-bezier(.2,.9,.3,1.2); } .modal-overlay.is-closing .modal-box { animation: popOut .15s ease forwards; } .modal-box.modal-wide { max-width: 800px; } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; } .modal-close { cursor: pointer; font-size: 20px; color: var(--text-muted); background: none; border: none; border-radius: 6px; width: 30px; height: 30px; transition: background .12s, color .12s, transform .12s; } .modal-close:hover { background: var(--bg); color: var(--text); transform: rotate(90deg); } .modal-body { padding: 20px 22px; } .modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes popOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(.98); } } /* ---------- Toast ---------- */ .toast-root { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; } .toast { background: #1e293b; color: #fff; padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,0.25); animation: slideIn .25s cubic-bezier(.2,.9,.3,1.2); min-width: 220px; display: flex; align-items: center; gap: 8px; } .toast.toast-out { animation: slideOut .18s ease forwards; } .toast.toast-success { background: var(--success); } .toast.toast-error { background: var(--danger); } @keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; max-height: 60px; } to { transform: translateX(30px); opacity: 0; max-height: 0; } } html[dir="rtl"] .toast-root { right: auto; left: 20px; } @keyframes slideInRtl { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } html[dir="rtl"] .toast { animation-name: slideInRtl; } /* ---------- POS ---------- */ .pos-layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; height: calc(100vh - 108px); } .pos-products { overflow-y: auto; } /* Total en grand, tout en haut de la colonne produits (entre le titre de la page et la recherche): visible par le caissier ET tourne vers le client pour qu'il suive le montant sans effort - meme logique de confiance que l'ancien affichage cote panier, mais bien plus visible. */ .pos-total-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; margin-bottom: 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 6px 20px rgba(79,70,229,0.32); } .pos-total-hero .pos-total-label { font-size: 14px; } .pos-total-hero .pos-total-value { font-size: 38px; font-variant-numeric: tabular-nums; } .pos-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .pos-product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: all .12s; text-align: left; } .pos-product-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); } .pos-product-card:disabled { opacity: .4; cursor: not-allowed; transform: none; } .pos-product-name { font-weight: 600; font-size: 13px; margin-bottom: 6px; min-height: 32px; } .pos-product-price { color: var(--primary); font-weight: 700; font-size: 14px; } .pos-product-stock { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* Vignettes produit: quelle que soit la forme de la photo source (portrait, paysage, carree), l'image est toujours entierement visible, centree, sans deformation ni recadrage - via un cadre carre + object-fit:contain. */ .pos-product-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 6px; padding: 4px; } .product-thumb { width: 34px; height: 34px; object-fit: contain; object-position: center; background: var(--bg); border-radius: 6px; margin-right: 8px; vertical-align: middle; padding: 2px; } .product-thumb-lg { width: 56px; height: 56px; object-fit: contain; object-position: center; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); } .pos-client-autocomplete { position: relative; } .pos-client-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 220px; overflow-y: auto; } .pos-client-suggestion { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; } .pos-client-suggestion:hover, .pos-client-suggestion.active { background: var(--row-hover, var(--bg)); } .pos-client-suggestion + .pos-client-suggestion { border-top: 1px solid var(--border); } .pos-client-suggestion .text-muted { font-size: 11.5px; } .pos-cart { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); } .pos-cart-items { flex: 1; overflow-y: auto; padding: 10px; } .pos-cart-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); } .pos-cart-item-name { flex: 1; font-size: 12.5px; font-weight: 600; } .pos-cart-item-price { font-size: 11px; color: var(--text-muted); } .qty-control { display: flex; align-items: center; gap: 6px; } .qty-control button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; } .qty-control span { min-width: 22px; text-align: center; font-size: 12.5px; } .pos-cart-summary { padding: 14px; border-top: 1px solid var(--border); background: var(--bg); } .summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .summary-row.total { font-size: 18px; font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .pos-cart-footer { padding: 14px; display: flex; flex-direction: column; gap: 8px; } /* Compteur total: le client doit pouvoir suivre le montant en temps reel sans effort (confiance) - gros chiffre, contraste fort, et une legere pulsation a chaque changement pour signaler que c'est "en direct". */ .pos-total-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; } .pos-total-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; transition: transform .15s ease; } .pos-total-value.pulse { animation: totalPulse .3s ease; } @keyframes totalPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } /* ---------- Misc ---------- */ .tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .tab-btn { padding: 10px 16px; background: none; border: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color .12s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .page-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; color: var(--text-muted); font-size: 13px; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Fondu d'entree du contenu a chaque changement de page - evite le changement brutal de l'ancien contenu au nouveau. */ .content > * { animation: contentIn .2s ease; } @keyframes contentIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Champs numeriques sans les fleches du navigateur - plus propre visuellement, le clavier/les boutons +/- deja fournis par l'appli suffisent. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Respecte la preference systeme "reduire les animations" */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .muted-small { font-size: 11px; color: var(--text-muted); } .receipt { font-family: 'Courier New', monospace; font-size: 12px; max-width: 320px; margin: 0 auto; } .receipt hr { border: none; border-top: 1px dashed #999; } .receipt .r-row { display: flex; justify-content: space-between; } .icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; transition: background .12s; display: inline-flex; align-items: center; } .icon-btn:hover { background: var(--bg); } .icon-btn + .icon-btn { margin-left: 2px; } /* Actions destructives (supprimer/annuler/restaurer): couleur distincte + petit espace supplementaire avant, pour ne jamais les confondre au clic avec un bouton "modifier/voir" juste a cote - erreur frequente sinon. */ .icon-btn-danger { color: var(--danger); margin-left: 8px; } .icon-btn-danger:hover { background: var(--danger-light); } /* ---------- Icones SVG ---------- */ .icon { flex-shrink: 0; vertical-align: -0.15em; } .icon-btn .icon { width: 16px; height: 16px; } .nav-icon .icon, .stat-icon .icon, .brand-icon .icon { width: 18px; height: 18px; } .btn .icon { width: 15px; height: 15px; } /* ---------- Bascule theme clair/sombre ---------- */ .theme-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; margin-top: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--sidebar-text); cursor: pointer; font-size: 12px; transition: background .12s, color .12s; } .theme-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; } .theme-toggle .icon { width: 15px; height: 15px; } /* ---------- RTL (arabe) ---------- direction:rtl sur retourne deja automatiquement l'ordre visuel des conteneurs flex "row" (comme .app) et l'alignement du texte - il ne reste qu'a corriger les elements qui presument explicitement un cote gauche/droite. */ html[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; } html[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,0.06); } html[dir="rtl"] .login-box, html[dir="rtl"] .modal-box { text-align: right; } html[dir="rtl"] .stat-icon, html[dir="rtl"] .brand-icon { margin-left: 0; } html[dir="rtl"] .summary-row.total { text-align: right; } html[dir="rtl"] .table-wrap table { text-align: right; } html[dir="rtl"] .text-right { text-align: left; }