/* =============================================================================
   EFIMOU-F-010 — Feuille de composants (superset, miroir de la philosophie
   Lenuta app.css). Habille les classes LoqaR historiques (`crm-*`, `loqar-*`)
   avec le design system olive porté de Lenuta (tokens `--c-*`, `--sp-*`,
   `--radius*`, `--shadow*`, `--fs*` définis dans app.css). Aucun renommage de
   classe côté templates → zéro churn HTMX/Alpine.

   Chargée globalement par base.html APRÈS app.css + desktop.css : ne redéfinit
   PAS les classes canoniques (.btn, .card, .badge, .main-head, .data-table,
   .empty-state) — elle ne cible que les familles propres à LoqaR.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Sûreté encodage grec (EFIMOU-F-010 partie B)
   La pile système (-apple-system / Segoe UI) couvre déjà le grec ; on ajoute
   des fontes à large couverture Unicode en secours si l'OS n'en a aucune.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans), "Noto Sans", "DejaVu Sans", "Arial Unicode MS", sans-serif;
}

/* -----------------------------------------------------------------------------
   1. En-tête de page (breadcrumb historique `.crm-nav`) + barre mobile
   -------------------------------------------------------------------------- */
.app-header__inner { display: flex; align-items: center; }
.app-brand-h { margin: 0; font-size: var(--fs-lg); }
.app-brand { color: var(--c-primary); text-decoration: none; font-weight: 700; letter-spacing: .01em; }

.crm-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: var(--sp-2) 0; color: var(--c-muted); font-size: var(--fs-sm); }
.crm-nav a { color: var(--c-primary); text-decoration: none; }
.crm-nav a:hover { text-decoration: underline; }

/* Titre de section + action à droite (patron `main-head` Fable). */
.crm-list .main-head,
section > h2:first-child { margin-top: 0; }
section > h2 { color: var(--c-ink); font-size: var(--fs-2xl); letter-spacing: -.01em; }
section > h3 { color: var(--c-ink-soft); font-size: var(--fs-lg); }

/* -----------------------------------------------------------------------------
   2. Boutons (crm-* / loqar-*) — mappés sur la palette olive
   -------------------------------------------------------------------------- */
.crm-btn, .loqar-btn {
  display: inline-block; background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary);
  border-radius: var(--radius); padding: .5rem .95rem; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background .12s ease;
}
.crm-btn:hover, .loqar-btn:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); }
.crm-btn-secondary, .loqar-btn-secondary {
  display: inline-block; background: var(--c-surface); color: var(--c-primary);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  padding: .5rem .95rem; cursor: pointer; font: inherit; font-weight: 600;
  text-decoration: none; line-height: 1.2; transition: border-color .12s ease, background .12s ease;
}
.crm-btn-secondary:hover, .loqar-btn-secondary:hover { border-color: var(--c-primary); background: var(--c-primary-50); }
.crm-btn-danger { background: var(--c-surface); color: var(--c-danger); border: 1px solid var(--c-danger); }
.loqar-logout { display: inline; }

/* -----------------------------------------------------------------------------
   3. Filtres / toolbars / onglets
   -------------------------------------------------------------------------- */
.crm-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-4) 0; }
.crm-toolbar form, .crm-filters form { display: flex; gap: var(--sp-2); flex: 1 1 auto; flex-wrap: wrap; }
.crm-toolbar input[type="search"], .crm-toolbar select,
.crm-filters input[type="search"], .crm-filters select {
  padding: .5rem .6rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font: inherit; background: var(--c-surface); color: var(--c-ink);
}
.crm-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-3) 0 var(--sp-5); }
.crm-filters input[type="search"] { min-width: 240px; flex: 1 1 260px; }
.crm-active { font-weight: 700; text-decoration: underline; }

.crm-tabs { display: flex; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5); flex-wrap: wrap; }
.crm-tabs a {
  padding: .4rem .9rem; border-radius: var(--radius-pill); text-decoration: none;
  border: 1px solid var(--c-line-strong); color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: 600;
}
.crm-tabs a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.crm-tabs a.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.crm-inline-form { display: flex; gap: var(--sp-4); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-2); }
.crm-inline-form label { display: flex; flex-direction: column; font-size: var(--fs-sm); gap: .25rem; }

/* -----------------------------------------------------------------------------
   4. Tables de données (crm-table) — crème / olive, lignes alternées
   -------------------------------------------------------------------------- */
