/* Core UI — RÉDUIT à l'essentiel pendant la transition.
   Le legacy `assets/styles.css` couvre déjà .btn, .input, .modal, .toast,
   .modal-stage, .modal-foot, .view-err, .conn-banner, et les variables thème.
   Pour éviter les conflits (boutons trop hauts, doubles padding, etc.) on
   garde ici UNIQUEMENT ce que le legacy ne fournit pas. À élargir au fur et
   à mesure du déménagement complet des styles vers les modules. */

/* Stack toasts (pas définie par le legacy de la même manière) */
.toast-stack {
  position: fixed; right: 16px; bottom: 16px;
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast-stack > .toast { pointer-events: auto; }

/* Bandeau erreur générique pour view-router (pas dans legacy). */
.view-err {
  padding: 24px; text-align: center;
  color: var(--mute);
  background: var(--card, #fff);
  border: 1px dashed var(--line, #d8dde6);
  border-radius: 10px;
  margin: 24px;
}


/* ── extracted from legacy assets/styles.css l.1-190 ── */
/* ────────────────────────────────────────────────────────────
   FSPCS — DA Plum & Citron (inspirée du mockup Claude Design)
   ──────────────────────────────────────────────────────────── */

:root {
  /* Light theme */
  --bg:           #f4f2f7;
  --bg-elev:      #ffffff;
  --bg-deep:      #ebe7f0;
  --surface:      #ffffff;
  --line:         #e0dbe6;
  --line-strong:  #c8bfd1;

  --rail:         #2a1f3d;
  --rail-ink:     #d8d2e5;
  --rail-mute:    #8f86a3;
  --rail-line:    #3d3155;

  --pane:         #efeaf3;
  --pane-deep:    #e4dceb;

  --ink:          #1a1623;
  --ink-2:        #4a4458;
  --mute:         #6b6478;
  --faint:        #a39db0;

  --accent:       #6b3fd4;
  --accent-ink:   #ffffff;
  --accent-soft:  #ede4ff;

  --citron:       #b8d62b;
  --citron-deep:  #8aa31a;

  --ok:           #2f8d57;
  --warn:         #d49a1f;
  --live:         #d63a3a;

  --radius:       6px;
  --radius-lg:    10px;
  --radius-xl:    14px;

  --shadow-sm:    0 1px 0 rgba(40,30,60,.04), 0 1px 2px rgba(40,30,60,.05);
  --shadow-md:    0 4px 16px -6px rgba(40,30,60,.14), 0 2px 6px rgba(40,30,60,.08);
  --shadow-modal: 0 32px 80px -16px rgba(20,10,40,.40), 0 8px 24px rgba(20,10,40,.18);

  --font-sans:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

[data-theme="dark"] {
  --bg:          #16131c;
  --bg-elev:     #1f1b29;
  --bg-deep:     #0f0c16;
  --surface:     #1f1b29;
  --line:        #2c2638;
  --line-strong: #3d3550;
  --rail:        #0d0a14;
  --rail-ink:    #c5beda;
  --rail-mute:   #6e6781;
  --rail-line:   #1f1a2c;
  --pane:        #1b1725;
  --pane-deep:   #161220;
  --ink:         #ede9f6;
  --ink-2:       #c2bcd0;
  --mute:        #8b8499;
  --faint:       #5e576c;
  --accent:      #9b75ff;
  --accent-ink:  #14102a;
  --accent-soft: #2a1f50;
  --citron:      #c9e445;
  --citron-deep: #9bbb29;
  --ok:          #6dc18e;
  --warn:        #e0b04a;
  --live:        #e85a5a;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
/* PWA : neutralise le double-tap-zoom (iOS ignore parfois user-scalable=no)
   et le redimensionnement auto du texte mobile. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Scrollbars ─────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; border: 2px solid transparent; }

/* ─── Type helpers ─────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--mute);
  font-weight: 500;
}
.mono--sm { font-size: 10px; }
.mono--accent { color: var(--accent); }

/* Identité d'utilisateur dans les tables (pseudo + discriminator). Lisible,
   pas log-file. Le « #1234 » discriminator est tonisé via opacity. */
.identity { font-size: 13px; color: var(--ink); font-weight: 500; }
.identity::after { content: ''; }   /* placeholder pour évolution future */
.upper { text-transform: uppercase; letter-spacing: 0.06em; }

/* ─── Buttons ─────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
  user-select: none;
}
.btn:hover { background: var(--bg-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, black); border-color: color-mix(in oklab, var(--accent) 88%, black); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--bg-deep); }
.btn--icon { padding: 7px; width: 32px; height: 32px; justify-content: center; }
.btn--danger { background: var(--live); color: white; border-color: var(--live); }
.btn--danger:hover { background: color-mix(in oklab, var(--live) 88%, black); border-color: color-mix(in oklab, var(--live) 88%, black); color: white; }
/* Variant intermédiaire entre ghost et danger : action risquée mais réversible
   (révoquer une clé, réinit. MFA). Contour rouge pâle, fond neutre, pas
   d'agression visuelle plein-rouge — réserve `btn--danger` aux suppressions. */
.btn--danger-soft { background: transparent; color: var(--live); border-color: color-mix(in oklab, var(--live) 50%, transparent); }
.btn--danger-soft:hover { background: color-mix(in oklab, var(--live) 8%, transparent); border-color: var(--live); color: var(--live); }

/* ─── Inputs ─────────────────────────────── */
.input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--mute); }

/* ─── Layout helpers ─────────────────────────────── */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 6px; }
.gap-3 { gap: 10px; }
.gap-4 { gap: 16px; }
.flex-1 { flex: 1; min-width: 0; min-height: 0; }
.spacer { flex: 1; }

/* ─── Icon helpers (inline SVG) ─────────────────────────────── */
.icon { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; stroke-width: 1.75; }
.icon-lg { width: 20px; height: 20px; stroke-width: 1.6; }

/* ─── Avatar ─────────────────────────────── */
.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: white;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

/* ─── Animations ─────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .22s ease both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: .85; } }


/* ── extracted from legacy assets/styles.css l.1176-1245 ── */
/* ─── Modals (invite, create-team, setup wizard) ─────────────────────────────── */
.modal-stage {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,40,0.45);
  backdrop-filter: blur(4px);
  animation: backdropIn .2s ease both;
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  width: 100%; max-width: 480px; margin: 20px;
  animation: modalIn .25s cubic-bezier(.2,.7,.2,1) both;
}
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 11px; color: var(--mute); font-family: var(--font-mono); }

