/*
 * FAstock — CSS officiel modulaire.
 * Source de vérité runtime. La copie historique complète est conservée dans
 * assets/css/legacy/main-full-backup.css.
 */
/* =====================================================================
   assets/css/main.css
   -----------------------------------------------------------------------
   Styles communs à toute l'application. Palettes conservées à l'identique
   (vert Inventaire = --olive-deep, bleu Fiches Techniques = --accent),
   valeurs par défaut alignées sur settings/apparence (voir config-store.js)
   pour que l'admin puisse les changer depuis Administration > Apparence.
   ===================================================================== */

/* ============================================================
   VARIABLES GLOBALES — couleurs, espacements et dimensions communes
   ============================================================ */
:root {

  --app-bg: #F7F8F2;
  --danger: #C0524A;
  --warning: #C9A227;
  --text-primary: #2B2E27;
  --text-secondary: #7A8270;
  --surface-bg: #FFFFFF;
  --border-color: #E3E6DB;
  --button-neutral-bg: #FFFFFF;
  --radius: 10px;

  /* Variables couleur sémantiques — personnalisables depuis Apparence > Thème. */

  --inventory-primary: #5E7944;
  --inventory-secondary: #A8C27B;

  --inventory-button-text: #FFFFFF;
  --inventory-chip-bg: #EEF2E9;
  --inventory-chip-text: #2B2E27;
  --inventory-panel-bg: #F5F6F0;
  --danger-bg: #FBEFEE;
  --warning-bg: #FFF9E8;
  --warning-text: #806A13;

  --recipes-primary: #2E6E96;
  --recipes-secondary: #2E9E7C;

  --recipes-button-text: #FFFFFF;
  --recipes-chip-bg: #EAF3F8;
  --recipes-chip-text: #2E6E96;
  --recipes-panel-bg: #F1F6F9;
  --recipes-allergen-bg: #FDEEE0;
  --recipes-allergen-text: #8A4C1D;

  /* ADMINISTRATION — variables propres au module */
  --admin-primary: #2E6E96;

  --admin-button-text: #FFFFFF;
  --admin-chip-site: #5E7944;
  --admin-chip-users: #2E6E96;
  --admin-chip-appearance: #8B5E9E;
  --admin-chip-text: #FFFFFF;

  /* IMPRESSION FT */
  --print-primary: #2E6E96;
  --print-secondary: #2E9E7C;
  --print-page-bg: #FFFFFF;
  --print-text: #2B2E27;
  --print-muted: #7A8270;
  --print-border: #E3E6DB;
  --print-metric-bg: #F1F6F9;
  --print-allergen-bg: #FFF5D6;
  --print-allergen-text: #806A13;
  --print-footer-text: #7A8270;
  --surface-alt-bg: #F3F4EE;
  --role-admin-bg: #E8F0FF;
  --role-admin-text: #1D4F8A;
  --role-founder-bg: #FDEEE0;
  --role-founder-text: #8A4C1D;
  --role-employee-bg: #EEF2E9;
  --role-employee-text: #7A8270;
  --text-on-primary: #FFFFFF;
  --shadow-soft: rgba(0,0,0,.08);
  --shadow-medium: rgba(0,0,0,.18);
  --overlay-bg: rgba(20,22,16,.45);
  --on-primary-soft-bg: rgba(255,255,255,.20);
}

/* CONTEXTE MODULE COURANT — alias internes non exposés */
body[data-active-module="dashboard"] {
  --module-primary: var(--homepage-primary);
  --module-button-text: #FFFFFF;
}
body[data-active-module="inventaire"] {
  --module-primary: var(--inventory-primary);
  --module-button-text: var(--inventory-button-text);
}
body[data-active-module="fiches-techniques"] {
  --module-primary: var(--recipes-primary);
  --module-button-text: var(--recipes-button-text);
}
body[data-active-module="admin"] {
  --module-primary: var(--admin-primary);
  --module-button-text: var(--admin-button-text);
}


* { box-sizing: border-box; }

