:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --field: #ffffff;
  --chip: #e3f6f6;
  --btn2-bg: #eef1f6;
  --btn2-hover: #e3e8f0;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;
  --text: #1c2330;
  --text-soft: #5b6472;
  --text-muted: #8a93a3;
  --primary: #02A8AB;
  --primary-dark: #017d80;
  --accent: #15924d;
  --accent-dark: #0f7a3f;
  --danger: #d23f3f;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 50, 0.06), 0 4px 12px rgba(20, 30, 50, 0.05);
}

/* ───────── Thème sombre (#010101) ───────── */
[data-theme="dark"] {
  --bg: #010101;
  --surface: #141414;
  --field: #1c1c1c;
  --chip: rgba(2, 168, 171, 0.18);
  --btn2-bg: #232323;
  --btn2-hover: #2c2c2c;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --text: #e9ecef;
  --text-soft: #b4bac3;
  --text-muted: #868e98;
  --primary: #02A8AB;
  --primary-dark: #3ad2d5;
  --accent: #1bb35e;
  --accent-dark: #149a50;
  --danger: #e0564f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

/* ───────── Topbar ───────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 56px;
}
.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; }
.brand-logo { height: 40px; width: auto; max-width: 220px; display: block; }
.tabs { display: flex; gap: 4px; }
.tab {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
}
.tab:hover { background: var(--bg); color: var(--text); }
.tab.is-active { background: var(--chip); color: var(--primary-dark); font-weight: 600; }

/* Utilisateur connecté (nom + légende), aligné à droite */
.user-info {
  margin-left: auto;            /* pousse le nom + les boutons vers la droite */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  text-align: right;
}
.user-info[hidden] { display: none; }
.user-name { font-weight: 600; font-size: 14px; color: var(--text); }
.user-legend { font-size: 11px; color: var(--text-muted); }

/* Bouton bascule thème clair/sombre */
.theme-toggle {
  border: 1px solid var(--border-strong);
  background: var(--field);
  color: var(--text-soft);
  border-radius: 8px;
  height: 34px;
  min-width: 38px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg); color: var(--text); }
#theme-toggle { margin-left: 10px; }
#logout-btn { margin-left: 6px; }

/* ───────── Écran de connexion ───────── */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}
/* Respecte l'attribut `hidden` (sinon `display:flex` ci-dessus l'écraserait et
   l'écran resterait affiché même après connexion). */
.login-screen[hidden] { display: none; }
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-title { font-size: 18px; margin: 0 0 4px; color: var(--text); }
.login-error { color: var(--danger); font-size: 13px; min-height: 16px; }
.login-card button { margin-top: 6px; }

