/* ═══════ ANNALIS HCR — Design System V3 ═══════ */

:root {
  /* Palette principale */
  --annalis-bg-deep: #070a0e;
  --annalis-bg-primary: #0b0f14;
  --annalis-bg-surface: #111820;
  --annalis-bg-elevated: #171f28;
  --annalis-bg-hover: #1e2832;

  --annalis-gold: #C9A227;
  --annalis-gold-light: #e8d48a;
  --annalis-gold-dim: rgba(201,162,39,0.15);

  --annalis-text-primary: #f0f0f0;
  --annalis-text-secondary: #b0c0bb;
  --annalis-text-muted: #7a8a96;
  --annalis-text-dim: #4a5a66;
  --annalis-text-faint: #3a4a56;

  --annalis-border: rgba(255,255,255,0.07);
  --annalis-border-hover: rgba(255,255,255,0.14);
  --annalis-border-gold: rgba(201,162,39,0.2);

  --annalis-green: #22c55e;
  --annalis-purple: #a855f7;
  --annalis-blue: #3b82f6;
  --annalis-red: #ef4444;
  --annalis-amber: #f59e0b;

  --annalis-radius-sm: 8px;
  --annalis-radius-md: 12px;
  --annalis-radius-lg: 16px;
  --annalis-radius-xl: 20px;

  --annalis-transition: 0.25s ease;
  --annalis-transition-slow: 0.4s ease;
}

body, html {
  background: var(--annalis-bg-deep) !important;
}

.annalis-sidebar, [class*="sidebar"], [style*="background: #0f1a16"] {
  background: var(--annalis-bg-surface) !important;
}

/* Harmonisation typographique */
button,
input,
select,
textarea,
table,
th,
td {
  font-family: inherit;
}

/* ═══ Animations ═══ */
@keyframes annalis-fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes annalis-slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes annalis-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes annalis-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes annalis-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes annalis-barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes annalis-borderGlow {
  0%, 100% { border-color: rgba(201,162,39,0.12); }
  50%       { border-color: rgba(201,162,39,0.3); }
}
@keyframes annalis-countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Glass morphism ═══ */
.annalis-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid var(--annalis-border);
  border-radius: var(--annalis-radius-lg);
}

/* ═══ Cards ═══ */
.annalis-card {
  background: var(--annalis-bg-surface);
  border: 0.5px solid var(--annalis-border);
  border-radius: var(--annalis-radius-lg);
  transition: all var(--annalis-transition);
}
.annalis-card:hover {
  border-color: var(--annalis-border-hover);
  background: var(--annalis-bg-elevated);
}

/* ═══ KPI Cards ═══ */
.annalis-kpi {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--annalis-border);
  border-radius: var(--annalis-radius-lg);
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.annalis-kpi:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--annalis-border-gold);
  transform: translateY(-2px);
}
.annalis-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--annalis-gold), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.annalis-kpi:hover::after { opacity: 1; }

/* ═══ Buttons ═══ */
.annalis-btn-gold {
  background: linear-gradient(135deg, var(--annalis-gold), #e8c84a);
  border: none;
  border-radius: var(--annalis-radius-md);
  padding: 12px 24px;
  color: var(--annalis-bg-deep);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--annalis-transition);
  letter-spacing: 0.3px;
}
.annalis-btn-gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.annalis-btn-gold:active {
  transform: scale(0.98);
}

.annalis-btn-outline {
  background: transparent;
  border: 0.5px solid var(--annalis-border-gold);
  border-radius: var(--annalis-radius-md);
  padding: 10px 20px;
  color: var(--annalis-gold);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--annalis-transition);
}
.annalis-btn-outline:hover {
  background: rgba(201,162,39,0.08);
}

/* ═══ Inputs ═══ */
.annalis-input {
  background: rgba(0,0,0,0.25);
  border: 0.5px solid var(--annalis-border);
  border-radius: var(--annalis-radius-md);
  padding: 12px 16px;
  color: var(--annalis-text-primary);
  font-size: 13px;
  transition: all var(--annalis-transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.annalis-input:focus,
.annalis-input:hover {
  border-color: var(--annalis-border-gold);
  background: rgba(0,0,0,0.35);
}
.annalis-input::placeholder {
  color: var(--annalis-text-faint);
}

/* ═══ Badges ═══ */
.annalis-badge {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}
.annalis-badge-food    { background: rgba(34,197,94,0.1);   color: var(--annalis-green); }
.annalis-badge-bev     { background: rgba(168,85,247,0.1);  color: var(--annalis-purple); }
.annalis-badge-import  { background: rgba(59,130,246,0.1);  color: var(--annalis-blue); }
.annalis-badge-manual  { background: rgba(255,255,255,0.04); color: var(--annalis-text-muted); }
.annalis-badge-danger  { background: rgba(239,68,68,0.1);   color: var(--annalis-red); }
.annalis-badge-warning { background: rgba(245,158,11,0.1);  color: var(--annalis-amber); }
.annalis-badge-gold    { background: rgba(201,162,39,0.1);  color: var(--annalis-gold); }
.annalis-badge-configured { background: rgba(34,197,94,0.07); color: var(--annalis-green); }

/* ═══ Navigation ═══ */
.annalis-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--annalis-transition);
  position: relative;
  color: var(--annalis-text-muted);
  font-size: 13px;
}
.annalis-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--annalis-text-secondary);
}
.annalis-nav-item.active {
  background: rgba(201,162,39,0.08);
  color: var(--annalis-gold);
}
.annalis-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--annalis-gold);
}

/* ═══ Table rows ═══ */
.annalis-table-row {
  transition: all 0.2s ease;
  border-radius: 8px;
}
.annalis-table-row:hover {
  background: rgba(201,162,39,0.04);
}

/* ═══ Orbes lumineux ═══ */
.annalis-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.annalis-orb-gold {
  background: radial-gradient(circle, rgba(201,162,39,0.07) 0%, transparent 70%);
  animation: annalis-float 8s ease-in-out infinite;
}
.annalis-orb-green {
  background: radial-gradient(circle, rgba(34,197,94,0.05) 0%, transparent 70%);
  animation: annalis-float 10s ease-in-out infinite reverse;
}

