/* ──────────────────────────────────────────────────────────────────────────
   NovaScraper UI — Design System unifié
   Partagé par : index.html (landing), dashboard.html, pricing.html, admin.html

   Objectif : harmoniser tailles de police, boutons, inputs, checkboxes et
   symboles sur toutes les pages. Les inline styles existants restent
   prioritaires : ce fichier sert de base cohérente et de classes
   utilitaires pour les nouveaux éléments + les harmonisations ciblées.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Tailles de police standardisées ── */
  --ns-text-2xs:  0.68rem;  /* labels uppercase, badges tiny */
  --ns-text-xs:   0.74rem;  /* hints secondaires, notes, captions */
  --ns-text-sm:   0.82rem;  /* body formulaires, boutons secondaires */
  --ns-text-base: 0.92rem;  /* body standard */
  --ns-text-md:   1.05rem;  /* headings h4, titres de cartes */
  --ns-text-lg:   1.25rem;  /* headings h3, KPI values moyens */
  --ns-text-xl:   1.6rem;   /* headings h2, KPI values grands */
  --ns-text-2xl:  2.2rem;   /* headings h1, hero numbers */

  /* ── Poids ── */
  --ns-w-regular: 400;
  --ns-w-medium:  600;
  --ns-w-bold:    700;
  --ns-w-black:   800;

  /* ── Radius ── */
  --ns-radius-sm: 4px;  /* inputs, checkboxes */
  --ns-radius-md: 6px;  /* boutons, petits encarts */
  --ns-radius-lg: 8px;  /* cards, panels */
  --ns-radius-pill: 14px;

  /* ── Padding boutons standardisé ── */
  --ns-btn-pad-sm: 4px 10px;   /* pills, chips */
  --ns-btn-pad-md: 8px 14px;   /* boutons standard */
  --ns-btn-pad-lg: 12px 24px;  /* CTA primaires */

  /* ── Couleurs fonctionnelles (aligne sur charte rouge) ── */
  --ns-rouge:     #cc1111;
  --ns-rouge-h:   #ff1a1a;
  --ns-success:   #22c55e;
  --ns-success-s: #4ade80;
  --ns-warning:   #f0b429;
  --ns-warn2:     #ff9500;
  --ns-info:      #7dd3fc;
  --ns-danger:    #ff6b6b;
  --ns-dark-bg:   #0a0a0f;
  --ns-card-bg:   #141418;
  --ns-border:    #2a2a32;
  --ns-muted:     #888;
}

/* ──────────────────────────────────────────────────────────────────────────
   Soft reset — applique uniquement quand aucun inline style ne surcharge.
   Ne casse pas les styles existants mais donne une base cohérente aux
   éléments qui n'en ont pas.
   ────────────────────────────────────────────────────────────────────────── */

/* Inputs numériques et texte non stylés inline : base cohérente */
input[type="number"]:not([style*="font-size"]),
input[type="text"]:not([style*="font-size"]),
input[type="email"]:not([style*="font-size"]),
input[type="password"]:not([style*="font-size"]),
input[type="url"]:not([style*="font-size"]) {
  font-size: var(--ns-text-sm);
}

/* Checkboxes : taille uniforme partout */
input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--ns-rouge);
  cursor: pointer;
  flex-shrink: 0;
}

/* Label sobre par défaut */
label:not([class]):not([style*="font-size"]) {
  font-size: var(--ns-text-sm);
}

/* Boutons sans classe : alignment vertical et curseur par défaut */
button:not([class]) {
  cursor: pointer;
  font-family: inherit;
}

/* ──────────────────────────────────────────────────────────────────────────
   Classes utilitaires — opt-in, a appliquer sur les nouveaux éléments
   ────────────────────────────────────────────────────────────────────────── */

/* --- Tailles de police --- */
.ns-text-2xs  { font-size: var(--ns-text-2xs) !important; }
.ns-text-xs   { font-size: var(--ns-text-xs) !important; }
.ns-text-sm   { font-size: var(--ns-text-sm) !important; }
.ns-text-base { font-size: var(--ns-text-base) !important; }
.ns-text-md   { font-size: var(--ns-text-md) !important; }
.ns-text-lg   { font-size: var(--ns-text-lg) !important; }
.ns-text-xl   { font-size: var(--ns-text-xl) !important; }
.ns-text-2xl  { font-size: var(--ns-text-2xl) !important; }

/* --- Poids --- */
.ns-w-medium { font-weight: var(--ns-w-medium); }
.ns-w-bold   { font-weight: var(--ns-w-bold); }
.ns-w-black  { font-weight: var(--ns-w-black); }

