/* =====================================================================
   KAIROZ — Système d'interface partagé : LA STRUCTURE (couche commune)
   Version 2.0
   ---------------------------------------------------------------------
   Ce fichier définit COMMENT les composants sont construits (barres,
   onglets, tableaux, cartes, boutons…) : tailles, espacements, zones
   tactiles, comportement. C'est IDENTIQUE pour toutes les apps KAIROZ —
   c'est la façon la plus optimale de construire, réutilisée partout.

   Il ne fixe AUCUNE couleur de marque. Les couleurs viennent d'un
   fichier de THÈME propre à chaque client (theme-bie.css,
   theme-bassin18.css…), importé APRÈS ce fichier. Ainsi chaque app garde
   ses couleurs mais partage exactement la même structure.

   ORDRE D'IMPORT dans chaque app :
     1. kairoz-ui.css        (cette structure commune)
     2. theme-<client>.css   (les couleurs du client)
     3. le CSS spécifique de l'app (le strict nécessaire en plus)
   ===================================================================== */

:root{
  /* ============================================================
     STRUCTURE — commune à toutes les apps, NE PAS modifier par app
     ============================================================ */
  /* Espacement (base 4px) */
  --k-space-1: 4px;  --k-space-2: 8px;  --k-space-3: 12px;
  --k-space-4: 16px; --k-space-5: 20px; --k-space-6: 24px; --k-space-8: 32px;

  /* Typographie (l'échelle est commune ; la police peut être surchargée par thème) */
  --k-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --k-fs-xs:   11px;   /* micro-libellés (barre du bas, tags) */
  --k-fs-sm:   12.5px; /* texte secondaire */
  --k-fs-body: 14px;   /* corps */
  --k-fs-input:16px;   /* saisies — imposé (sous 16px, iOS zoome) */
  --k-fs-h3:   15px;
  --k-fs-h2:   18px;
  --k-fs-h1:   22px;

  /* Zones tactiles & gabarits */
  --k-touch:   44px;   /* zone cliquable minimale */
  --k-topbar-h:52px;   /* barre du haut : UNE seule rangée */

  /* ============================================================
     THÈME — valeurs NEUTRES par défaut. Un fichier theme-<client>.css
     les REMPLACE avec les couleurs du client. Ne pas s'appuyer sur ces
     valeurs grises : elles ne sont là que pour que le fichier
     fonctionne seul si aucun thème n'est chargé.
     ============================================================ */
  --k-brand:        #334155;
  --k-brand-2:      #1e293b;
  --k-accent:       #64748b;
  --k-brand-pale:   #dbe2ea;
  --k-accent-soft:  #eef1f5;
  --k-grad-brand:   linear-gradient(135deg, #64748b, #334155);

  --k-success:#2E7D32; --k-success-soft:#e6f4e6; --k-success-ink:#1b5e20;
  --k-warning:#B26A00; --k-warning-soft:#fff3e0; --k-warning-ink:#8a5200;
  --k-danger: #C62828; --k-danger-soft:#fdecea;  --k-danger-ink:#8e1c1c;
  --k-info:   #1565C0; --k-info-soft:#e7f0fb;    --k-info-ink:#0d3f7a;

  --k-ink:      #1a2233;
  --k-ink-2:    #56617a;
  --k-line:     #dde3ee;
  --k-bg:       #f4f6fa;
  --k-surface:  #ffffff;
  --k-surface-2:#f1f4f7;

  --k-radius-sm:   8px;
  --k-radius:      12px;
  --k-radius-lg:   16px;
  --k-radius-pill: 999px;
  --k-shadow:      0 2px 10px rgba(16,35,80,.08);
  --k-shadow-lg:   0 6px 24px rgba(16,35,80,.16);
}

/* ===================================================================
   BASE
   =================================================================== */
.k-app, body.k-app{ font-family:var(--k-font); color:var(--k-ink); background:var(--k-bg);
  font-size:var(--k-fs-body); line-height:1.45; }
.k-app *{ box-sizing:border-box; }

.k-input{ font-family:inherit; font-size:var(--k-fs-input); padding:10px 12px;
  border:1px solid var(--k-line); border-radius:var(--k-radius-sm); background:var(--k-surface);
  color:var(--k-ink); width:100%; }
.k-input:focus{ outline:none; border-color:var(--k-accent); box-shadow:0 0 0 3px var(--k-accent-soft); }

.k-h1{ font-size:var(--k-fs-h1); font-weight:700; color:var(--k-brand); margin:0 0 var(--k-space-2); }
.k-h2{ font-size:var(--k-fs-h2); font-weight:700; color:var(--k-ink); margin:0 0 var(--k-space-2); }
.k-h3{ font-size:var(--k-fs-h3); font-weight:600; color:var(--k-ink); margin:0 0 var(--k-space-2); }
.k-muted{ color:var(--k-ink-2); font-size:var(--k-fs-sm); }

/* ===================================================================
   BARRE DU HAUT — UNE seule rangée, ~52px, jamais 2 lignes
   Règle : pas de date ni de "Bonjour X" ici sur mobile (voir CHARTE-UI.md).
   =================================================================== */
.k-topbar{ display:flex; align-items:center; gap:var(--k-space-3);
  min-height:var(--k-topbar-h); padding:0 var(--k-space-4);
  background:var(--k-surface); border-bottom:1px solid var(--k-line);
  position:sticky; top:0; z-index:20; /* PAS de flex-wrap */ }
.k-topbar--brandbar{ background:var(--k-grad-brand); border-bottom:0; }
.k-topbar--brandbar .k-topbar__title{ color:#fff; }
.k-topbar__title{ font-weight:600; font-size:var(--k-fs-body); color:var(--k-brand);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-topbar__spacer{ margin-left:auto; }

/* ===================================================================
   BARRE DU BAS — navigation principale mobile (modèle appli native)
   =================================================================== */
.k-bottomnav{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--k-surface); border-top:1px solid var(--k-line);
  box-shadow:0 -2px 10px rgba(16,35,80,.06);
  padding:var(--k-space-1) 2px calc(var(--k-space-1) + env(safe-area-inset-bottom)); }
.k-bottomnav__item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  border:0; background:none; color:var(--k-ink-2); cursor:pointer;
  padding:6px 2px; font-size:var(--k-fs-xs); font-family:inherit; min-height:var(--k-touch); }
.k-bottomnav__item svg,.k-bottomnav__item .k-ic{ width:20px; height:20px; }
.k-bottomnav__item.is-active{ color:var(--k-brand); font-weight:600; }
.k-bottomnav__item.is-active .k-ic{ color:var(--k-accent); }
@media(max-width:820px){
  .k-bottomnav{ display:flex; }
  .k-app main{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
}

/* ===================================================================
   ONGLETS / FILTRES (pastilles) — LE composant unique de tri/sélection
   =================================================================== */
.k-tabs{ display:flex; gap:var(--k-space-2); flex-wrap:wrap; margin:var(--k-space-3) 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; }
.k-tab{ border:1px solid var(--k-line); background:var(--k-surface); color:var(--k-ink-2);
  padding:8px 14px; border-radius:var(--k-radius-pill); cursor:pointer;
  font-family:inherit; font-size:var(--k-fs-sm); white-space:nowrap; min-height:36px; }
.k-tab:hover{ border-color:var(--k-brand-pale); }
.k-tab.is-active{ background:var(--k-brand); color:#fff; border-color:var(--k-brand); font-weight:600; }

/* ===================================================================
   BOUTONS
   =================================================================== */
.k-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--k-touch); padding:10px 16px; border-radius:var(--k-radius-sm);
  border:1px solid var(--k-brand); background:var(--k-brand); color:#fff;
  font-family:inherit; font-size:var(--k-fs-body); font-weight:600; cursor:pointer; }
.k-btn:hover{ filter:brightness(1.06); }
.k-btn--ghost{ background:var(--k-surface); color:var(--k-brand); }
.k-btn--danger{ background:var(--k-danger); border-color:var(--k-danger); color:#fff; }
.k-btn--sm{ min-height:auto; padding:6px 12px; font-size:var(--k-fs-sm); }
.k-icon-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:var(--k-touch); height:var(--k-touch); border:1px solid var(--k-line);
  background:var(--k-surface); color:var(--k-ink); border-radius:var(--k-radius-sm); cursor:pointer; }
.k-icon-btn.is-danger{ border-color:var(--k-danger); background:var(--k-danger); color:#fff; }

/* ===================================================================
   CARTES
   =================================================================== */
.k-card{ background:var(--k-surface); border:1px solid var(--k-line);
  border-radius:var(--k-radius); box-shadow:var(--k-shadow);
  padding:var(--k-space-4); margin-bottom:var(--k-space-3); }

/* ===================================================================
   PASTILLES DE STATUT
   =================================================================== */
.k-pill{ display:inline-flex; align-items:center; padding:3px 10px;
  border-radius:var(--k-radius-pill); font-size:var(--k-fs-xs); font-weight:600; white-space:nowrap; }
.k-pill--success{ background:var(--k-success-soft); color:var(--k-success-ink); }
.k-pill--warning{ background:var(--k-warning-soft); color:var(--k-warning-ink); }
.k-pill--danger{  background:var(--k-danger-soft);  color:var(--k-danger-ink); }
.k-pill--info{    background:var(--k-info-soft);    color:var(--k-info-ink); }
.k-pill--neutral{ background:var(--k-surface-2);    color:var(--k-ink-2); }

/* ===================================================================
   TABLEAUX SUR MOBILE — conteneur à scroll horizontal contenu
   =================================================================== */
.k-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--k-line); border-radius:var(--k-radius-sm); }
.k-table-wrap table{ border-collapse:collapse; width:100%; font-size:var(--k-fs-sm); }
.k-table-wrap th,.k-table-wrap td{ padding:8px 10px; border-bottom:1px solid var(--k-line);
  white-space:nowrap; text-align:left; }
.k-table-wrap th{ position:sticky; top:0; background:var(--k-surface-2); color:var(--k-ink-2); }

/* ===================================================================
   FEUILLE DE MENU "Plus" (montée depuis la barre du bas sur mobile)
   =================================================================== */
.k-sheet{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--k-surface); border-radius:var(--k-radius-lg) var(--k-radius-lg) 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.2);
  padding:var(--k-space-3) var(--k-space-3) calc(var(--k-space-4) + env(safe-area-inset-bottom)); }
.k-sheet.is-open{ display:block; }
.k-sheet__item{ display:flex; align-items:center; gap:var(--k-space-3);
  width:100%; border:0; background:none; color:var(--k-ink);
  padding:12px 8px; font-family:inherit; font-size:var(--k-fs-body); cursor:pointer;
  border-radius:var(--k-radius-sm); min-height:var(--k-touch); text-align:left; }
.k-sheet__item.is-active{ background:var(--k-surface-2); }
.k-sheet__account{ margin-top:var(--k-space-3); padding-top:var(--k-space-3);
  border-top:1px solid var(--k-line); color:var(--k-ink-2); font-size:var(--k-fs-sm); }
.k-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:64; }
.k-overlay.is-open{ display:block; }