/* ═══ Labels ═══ */
.annalis-label {
  font-size: 10px;
  color: var(--annalis-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ═══ KPI Value ═══ */
.annalis-kpi-value {
  font-size: 28px;
  font-weight: 500;
  color: var(--annalis-text-primary);
  letter-spacing: -0.5px;
  animation: annalis-countUp 0.8s ease;
}

/* ═══ Variation badges ═══ */
.annalis-var-up {
  background: rgba(34,197,94,0.15);
  color: var(--annalis-green);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.annalis-var-down {
  background: rgba(239,68,68,0.15);
  color: var(--annalis-red);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar         { width: 6px; }
::-webkit-scrollbar-track   { background: var(--annalis-bg-primary); }
::-webkit-scrollbar-thumb   { background: var(--annalis-bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--annalis-text-dim); }

/* ═══════════════════════════════════════════════════════════════════
   ANNALIS — TABLES V3
   Appliqué à tous les tableaux : Ventes, Achats, Stocks, Pertes,
   Charges, Payroll, Fournisseurs, FT, Food Cost, Bev Cost, P&L
═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper conteneur ── */
.table-container,
.overflow-x-auto.table-container {
  background: rgba(255,255,255,0.025);
  border: 0.5px solid var(--annalis-border);
  border-radius: 14px;
  overflow: hidden;
}

/* Wrapper générique overflow + table directe */
div.overflow-x-auto > table.min-w-full,
div[class*="overflow-x-auto"] > table.min-w-full {
  border-collapse: collapse;
  width: 100%;
}

/* ── En-tête ── */
table.min-w-full thead {
  background: transparent !important;
  background-image: none !important;
}
table.min-w-full thead tr {
  background: transparent !important;
}
table.min-w-full thead th {
  color: var(--annalis-text-dim) !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.06) !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  background: transparent !important;
  white-space: nowrap;
}

/* ── Corps ── */
table.min-w-full tbody {
  border: none !important;
}
table.min-w-full tbody tr {
  border-bottom: 0.5px solid rgba(255,255,255,0.035) !important;
  border-top: none !important;
  transition: background 0.18s ease;
}
table.min-w-full tbody tr:hover {
  background: rgba(201,162,39,0.04) !important;
}
table.min-w-full tbody td {
  padding: 9px 12px !important;
  font-size: 12px;
  color: var(--annalis-text-secondary);
  border: none !important;
}

/* ── Animations d'entrée ── */
table.min-w-full tbody tr { animation: annalis-slideIn 0.3s ease both; }
table.min-w-full tbody tr:nth-child(1)  { animation-delay: 0.03s; }
table.min-w-full tbody tr:nth-child(2)  { animation-delay: 0.06s; }
table.min-w-full tbody tr:nth-child(3)  { animation-delay: 0.09s; }
table.min-w-full tbody tr:nth-child(4)  { animation-delay: 0.12s; }
table.min-w-full tbody tr:nth-child(5)  { animation-delay: 0.15s; }
table.min-w-full tbody tr:nth-child(6)  { animation-delay: 0.18s; }
table.min-w-full tbody tr:nth-child(7)  { animation-delay: 0.21s; }
table.min-w-full tbody tr:nth-child(8)  { animation-delay: 0.24s; }
table.min-w-full tbody tr:nth-child(9)  { animation-delay: 0.27s; }
table.min-w-full tbody tr:nth-child(10) { animation-delay: 0.30s; }
table.min-w-full tbody tr:nth-child(n+11) { animation-delay: 0.32s; }

/* ── Texte principal (produit, article, nom) ── */
table.min-w-full td.font-medium,
table.min-w-full td.font-semibold,
table.min-w-full td strong {
  color: var(--annalis-text-primary) !important;
  font-weight: 500;
}

/* ── Cellules numériques droite ── */
table.min-w-full td.text-right,
table.min-w-full td[class*="text-right"] { text-align: right; }

/* ── Lignes de total ── */
table.min-w-full tfoot tr,
table.min-w-full tbody tr.row-total,
table.min-w-full tbody tr[class*="total"] {
  background: rgba(201,162,39,0.06) !important;
  border-top: 1px solid rgba(201,162,39,0.18) !important;
  font-weight: 500;
  color: var(--annalis-gold) !important;
}
table.min-w-full tfoot td,
table.min-w-full tbody tr.row-total td,
table.min-w-full tbody tr[class*="total"] td {
  color: var(--annalis-gold) !important;
  font-weight: 500;
}

/* ── Colonnes stocks : SFT / Écart ── */
.col-sft-positive { color: var(--annalis-gold) !important; }
.col-sft-positive  { color: #C9A227 !important; font-weight: 600 !important; }
.col-sft-negative  { color: #ef4444 !important; font-weight: 600 !important; }
.col-ecart-pos     { color: #22c55e !important; font-weight: 600 !important; }
.col-ecart-neg     { color: #ef4444 !important; font-weight: 600 !important; }
.col-ecart-zero    { color: rgba(106,138,128,0.5) !important; font-weight: 400 !important; }

/* Alias stock-* (demandés par user) */
.stock-sft-positive  { color: #C9A227 !important; font-weight: 600 !important; }
.stock-sft-negative  { color: #ef4444 !important; font-weight: 600 !important; }
.stock-ecart-positive { color: #22c55e !important; font-weight: 600 !important; }
.stock-ecart-negative { color: #ef4444 !important; font-weight: 600 !important; }
.stock-ecart-zero     { color: rgba(106,138,128,0.5) !important; font-weight: 400 !important; }

/* ── Food Cost ratio colors ── */
.cost-ok      { color: var(--annalis-green) !important; }
.cost-warning { color: var(--annalis-amber) !important; }
.cost-danger  { color: var(--annalis-red) !important; }

/* ── Boutons d'action (supprimer, modifier) ── */
table.min-w-full td button.action-delete,
table.min-w-full td button[class*="text-red"],
table.min-w-full td button[class*="delete"] {
  color: var(--annalis-text-dim) !important;
  transition: color 0.2s ease;
}
table.min-w-full td button.action-delete:hover,
table.min-w-full td button[class*="text-red"]:hover,
table.min-w-full td button[class*="delete"]:hover {
  color: var(--annalis-red) !important;
}

/* ── QuickDateFilters V3 ── */
.annalis-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 0 6px;
  border-top: 0.5px solid var(--annalis-border);
  margin-top: 4px;
}
.annalis-quick-filters .filter-label {
  font-size: 10px;
  color: var(--annalis-text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-right: 4px;
}
.annalis-quick-filter-btn {
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid var(--annalis-border);
  background: rgba(255,255,255,0.04);
  color: var(--annalis-text-muted);
  transition: all 0.18s ease;
}
.annalis-quick-filter-btn:hover {
  border-color: rgba(201,162,39,0.3);
  color: var(--annalis-text-secondary);
}
.annalis-quick-filter-btn.active {
  background: rgba(201,162,39,0.14);
  border-color: rgba(201,162,39,0.35);
  color: var(--annalis-gold);
}

/* ── Barre de recherche ── */
.annalis-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.annalis-search-bar input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--annalis-border);
  border-radius: 10px;
  color: var(--annalis-text-primary);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.annalis-search-bar input::placeholder { color: var(--annalis-text-dim); }
.annalis-search-bar input:focus { border-color: rgba(201,162,39,0.4); }
.annalis-search-bar .search-icon {
  position: absolute;
  left: 10px;
  color: var(--annalis-text-dim);
  font-size: 13px;
  pointer-events: none;
}

/* ── Pagination ── */
.annalis-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  font-size: 11px;
  color: var(--annalis-text-dim);
}
.annalis-pagination button {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid var(--annalis-border);
  color: var(--annalis-text-muted);
  transition: all 0.18s ease;
}
.annalis-pagination button:hover {
  border-color: rgba(201,162,39,0.3);
  color: var(--annalis-gold);
}

/* ── P&L lignes de sous-total ── */
.pl-subtotal td {
  background: rgba(255,255,255,0.02) !important;
  color: var(--annalis-text-secondary) !important;
  font-weight: 500;
  font-size: 11px;
}
.pl-total td {
  background: rgba(201,162,39,0.07) !important;
  color: var(--annalis-gold) !important;
  font-weight: 600;
  border-top: 1px solid rgba(201,162,39,0.2) !important;
}

/* ── Override Tailwind zebra / divide-y ── */
.divide-y > *        { border-color: rgba(255,255,255,0.035) !important; }
.divide-y-\[0\.5px\] > * { border-color: rgba(255,255,255,0.035) !important; }

/* ── bg-white dans les conteneurs de tableaux → transparent ── */
.table-container .bg-white,
.overflow-x-auto.table-container .bg-white { background: transparent !important; }

/* ── Supprime tous les fonds gradient colorés → remplacés par glass ── */
.bg-gradient-to-r.from-gray-50,
.bg-gradient-to-r.from-gray-50.to-gray-100,
.bg-gradient-to-r.from-orange-50,
.bg-gradient-to-r.from-amber-50,
.bg-gradient-to-r.from-purple-50,
.bg-gradient-to-r.from-blue-50,
.bg-gradient-to-r.from-indigo-50,
.bg-gradient-to-r.from-green-50,
.bg-gradient-to-r.from-red-50,
thead.bg-gradient-to-r,
thead.bg-gray-100,
thead.bg-orange-50 {
  background: transparent !important;
  background-image: none !important;
}
/* Headers d'onglets avec gradient coloré → glass */
.bg-gradient-to-r[class*="border-l-4"][class*="rounded-2xl"],
div[class*="from-orange-50"][class*="border-l-4"],
div[class*="from-purple-50"][class*="border-l-4"],
div[class*="from-amber-50"][class*="border-l-4"],
div[class*="from-blue-50"][class*="border-l-4"],
div[class*="from-indigo-50"][class*="border-l-4"],
div[class*="from-green-50"][class*="border-l-4"] {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border-left: none !important;
  border: 0.5px solid var(--annalis-border) !important;
  color: var(--annalis-text-primary) !important;
}

/* ── Texte th Tailwind → remplacé ── */
thead.text-gray-700 th,
thead th.text-gray-700,
thead.text-gray-700,
.text-gray-700 thead th {
  color: var(--annalis-text-dim) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COHÉRENCE GLOBALE ONGLETS V3
   Override des headers d'onglets avec gradient coloré → glass V3
═══════════════════════════════════════════════════════════════════ */

/* ── Headers d'onglets (border-l-4 + rounded-2xl + p-6) → glass ── */
[class*="border-l-4"][class*="rounded-2xl"] {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border-left: none !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
}
[class*="border-l-4"][class*="rounded-2xl"] h2,
[class*="border-l-4"][class*="rounded-2xl"] h3 {
  color: var(--annalis-text-primary) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}
[class*="border-l-4"][class*="rounded-2xl"] p {
  color: var(--annalis-text-muted) !important;
  font-size: 13px !important;
}

/* ── Cards KPI (composant Card) → glass ── */
.bg-white.rounded-xl.border-2,
.bg-white.rounded-xl.border,
.bg-white.rounded-2xl.shadow-xl {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: var(--annalis-text-primary) !important;
}
.bg-white.rounded-xl.border-2 h3,
.bg-white.rounded-xl.border h3,
.bg-white.rounded-2xl.shadow-xl h3 {
  color: var(--annalis-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.bg-white.rounded-xl.border-2 .text-3xl.font-bold,
.bg-white.rounded-xl.border .text-3xl.font-bold,
.bg-white.rounded-2xl .text-3xl.font-bold {
  font-size: 26px !important;
}

/* ── Textes secondaires dans les cartes → muted ── */
.text-gray-600, .text-gray-500 { color: var(--annalis-text-muted) !important; }
.text-gray-700, .text-gray-800 { color: var(--annalis-text-secondary) !important; }
.text-gray-900 { color: var(--annalis-text-primary) !important; }
/* Exceptions : préserver les éléments de formulaire */
input, select, textarea, label { color: var(--annalis-text-secondary) !important; }
input::placeholder, textarea::placeholder { color: var(--annalis-text-dim) !important; }

/* ── bg-white cards génériques dans les onglets ── */
.bg-white.rounded-lg,
.bg-white.rounded-xl {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
/* Exception: modals et dropdowns restent blanc */
.fixed .bg-white,
.modal .bg-white,
[role="dialog"] .bg-white,
select option { background: #1a2e28 !important; color: var(--annalis-text-primary) !important; }

/* ── bg-gray-50/100 → surface sombre ── */
.bg-gray-50 { background: rgba(255,255,255,0.02) !important; }
.bg-gray-100 { background: rgba(255,255,255,0.03) !important; }
/* Exception modals */
.fixed .bg-gray-50, .fixed .bg-gray-100 { background: #1a2e28 !important; }

/* ── Food Cost / Bev Cost ratio coloring via classes inline ── */
.ratio-ok      { color: var(--annalis-green) !important; font-weight: 600; }
.ratio-warning { color: var(--annalis-amber) !important; font-weight: 600; }
.ratio-danger  { color: var(--annalis-red)   !important; font-weight: 600; }

/* ── Boutons primaires bg-[#012B25] → glass doré ── */
.bg-\[#012B25\]:not([class*="sidebar"]):not([class*="modal"]) {
  background: rgba(201,162,39,0.12) !important;
  color: var(--annalis-gold) !important;
  border: 0.5px solid rgba(201,162,39,0.25) !important;
}
.bg-\[#012B25\]:hover:not([class*="sidebar"]):not([class*="modal"]) {
  background: rgba(201,162,39,0.2) !important;
}

/* ── Inputs dans les formulaires ── */
input[type="text"], input[type="number"], input[type="email"],
input[type="date"], input[type="search"], select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px;
  color: var(--annalis-text-primary) !important;
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(201,162,39,0.4) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Badges Tailwind → V3 ── */
.bg-green-100.text-green-800,
.bg-green-100 { background: rgba(34,197,94,0.1) !important; }
.text-green-800, .text-green-700, .text-green-600 { color: var(--annalis-green) !important; }
.bg-purple-100.text-purple-800,
.bg-purple-100 { background: rgba(168,85,247,0.1) !important; }
.text-purple-800, .text-purple-700, .text-purple-600 { color: var(--annalis-purple) !important; }
.bg-red-100 { background: rgba(239,68,68,0.1) !important; }
.text-red-700, .text-red-600 { color: var(--annalis-red) !important; }
.bg-amber-100, .bg-yellow-100 { background: rgba(245,158,11,0.1) !important; }
.text-amber-700, .text-yellow-700 { color: var(--annalis-amber) !important; }
.bg-blue-100 { background: rgba(59,130,246,0.1) !important; }
.text-blue-700, .text-blue-600 { color: var(--annalis-blue) !important; }

/* ── Séparateurs ── */
.border-gray-200, .border-gray-300 { border-color: rgba(255,255,255,0.06) !important; }
.divide-gray-200 > * { border-color: rgba(255,255,255,0.035) !important; }

/* ── P&L sections ── */
.border-l-4.border-gray-500,
.border-l-4.border-green-500,
.border-l-4.border-red-500,
.border-l-4.border-amber-500 {
  border-left-color: var(--annalis-gold) !important;
  background: rgba(255,255,255,0.02) !important;
}

/* ══════════════════════════════════════════════════════
   PHASE F — MODALS, FORMULAIRES, BOUTONS V3
   ══════════════════════════════════════════════════════ */

/* ── Overlay Modal ── */
.fixed.inset-0.transition-opacity.bg-gray-900,
.fixed.inset-0.bg-gray-900.bg-opacity-75,
.bg-gray-900.bg-opacity-75 {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black.bg-opacity-50,
.fixed.inset-0[class*="bg-black"] {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── Conteneur Modal (.modal-content) ── */
.modal-content {
  background: var(--annalis-bg-surface) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(201,162,39,0.08) !important;
  animation: annalis-fadeUp 0.28s ease both !important;
  color: var(--annalis-text-primary) !important;
}

/* Contenu intérieur du modal (div.bg-white) */
.modal-content .bg-white,
.modal-content > div {
  background: transparent !important;
}

/* ── En-tête du modal (.modal-header) ── */
.modal-header {
  background: transparent !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.07) !important;
  padding: 20px 24px !important;
}
.modal-header h3 {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--annalis-text-primary) !important;
}
.modal-header p,
.modal-header .text-sm {
  font-size: 12px !important;
  color: var(--annalis-text-muted) !important;
}

/* ── Bouton fermer (X) dans le modal ── */
.modal-header button,
.modal-header button[type="button"] {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 50% !important;
  color: var(--annalis-text-muted) !important;
  transition: all 0.2s ease !important;
}
.modal-header button:hover {
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: var(--annalis-red) !important;
}

/* Corps scrollable du modal */
.modal-content .overflow-y-auto,
.modal-content .overflow-auto,
.modal-content .p-4,
.modal-content .p-6,
.modal-content .px-4,
.modal-content .px-6,
.modal-content .sm\:px-6 {
  background: transparent !important;
}

/* ── FORMULAIRES V3 ── */

/* Labels de formulaire */
.modal-content label,
form label,
[class*="rounded-2xl"] label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--annalis-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
  display: block;
}

/* Inputs dans les modals/formulaires */
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="email"],
.modal-content input[type="date"],
.modal-content input[type="time"],
.modal-content input[type="search"],
.modal-content input[type="password"],
.modal-content select,
.modal-content textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 10px !important;
  color: var(--annalis-text-primary) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  outline: none !important;
  width: 100%;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--annalis-gold) !important;
  background: rgba(201,162,39,0.04) !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,0.1) !important;
}

/* Autocomplete dropdown des produits (recherche vente) */
.modal-content .bg-white.border.rounded-lg.shadow-lg,
.modal-content .absolute.bg-white,
.modal-content [class*="absolute"][class*="bg-white"],
.modal-content [class*="absolute"][class*="border"] {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}
.modal-content .bg-white.border.rounded-lg.shadow-lg li,
.modal-content [class*="absolute"][class*="bg-white"] li,
.modal-content [class*="absolute"][class*="border"] li,
.modal-content [class*="absolute"][class*="bg-white"] button {
  color: var(--annalis-text-primary) !important;
  padding: 8px 14px !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.04) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.modal-content [class*="absolute"] li:hover,
.modal-content [class*="absolute"] button:hover {
  background: rgba(201,162,39,0.08) !important;
}

/* ── BOUTON DANGER ── */
.annalis-btn-danger {
  background: rgba(239, 68, 68, 0.08);
  border: 0.5px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 10px 20px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.annalis-btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}
.annalis-btn-danger:active {
  transform: scale(0.98);
}

/* Boutons annuler (bg-gray-200) → outline V3 */
.modal-content button.bg-gray-200,
.modal-content button[class*="bg-gray-200"],
.modal-content button[class*="bg-gray-100"],
.modal-content button[class*="bg-gray-300"] {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: var(--annalis-text-secondary) !important;
  transition: all 0.25s ease !important;
}
.modal-content button.bg-gray-200:hover,
.modal-content button[class*="bg-gray-200"]:hover {
  background: rgba(255,255,255,0.09) !important;
  color: var(--annalis-text-primary) !important;
}

/* Boutons danger (bg-red) dans les modals → .annalis-btn-danger style */
.modal-content button[class*="bg-red"],
.modal-content button[class*="text-red"]:not(.modal-header button) {
  background: rgba(239,68,68,0.08) !important;
  border: 0.5px solid rgba(239,68,68,0.2) !important;
  border-radius: 10px !important;
  color: #ef4444 !important;
  transition: all 0.25s ease !important;
}
.modal-content button[class*="bg-red"]:hover,
.modal-content button[class*="text-red"]:not(.modal-header button):hover {
  background: rgba(239,68,68,0.18) !important;
}

/* Tous les boutons : border-radius 10px + active scale */
.modal-content button,
.annalis-btn-gold,
.annalis-btn-outline,
.annalis-btn-danger {
  border-radius: 10px !important;
}
.modal-content button:active:not(.modal-header button) {
  transform: scale(0.98) !important;
}

/* ── APERÇU IMPORT POS ── */

/* Info-box en haut de l'aperçu */
.modal-content .bg-\[\#012B25\]\/5,
.modal-content [class*="bg-\[#012B25\]"] {
  background: rgba(255,255,255,0.03) !important;
  border: 0.5px solid rgba(201,162,39,0.12) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.modal-content [class*="bg-\[#012B25\]"] p,
.modal-content [class*="bg-\[#012B25\]"] .text-blue-800,
.modal-content [class*="bg-\[#012B25\]"] .text-blue-700,
.modal-content [class*="bg-\[#012B25\]"] .text-blue-600 {
  color: var(--annalis-text-muted) !important;
}
.modal-content [class*="bg-\[#012B25\]"] .text-amber-800,
.modal-content [class*="bg-\[#012B25\]"] .font-medium {
  color: var(--annalis-gold) !important;
}

/* Badge "Système détecté" */
.modal-content .text-xs.rounded.border,
.modal-content [class*="bg-green-"] button,
.modal-content .bg-blue-50,
.modal-content .bg-\[\#012B25\]\/5 .font-medium {
  background: rgba(201,162,39,0.08) !important;
  border: 0.5px solid rgba(201,162,39,0.2) !important;
  color: var(--annalis-gold) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

/* Stats KPI mini dans l'aperçu */
.modal-content .grid .text-2xl,
.modal-content .grid .text-3xl {
  color: var(--annalis-gold) !important;
  font-weight: 600 !important;
}

/* Tableau d'aperçu */
.modal-content .bg-white.border.rounded-lg.overflow-hidden {
  background: rgba(255,255,255,0.02) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
}
.modal-content .bg-white.border.rounded-lg.overflow-hidden thead,
.modal-content .bg-gray-50.border-b {
  background: transparent !important;
}
.modal-content .bg-white.border.rounded-lg.overflow-hidden th {
  color: var(--annalis-text-dim) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 8px 12px !important;
}
/* Lignes food/bev colorées dans l'aperçu */
.modal-content .bg-green-50  { background: rgba(34,197,94,0.04) !important; }
.modal-content .bg-purple-50 { background: rgba(168,85,247,0.04) !important; }
.modal-content .bg-gray-50\/50,
.modal-content .bg-gray-50   { background: rgba(255,255,255,0.015) !important; }
.modal-content td.text-green-900 { color: #4ade80 !important; }
.modal-content td.text-purple-900 { color: #c084fc !important; }

/* Boutons de l'aperçu POS */
.modal-content button.bg-green-600,
.modal-content button[class*="bg-green"] {
  background: linear-gradient(135deg, #C9A227, #a07d1a) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 10px !important;
}

/* ── TOASTS / NOTIFICATIONS ── */

/* Toast succès (bg-green-500) */
.fixed.top-4.right-4.bg-green-500,
.fixed.top-4.right-4[class*="bg-green"] {
  background: rgba(34,197,94,0.12) !important;
  border: 0.5px solid rgba(34,197,94,0.3) !important;
  border-left: 3px solid #22c55e !important;
  border-radius: 12px !important;
  color: #4ade80 !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Toast erreur */
.fixed.top-4.right-4.bg-red-500,
.fixed.top-4.right-4[class*="bg-red"] {
  background: rgba(239,68,68,0.12) !important;
  border: 0.5px solid rgba(239,68,68,0.3) !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 12px !important;
  color: #fca5a5 !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Toast info */
.fixed.top-4.right-4.bg-blue-500,
.fixed.top-4.right-4[class*="bg-blue"],
.fixed.top-4.right-4.bg-amber-500,
.fixed.top-4.right-4[class*="bg-amber"] {
  background: rgba(201,162,39,0.1) !important;
  border: 0.5px solid rgba(201,162,39,0.25) !important;
  border-left: 3px solid var(--annalis-gold) !important;
  border-radius: 12px !important;
  color: var(--annalis-gold) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* ── STEPPER VISUEL ── */
.annalis-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.5rem;
}
.annalis-step {
  display: flex;
  align-items: center;
  gap: 6px;
}
.annalis-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.annalis-step-active .annalis-step-number {
  background: var(--annalis-gold);
  color: var(--annalis-bg-deep);
}
.annalis-step-inactive .annalis-step-number {
  background: rgba(255,255,255,0.06);
  color: var(--annalis-text-dim);
}
.annalis-step-label {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.annalis-step-active .annalis-step-label  { color: var(--annalis-gold); }
.annalis-step-inactive .annalis-step-label { color: var(--annalis-text-dim); }
.annalis-step-line {
  flex: 1;
  height: 1px;
  margin: 0 8px;
}
.annalis-step-line-active   { background: rgba(201,162,39,0.3); }
.annalis-step-line-inactive { background: rgba(255,255,255,0.06); }

/* ── CORRECTIONS GLOBALES BOUTONS ── */

/* Boutons "Annuler / Retour" generiques (bg-gray-*) */
button.bg-gray-100, button.bg-gray-200, button.bg-gray-300,
button[class*="bg-gray-1"], button[class*="bg-gray-2"] {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  color: var(--annalis-text-secondary) !important;
  transition: all 0.25s ease !important;
}
button.bg-gray-100:hover, button.bg-gray-200:hover {
  background: rgba(255,255,255,0.09) !important;
  color: var(--annalis-text-primary) !important;
}

/* border-radius global sur les boutons primaires */
.annalis-btn-gold, .annalis-btn-outline {
  border-radius: 10px !important;
}
.annalis-btn-gold:active, .annalis-btn-outline:active, .annalis-btn-danger:active {
  transform: scale(0.98) !important;
}

/* Inputs & selects partout (hors modal, déjà ciblés au-dessus) */
input[type="text"]:not([class*="annalis"]),
input[type="number"]:not([class*="annalis"]),
input[type="date"]:not([class*="annalis"]),
input[type="email"]:not([class*="annalis"]),
input[type="time"]:not([class*="annalis"]),
select:not([class*="annalis"]) {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 10px !important;
  color: var(--annalis-text-primary) !important;
  transition: border-color 0.2s, background 0.2s !important;
}
input[type="text"]:focus:not([class*="annalis"]),
input[type="number"]:focus:not([class*="annalis"]),
input[type="date"]:focus:not([class*="annalis"]),
select:focus:not([class*="annalis"]) {
  border-color: var(--annalis-gold) !important;
  background: rgba(201,162,39,0.03) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,0.1) !important;
}

/* ══════════════════════════════════════════════════════
   PHASE H — BOUTONS D'ACTION UNIFORMES V3
   ══════════════════════════════════════════════════════ */

/* ── Barre d'actions ── */
.annalis-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Boutons sm (taille standard barre d'action) ── */
.annalis-btn-sm {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 500;
  border: none;
  outline: none;
  line-height: 1.4;
  min-height: 34px;
}

.annalis-btn-sm-gold {
  background: linear-gradient(135deg, #C9A227, #ddb738);
  color: #0a0f0d;
  border: none;
}
.annalis-btn-sm-gold:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.annalis-btn-sm-gold:active { transform: scale(0.97); }

.annalis-btn-sm-outline {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  color: var(--annalis-text-muted);
}
.annalis-btn-sm-outline:hover {
  border-color: rgba(201,162,39,0.35) !important;
  color: var(--annalis-gold);
  background: rgba(201,162,39,0.06);
}
.annalis-btn-sm-outline:active { transform: scale(0.97); }

.annalis-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid var(--annalis-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.annalis-date-btn:hover {
  border-color: var(--annalis-border-gold);
  background: rgba(201,162,39,0.06);
}

.annalis-btn-sm-danger {
  background: transparent;
  border: 0.5px solid rgba(239,68,68,0.18) !important;
  color: rgba(239,68,68,0.75);
}
.annalis-btn-sm-danger:hover {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  border-color: rgba(239,68,68,0.35) !important;
}
.annalis-btn-sm-danger:active { transform: scale(0.97); }

/* ── Override global du composant Button → taille sm V3 ── */
/* Barre d'outils principale (toolbars en haut des onglets) */
.bg-white.rounded-2xl.border.p-4 .flex.flex-wrap.gap-2 button,
.bg-white.rounded-2xl.border.p-4 .flex.flex-wrap.gap-2 .Button,
[class*="rounded-2xl"][class*="border"] .flex.gap-2.ml-auto button,
[class*="rounded-2xl"][class*="border"] .flex.gap-2.ml-auto .Button {
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  min-height: 34px !important;
  min-width: unset !important;
  white-space: nowrap !important;
}

/* Bouton primary (bg-[#012B25]) → doré */
.bg-white.rounded-2xl.border.p-4 button.bg-\[#012B25\],
.bg-white.rounded-2xl.border.p-4 button[class*="bg-\[#012B25\]"],
[class*="rounded-2xl"] .flex.gap-2 button.bg-\[#012B25\],
[class*="rounded-2xl"] .flex.gap-2 button[class*="bg-\[#012B25\]"] {
  background: linear-gradient(135deg, #C9A227, #ddb738) !important;
  color: #0a0f0d !important;
  border: none !important;
  font-weight: 500 !important;
}
[class*="rounded-2xl"] .flex.gap-2 button.bg-\[#012B25\]:hover {
  filter: brightness(1.1) !important;
}

/* Bouton secondary (bg-[#C9A227]) → outline discret */
.bg-white.rounded-2xl.border.p-4 button.bg-\[#C9A227\],
.bg-white.rounded-2xl.border.p-4 button[class*="bg-\[#C9A227\]"],
[class*="rounded-2xl"] .flex.gap-2 button.bg-\[#C9A227\],
[class*="rounded-2xl"] .flex.gap-2 button[class*="bg-\[#C9A227\]"] {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  color: var(--annalis-text-muted) !important;
}
[class*="rounded-2xl"] .flex.gap-2 button.bg-\[#C9A227\]:hover {
  border-color: rgba(201,162,39,0.35) !important;
  color: var(--annalis-gold) !important;
  background: rgba(201,162,39,0.06) !important;
}

/* Boutons custom colorés dans les barres d'action (Scanner violet, OneDrive bleu, etc.) → outline */
.flex.flex-wrap.gap-2 button.bg-purple-600,
.flex.flex-wrap.gap-2 button[class*="bg-purple"],
.flex.flex-wrap.gap-2 button.bg-blue-600,
.flex.flex-wrap.gap-2 button[class*="bg-blue-6"],
.flex.flex-wrap.gap-2 button.bg-green-600,
.flex.flex-wrap.gap-2 button[class*="bg-green-6"] {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  color: var(--annalis-text-muted) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  min-height: 34px !important;
}
.flex.flex-wrap.gap-2 button.bg-purple-600:hover,
.flex.flex-wrap.gap-2 button[class*="bg-purple"]:hover,
.flex.flex-wrap.gap-2 button.bg-blue-600:hover,
.flex.flex-wrap.gap-2 button[class*="bg-blue-6"]:hover,
.flex.flex-wrap.gap-2 button.bg-green-600:hover,
.flex.flex-wrap.gap-2 button[class*="bg-green-6"]:hover {
  border-color: rgba(201,162,39,0.3) !important;
  color: var(--annalis-gold) !important;
  background: rgba(201,162,39,0.05) !important;
}

/* Label import (label.inline-flex.bg-green-600) → outline */
.flex.flex-wrap.gap-2 label.bg-green-600,
.flex.flex-wrap.gap-2 label[class*="bg-green"] {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  color: var(--annalis-text-muted) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  min-height: 34px !important;
}
.flex.flex-wrap.gap-2 label.bg-green-600:hover,
.flex.flex-wrap.gap-2 label[class*="bg-green"]:hover {
  border-color: rgba(201,162,39,0.3) !important;
  color: var(--annalis-gold) !important;
  background: rgba(201,162,39,0.05) !important;
}

/* Bouton danger (bg-red-*) dans barres d'action → petit outline rouge */
.flex.flex-wrap.gap-2 button.bg-red-600,
.flex.flex-wrap.gap-2 button[class*="bg-red-6"] {
  background: rgba(239,68,68,0.08) !important;
  border: 0.5px solid rgba(239,68,68,0.2) !important;
  color: #ef4444 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  min-height: 34px !important;
}
.flex.flex-wrap.gap-2 button.bg-red-600:hover {
  background: rgba(239,68,68,0.15) !important;
}

/* Titre dans les toolbars (h2 avec text-2xl) → 16px V3 */
.bg-white.rounded-2xl.border.p-4 h2.text-2xl,
[class*="rounded-2xl"][class*="border"] h2.text-2xl {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--annalis-text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   PHASE G — MOBILE RESPONSIVE V3
   ══════════════════════════════════════════════════════ */

/* ── Hamburger V3 (restyling du .mobile-menu-button existant) ── */
@media (max-width: 768px) {
  .mobile-menu-button,
  .annalis-hamburger {
    background: rgba(15, 26, 22, 0.96) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #C9A227 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
  }
  .mobile-menu-button:hover,
  .annalis-hamburger:hover {
    background: rgba(201, 162, 39, 0.12) !important;
    border-color: rgba(201, 162, 39, 0.3) !important;
  }
  .mobile-menu-button:active,
  .annalis-hamburger:active {
    transform: scale(0.95) !important;
  }

  /* ── Overlay sidebar V3 ── */
  .mobile-overlay,
  .annalis-sidebar-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  /* ── Sidebar mobile V3 ── */
  .sidebar.open,
  .annalis-sidebar.open {
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6) !important;
  }

  /* ── Modal mobile V3 (override index.html bg:white) ── */
  .modal-header {
    background: var(--annalis-bg-surface) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: var(--annalis-text-primary) !important;
  }
  .modal-header h3 {
    color: var(--annalis-text-primary) !important;
  }
  .modal-footer {
    background: var(--annalis-bg-surface) !important;
    border-top: 0.5px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  .modal-content {
    background: var(--annalis-bg-surface) !important;
    border-radius: 0 !important;
  }

  /* ── KPI grid : 2 par ligne ── */
  .annalis-kpi-grid,
  .grid.md\:grid-cols-4,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .annalis-kpi {
    padding: 14px !important;
  }
  .annalis-kpi-value {
    font-size: 22px !important;
  }
  .annalis-label {
    font-size: 9px !important;
  }

  /* ── Tableaux responsive ── */
  .annalis-table-wrapper,
  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .annalis-hide-mobile {
    display: none !important;
  }
  table.min-w-full td,
  table.min-w-full th {
    padding: 7px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* ── Filtres rapides responsive ── */
  .annalis-quick-filters {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .annalis-quick-filter-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* ── Boutons responsive ── */
  .annalis-btn-gold,
  .annalis-btn-outline,
  .annalis-btn-danger {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }

  /* ── Graphiques en colonne ── */
  .annalis-charts-grid,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* ── Padding général du contenu principal ── */
  .annalis-main-content,
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ── Espacement adapté ── */
  .space-y-6 > * + * { margin-top: 14px !important; }
  .space-y-4 > * + * { margin-top: 10px !important; }

  /* ── Glass cards : padding réduit ── */
  .annalis-glass,
  .annalis-card,
  .annalis-kpi {
    padding: 14px !important;
  }

  /* ── Page login responsive ── */
  .annalis-login-grid {
    grid-template-columns: 1fr !important;
  }
  .annalis-login-features {
    display: none !important;
  }
  .annalis-login-form {
    width: 100% !important;
    padding: 1.5rem !important;
  }
}

/* ── Très petit écran (480px) ── */
@media (max-width: 480px) {
  .annalis-kpi-grid,
  .grid.md\:grid-cols-4,
  .grid.grid-cols-4,
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .annalis-kpi-value {
    font-size: 20px !important;
  }
  table.min-w-full td,
  table.min-w-full th {
    padding: 6px 6px !important;
    font-size: 10px !important;
  }
  .annalis-btn-gold,
  .annalis-btn-outline {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Desktop uniquement ── */
@media (min-width: 769px) {
  .annalis-hamburger,
  .annalis-sidebar-overlay {
    display: none !important;
  }
  /* S'assurer que la sidebar est toujours visible sur desktop */
  .annalis-sidebar,
  .sidebar {
    transform: none !important;
    position: fixed !important;
  }
}

/* ══════════════════════════════════════════════════════
   PHASE FINAL — HARMONISATION TOTALE V3
   ══════════════════════════════════════════════════════ */

/* ── 1. Override GLOBAL bg-white → surface sombre ── */
.bg-white {
  background: var(--annalis-bg-surface) !important;
  color: var(--annalis-text-primary) !important;
}
/* Exceptions : inputs natifs, certains canvas */
canvas.bg-white { background: transparent !important; }

/* ── 2. bg-gray-* → surface subtile ── */
.bg-gray-50  { background: rgba(255,255,255,0.018) !important; }
.bg-gray-100 { background: rgba(255,255,255,0.03)  !important; }
.bg-gray-800, .dark\:bg-gray-800 { background: var(--annalis-bg-elevated) !important; }

/* ── 3. Suppression globale des ombres portées ── */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: none !important;
}
/* Garder l'ombre des modals */
.modal-content { box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important; }

/* ── 4. text-gray-* → palette V3 ── */
.text-gray-400 { color: var(--annalis-text-dim) !important; }
.text-gray-500, .text-gray-600 { color: var(--annalis-text-muted) !important; }
.text-gray-700, .text-gray-800 { color: var(--annalis-text-secondary) !important; }
.text-gray-900 { color: var(--annalis-text-primary) !important; }

/* ── 5. border-gray-* → V3 ── */
.border-gray-100 { border-color: rgba(255,255,255,0.04) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--annalis-border) !important; }

/* ── 6. Composant Card V3 ── */
.p-5.rounded-2xl.border-l-4,
.rounded-2xl.shadow-lg.bg-white.border-l-4 {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-left-width: 2px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 18px !important;
}
.p-5.rounded-2xl.border-l-4 .text-sm.text-gray-500,
.rounded-2xl.border-l-4 .text-sm.text-gray-500 {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--annalis-text-dim) !important;
  margin-bottom: 4px !important;
}
.p-5.rounded-2xl.border-l-4 .text-2xl.font-bold,
.rounded-2xl.border-l-4 .text-2xl.font-bold {
  font-size: 22px !important;
  color: var(--annalis-text-primary) !important;
}
.p-5.rounded-2xl.border-l-4 .text-xs.text-gray-500,
.rounded-2xl.border-l-4 .text-xs.text-gray-500 {
  color: var(--annalis-text-muted) !important;
  font-size: 11px !important;
}
.p-5.rounded-2xl.border-l-4 .p-3.rounded-lg,
.rounded-2xl.border-l-4 .p-3.rounded-lg {
  background: rgba(255,255,255,0.05) !important;
}

/* ── 7. Toggle group pour sous-onglets Cost / autres ── */
/* Buttons de sous-onglet (px-4 py-2 rounded-lg) dans les barres de filtre */
.flex.gap-2 > button.px-4.py-2.rounded-lg,
.flex.gap-2 > button[class*="px-4"][class*="py-2"][class*="rounded-lg"] {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
/* Bouton inactif de sous-onglet (bg-gray-200) */
.flex.gap-2 > button.bg-gray-200,
.flex.gap-2 > button[class*="bg-gray-2"],
.flex.gap-2 > button[class*="dark:bg-gray-7"] {
  background: rgba(255,255,255,0.05) !important;
  color: var(--annalis-text-muted) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
}
.flex.gap-2 > button.bg-gray-200:hover {
  background: rgba(255,255,255,0.09) !important;
  color: var(--annalis-text-primary) !important;
}
/* Bouton actif de sous-onglet */
.flex.gap-2 > button.bg-orange-500,
.flex.gap-2 > button[class*="bg-orange"],
.flex.gap-2 > button[class*="bg-\[#012B25\]"],
.flex.gap-2 > button[class*="bg-green-6"],
.flex.gap-2 > button.text-white[class*="font-medium"] {
  background: rgba(201,162,39,0.12) !important;
  color: var(--annalis-gold) !important;
  border: 0.5px solid rgba(201,162,39,0.25) !important;
}

/* ── 8. Sélecteur <select> de période ── */
select[class*="border-gray"],
select[class*="bg-white"],
select[class*="bg-gray-8"] {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 10px !important;
  color: var(--annalis-text-primary) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ── 9. Fiches Techniques : cartes glass ── */
.grid.md\:grid-cols-2.lg\:grid-cols-3.gap-4 > div.bg-white,
.grid[class*="grid-cols"] > div.bg-white.rounded-xl.border {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.grid[class*="grid-cols"] > div.bg-white.rounded-xl.border:hover {
  border-color: rgba(201,162,39,0.25) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* ── 10. Filtre source (Tout | Manuel | Import) dans Ventes ── */
.bg-amber-50, [class*="bg-amber-50"] {
  background: rgba(255,255,255,0.025) !important;
}
.border-amber-200, [class*="border-amber-2"] {
  border-color: rgba(201,162,39,0.2) !important;
}
.text-amber-600, [class*="text-amber-6"] { color: var(--annalis-gold) !important; }
.text-amber-700, [class*="text-amber-7"] { color: var(--annalis-gold) !important; }
.bg-amber-100, [class*="bg-amber-100"] { background: rgba(201,162,39,0.1) !important; }

/* ── 11. bg-blue-* → subtil dark ── */
.bg-blue-50, .bg-blue-100 { background: rgba(59,130,246,0.05) !important; }
.bg-indigo-50 { background: rgba(99,102,241,0.05) !important; }
.border-blue-200 { border-color: rgba(59,130,246,0.2) !important; }
.text-blue-700, .text-blue-800, .text-blue-900 { color: var(--annalis-text-secondary) !important; }
.text-blue-600 { color: var(--annalis-blue) !important; }

/* ── 12. P&L : tableau et sections ── */
.bg-white.overflow-x-auto table,
.bg-white table {
  background: transparent !important;
}
/* Lignes sous-total P&L */
tr.bg-gray-50 td, tr[class*="bg-gray-50"] td { background: rgba(255,255,255,0.02) !important; }
tr.bg-gray-100 td, tr[class*="bg-gray-100"] td { background: rgba(255,255,255,0.03) !important; }
/* Preset buttons P&L */
.flex.flex-wrap.gap-2 button[class*="bg-gray-1"],
.flex.flex-wrap.gap-2 button[class*="bg-gray-2"],
.flex.flex-wrap.gap-2 button[class*="bg-\[#012B25\]"] {
  font-size: 12px !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
}
/* Checkboxes stylisées P&L */
input[type="checkbox"] {
  accent-color: var(--annalis-gold) !important;
}

/* ── 13. Stocks : sélecteur de période ── */
.bg-gradient-to-r.from-blue-50.to-indigo-50,
[class*="from-blue-50"][class*="to-indigo-50"] {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
}
/* Boutons inventaire (Démarrer Food / Bev) dans Stocks */
button[class*="bg-green-6"]:not(.annalis-btn-sm-outline) {
  background: linear-gradient(135deg, #C9A227, #ddb738) !important;
  color: #0a0f0d !important;
  border: none !important;
}

/* ── 14. Fournisseurs : liste glass ── */
.grid.md\:grid-cols-2.gap-6 > div.bg-white,
.grid.md\:grid-cols-3.gap-4 > div.bg-white {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 14px !important;
}

/* ── 15. En-têtes gradient → glass ── */
.bg-gradient-to-r[class*="from-yellow"],
.bg-gradient-to-r[class*="from-orange"],
.bg-gradient-to-r[class*="from-purple"],
.bg-gradient-to-r[class*="from-pink"],
.bg-gradient-to-r[class*="from-green-50"],
.bg-gradient-to-r[class*="from-amber"],
.bg-gradient-to-r[class*="from-slate"],
.bg-gradient-to-r[class*="from-gray"],
.bg-gradient-to-br[class*="from-yellow"],
.bg-gradient-to-br[class*="from-green-7"],
.bg-gradient-to-br[class*="from-purple"] {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-left: none !important;
}
/* Titres h2 dans ces en-têtes */
.bg-gradient-to-r h2.text-2xl,
.bg-gradient-to-br h2.text-2xl {
  font-size: 18px !important;
  color: var(--annalis-text-primary) !important;
}

/* ── 16. Ratio circle SVG / barre de progression ── */
.payroll-ratio-svg circle { transition: stroke-dashoffset 1.2s ease; }

/* ── 17. Textes bruts de ratio → stylisés ── */
.text-4xl.font-bold, .text-5xl.font-bold {
  color: var(--annalis-text-primary) !important;
}

/* ── 18. Division/séparateurs ── */
.divide-y > * + * { border-top-color: rgba(255,255,255,0.04) !important; }

/* ── 19. dark: classes → override dark mode forcé ── */
.dark\:bg-gray-700, .dark\:bg-gray-800, .dark\:bg-gray-900 {
  background: var(--annalis-bg-elevated) !important;
}
.dark\:text-gray-100, .dark\:text-gray-200, .dark\:text-gray-300 {
  color: var(--annalis-text-primary) !important;
}
.dark\:border-gray-600, .dark\:border-gray-700 {
  border-color: var(--annalis-border) !important;
}

/* ── 20. Rapports : boutons et cartes ── */
.bg-white.rounded-xl.p-6.border,
.bg-white.rounded-lg.p-6.border {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 14px !important;
}

/* ── 21. Projet / Admin sections ── */
.bg-white.rounded-2xl.p-6,
.bg-white.rounded-xl.p-6 {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 14px !important;
}

/* ── 22. Scanner modal OCR ── */
.fixed.inset-0[class*="z-50"] > div > div.bg-white,
.modal-content .bg-white.border {
  background: var(--annalis-bg-elevated) !important;
  border-color: var(--annalis-border) !important;
}

/* ══════════════════════════════════════════════════════
   FORCE V3 TOTAL — HARMONISATION ULTIME
   ══════════════════════════════════════════════════════ */

/* ── Tous les fonds clairs Tailwind → dark surface ── */
[class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"],
[class*="bg-blue-50"], [class*="bg-green-50"], [class*="bg-red-50"],
[class*="bg-purple-50"], [class*="bg-yellow-50"], [class*="bg-indigo-50"],
[class*="bg-orange-50"], [class*="bg-slate-50"], [class*="bg-amber-50"],
[class*="bg-pink-50"], [class*="bg-teal-50"], [class*="bg-cyan-50"] {
  background: var(--annalis-bg-surface) !important;
}
/* Exceptions nécessaires */
.annalis-orb-gold, .annalis-orb-green,
[class*="bg-white"][class*="absolute"],
button[class*="bg-white"] { background: revert !important; }

/* ── Toutes les ombres portées → aucune ── */
[class*="shadow"] { box-shadow: none !important; }
.modal-content { box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important; }

/* ── Textes colorés Tailwind → palette V3 ── */
[class*="text-green-6"], [class*="text-green-7"], [class*="text-green-8"],
[class*="text-emerald-6"], [class*="text-emerald-7"] { color: #22c55e !important; }
[class*="text-red-6"], [class*="text-red-7"], [class*="text-red-8"],
[class*="text-rose-6"], [class*="text-rose-7"] { color: #ef4444 !important; }
[class*="text-blue-6"], [class*="text-blue-7"], [class*="text-blue-8"],
[class*="text-indigo-6"], [class*="text-indigo-7"] { color: #3b82f6 !important; }
[class*="text-purple-6"], [class*="text-purple-7"], [class*="text-purple-8"],
[class*="text-violet-6"] { color: #a855f7 !important; }
[class*="text-orange-6"], [class*="text-amber-6"] { color: var(--annalis-amber) !important; }
[class*="text-yellow-6"], [class*="text-yellow-7"] { color: var(--annalis-gold) !important; }

/* ── Toutes les bordures gauches → dorées ── */
[class*="border-l-4"]:not([class*="sidebar"]):not([class*="toast"]) {
  border-left-color: rgba(201,162,39,0.25) !important;
}

/* ── Boutons Tailwind non-V3 → gold/outline automatique ── */
button[class*="bg-green-"]:not(.annalis-btn-sm):not(.annalis-btn-sm-gold):not(.annalis-btn-sm-outline),
button[class*="bg-blue-"]:not(.annalis-btn-sm):not(.annalis-btn-sm-gold),
button[class*="bg-indigo-"]:not(.annalis-btn-sm),
button[class*="bg-teal-"]:not(.annalis-btn-sm),
button[class*="bg-orange-"]:not(.annalis-btn-sm) {
  background: linear-gradient(135deg, #C9A227, #ddb738) !important;
  color: #0a0f0d !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  transition: all 0.22s ease !important;
}
button[class*="bg-gray-"]:not(.annalis-btn-sm),
button[class*="bg-slate-"]:not(.annalis-btn-sm),
button[class*="border-gray-"]:not(.annalis-btn-sm) {
  background: transparent !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  color: var(--annalis-text-muted) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
  transition: all 0.22s ease !important;
}
button[class*="bg-gray-"]:not(.annalis-btn-sm):hover,
button[class*="border-gray-"]:not(.annalis-btn-sm):hover {
  border-color: rgba(201,162,39,0.3) !important;
  color: var(--annalis-gold) !important;
}

/* ── Rings → gold ── */
[class*="ring-"] {
  --tw-ring-color: rgba(201,162,39,0.3) !important;
}
[class*="focus:ring-"]:focus {
  --tw-ring-color: rgba(201,162,39,0.3) !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,0.2) !important;
}

/* ── Badges arrière-plan colorés → dark V3 ── */
[class*="bg-green-1"], [class*="bg-green-2"] { background: rgba(34,197,94,0.1) !important; }
[class*="bg-red-1"], [class*="bg-red-2"]     { background: rgba(239,68,68,0.1) !important; }
[class*="bg-blue-1"], [class*="bg-blue-2"]   { background: rgba(59,130,246,0.1) !important; }
[class*="bg-purple-1"], [class*="bg-purple-2"] { background: rgba(168,85,247,0.1) !important; }
[class*="bg-yellow-1"], [class*="bg-amber-1"] { background: rgba(201,162,39,0.1) !important; }
[class*="bg-orange-1"], [class*="bg-orange-2"] { background: rgba(245,158,11,0.1) !important; }

/* ── Galerie factures V3 ── */
.grid[class*="grid-cols"] > div[class*="border"][class*="rounded"] {
  background: var(--annalis-bg-elevated) !important;
  border: 0.5px solid var(--annalis-border) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.grid[class*="grid-cols"] > div[class*="border"][class*="rounded"]:hover {
  border-color: rgba(201,162,39,0.3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* ── Tables food cost synthèse ── */
.w-full.border-collapse td,
.w-full.border-collapse th {
  border-color: rgba(255,255,255,0.05) !important;
}

/* ── Gradient headers restants ── */
[class*="from-orange-9"], [class*="from-purple-9"],
[class*="from-yellow-9"], [class*="from-blue-9"] {
  background: rgba(255,255,255,0.025) !important;
  background-image: none !important;
}

/* ── Conteneurs overflow-hidden → fond dark ── */
.bg-white.overflow-hidden, .bg-white.overflow-x-auto {
  background: transparent !important;
}

/* ── Textes placeholder → V3 ── */
[class*="placeholder-gray-"], ::placeholder {
  color: var(--annalis-text-dim) !important;
  opacity: 1 !important;
}

/* ── Dividers ── */
hr, [class*="divide-y"] > * + * {
  border-color: rgba(255,255,255,0.05) !important;
}