html, /* ============================================================
   BASE APPLICATION — document, typographie et fond général
   ============================================================ */
body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--app-bg);
  color: var(--text-primary);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0 0 10px; }

.muted { color: var(--text-secondary); font-size: 13px; }


/* Onglets structurels globaux */
.tabs { display:flex; gap:4px; overflow-x:auto; }
.tab-btn {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 600;
}
.tab-btn:hover { border-bottom-color: var(--border-color); }
/* -------- Boutons -------- */
button { cursor: pointer; border-radius: 8px; border: none; padding: 10px 14px; }
/* .add-btn : migré vers assets/css/primitives.css (UI-1) */
/* ============================================================
   BOUTONS & ACTIONS PARTAGÉS — utilisés dans plusieurs modules
   ============================================================ */
.btn-secondary {
  background: var(--button-neutral-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.cancel-btn {
  background: var(--button-neutral-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.save-btn {
  background: var(--button-neutral-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-weight: 600;
}
.exp-btn {
  background: var(--button-neutral-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover,
.cancel-btn:hover,
.exp-btn:hover,
.stepbtn:hover {
  border-color: var(--text-secondary);
}
/* .icon-btn : migré vers assets/css/primitives.css (UI-1) */
.stepbtn {
  background: var(--button-neutral-bg);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

/* -------- Champs -------- */
/* ============================================================
   FORMULAIRES PARTAGÉS — labels, champs et contrôles communs
   ============================================================ */
.field { margin-bottom: 12px; text-align: left; }
.field label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-bg);
}
textarea.procede-text { min-height: 140px; resize: vertical; }
.field-row { display: flex; gap: 10px; }
.field-row > div { flex: 1; }
.combo { display: flex; gap: 8px; align-items: center; }
.combo select { flex: 1; }
.inline-add { display: none; gap: 8px; margin-top: 6px; }
.inline-add.show { display: flex; }
.field-color .color-row { display: flex; gap: 8px; align-items: center; }
.appearance-swatch { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-weight: 700; font-size: 13px; border: 1px solid var(--border-color); flex-shrink: 0; }
.field-color input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border-color); border-radius: 8px; }

/* -------- Boîte à outils / listes -------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.search-box { flex: 1; min-width: 160px; }
.count-pill {
  background: var(--surface-alt-bg);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.alert-filter-btn { background: var(--surface-bg); border: 1px solid var(--warning); color: var(--warning); }
.alert-filter-btn.active { background: var(--warning); color: var(--text-on-primary); }
.alert-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning-text);
  border-radius: 8px;
}
.empty { color: var(--text-secondary); text-align: center; padding: 30px 10px; }
.filter-toggle {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 8px;
}
.filter-toggle.active { background: var(--danger); color: var(--text-on-primary); }


/* -------- Composants de lignes partagés -------- */
/* ============================================================
   LIGNES PARTAGÉES — Inventaire + certains écrans Administration
   PARTAGÉ : modifier avec prudence, plusieurs modules peuvent être impactés.
   ============================================================ */
.rows { padding: 4px 8px; }
.row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--border-color); }
.row:last-child { border-bottom: none; }
.row.row-disabled { opacity: .55; }
.pname-wrap { min-width: 0; }
.pname { font-weight: 600; word-break: break-word; }
.row-col-actions { display: flex; gap: 4px; }
/* .admin-row : migré vers assets/css/primitives.css (UI-1) */
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.role-badge {
  background: var(--role-employee-bg);
  color: var(--role-employee-text);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
}
.role-badge.admin {
  background: var(--role-admin-bg);
  color: var(--role-admin-text);
}
.role-badge.fondateur {
  background: var(--role-founder-bg);
  color: var(--role-founder-text);
}
.role-badge.employe {
  background: var(--role-employee-bg);
  color: var(--role-employee-text);
}
.savebar {
  background: var(--surface-alt-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .row { grid-template-columns: 1fr auto; }
  .row-col-actions { grid-column: 1 / -1; justify-content: flex-end; }
}