/* ───────── Layout ───────── */
.container { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* ───────── Cards ───────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2 { font-size: 14px; font-weight: 600; margin: 0; flex: 1; }
.badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--chip);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ───────── Forms ───────── */
label { display: block; font-size: 12px; color: var(--text-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.form-grid .full { grid-column: 1 / -1; }
.block { margin-bottom: 10px; }
input, select, textarea {
  width: 100%;
  margin-top: 3px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  color: var(--text);
  background: var(--field);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(2, 168, 171, 0.18);
}
textarea { resize: vertical; }

/* Appareils tactiles (iPhone/iPad) : les champs date/heure gardent leur apparence
   native et débordent parfois du cadre. On les normalise pour qu'ils s'alignent
   comme les autres champs (le sélecteur natif s'ouvre au tap quand même).
   Non appliqué au bureau, pour conserver l'icône calendrier cliquable. */
@media (pointer: coarse) {
  input[type="date"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
  }
}

.check { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.check input { width: auto; margin-top: 2px; }
.form-actions { display: flex; gap: 8px; margin-top: 12px; }
.form-inline { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.emetteur-resume { font-size: 13px; white-space: pre-line; }
.muted { color: var(--text-muted); }
.search { max-width: 280px; margin: 0; }

/* ───────── Buttons ───────── */
.btn-primary, .btn-secondary, .btn-accent, .btn-ghost {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--btn2-bg); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--btn2-hover); }
.btn-ghost { background: transparent; color: var(--text-soft); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.link { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; padding: 0; }
.link:hover { text-decoration: underline; }

.actions-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.actions-bar .spacer { flex: 1; }

/* ───────── Tables ───────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
td.num, th.col-num { text-align: right; }
.lignes input, .lignes select { margin-top: 0; padding: 6px 7px; }
.lignes input.num { text-align: right; }
.lignes .col-ordre { width: 34px; }
.lignes .col-ref { width: 110px; }
.lignes .col-num { width: 92px; }
.lignes .col-unite { width: 90px; }
.lignes .col-act { width: 34px; }
.lignes td.ligne-total { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ordre-btns { display: flex; flex-direction: column; gap: 1px; }
.icon-btn {
  border: 1px solid var(--border-strong);
  background: var(--field);
  border-radius: 6px;
  width: 24px; height: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-soft);
  padding: 0;
}
.icon-btn:hover { background: var(--bg); }
.icon-btn.del:hover { color: var(--danger); border-color: var(--danger); }
.row-actions { display: flex; gap: 6px; }
.row-actions .icon-btn { width: auto; padding: 0 8px; }

/* ───────── Totaux ───────── */
.totaux-card { display: flex; flex-direction: column; }
.totaux { display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.totaux .ligne-tot { display: flex; justify-content: space-between; }
.totaux .ligne-tot.grand {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px solid var(--text);
  font-size: 16px;
  font-weight: 700;
}
.totaux .lbl { color: var(--text-soft); }
.totaux .grand .lbl { color: var(--text); }

/* ───────── Divers ───────── */
.logo-apercu { grid-column: 1 / -1; }
.logo-apercu img { max-height: 60px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; background: var(--field); }
.empty { color: var(--text-muted); padding: 14px 4px; }

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1c2330;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ═════════════════════ Responsive (calé sur les tailles Apple) ═════════════════════
   Repères : iPhone 375–430 (portrait) · iPad 768–834 (portrait) · iPad Pro/paysage ≥ 1024.
   > 900px : barre complète.  641–900 : onglets défilants (iPad portrait).
   ≤ 640px : menu burger + une colonne (iPhone). */

/* Bouton burger : masqué par défaut (visible seulement sur smartphone). */
.nav-burger {
  display: none;
  border: 1px solid var(--border-strong);
  background: var(--field);
  color: var(--text);
  border-radius: 8px;
  height: 34px;
  min-width: 40px;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-left: 6px;
}
.nav-burger:hover { background: var(--bg); }

/* ── Tablette (iPad portrait, petits écrans) : onglets sur une ligne défilante ── */
@media (min-width: 641px) and (max-width: 900px) {
  .topbar-inner { flex-wrap: wrap; height: auto; gap: 8px 12px; padding: 8px 16px; }
  .tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .tab { flex: 0 0 auto; white-space: nowrap; }
  #theme-toggle { margin-left: 10px; }
  .container { padding: 18px 16px 56px; }
}

/* ── Smartphone (iPhone) : navbar en menu burger, une seule colonne ── */
@media (max-width: 640px) {
  .topbar-inner { position: relative; gap: 8px; padding: 8px 14px; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  #theme-toggle { margin-left: 10px; }

  /* Les onglets deviennent un panneau déroulant sous la barre. */
  .tabs {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 30;
  }
  .topbar.nav-open .tabs { display: flex; }
  .tabs .tab { width: 100%; text-align: left; padding: 11px 12px; border-radius: 6px; }

  /* Contenu : marges confortables, une colonne, champs non-zoomables (iOS). */
  .container { padding: 16px 14px 48px; }
  .card { padding: 14px; }
  .brand-logo { height: 30px; max-width: 150px; }
  .form-grid { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }
  .search { max-width: 100%; }
  .actions-bar { flex-wrap: wrap; }
  .actions-bar .spacer { display: none; }

  /* Tableau des lignes : défilement horizontal contenu dans la carte. */
  .table-wrap .lignes { min-width: 600px; }
}