/* --- Boutons standardisés --- */
.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--ns-btn-pad-md);
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-w-bold);
  border-radius: var(--ns-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  line-height: 1.2;
  font-family: inherit;
}
.ns-btn:active { transform: translateY(1px); }
.ns-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ns-btn-sm { padding: var(--ns-btn-pad-sm); font-size: var(--ns-text-xs); }
.ns-btn-lg { padding: var(--ns-btn-pad-lg); font-size: var(--ns-text-base); letter-spacing: .5px; text-transform: uppercase; }

.ns-btn-primary   { background: var(--ns-rouge); color: #fff; border-color: var(--ns-rouge); }
.ns-btn-primary:hover { background: var(--ns-rouge-h); border-color: var(--ns-rouge-h); }

.ns-btn-secondary { background: transparent; color: #ddd; border-color: var(--ns-border); }
.ns-btn-secondary:hover { border-color: #444; color: #fff; }

.ns-btn-ghost { background: transparent; color: #aaa; border-color: transparent; }
.ns-btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.05); }

.ns-btn-success { background: var(--ns-success); color: #fff; border-color: var(--ns-success); }
.ns-btn-success:hover { background: var(--ns-success-s); border-color: var(--ns-success-s); }

.ns-btn-warning { background: rgba(240,180,41,0.15); color: var(--ns-warning); border-color: rgba(240,180,41,0.5); }
.ns-btn-warning:hover { background: rgba(240,180,41,0.25); }

.ns-btn-danger  { background: #7a1616; color: #fff; border-color: var(--ns-rouge); }
.ns-btn-danger:hover { background: var(--ns-rouge); }

/* --- Inputs standardisés --- */
.ns-input {
  background: var(--ns-dark-bg);
  border: 1px solid var(--ns-border);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--ns-radius-sm);
  font-size: var(--ns-text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.ns-input:focus { border-color: var(--ns-rouge); }

/* --- Card standardisée --- */
.ns-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-lg);
  padding: 14px 16px;
}

/* --- Label uniforme --- */
.ns-label {
  color: var(--ns-muted);
  font-size: var(--ns-text-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
  font-weight: var(--ns-w-bold);
}

/* --- Checkbox row standard (label + input aligned) --- */
.ns-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--ns-text-sm);
  color: #ddd;
}

/* --- Pill / chip --- */
.ns-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-w-medium);
  border-radius: var(--ns-radius-pill);
  border: 1px solid;
}

/* --- Badge petit (status, flag) --- */
.ns-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--ns-text-2xs);
  font-weight: var(--ns-w-black);
  letter-spacing: .4px;
  border-radius: var(--ns-radius-pill);
  border: 1px solid;
}

/* --- Loader 3 points animes ("typing indicator") --- */
/* Utilise dans la zone progress pour montrer que le scrape charge encore
   meme pendant les phases silencieuses (pas de log activity). */
.ns-loader-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.ns-loader-dots span {
  width: 5px;
  height: 5px;
  background: var(--ns-warning);
  border-radius: 50%;
  display: inline-block;
  animation: ns-loader-pulse 1.4s ease-in-out infinite;
}
.ns-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.ns-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ns-loader-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* --- Titres de cartes --- */
.ns-card-title {
  font-size: var(--ns-text-md);
  font-weight: var(--ns-w-bold);
  margin: 0 0 10px;
  line-height: 1.3;
}

.ns-section-title {
  font-size: var(--ns-text-2xs);
  font-weight: var(--ns-w-bold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Harmonisations ciblées sur les classes existantes (compatibilite ascendante)
   ────────────────────────────────────────────────────────────────────────── */

/* Boutons "Admin" et "Déconnexion" du header : même taille */
.btn-logout {
  font-size: var(--ns-text-sm);
  padding: 6px 14px;
  border-radius: var(--ns-radius-md);
  font-weight: var(--ns-w-bold);
}

/* Tabs de navigation dashboard : taille homogene */
.tab {
  font-size: var(--ns-text-sm);
  font-weight: var(--ns-w-bold);
}

/* Stat cards (dashboard + admin) : valeurs cohérentes */
.stat-val {
  font-size: var(--ns-text-xl);
  font-weight: var(--ns-w-black);
  line-height: 1.1;
}
.stat-label {
  font-size: var(--ns-text-xs);
  color: var(--ns-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: var(--ns-w-medium);
}

/* Cards admin : titre uniforme */
.card h3 {
  font-size: var(--ns-text-lg);
  font-weight: var(--ns-w-bold);
  margin: 0 0 10px;
}
.card h4 {
  font-size: var(--ns-text-md);
  font-weight: var(--ns-w-bold);
  margin: 0 0 8px;
}