/* Elork CRM - app.css */

:root {
  --color-primary:      #2555ff;
  --color-primary-dark: #1a44ee;
  --color-accent:       #ff434f;
  --color-success:      #33cc00;
  --color-sidebar:      #0a0f2e;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Focus ring couleur Elork */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Empêche le zoom iOS sur les inputs */
input, select, textarea, button { font-size: 16px; }

/* Scroll fluide mobile */
* { -webkit-overflow-scrolling: touch; }

/* Scrollbar cachée */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Empêche scroll body avec overlay */
body.no-scroll { overflow: hidden; }

/* Animations modales */
@keyframes slideUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }

#modal-societe:not(.hidden) > div:first-child { animation: fadeIn 0.2s ease-out; }
#modal-societe:not(.hidden) > div:last-child > div { animation: slideUp 0.25s ease-out; }

/* Barre de progression paiements */
.progress-bar { background: var(--color-primary); }
.progress-bar.full { background: var(--color-success); }

/* ===== Classes couleurs Elork (remplace Tailwind JIT arbitraire) ===== */
/* Bleu primaire #2555ff */
.bg-elork-2555ff, .elork-primary        { background-color: #2555ff !important; }
.text-elork-2555ff, .elork-text-primary { color: #2555ff !important; }
.border-elork-2555ff                    { border-color: #2555ff !important; }
.hover-bg-elork-2555ff:hover            { background-color: #2555ff !important; }
.focus-ring-elork-2555ff:focus          { --tw-ring-color: #2555ff; }
.ring-elork-2555ff                      { --tw-ring-color: #2555ff; }

/* Bleu foncé #1a44ee */
.bg-elork-1a44ee                        { background-color: #1a44ee !important; }
.hover-bg-elork-1a44ee:hover            { background-color: #1a44ee !important; }

/* Sidebar #0a0f2e */
.bg-elork-0a0f2e, .elork-sidebar        { background-color: #0a0f2e !important; }

/* Sidebar hover #1a2050 */
.bg-elork-1a2050                        { background-color: #1a2050 !important; }
.hover-bg-elork-1a2050:hover            { background-color: #1a2050 !important; }
.border-elork-1a2050                    { border-color: #1a2050 !important; }

/* Bleu clair #e8edff */
.bg-elork-e8edff                        { background-color: #e8edff !important; }
.text-elork-e8edff                      { color: #e8edff !important; }

/* Bleu très clair #f0f3ff */
.bg-elork-f0f3ff, .elork-bg-light       { background-color: #f0f3ff !important; }

/* Borders claires */
.border-elork-c5d0ff, .elork-border-light { border-color: #c5d0ff !important; }
.border-elork-dde4ff                    { border-color: #dde4ff !important; }

/* Vert succès #33cc00 */
.bg-elork-33cc00                        { background-color: #33cc00 !important; }
.text-elork-33cc00                      { color: #33cc00 !important; }
.hover-bg-elork-28a800:hover            { background-color: #28a800 !important; }
.bg-elork-e6ffe0                        { background-color: #e6ffe0 !important; }
.border-elork-b3ffaa                    { border-color: #b3ffaa !important; }
.bg-elork-f0fff0                        { background-color: #f0fff0 !important; }
.border-elork-ccffcc                    { border-color: #ccffcc !important; }
.text-elork-28a800                      { color: #28a800 !important; }

/* Rouge accent #ff434f */
.bg-elork-ff434f                        { background-color: #ff434f !important; }
.text-elork-ff434f                      { color: #ff434f !important; }

/* Nav active */
.elork-nav-active                       { background-color: #2555ff !important; color: #fff !important; }
.elork-hover:hover                      { background-color: #1a2050 !important; }