/* Carnet de contacts — chips sélectionnables dans les modals */
.contact-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 140px; overflow-y: auto;
  padding: 2px;
}
.contact-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s;
}
.contact-chip:hover { border-color: var(--accent); }
.contact-chip--on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  font-weight: 600;
}
.contact-chip-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}

.toast {
  background: var(--ink); color: var(--bg-elev);
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; box-shadow: var(--shadow-md);
  animation: modalIn .2s ease both;
  max-width: 360px;
}
.toast--ok { background: var(--ok); color: white; }
.toast--err { background: var(--live); color: white; }


/* ── extracted from legacy assets/styles.css l.1349-1432 ── */
/* ─── Vues génériques (admin / account) ─────────────────────────────── */
.view-header {
  padding:20px 28px 0;
  border-bottom:1px solid var(--line);
}
.view-header h1 { font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px; }
.view-body { flex:1;overflow:auto;padding:24px 28px; }

.tabs { display:flex;gap:4px; }
.tab {
  padding:9px 16px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--mute);
  cursor:pointer;border-bottom:2px solid transparent;
}
.tab:hover { color:var(--ink); }
.tab--active { color:var(--accent);border-bottom-color:var(--accent);font-weight:600; }

/* Tables */
.tablewrap { overflow-x:auto; }
.dtable { width:100%;border-collapse:collapse;font-size:13.5px; }
.dtable th {
  text-align:left;font-weight:600;color:var(--mute);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  padding:8px 12px;border-bottom:1px solid var(--line);
}
.dtable td { padding:11px 12px;border-bottom:1px solid var(--line); }
.dtable tr:hover td { background:var(--bg-deep); }
.dtable-empty { text-align:center;color:var(--faint);padding:28px!important; }
.btn--sm { padding:5px 10px;font-size:12px;line-height:1.2; }
/* Rangée d'actions de table : gabarit homogène (même hauteur, pas de retour
   ligne dans un bouton, alignement constant quel que soit le libellé). */
.dtable-actions { flex-wrap:wrap; }
.dtable-actions .btn { white-space:nowrap; min-height:26px; }

.badge {
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;
  background:var(--bg-deep);color:var(--ink-2);
}
.badge--accent { background:var(--accent-soft);color:var(--accent); }
.badge--ok { background:color-mix(in oklab,var(--ok) 18%,var(--bg-elev));color:var(--ok); }
.badge--warn { background:color-mix(in oklab,var(--warn) 20%,var(--bg-elev));color:var(--warn); }
.badge--mute { background:var(--bg-deep);color:var(--faint); }

