/* =========================================================
   Vape O Shop — Design system
   ========================================================= */

:root {
  /* Fonds */
  --bg-primary:   #080d10;
  --bg-secondary: #0e1519;
  --bg-tertiary:  #141d22;
  --bg-card:      #111a1f;
  --bg-hover:     #1a262d;
  --bg-input:     #141f25;

  /* Accents — vapeur / menthe */
  --brand:        #14b8a6;
  --brand-light:  #2dd4bf;
  --brand-dark:   #0d9488;
  --accent-cyan:  #06b6d4;
  --accent-violet:#8b5cf6;
  --accent-green: #22c55e;
  --accent-amber: #f59e0b;
  --accent-red:   #ef4444;
  --accent-pink:  #ec4899;
  --accent-blue:  #3b82f6;

  /* Texte */
  --text-primary:   #eef4f5;
  --text-secondary: #9fb2b8;
  --text-muted:     #6b8089;
  --text-inverse:   #06110f;

  /* Bordures */
  --border-color: #223038;
  --border-light: #2e404a;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.6);
  --glow: 0 0 22px rgba(20,184,166,.28);

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Espacements */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typo */
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Roboto, sans-serif;
  --mono: 'Consolas', 'SF Mono', 'Courier New', monospace;
  --fs-xs: .72rem;
  --fs-sm: .84rem;
  --fs-base: 1rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.6rem;
  --fs-3xl: 2.1rem;

  --touch: 46px;
  --touch-lg: 56px;

  --t-fast: 130ms ease;
  --t-normal: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body { user-select: none; }
input, textarea, select { user-select: text; }

#app { height: 100%; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-dark); }

/* ── Boutons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--touch); padding: var(--space-sm) var(--space-lg);
  border: none; border-radius: var(--radius-md);
  font-family: var(--font); font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; transition: all var(--t-fast); white-space: nowrap; text-decoration: none;
  color: var(--text-primary); background: var(--bg-tertiary);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #04211d;
  box-shadow: 0 2px 12px rgba(20,184,166,.35); }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-light), var(--brand)); }

.btn-success { background: linear-gradient(135deg, var(--accent-green), #16a34a); color: #04210f; }
.btn-danger  { background: linear-gradient(135deg, var(--accent-red), #dc2626); color: #fff; }
.btn-warning { background: linear-gradient(135deg, var(--accent-amber), #d97706); color: #241500; }
.btn-info    { background: linear-gradient(135deg, var(--accent-blue), #2563eb); color: #fff; }
.btn-violet  { background: linear-gradient(135deg, var(--accent-violet), #7c3aed); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }

.btn-outline { background: transparent; color: var(--brand-light); border: 1px solid var(--brand-dark); }
.btn-outline:hover { background: rgba(20,184,166,.12); }

.btn-sm { min-height: 34px; padding: 4px 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { min-height: var(--touch-lg); padding: var(--space-md) var(--space-xl); font-size: var(--fs-lg); }
.btn-icon { width: var(--touch); height: var(--touch); padding: 0; }
.btn-block { width: 100%; }

/* ── Formulaires ───────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%; min-height: var(--touch);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-input); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-family: var(--font); font-size: var(--fs-base); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 88px; resize: vertical; padding-top: 10px; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20,184,166,.16);
}
.input::placeholder { color: var(--text-muted); }
.input:disabled, .select:disabled { opacity: .5; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-section { border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: var(--space-md); margin-bottom: var(--space-md); background: var(--bg-secondary); }
.form-section > h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-light); margin-bottom: var(--space-md); }

.check { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer;
  min-height: 38px; font-size: var(--fs-sm); color: var(--text-secondary); }
.check input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--brand); cursor: pointer; }

.range-row { display: flex; align-items: center; gap: var(--space-md); }
.range-row input[type="range"] { flex: 1; accent-color: var(--brand); height: 30px; }
.range-value { min-width: 74px; text-align: center; font-weight: 700; font-size: var(--fs-xl);
  color: var(--brand-light); font-family: var(--mono); }

/* ── Cartes ────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: var(--space-lg);
}
.card-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }

/* ── Modales ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  padding: var(--space-md); animation: fadeIn var(--t-normal);
}
.modal {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); animation: slideUp 260ms ease;
}
.modal-lg { max-width: 860px; }
.modal-xl { max-width: 1200px; }
.modal-header { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); margin-bottom: var(--space-lg); }
.modal-header h2 { font-size: var(--fs-xl); font-weight: 700; }
.modal-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: none; background: var(--bg-hover); color: var(--text-secondary);
  border-radius: var(--radius-md); cursor: pointer; font-size: 1.1rem; }
.modal-close:hover { background: var(--accent-red); color: #fff; }
.modal-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.modal-actions .btn { flex: 1; }

/* ── Badges ────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.badge-brand  { background: rgba(20,184,166,.16); color: var(--brand-light); }
.badge-green  { background: rgba(34,197,94,.16); color: #4ade80; }
.badge-amber  { background: rgba(245,158,11,.16); color: #fbbf24; }
.badge-red    { background: rgba(239,68,68,.16); color: #f87171; }
.badge-blue   { background: rgba(59,130,246,.16); color: #60a5fa; }
.badge-violet { background: rgba(139,92,246,.16); color: #a78bfa; }
.badge-gray   { background: rgba(148,163,184,.14); color: #94a3b8; }

/* ── Tableaux ──────────────────────────────────────────── */
.table-wrap { overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: var(--bg-card); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-tertiary); color: var(--text-secondary);
  text-align: left; padding: 11px var(--space-md); font-weight: 700;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--brand-light); }
