/* inventory.css — réutilise les variables CSS de main.css */

/* ── Layout écrans ─────────────────────────────────────────────────────────── */
/* !important nécessaire : main.css a des règles #screen-login avec spécificité ID qui écrasent les classes */
.inv-screen { display: none !important; }
.inv-screen.active { display: flex !important; flex-direction: column; height: 100vh; overflow: hidden; }

#screen-login { align-items: center; justify-content: center; background: var(--bg); }
#screen-start  { background: var(--bg); overflow-y: auto; }
#screen-inventory { background: var(--bg); }
#screen-review { background: var(--bg); }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-wrap { width: 100%; max-width: 400px; padding: 1rem; }
.login-logo {
  font-size: 2rem; font-weight: 900; color: var(--green-dark);
  text-align: center; margin-bottom: .25rem;
}
.login-subtitle { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.login-error {
  background: #fdecea; color: var(--danger); border: 1px solid #f5c6c8;
  border-radius: 8px; padding: .6rem 1rem; font-size: .9rem; margin-bottom: 1rem;
}
.btn-full { width: 100%; }

/* ── Écran démarrage ───────────────────────────────────────────────────────── */
.start-wrap { max-width: 600px; margin: 0 auto; padding: 1.5rem 1rem; }

.resume-banner {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 10px;
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.resume-info { flex: 1; }
.resume-info strong { display: block; font-size: .95rem; color: #664d03; }
.resume-info span { font-size: .82rem; color: #856404; }

.start-card {
  background: var(--surface); border-radius: 12px; padding: 1.25rem;
  border: 1px solid var(--border);
}
.start-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.start-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.start-hint { color: var(--text-muted); font-size: .9rem; margin-bottom: .75rem; }

.category-checklist { display: flex; flex-direction: column; gap: .4rem; max-height: 55vh; overflow-y: auto; }

/* ── Groupe pliable (parent + enfants) ─── */
.cat-inv-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

.cat-inv-parent {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; cursor: pointer;
  background: var(--surface2); font-weight: 700; font-size: .95rem;
  color: var(--text); transition: background .12s; user-select: none;
}
.cat-inv-parent:hover { background: #e8f5e9; }
.cat-inv-parent.expanded { background: #e8f5e9; color: var(--green-dark); }

.cat-inv-arrow {
  font-size: .75rem; color: var(--text-muted); min-width: 14px; text-align: center;
  transition: transform .15s; display: inline-block;
}
.cat-inv-parent input[type=checkbox] { accent-color: var(--green); width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.cat-inv-parent label { cursor: pointer; flex: 1; }
.cat-inv-count { font-size: .75rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }

/* Enfants — cachés par défaut, visibles quand .open */
.cat-inv-children { display: none; flex-direction: column; border-top: 1px solid var(--border); }
.cat-inv-children.open { display: flex; }

.cat-check-child {
  border-radius: 0 !important; border: none !important; border-bottom: 1px solid var(--border) !important;
  padding-left: 2rem !important; background: var(--surface) !important;
}
.cat-check-child:last-child { border-bottom: none !important; }
.cat-check-child:hover { background: #f0faf3 !important; }
.cat-check-child.selected { background: #d4edda !important; }

/* ── Items simples (sans parent) ─── */
.cat-check-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  transition: background .12s;
}
.cat-check-item:hover { background: #e8f5e9; }
.cat-check-item.selected { background: #d4edda; border-color: var(--green); }
.cat-check-item input[type=checkbox] { accent-color: var(--green); width: 18px; height: 18px; cursor: pointer; }
.cat-check-item label { cursor: pointer; font-size: .95rem; flex: 1; }

.start-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.selected-count { font-size: .85rem; color: var(--text-muted); }

/* ── Topbar inventaire ─────────────────────────────────────────────────────── */
.inv-topbar {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem;
  background: var(--green-dark); border-bottom: 2px solid var(--green);
  flex-shrink: 0;
}
.inv-logo { font-weight: 900; font-size: 1rem; color: #fff; letter-spacing: .5px; }
.topbar-cats { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; }
.topbar-cat-badge {
  background: rgba(255,255,255,.15); color: #fff;
  font-size: .72rem; padding: 2px 8px; border-radius: 10px;
}
.topbar-spacer { flex: 1; }

/* ── Scanner invisible ─────────────────────────────────────────────────────── */
.barcode-hidden {
  position: fixed; left: -9999px; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ── Layout 3 colonnes ─────────────────────────────────────────────────────── */
.inv-layout {
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar catégories ────────────────────────────────────────────────────── */
.inv-sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; display: flex; flex-direction: column;
}
.sidebar-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); padding: .4rem .75rem .2rem; letter-spacing: .5px;
}
.inv-cat-item {
  padding: .55rem .75rem; cursor: pointer; font-size: .9rem;
  border-left: 3px solid transparent; color: var(--text);
  transition: background .1s;
}
.inv-cat-item:hover { background: var(--surface2); }
.inv-cat-item.active {
  border-left-color: var(--green); background: #e8f5e9; font-weight: 700; color: var(--green-dark);
}

/* ── Grille principale ─────────────────────────────────────────────────────── */
.inv-main {
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
.search-bar { padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.search-bar input {
  width: 100%; padding: .45rem .75rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: .9rem; background: var(--surface);
}
.inv-grid {
  flex: 1; overflow-y: auto; padding: .5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .4rem; align-content: start;
}

/* ── Bouton produit ────────────────────────────────────────────────────────── */
.prod-btn {
  position: relative; padding: .6rem .4rem; border-radius: 10px;
  background: var(--surface); border: 2px solid var(--border);
  cursor: pointer; text-align: center; font-size: .82rem; line-height: 1.3;
  color: var(--text); transition: border-color .12s, background .12s;
  min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.prod-btn:active { transform: scale(.96); }
.prod-btn.counted { border-color: var(--green); background: #e8f5e9; }
.prod-btn .prod-badge {
  position: absolute; top: 4px; right: 6px;
  background: var(--green); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 1px 5px; border-radius: 8px;
}

/* ── Panneau comptés ───────────────────────────────────────────────────────── */
.inv-counted-panel {
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.counted-header {
  padding: .5rem .75rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; color: var(--text-muted); letter-spacing: .5px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.counted-list { flex: 1; overflow-y: auto; }
.counted-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .6rem; border-bottom: 1px solid var(--border);
  font-size: .82rem; cursor: pointer; transition: background .1s;
}
.counted-item:hover { background: var(--surface2); }
.counted-item .ci-name { flex: 1; line-height: 1.2; }
.counted-item .ci-qty {
  background: var(--green); color: #fff;
  font-size: .78rem; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; min-width: 28px; text-align: center;
}

/* ── Modal quantité ────────────────────────────────────────────────────────── */
.qty-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.qty-modal-box {
  background: var(--surface); border-radius: 16px; padding: 1.25rem;
  width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.qty-modal-product { font-size: .9rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: .5rem; }
.qty-display {
  font-size: 2.2rem; font-weight: 900; text-align: center;
  background: var(--surface2); border-radius: 10px; padding: .4rem;
  color: var(--green-dark); margin-bottom: .75rem;
  border: 2px solid var(--border); min-height: 60px; line-height: 1.2;
}
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .6rem; }
.num-btn {
  padding: .7rem; font-size: 1.1rem; font-weight: 700;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; text-align: center; color: var(--text);
  transition: background .1s;
}
.num-btn:active { background: #d4edda; }
.num-btn.btn-ok { background: var(--green); color: #fff; border-color: var(--green); }
.num-btn.btn-ok:active { background: var(--green-dark); }
.qty-cancel { margin-top: .25rem; }

/* ── Revue des écarts ──────────────────────────────────────────────────────── */
.review-topbar {
  display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem;
  background: var(--green-dark); border-bottom: 2px solid var(--green); flex-shrink: 0;
}
.review-title { font-weight: 800; font-size: 1rem; color: #fff; flex: 1; }
.review-summary-text { font-size: .8rem; color: rgba(255,255,255,.7); }

.review-filters {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.filter-label { font-size: .8rem; color: var(--text-muted); }
.filter-pill {
  padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; background: none;
}
.filter-pill.all   { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }
.filter-pill.minus { background: rgba(230,57,70,.1); color: var(--danger); border-color: rgba(230,57,70,.25); }
.filter-pill.plus  { background: rgba(45,140,60,.1); color: var(--green-dark); border-color: rgba(45,140,60,.25); }
.filter-pill.active { font-weight: 800; }
.filter-pill.all.active   { background: var(--surface2); color: var(--text); border-color: var(--text-muted); }
.filter-pill.minus.active { background: rgba(230,57,70,.2); }
.filter-pill.plus.active  { background: rgba(45,140,60,.2); }
.select-all-btn {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text-muted); padding: 4px 10px; border-radius: 5px; font-size: .78rem; cursor: pointer;
}

.review-table-header {
  display: grid; grid-template-columns: 28px 1fr 72px 72px 72px 80px;
  padding: .4rem .75rem; background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-muted); flex-shrink: 0;
}
.col-center { text-align: center; }

.review-list { flex: 1; overflow-y: auto; }
.review-row {
  display: grid; grid-template-columns: 28px 1fr 72px 72px 72px 80px;
  padding: .55rem .75rem; border-bottom: 1px solid rgba(0,0,0,.06);
  align-items: center; transition: background .1s;
}
.review-row:hover { background: var(--surface2); }
.review-row.row-checked { background: #f0faf3; }
.review-row input[type=checkbox] { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }
.rr-name { font-size: .85rem; color: var(--text); }
.rr-cat  { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
.zero-badge {
  background: rgba(249,168,37,.15); border: 1px solid rgba(249,168,37,.3);
  color: #b8820a; font-size: .68rem; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; margin-left: 4px;
}
.rr-theo   { text-align: center; font-size: .85rem; color: var(--text-muted); }
.rr-compte { text-align: center; font-size: .9rem; font-weight: 700; color: var(--text); }
.ecart-pill {
  text-align: center; font-size: .82rem; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
}
.ecart-pill.minus { color: var(--danger); background: rgba(230,57,70,.1); }
.ecart-pill.plus  { color: var(--green-dark); background: rgba(45,140,60,.1); }
.ecart-pill.zero  { color: var(--text-muted); }
.rr-action { text-align: center; }
.apply-btn {
  background: rgba(45,140,60,.1); border: 1px solid rgba(45,140,60,.25);
  color: var(--green-dark); padding: 3px 8px; border-radius: 5px;
  font-size: .72rem; font-weight: 700; cursor: pointer;
}
.apply-btn.skipped {
  background: var(--surface2); border-color: var(--border); color: var(--text-muted);
}

.review-footer {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem;
  background: var(--surface); border-top: 2px solid var(--border); flex-shrink: 0;
}
.review-count-info { flex: 1; font-size: .85rem; color: var(--text-muted); }
.review-count-info strong { color: var(--green-dark); }

/* ── Journal des inventaires ───────────────────────────────────────────────── */
.journal-list {
  flex: 1; overflow-y: auto; padding: .75rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.journal-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .75rem; background: var(--surface); border-top: 1px solid var(--border);
  flex-shrink: 0; gap: .5rem; flex-wrap: wrap;
}
.journal-loading, .journal-empty {
  padding: 2rem; text-align: center; color: var(--text-muted); font-size: .9rem;
}

.jnl-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.jnl-header {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem;
  cursor: pointer; user-select: none; transition: background .12s; flex-wrap: wrap;
}
.jnl-header:hover { background: var(--surface2); }
.jnl-meta { flex: 1; min-width: 0; }
.jnl-date { display: block; font-weight: 700; font-size: .88rem; color: var(--text); }
.jnl-user { font-size: .75rem; color: var(--text-muted); }
.jnl-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.jnl-toggle { font-size: .75rem; color: var(--text-muted); min-width: 14px; text-align: right; }

.inv-stat-badge {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border);
}
.inv-stat-badge.plus  { background: rgba(45,140,60,.1); color: var(--green-dark); border-color: rgba(45,140,60,.25); }
.inv-stat-badge.minus { background: rgba(230,57,70,.1); color: var(--danger); border-color: rgba(230,57,70,.25); }

.jnl-items { display: none; border-top: 1px solid var(--border); padding: .4rem .5rem; }
.jnl-items.open { display: block; }
.jnl-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .3rem .35rem; border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .83rem;
}
.jnl-item:last-child { border-bottom: none; }
.jnl-item-name { flex: 1; color: var(--text); }

.btn-pager-inv {
  padding: .35rem .85rem; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: .82rem; cursor: pointer;
}
.btn-pager-inv:hover:not(:disabled) { background: var(--surface2); }
.btn-pager-inv:disabled { opacity: .4; cursor: default; }
.jnl-page-info { font-size: .82rem; color: var(--text-muted); }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.inv-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--green-dark); color: #fff; padding: .7rem 1.4rem;
  border-radius: 10px; font-size: .9rem; font-weight: 600;
  z-index: 1000; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* ── Boutons utilitaires ───────────────────────────────────────────────────── */
.btn-sm { padding: .35rem .85rem; font-size: .82rem; border-radius: 7px; cursor: pointer; font-weight: 600; }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-outline-dark { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn-outline-dark:hover { background: var(--surface2); }
.btn-green { background: var(--green); color: #fff; border: none; }
.btn-green:hover { background: var(--green-dark); }
.btn-primary { background: var(--green); color: #fff; border: none; padding: .55rem 1.1rem; border-radius: 8px; font-size: .9rem; font-weight: 700; cursor: pointer; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-primary:hover:not(:disabled) { background: var(--green-dark); }