.invite-create { display:flex;gap:10px;margin-bottom:18px;max-width:520px; }
.invite-create .input { flex:1; }

/* Cards (account) */
.card {
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px 22px;
  max-width:540px;margin-bottom:18px;
}
.card-title { font-size:15px;font-weight:700;margin:0 0 6px; }
.card-hint { font-size:12.5px;color:var(--mute);margin:0 0 16px;line-height:1.5; }
.card-row { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line); }
.card-row:last-child { border-bottom:0; }
.inv-row {
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.inv-row:last-child { border-bottom:0; }
.inv-row .col strong { font-size:14px; }
/* Espacement des champs et du bouton dans les cartes (les modals utilisent
   déjà .modal-body gap, mais pas les .card). */
.card .field { margin-bottom:14px; }
.card .btn { margin-top:4px; }
.card-k { color:var(--mute);font-size:13px; }
.card-v { font-weight:500;font-size:13.5px; }
.ok-banner {
  background:color-mix(in oklab,var(--ok) 12%,var(--bg-elev));
  color:var(--ok);border:1px solid color-mix(in oklab,var(--ok) 30%,transparent);
  padding:10px 12px;border-radius:var(--radius);font-size:12.5px;margin-bottom:12px;
}

/* Quota équipe (panneau "Gérer l'équipe" › onglet Équipe) */
.quota-card {
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 16px;margin:0 4px 4px;background:var(--bg-elev);
}
.quota-card-head { display:flex;align-items:center;justify-content:space-between;gap:10px; }
/* .quota-big était scindée en deux par l'éclatement du legacy : son `{`
   restait ouvert et avalait .netbar/.svc-down comme règles imbriquées →
   bandeau réseau cassé (ticket #19). Règle réassemblée en un seul bloc. */
.quota-big {
  display:flex;align-items:baseline;gap:8px;
  font-size:24px;font-weight:800;color:var(--ink);
  margin:10px 0 0;line-height:1.15;
}
.quota-big .quota-used { font-size:26px; }
.quota-big .quota-sep  { font-size:15px;font-weight:600;color:var(--mute); }
.quota-big .quota-max  { font-size:18px;font-weight:700;color:var(--mute); }
.quota-bar {
  margin-top:12px;height:10px;border-radius:999px;
  background:var(--bg-deep);overflow:hidden;
}
.quota-bar-fill {
  height:100%;border-radius:999px;
  background:var(--accent);transition:width .35s ease;
}
.quota-bar--alert .quota-bar-fill { background:var(--warn); }

.pane-empty { padding:32px 16px;text-align:center;color:var(--mute);font-size:13px; }
.pane-back, .rail-back { display:none; }


/* ─── Responsive ─────────────────────────────── */

/* Tablette : rail plus fin, pane réduit */
@media (max-width: 1024px) {
  .app { grid-template-columns: 64px 248px 1fr; }
  .app.view-admin, .app.view-account, .app.view-invitations, .app.view-discover, .app.view-activity { grid-template-columns: 64px 1fr; }
  .rail-tile-glyph { width:40px;height:40px; }
  .rail-menu { left:72px; }   /* rail tablette = 64px + gap */
  /* Espace réduit → titre court. */
  .topbar-brand .brand-long { display:none; }
  .topbar-brand .brand-short { display:inline; }
}

/* ── Indicateur connexion serveur perdue (non bloquant) ─────────────── */
.netbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  background: color-mix(in oklab, var(--live) 16%, var(--bg-elev));
  color: var(--live);
  border: 1px solid color-mix(in oklab, var(--live) 40%, transparent);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  font-size: 13px; font-weight: 600;
  pointer-events: none; /* l'app reste pleinement utilisable derrière */
}
.netbar-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--live); animation: pulse 1.2s ease-in-out infinite;
}
@media (max-width: 720px) {
  .netbar { bottom: calc(72px + env(safe-area-inset-bottom)); font-size: 12px; padding: 8px 12px; }
}

/* ── Écran plein « Service indisponible » (login pré-auth + cold-start app)
   Opaque, thème-aware : masque tout, message direct + retry auto. ───── */
.svc-down {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.svc-down-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 460px; text-align: center;
}
.svc-down-card .netbar-dot { width: 14px; height: 14px; }
.svc-down-card h1 {
  margin: 0; font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--ink);
}
.svc-down-card p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2);
}