.data-table td { padding: 10px var(--space-md); border-bottom: 1px solid var(--border-color);
  vertical-align: middle; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr.selected { background: rgba(20,184,166,.10); }
.data-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.data-table .row-click { cursor: pointer; }

.empty-state { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--text-muted); }
.empty-state .icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: .6; }

/* ── Onglets ───────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-lg); overflow-x: auto; }
.tab { padding: 10px var(--space-md); background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--brand-light); border-bottom-color: var(--brand); }

/* ── Barre d'outils ────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md); }
.toolbar .spacer { flex: 1; }
.toolbar .input, .toolbar .select { width: auto; min-width: 160px; }
.search-input { min-width: 240px !important; }

/* ── Toasts ────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: var(--space-xl); left: 50%; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--space-sm); }
.toast { padding: 13px var(--space-lg); border-radius: var(--radius-md); font-size: var(--fs-sm);
  font-weight: 600; box-shadow: var(--shadow-lg); min-width: 280px; max-width: 480px;
  text-align: center; animation: slideInUp .25s ease; }
.toast-success { background: var(--accent-green); color: #04210f; }
.toast-error   { background: var(--accent-red); color: #fff; }
.toast-info    { background: var(--brand); color: #04211d; }
.toast-warning { background: var(--accent-amber); color: #241500; }

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes spin { to { transform: rotate(360deg) } }

.spinner { width: 34px; height: 34px; border: 3px solid var(--border-color);
  border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite;
  margin: var(--space-xl) auto; }
.loading { text-align: center; padding: var(--space-2xl); color: var(--text-muted); }

/* ── Utilitaires ───────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs) } .gap-sm { gap: var(--space-sm) }
.gap-md { gap: var(--space-md) } .gap-lg { gap: var(--space-lg) }
.flex-1 { flex: 1 }
.hidden { display: none !important }
.text-center { text-align: center } .text-right { text-align: right }
.text-muted { color: var(--text-muted) } .text-secondary { color: var(--text-secondary) }
.text-brand { color: var(--brand-light) } .text-green { color: #4ade80 }
.text-red { color: #f87171 } .text-amber { color: #fbbf24 } .text-blue { color: #60a5fa }
.text-xs { font-size: var(--fs-xs) } .text-sm { font-size: var(--fs-sm) }
.text-lg { font-size: var(--fs-lg) } .text-xl { font-size: var(--fs-xl) }
.text-2xl { font-size: var(--fs-2xl) } .text-3xl { font-size: var(--fs-3xl) }
.bold { font-weight: 700 } .semi { font-weight: 600 }
.mono { font-family: var(--mono) }
.mt-sm { margin-top: var(--space-sm) } .mt-md { margin-top: var(--space-md) }
.mt-lg { margin-top: var(--space-lg) }
.mb-sm { margin-bottom: var(--space-sm) } .mb-md { margin-bottom: var(--space-md) }
.mb-lg { margin-bottom: var(--space-lg) }
.nowrap { white-space: nowrap }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pointer { cursor: pointer }

/* ── Ecran de connexion ────────────────────────────────── */
.login-screen {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 18%, rgba(20,184,166,.14), transparent 55%), var(--bg-primary);
}
.login-box { width: 100%; max-width: 380px; text-align: center; padding: var(--space-lg); }
.login-logo { font-size: 3.4rem; margin-bottom: var(--space-sm); }
.login-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.login-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-xl); }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: var(--space-xl); height: 20px; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--bg-tertiary);
  border: 2px solid var(--border-light); transition: all var(--t-fast); }
.pin-dot.filled { background: var(--brand); border-color: var(--brand); box-shadow: var(--glow); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pin-key { height: 68px; border: 1px solid var(--border-color); background: var(--bg-card);
  border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--fs-2xl);
  font-weight: 600; cursor: pointer; transition: all var(--t-fast); }
.pin-key:hover { background: var(--bg-hover); border-color: var(--brand-dark); }
.pin-key:active { transform: scale(.94); background: var(--brand-dark); }
.pin-key.action { font-size: var(--fs-lg); color: var(--text-secondary); }
.login-error { color: #f87171; font-size: var(--fs-sm); min-height: 22px; margin-top: var(--space-md); }