.crm-table { width: 100%; border-collapse: collapse; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.crm-table thead th {
  text-align: left; padding: .7rem .8rem; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted);
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line-strong);
}
.crm-table td, .crm-table tbody th {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--c-line); vertical-align: top;
}
.crm-table tbody th { font-weight: 600; color: var(--c-muted); width: 1%; white-space: nowrap; }
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover td { background: var(--c-primary-50); }
.crm-table a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.crm-table a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   5. Badges — rôles / statuts (role-badge/status-badge canoniques + crm-badge)
   -------------------------------------------------------------------------- */
.crm-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  padding: .12rem .55rem; border-radius: var(--radius-pill); margin: 0 .15rem .15rem 0;
  border: 1px solid transparent; background: var(--c-neutral-bg); color: var(--c-neutral-ink);
}
.crm-badge-supplier { background: var(--c-primary-50); color: var(--c-primary); border-color: var(--c-primary-100); }
.crm-badge-customer { background: var(--c-success-bg); color: var(--c-success-ink); }
.crm-badge-self { background: var(--c-warning-bg); color: var(--c-warning-ink); }
.crm-badge-status { background: var(--c-neutral-bg); color: var(--c-neutral-ink); }
.crm-badge-draft { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.crm-badge-warn { background: var(--c-warning-bg); color: var(--c-warning-ink); }

/* -----------------------------------------------------------------------------
   6. Cartes / grilles clé-valeur / timeline
   -------------------------------------------------------------------------- */
.crm-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-4) 0; box-shadow: var(--shadow-sm);
}
.crm-card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); color: var(--c-ink); }
.crm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.crm-kv { margin: .2rem 0; }
.crm-kv .k { color: var(--c-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: .1rem; }

.crm-timeline { list-style: none; padding: 0; margin: 0; }
.crm-timeline li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.crm-timeline li:last-child { border-bottom: none; }
.crm-overdue { color: var(--c-danger); font-weight: 700; }

/* -----------------------------------------------------------------------------
   7. Formulaires (crm-form / loqar-form)
   -------------------------------------------------------------------------- */
.crm-form, .loqar-form { display: grid; gap: var(--sp-4); max-width: 660px; }
.crm-form label, .loqar-form label { display: grid; gap: .3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }
.crm-form input, .crm-form select, .crm-form textarea,
.loqar-form input, .loqar-form select, .loqar-form textarea {
  padding: .55rem .6rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  font: inherit; font-weight: 400; background: var(--c-surface); color: var(--c-ink);
}
.crm-form input:focus, .crm-form select:focus, .crm-form textarea:focus,
.loqar-form input:focus, .loqar-form select:focus, .loqar-form textarea:focus {
  outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus);
}
.crm-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.crm-form fieldset { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.crm-form legend { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-soft); padding: 0 .4rem; }
.crm-field-error { color: var(--c-danger); font-size: var(--fs-xs); font-weight: 600; }
.crm-roles { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.crm-roles label { flex-direction: row; align-items: center; gap: .4rem; }
.crm-checkbox { display: flex; align-items: center; gap: .4rem; margin: var(--sp-2) 0; }
.crm-form-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

/* -----------------------------------------------------------------------------
   8. Flash / états vides / muted / pagination
   -------------------------------------------------------------------------- */
.crm-flash {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin: var(--sp-4) 0;
  background: var(--c-success-bg); color: var(--c-success-ink); border: 1px solid #bfe6cd;
}
.crm-error { color: var(--c-danger); font-weight: 700; }
.crm-empty { color: var(--c-muted); padding: var(--sp-8) 0; text-align: center; }
.crm-muted, .muted { color: var(--c-muted); }
.crm-pager, .crm-pagination { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-5) 0; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   9. Dashboard (home) — cartes de statut + actions rapides
   -------------------------------------------------------------------------- */
.loqar-home > h2 { color: var(--c-ink); font-size: var(--fs-2xl); margin-bottom: .25rem; }
.loqar-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.loqar-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm); font-weight: 600;
}
.loqar-badge { font-size: 1.1rem; line-height: 1; }
.loqar-badge-ok { color: var(--c-success); }

/* -----------------------------------------------------------------------------
   10. Auth (écrans autonomes, sans sidebar) — carte centrée
   -------------------------------------------------------------------------- */
body.is-auth .app-shell__main { display: flex; justify-content: center; align-items: flex-start; }
.loqar-auth {
  width: 100%; max-width: 420px; margin: var(--sp-10) auto 0;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--sp-8); box-shadow: var(--shadow-md);
}
.loqar-auth h1, .loqar-auth h2 { margin-top: 0; color: var(--c-ink); }
.dev-only { margin-top: var(--sp-4); padding: var(--sp-3); border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-muted); }