. */ isolation: isolate; } [data-ui="v2"] main { flex: 1 0 auto; } [data-ui="v2"] footer { flex-shrink: 0; } [data-ui="v2"] h1, [data-ui="v2"] .h1, [data-ui="v2"] h2, [data-ui="v2"] .h2 { font-family: 'Host Grotesk', 'Onest', sans-serif; font-weight: 800; letter-spacing: -0.025em; color: hsl(var(--gray-900)); } [data-ui="v2"] h1, [data-ui="v2"] .h1 { font-size: var(--t-3xl); line-height: var(--lh-3xl); } [data-ui="v2"] h2, [data-ui="v2"] .h2 { font-size: var(--t-2xl); line-height: var(--lh-2xl); } [data-ui="v2"] h3, [data-ui="v2"] .h3 { font-family: 'Onest', sans-serif; font-weight: 700; font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: -0.015em; } [data-ui="v2"] h4, [data-ui="v2"] .h4, [data-ui="v2"] h5, [data-ui="v2"] .h5 { font-family: 'Onest', sans-serif; font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-lg); } [data-ui="v2"] .text-muted { color: hsl(var(--gray-500)) !important; } /* ========================================================================== 3. Skip link (a11y) ========================================================================== */ [data-ui="v2"] .skip-link { position: absolute; left: 0; top: 0; transform: translateY(-200%); background: hsl(var(--gray-900)); color: white; padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) 0; font-weight: 600; font-size: var(--t-sm); z-index: 1000; text-decoration: none; transition: transform var(--d-base) var(--ease-out); } [data-ui="v2"] .skip-link:focus { transform: translateY(0); } /* ========================================================================== 4. Navbar — densifiée, sans gradient text, hauteur 56px ========================================================================== */ [data-ui="v2"] .navbar { /* Height tuned to accommodate the 38px logo with breathing room */ height: 64px; min-height: 64px; padding: 0 var(--s-6); background: white; border-bottom: 1px solid hsl(var(--gray-200)); box-shadow: none; } [data-ui="v2"] .navbar .container-fluid { padding: 0; } [data-ui="v2"] .navbar-brand { background: none !important; -webkit-text-fill-color: initial !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: hsl(var(--gray-900)); font-family: 'Host Grotesk', 'Onest', sans-serif; font-weight: 800; font-size: var(--t-lg); letter-spacing: -0.02em; padding: 0; display: flex; align-items: center; gap: var(--s-2); } [data-ui="v2"] .navbar-brand .navbar-logo { height: 38px; width: auto; display: block; } @media (max-width: 768px) { [data-ui="v2"] .navbar { height: 56px; min-height: 56px; } [data-ui="v2"] .navbar-brand .navbar-logo { height: 30px; } } [data-ui="v2"] .navbar-nav { gap: var(--s-1); } [data-ui="v2"] .nav-link { font-size: var(--t-sm); font-weight: 500; color: hsl(var(--gray-600)); padding: 6px var(--s-3); border-radius: var(--r-md); transition: background var(--d-fast) var(--ease-quart), color var(--d-fast) var(--ease-quart); display: inline-flex; align-items: center; gap: 6px; } [data-ui="v2"] .nav-link:hover { color: hsl(var(--gray-900)); background: hsl(var(--gray-100)); } [data-ui="v2"] .nav-link.active { color: hsl(var(--primary-700)); background: hsl(var(--primary-50)); } /* ---- Nav-tabs (Linear/Stripe style: bottom border underline) ---- Bootstrap default uses border tricks that clip in v2 cards. Override fully so the active state never gets cut by the container's border-bottom. */ [data-ui="v2"] .nav-tabs { border-bottom: 1px solid hsl(var(--gray-200)); gap: 4px; padding: 0; margin-bottom: var(--s-5); } [data-ui="v2"] .nav-tabs .nav-item { margin-bottom: 0; } [data-ui="v2"] .nav-tabs .nav-link { border: none !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; padding: 10px 14px; color: hsl(var(--gray-600)); font-weight: 500; margin-bottom: -1px; /* cover container's 1px bottom border with our 2px underline */ transition: color var(--d-fast) var(--ease-quart), border-color var(--d-fast) var(--ease-quart); } [data-ui="v2"] .nav-tabs .nav-link:hover { color: hsl(var(--gray-900)); background: transparent !important; border-bottom-color: hsl(var(--gray-300)) !important; } [data-ui="v2"] .nav-tabs .nav-link.active { color: hsl(var(--primary-700)) !important; background: transparent !important; border-bottom-color: hsl(var(--primary)) !important; font-weight: 600; } [data-ui="v2"] .nav-tabs .nav-link.disabled, [data-ui="v2"] .nav-tabs .nav-link[disabled] { color: hsl(var(--gray-400)) !important; border-bottom-color: transparent !important; cursor: not-allowed; } /* ---- Nav-pills (alternative style — solid pill on active) ---- */ [data-ui="v2"] .nav-pills { gap: 4px; } [data-ui="v2"] .nav-pills .nav-link { border-radius: 6px; padding: 6px 12px; background: transparent; color: hsl(var(--gray-700)); font-weight: 500; } [data-ui="v2"] .nav-pills .nav-link:hover { background: hsl(var(--gray-100)); color: hsl(var(--gray-900)); } [data-ui="v2"] .nav-pills .nav-link.active, [data-ui="v2"] .nav-pills .show > .nav-link { background: hsl(var(--primary)) !important; color: white !important; } /* ---- Tab content padding ---- */ [data-ui="v2"] .tab-content { padding-top: var(--s-2); } [data-ui="v2"] .nav-link i, [data-ui="v2"] .nav-link [data-feather], [data-ui="v2"] .nav-link [data-lucide] { width: 16px; height: 16px; opacity: 0.85; } [data-ui="v2"] .navbar-toggler { border: 1px solid hsl(var(--gray-200)); padding: 4px 8px; border-radius: var(--r-md); } [data-ui="v2"] .navbar-toggler:focus { box-shadow: var(--shadow-ring-primary); } [data-ui="v2"] .dropdown-menu { border: 1px solid hsl(var(--gray-200)); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; font-size: var(--t-sm); min-width: 220px; } [data-ui="v2"] .dropdown-item { border-radius: var(--r-sm); padding: 6px var(--s-3); color: hsl(var(--gray-700)); font-weight: 500; display: flex; align-items: center; gap: var(--s-2); } [data-ui="v2"] .dropdown-item:hover, [data-ui="v2"] .dropdown-item:focus { background: hsl(var(--gray-100)); color: hsl(var(--gray-900)); } [data-ui="v2"] .dropdown-item [data-feather], [data-ui="v2"] .dropdown-item .fas, [data-ui="v2"] .dropdown-item .far, [data-ui="v2"] .dropdown-item .fab, [data-ui="v2"] .dropdown-item svg.feather { width: 14px !important; height: 14px !important; opacity: 0.7; flex-shrink: 0; } [data-ui="v2"] .dropdown-item.active, [data-ui="v2"] .dropdown-item:active { background: hsl(var(--primary-50)); color: hsl(var(--primary-700)); } [data-ui="v2"] .dropdown-divider { margin: 4px 0; border-color: hsl(var(--gray-200)); } [data-ui="v2"] .dropdown-header { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--gray-500)); padding: 6px var(--s-3); } /* ========================================================================== 5. Main content & container ========================================================================== */ [data-ui="v2"] main { padding-top: var(--s-6); padding-bottom: var(--s-12); } /* Transition de navigation — fade + léger glissement vers le haut au chargement de chaque page. Désactivée si l'utilisateur a configuré prefers-reduced-motion. IMPORTANT — contrainte sur l'état final : L'état `to` DOIT terminer sur `transform: none` (et non `translateY(0)`). Toute valeur non-none de transform crée un stacking context permanent sur main, qui piège alors tous les descendants en `position: fixed` (modals, table-row dropdowns à z-index 1080, etc.) sous le .modal-backdrop injecté dans . Les modals sont déjà détachés vers par le hook JS show.bs.modal dans main.js, mais les autres position:fixed restent dans main et ont besoin que le stacking context disparaisse en fin d'animation. */ @media (prefers-reduced-motion: no-preference) { @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } [data-ui="v2"] main { animation: pageFadeIn 220ms var(--ease-out) both; } } [data-ui="v2"] main.container-fluid { max-width: 1760px; margin: 0 auto; padding-left: var(--s-6); padding-right: var(--s-6); } @media (max-width: 768px) { [data-ui="v2"] main.container-fluid { padding-left: var(--s-4); padding-right: var(--s-4); } } /* ========================================================================== 6. Buttons — solid + inset highlight (signature 2026) ========================================================================== */ /* ========================================================================== Buttons — Modern flat 2026 (Linear / Vercel / Stripe aesthetic) - NO gradients (gradients = Web 2.0 / Material 2014) - NO translateY lift on hover (Material Design legacy) - NO text-shadow (skeuomorphism) - Solid colors. Hover = brightness shift only. Active = subtle inset. - Tight border-radius (6px), tight letter-spacing, 500-weight ========================================================================== */ [data-ui="v2"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Onest', sans-serif; font-size: var(--t-sm); font-weight: 500; line-height: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; cursor: pointer; letter-spacing: -0.01em; transition: background-color 90ms linear, border-color 90ms linear, color 90ms linear, box-shadow 90ms linear; white-space: nowrap; user-select: none; } [data-ui="v2"] .btn-sm { padding: 5px 9px; font-size: var(--t-xs); border-radius: 5px; gap: 4px; } [data-ui="v2"] .btn-lg { padding: 11px 18px; font-size: var(--t-base); border-radius: 8px; } [data-ui="v2"] .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25); } [data-ui="v2"] .btn:disabled, [data-ui="v2"] .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---- Primary (violet brand — solid, no gradient) ---- */ [data-ui="v2"] .btn-primary { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); color: white; } [data-ui="v2"] .btn-primary:hover { background-color: hsl(var(--primary-600)); border-color: hsl(var(--primary-600)); color: white; } [data-ui="v2"] .btn-primary:active { background-color: hsl(var(--primary-700)); border-color: hsl(var(--primary-700)); } /* ---- Secondary (white, crisp single border, paired with primary) ---- */ [data-ui="v2"] .btn-secondary, [data-ui="v2"] .btn-default { background-color: white; border-color: hsl(var(--gray-200)); color: hsl(var(--gray-900)); } [data-ui="v2"] .btn-secondary:hover, [data-ui="v2"] .btn-default:hover { background-color: hsl(var(--gray-50)); border-color: hsl(var(--gray-300)); color: hsl(var(--gray-900)); } [data-ui="v2"] .btn-secondary:active, [data-ui="v2"] .btn-default:active { background-color: hsl(var(--gray-100)); border-color: hsl(var(--gray-300)); } /* ---- Outline-primary (violet ghost) ---- */ [data-ui="v2"] .btn-outline-primary { background: transparent; color: hsl(var(--primary)); border-color: hsl(var(--gray-200)); } [data-ui="v2"] .btn-outline-primary:hover { background-color: hsl(var(--primary-50)); color: hsl(var(--primary-700)); border-color: hsl(var(--primary-200)); } [data-ui="v2"] .btn-outline-primary:active { background-color: hsl(var(--primary-100)); } /* ---- Outline-secondary (ghost) ---- */ [data-ui="v2"] .btn-outline-secondary { background: transparent; border-color: hsl(var(--gray-200)); color: hsl(var(--gray-700)); } [data-ui="v2"] .btn-outline-secondary:hover { background-color: hsl(var(--gray-100)); border-color: hsl(var(--gray-300)); color: hsl(var(--gray-900)); } [data-ui="v2"] .btn-outline-secondary:active { background-color: hsl(var(--gray-200)); } /* ---- Success / Danger / Warning — solid, brightness shift on hover ---- */ [data-ui="v2"] .btn-success { background-color: hsl(var(--green-500)); border-color: hsl(var(--green-500)); color: white; } [data-ui="v2"] .btn-success:hover { background-color: hsl(var(--green-600)); border-color: hsl(var(--green-600)); color: white; } [data-ui="v2"] .btn-success:active { background-color: hsl(var(--green-700)); border-color: hsl(var(--green-700)); } [data-ui="v2"] .btn-outline-success { background: transparent; color: hsl(var(--green-600)); border-color: hsl(var(--gray-200)); } [data-ui="v2"] .btn-outline-success:hover { background-color: hsl(var(--success-bg)); color: hsl(var(--green-700)); border-color: hsl(var(--success-bd)); } [data-ui="v2"] .btn-danger { background-color: hsl(var(--coral-500)); border-color: hsl(var(--coral-500)); color: white; } [data-ui="v2"] .btn-danger:hover { background-color: hsl(var(--coral-600)); border-color: hsl(var(--coral-600)); color: white; } [data-ui="v2"] .btn-danger:active { background-color: hsl(var(--coral-700)); border-color: hsl(var(--coral-700)); } [data-ui="v2"] .btn-outline-danger { background: transparent; color: hsl(var(--coral-600)); border-color: hsl(var(--gray-200)); } [data-ui="v2"] .btn-outline-danger:hover { background-color: hsl(var(--danger-bg)); color: hsl(var(--coral-700)); border-color: hsl(var(--danger-bd)); } [data-ui="v2"] .btn-warning { background-color: hsl(var(--amber-500)); border-color: hsl(var(--amber-500)); color: hsl(var(--amber-700)); } [data-ui="v2"] .btn-warning:hover { background-color: hsl(var(--amber-600)); border-color: hsl(var(--amber-600)); color: white; } [data-ui="v2"] .btn-warning:active { background-color: hsl(var(--amber-700)); border-color: hsl(var(--amber-700)); color: white; } [data-ui="v2"] .btn-outline-warning { background: transparent; color: hsl(var(--amber-700)); border-color: hsl(var(--gray-200)); } [data-ui="v2"] .btn-outline-warning:hover { background-color: hsl(var(--warning-bg)); color: hsl(var(--amber-700)); border-color: hsl(var(--warning-bd)); } /* ---- Info ---- */ [data-ui="v2"] .btn-info { background-color: hsl(var(--info-fg)); border-color: hsl(var(--info-fg)); color: white; } [data-ui="v2"] .btn-info:hover { background-color: hsl(var(--primary-700)); border-color: hsl(var(--primary-700)); color: white; } /* ---- Link button (no chrome) ---- */ [data-ui="v2"] .btn-link { background: transparent; border: none; color: hsl(var(--primary-700)); text-decoration: none; font-weight: 500; padding: 4px 6px; box-shadow: none; } [data-ui="v2"] .btn-link:hover { background-color: transparent; color: hsl(var(--primary-900)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* Icons inside buttons */ [data-ui="v2"] .btn i, [data-ui="v2"] .btn [data-feather], [data-ui="v2"] .btn [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; } [data-ui="v2"] .btn-lg i, [data-ui="v2"] .btn-lg [data-feather], [data-ui="v2"] .btn-lg [data-lucide] { width: 16px; height: 16px; } /* Phosphor icons — sized contextually via the parent component. Phosphor uses font-size for sizing (web font), not width/height. */ [data-ui="v2"] .btn .ph, [data-ui="v2"] .btn-sm .ph { font-size: 16px; line-height: 1; flex-shrink: 0; } [data-ui="v2"] .btn-lg .ph { font-size: 18px; line-height: 1; } [data-ui="v2"] .nav-link .ph { font-size: 16px; line-height: 1; opacity: 0.9; } [data-ui="v2"] .dropdown-item .ph { font-size: 14px; line-height: 1; opacity: 0.7; } [data-ui="v2"] .list-group-item .ph { font-size: 16px; line-height: 1; flex-shrink: 0; } [data-ui="v2"] .stat-card .ph, [data-ui="v2"] .card.text-center .card-body > .ph { font-size: 28px; opacity: 0.85; } [data-ui="v2"] .card-header .ph { font-size: 16px; line-height: 1; opacity: 0.85; } [data-ui="v2"] .alert .ph { font-size: 18px; line-height: 1; flex-shrink: 0; } [data-ui="v2"] .modal-header .ph { font-size: 20px; line-height: 1; } /* Btn-group action cells */ [data-ui="v2"] .table .btn-group .btn { width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); } /* ========================================================================== 7. Cards — Surface plate, no shadow par défaut ========================================================================== */ [data-ui="v2"] .card { background: white; border: 1px solid hsl(var(--gray-200)); border-radius: var(--r-lg); box-shadow: none; overflow: visible; transition: border-color var(--d-fast) var(--ease-quart), box-shadow var(--d-fast) var(--ease-quart); } [data-ui="v2"] .card:hover { box-shadow: none; transform: none; } [data-ui="v2"] .card-header { background: white; border-bottom: 1px solid hsl(var(--gray-100)); padding: var(--s-3) var(--s-5); font-weight: 600; font-size: var(--t-sm); color: hsl(var(--gray-900)); border-radius: var(--r-lg) var(--r-lg) 0 0; } [data-ui="v2"] .card-header h5, [data-ui="v2"] .card-header .h5 { font-size: var(--t-md); font-weight: 600; margin: 0; letter-spacing: -0.01em; } [data-ui="v2"] .card-body { padding: var(--s-5); } [data-ui="v2"] .card-footer { background: hsl(var(--gray-50)); border-top: 1px solid hsl(var(--gray-100)); padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-lg) var(--r-lg); } /* ========================================================================== 8. Stat cards — Host Grotesk sur les chiffres clés ========================================================================== */ [data-ui="v2"] .stat-card, [data-ui="v2"] .receivables-stats .stat-card { background: white !important; border: 1px solid hsl(var(--gray-200)); border-left: 1px solid hsl(var(--gray-200)) !important; border-radius: var(--r-lg); padding: var(--s-5); box-shadow: none; transition: border-color var(--d-fast) var(--ease-quart); /* Use flex column with explicit gap so value/label/percentage breathe */ display: flex; flex-direction: column; gap: var(--s-3); min-height: 108px; } [data-ui="v2"] .stat-card:hover { border-color: hsl(var(--gray-300)); box-shadow: none; transform: none; } [data-ui="v2"] .stat-card::before { display: none !important; } [data-ui="v2"] .stat-card .stat-label, [data-ui="v2"] .stat-card .card-text { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--gray-500)); font-weight: 600; margin: 0; order: 1; } [data-ui="v2"] .stat-card .stat-value, [data-ui="v2"] .stat-card .card-title { font-family: 'Host Grotesk', 'Onest', sans-serif; font-weight: 800; font-size: var(--t-3xl); letter-spacing: -0.025em; color: hsl(var(--gray-900)); line-height: 1.05; margin: 0; order: 2; /* Les montants ne doivent JAMAIS casser sur 2 lignes — même pour 1M+ */ white-space: nowrap; overflow: visible; } [data-ui="v2"] .stat-card .stat-percentage { font-size: var(--t-xs); color: hsl(var(--gray-500)); font-weight: 500; margin-top: auto; padding-top: var(--s-1); order: 3; } /* Receivables-stats grid : un layout cohérent (6 colonnes responsive) minmax(220px) garantit que les montants à 7+ chiffres ne wrappent pas à 30px font-size (Host Grotesk 800). En-dessous de ~1380px de viewport, le grid passe naturellement à 5 puis 4 colonnes via auto-fit. */ [data-ui="v2"] .receivables-stats .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); } /* Si un montant déborde malgré tout (écran très étroit + montant énorme), on permet à la card de s'étirer plutôt que de wrapper le chiffre. */ [data-ui="v2"] .stat-card { min-width: 0; } [data-ui="v2"] .stat-card .stat-value { min-width: 0; } /* Garde-fou global : tout montant formaté ne doit jamais wrapper, peu importe le contexte (tableaux Comptes à recevoir, dashboard, factures, etc.) */ [data-ui="v2"] .amount-current, [data-ui="v2"] .amount-aging-0-30, [data-ui="v2"] .amount-aging-31-60, [data-ui="v2"] .amount-aging-61-90, [data-ui="v2"] .amount-aging-90-plus, [data-ui="v2"] .receivables-table td.text-end, [data-ui="v2"] .table td.text-end strong, [data-ui="v2"] .table td.text-end .fw-bold { white-space: nowrap; } /* Dashboard summary cards icon (top icon) */ [data-ui="v2"] .stat-card [data-feather], [data-ui="v2"] .stat-card [data-lucide], [data-ui="v2"] .card.text-center [data-feather], [data-ui="v2"] .card.text-center [data-lucide] { width: 18px !important; height: 18px !important; opacity: 0.7; } /* Dashboard top stat cards (col-6 col-md) */ [data-ui="v2"] .card.text-center .card-body { padding: var(--s-5); text-align: left !important; } [data-ui="v2"] .card.text-center .card-title { font-family: 'Host Grotesk', 'Onest', sans-serif; font-weight: 800; font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; margin: var(--s-2) 0 var(--s-1); color: hsl(var(--gray-900)); } [data-ui="v2"] .card.text-center .card-text { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--gray-500)); font-weight: 600; margin: 0; } /* Border-left colorée par tranche d'âge — code couleur identique aux montants du tableau .receivables-table (.amount-current / .amount-aging-*) afin que l'œil puisse passer instantanément de la carte à la colonne correspondante. Les HSL ci-dessous sont synchronisés avec static/css/style.css lignes 666-689. */ [data-ui="v2"] .receivables-stats .stat-card.total { border-left: 4px solid hsl(215 16% 75%) !important; } [data-ui="v2"] .receivables-stats .stat-card.current { border-left: 4px solid hsl(var(--success-fg)) !important; } [data-ui="v2"] .receivables-stats .stat-card.aging-0-30 { border-left: 4px solid hsl(38 92% 50%) !important; } [data-ui="v2"] .receivables-stats .stat-card.aging-31-60 { border-left: 4px solid hsl(25 95% 55%) !important; } [data-ui="v2"] .receivables-stats .stat-card.aging-61-90 { border-left: 4px solid hsl(var(--danger-fg)) !important; } [data-ui="v2"] .receivables-stats .stat-card.aging-90-plus { border-left: 4px solid hsl(0 84% 40%) !important; } /* Variants génériques (success/warning/danger) — bord coloré aussi pour cohérence partout où ces classes sont utilisées (dashboard, autres pages). */ [data-ui="v2"] .stat-card.success { border-left: 4px solid hsl(var(--success-fg)) !important; } [data-ui="v2"] .stat-card.warning { border-left: 4px solid hsl(var(--warning-fg)) !important; } [data-ui="v2"] .stat-card.danger { border-left: 4px solid hsl(var(--danger-fg)) !important; } /* Aging dot indicator (pour le résumé compact) */ [data-ui="v2"] .aging-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); vertical-align: middle; margin-right: var(--s-2); } /* ========================================================================== 9. Tables — densité 36px, pas de scale au hover ========================================================================== */ [data-ui="v2"] .table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 0; background: white; font-size: var(--t-sm); } [data-ui="v2"] .table thead th { background: hsl(var(--gray-50)); text-transform: none; letter-spacing: 0; font-weight: 600; color: hsl(var(--gray-500)); font-size: var(--t-xs); padding: 10px var(--s-3); border: none; border-bottom: 1px solid hsl(var(--gray-200)); white-space: nowrap; position: relative; } [data-ui="v2"] .table thead th:first-child { border-top-left-radius: var(--r-lg); } [data-ui="v2"] .table thead th:last-child { border-top-right-radius: var(--r-lg); } [data-ui="v2"] .table tbody td { padding: 10px var(--s-3); border: none; border-bottom: 1px solid hsl(var(--gray-100)); vertical-align: middle; color: hsl(var(--gray-800)); } [data-ui="v2"] .table tbody tr { transition: background-color var(--d-fast) var(--ease-quart); } [data-ui="v2"] .table tbody tr:hover { background: hsl(var(--gray-50)); transform: none !important; background-image: none !important; } [data-ui="v2"] .table tbody tr:last-child td { border-bottom: none; } [data-ui="v2"] .table-striped tbody tr:nth-of-type(odd) > * { background: transparent; } /* Sortable headers */ [data-ui="v2"] .table .sortable-column { cursor: pointer; user-select: none; transition: color var(--d-fast) var(--ease-quart); } [data-ui="v2"] .table .sortable-column:hover { color: hsl(var(--gray-800)); } /* Card-wrapped tables: remove inner border from card */ [data-ui="v2"] .card .table-responsive { border-radius: 0; } /* Row-action dropdowns inside tables must escape the .table-responsive clipping. Strategy: keep table-responsive scrollable on mobile, but the dropdown MENU itself uses position: fixed so it floats above any overflow context, with a high z-index. Bootstrap's Popper still computes the coordinates — they're just relative to viewport now. SCOPED to tables only so navbar/modal/form dropdowns keep Bootstrap's default positioning. */ [data-ui="v2"] .table-responsive .dropdown-menu.show, [data-ui="v2"] .table .dropdown-menu.show { position: fixed !important; z-index: 1080; } [data-ui="v2"] .card > .table:first-child thead th:first-child { border-top-left-radius: 0; } /* ========================================================================== 10. Forms — inputs propres, focus violet subtil ========================================================================== */ [data-ui="v2"] .form-control, [data-ui="v2"] .form-select { display: block; width: 100%; padding: 8px var(--s-3); font-size: var(--t-sm); line-height: var(--lh-sm); font-family: 'Onest', sans-serif; color: hsl(var(--gray-900)); background: white; border: 1px solid hsl(var(--gray-300)); border-radius: var(--r-md); box-shadow: var(--shadow-xs); transition: border-color var(--d-fast) var(--ease-quart), box-shadow var(--d-fast) var(--ease-quart); } [data-ui="v2"] .form-control::placeholder { color: hsl(var(--gray-400)); } [data-ui="v2"] .form-control:hover, [data-ui="v2"] .form-select:hover { border-color: hsl(var(--gray-400)); } [data-ui="v2"] .form-control:focus, [data-ui="v2"] .form-select:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: var(--shadow-ring-primary); background: white; } [data-ui="v2"] .form-control:disabled, [data-ui="v2"] .form-select:disabled { background: hsl(var(--gray-100)); color: hsl(var(--gray-400)); cursor: not-allowed; } [data-ui="v2"] .form-control-lg, [data-ui="v2"] .form-select-lg { padding: 11px var(--s-3); font-size: var(--t-base); border-radius: var(--r-md); } [data-ui="v2"] .form-control-sm, [data-ui="v2"] .form-select-sm { padding: 5px var(--s-2); font-size: var(--t-xs); } [data-ui="v2"] .form-label { display: block; margin-bottom: 6px; font-size: var(--t-sm); font-weight: 500; color: hsl(var(--gray-700)); letter-spacing: -0.005em; } [data-ui="v2"] .form-text { font-size: var(--t-xs); color: hsl(var(--gray-500)); margin-top: 4px; } [data-ui="v2"] .form-check-input { width: 16px; height: 16px; border: 1px solid hsl(var(--gray-400)); border-radius: 4px; cursor: pointer; } [data-ui="v2"] .form-check-input:checked { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); } [data-ui="v2"] .form-check-input:focus { box-shadow: var(--shadow-ring-primary); } [data-ui="v2"] .form-select { /* Kill native chevron so only the custom SVG renders (no double arrow) */ appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='m4 6 4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: var(--s-8); } /* IE/legacy fallback */ [data-ui="v2"] .form-select::-ms-expand { display: none; } /* Native