/* Thème sobre vert / ardoise — contraste AA, polices >= 16 px, cibles >= 48 px */
:root {
  --bs-primary: #1f7a4d;
  --bs-primary-rgb: 31, 122, 77;
  --bs-link-color: #1f7a4d;
  --bs-link-hover-color: #165a38;
  --bs-body-font-size: 1rem;
  --app-slate: #263238;
  --tone-primary: #1f7a4d;
  --tone-warning: #9a5b00;
  --tone-danger: #b3261e;
  --tone-neutral: #455a64;
}
[data-bs-theme="dark"] {
  --bs-link-color: #5fcf9a;
  --bs-link-hover-color: #8ee3b9;
  --tone-primary: #5fcf9a;
  --tone-warning: #f2b04c;
  --tone-danger: #ff8a80;
  --tone-neutral: #b0bec5;
}
body { font-size: 1rem; }
.btn-primary {
  --bs-btn-bg: #1f7a4d; --bs-btn-border-color: #1f7a4d;
  --bs-btn-hover-bg: #176339; --bs-btn-hover-border-color: #176339;
  --bs-btn-active-bg: #135230; --bs-btn-active-border-color: #135230;
  --bs-btn-disabled-bg: #1f7a4d; --bs-btn-disabled-border-color: #1f7a4d;
}
.btn, .form-control, .form-select, .nav-link { min-height: 48px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.form-check-input { width: 1.5rem; height: 1.5rem; }
.form-switch .form-check-input { width: 3rem; }

.app-nav { background: var(--app-slate); }
.app-nav .navbar-brand, .app-nav .nav-link { color: #fff; }
.app-nav .nav-link { display: flex; align-items: center; gap: .4rem; border-radius: .5rem; padding: .5rem .9rem; }
.app-nav .nav-link:hover { background: rgba(255, 255, 255, .12); }
.app-nav .nav-link.active { background: var(--bs-primary); }
.app-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
.app-nav .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) {
  .offcanvas .nav-link { color: var(--bs-body-color); }
  .offcanvas .nav-link.active { color: #fff; }
}
.app-main { max-width: 1200px; }
.form-narrow { max-width: 520px; }
.form-medium { max-width: 720px; }
@media print { .app-nav, .btn, .dropdown, .toast-zone { display: none !important; } }
.login-wrap { max-width: 420px; padding-top: 2rem; }
.login-logo { font-size: 3rem; color: var(--bs-primary); }

.toast-zone { position: sticky; top: 4.5rem; z-index: 1030; }
.flash { box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }

.stat-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  display: flex; gap: .75rem; align-items: center; padding: 1rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-left: 5px solid var(--tone, var(--tone-neutral)); border-radius: .75rem; color: var(--bs-body-color);
}
a.stat-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.stat-primary { --tone: var(--tone-primary); }
.stat-warning { --tone: var(--tone-warning); }
.stat-danger { --tone: var(--tone-danger); }
.stat-neutral { --tone: var(--tone-neutral); }
.stat-icon { font-size: 1.6rem; color: var(--tone); }
.stat-label { font-size: .9rem; color: var(--bs-secondary-color); }
.stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.stat-note { font-size: .8rem; color: var(--bs-secondary-color); }

.badge { font-size: .85rem; font-weight: 600; }
.pill-low { background: #f2b04c; color: #3b2600; }
.stock-qty { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.row-archived { opacity: .6; }
.variant-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .75rem 1rem; background: var(--bs-body-bg); }
.suggest-list { position: absolute; z-index: 1040; left: 0; right: 0; max-height: 14rem; overflow-y: auto; }
.suggest-list .list-group-item { min-height: 48px; cursor: pointer; }
.empty-state { border: 2px dashed var(--bs-border-color); border-radius: 1rem; }

.wizard-steps { list-style: none; display: flex; gap: .25rem; padding: 0; overflow-x: auto; }
.wizard-steps li { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 64px; font-size: .85rem; color: var(--bs-secondary-color); }
.wizard-steps .dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-secondary-bg); font-weight: 700; }
.wizard-steps .done .dot { background: var(--bs-primary); color: #fff; }
.wizard-steps .current .dot { outline: 3px solid var(--bs-primary); background: var(--bs-body-bg); color: var(--bs-body-color); }
.wizard-steps .current { color: var(--bs-body-color); font-weight: 600; }

/* ---------- Plan des tables ---------- */
.table-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .table-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .table-grid { grid-template-columns: repeat(5, 1fr); } }
.table-tile {
  display: flex; flex-direction: column; gap: .15rem; min-height: 112px; padding: .75rem;
  border: 2px solid var(--bs-border-color); border-radius: .9rem; text-decoration: none;
  color: var(--bs-body-color); background: var(--bs-body-bg); position: relative;
}
.table-tile:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); color: var(--bs-body-color); }
.table-tile .t-icon { font-size: 1.3rem; }
.table-tile .t-name { font-weight: 700; font-size: 1.15rem; }
.table-tile .t-info { font-size: .95rem; color: var(--bs-secondary-color); }
.table-tile.state-free { border-color: #1f7a4d; }
.table-tile.state-free .t-icon { color: #1f7a4d; }
.table-tile.state-open { border-color: #c77700; background: rgba(242, 176, 76, .14); }
.table-tile.state-open .t-icon { color: #c77700; }
.table-tile.state-open .t-info { color: var(--bs-body-color); font-weight: 600; }
.table-tile.state-bill { border-color: #0b7fa6; background: rgba(13, 160, 210, .13); }
.table-tile.state-bill .t-icon { color: #0b7fa6; }
.table-tile.state-bill .t-info { color: var(--bs-body-color); font-weight: 600; }

/* ---------- Écran de commande ---------- */
.order-screen { padding-bottom: 7.5rem; }
.chip-row { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: thin; }
.chip-row:empty { display: none; }
.chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 .9rem; border-radius: 2rem; border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .95rem;
}
.chip.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; font-weight: 600; }
.nav-pills .nav-link { min-height: 48px; }
.nav-pills .nav-link.active { background: var(--bs-primary); }

.catalog-grid { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .catalog-grid { grid-template-columns: repeat(5, 1fr); } }
.catalog-grid > p { grid-column: 1 / -1; }
.tile {
  position: relative; min-height: 112px; padding: .6rem .7rem; border: 2px solid var(--bs-border-color); border-radius: .8rem;
  background: var(--bs-body-bg); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  display: flex; flex-direction: column; gap: .1rem;
}
.tile:active { transform: scale(.98); }
.tile-name { font-weight: 700; line-height: 1.2; padding-right: 1.8rem; }
.tile-label { color: var(--bs-secondary-color); font-size: .92rem; }
.tile-price { font-weight: 600; margin-top: auto; }
.tile .badge { align-self: flex-start; }
.tile.in-basket { border-color: var(--bs-primary); background: rgba(31, 122, 77, .12); }
.tile.is-out { opacity: .5; cursor: not-allowed; background: var(--bs-secondary-bg); }
.tile-qty {
  position: absolute; top: .35rem; right: .4rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem; border-radius: 1rem;
  background: var(--bs-primary); color: #fff; font-weight: 700; display: grid; place-items: center;
}
.tile-qty:empty { display: none; }
.tile-minus {
  position: absolute; bottom: .35rem; right: .4rem; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color);
}

/* ---------- Panier fixe ---------- */
.basket {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: var(--bs-body-bg);
  border-top: 3px solid var(--bs-primary); box-shadow: 0 -4px 14px rgba(0, 0, 0, .2);
}
.basket-scroll { max-height: 45vh; overflow-y: auto; padding: .6rem 1rem; }
.basket-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: .25rem 0; }
.basket-line { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--bs-border-color); }
.bl-name { flex: 1 1 auto; min-width: 0; }
.bl-total { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.stepper { display: flex; align-items: center; gap: .25rem; }
.stepper .btn { width: 44px; padding: 0; font-size: 1.3rem; line-height: 1; }
.stepper-qty { min-width: 2rem; text-align: center; font-weight: 700; }
.basket-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; max-width: 1200px; margin: 0 auto; }
.basket-toggle { width: 48px; border: 1px solid var(--bs-border-color); }
.basket-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.basket-total { flex: 1 1 auto; min-width: 0; }
.basket-total-label { font-size: .8rem; color: var(--bs-secondary-color); }
.basket-total-amount { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Addition / encaissement ---------- */
.bill-screen { padding-bottom: 7rem; max-width: 640px; margin: 0 auto; }
.bill-total { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.method-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .method-grid { grid-template-columns: repeat(4, 1fr); } }
.method-btn {
  min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  border: 2px solid var(--bs-border-color); border-radius: .8rem; background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 600;
}
.method-btn i { font-size: 1.4rem; }
.method-btn.active { border-color: var(--bs-primary); background: rgba(31, 122, 77, .15); }
.change-amount { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.change-amount.big { font-size: 2.8rem; color: var(--tone-primary); }
.change-box { border: 2px solid var(--bs-primary); border-radius: 1rem; padding: .75rem; display: inline-block; min-width: 240px; }

.order-head-title { min-width: 0; flex: 1 1 auto; }
html, body { overflow-x: hidden; }
[hidden] { display: none !important; } /* l'attribut hidden doit gagner sur d-flex & co */

/* ---------- Tableau de bord / rapports ---------- */
@media (min-width: 768px) { .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.stat-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 576px) { .stat-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.chart-box { position: relative; height: 260px; }
.chart-box.small-box { height: 200px; }
.report-table th { white-space: nowrap; }

/* Cartes : jamais plus larges que leur colonne (valeurs en FCFA longues sur petit écran) */
.stat-grid > *, .stat-grid-3 > * { min-width: 0; }
.stat-card { padding: .75rem; gap: .6rem; }
.stat-value { font-size: clamp(1.05rem, 5vw, 1.4rem); overflow-wrap: anywhere; }
.stat-note, .stat-label { overflow-wrap: anywhere; }
.stat-value { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 420px) { .stat-icon { display: none; } .stat-value { font-size: clamp(1rem, 5.4vw, 1.3rem); } }

/* ---------- Bandeau réseau (hors-ligne) ---------- */
.net-bar { position: sticky; top: 56px; z-index: 1045; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 1rem; font-weight: 600; font-size: .95rem; }
.net-bar.net-warn { background: #f2b04c; color: #3b2600; }
.net-bar.net-info { background: #0b7fa6; color: #fff; }
.net-bar.net-bad { background: #b3261e; color: #fff; }
.net-failed { flex-basis: 100%; background: rgba(0, 0, 0, .18); border-radius: .5rem; padding: .6rem .8rem; font-weight: 400; }
.net-failed p { margin: 0 0 .4rem; }

.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.progress { --bs-progress-bar-bg: var(--bs-primary); }

/* ---------- Menu : latéral sur ordinateur, panneau sur téléphone (« Quitter » toujours visible) ---------- */
:root { --sidebar-w: 250px; --topbar-h: 56px; }
.sidebar, .app-offcanvas { background: var(--app-slate); color: #fff; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 1040; flex-direction: column; }
.side-brand { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; min-width: 0; }
.sidebar .side-brand { padding: 1rem 1rem .75rem; }
.side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .25rem .6rem; }   /* seule la liste défile */
.side-foot { flex: 0 0 auto; padding: .75rem .9rem; border-top: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .18); }
.side-link {
  display: flex; align-items: center; gap: .65rem; min-height: 46px; padding: .5rem .8rem; margin-bottom: 2px;
  border-radius: .55rem; color: rgba(255, 255, 255, .92); text-decoration: none; font-size: 1rem;
}
.side-link i { width: 1.25rem; text-align: center; flex: 0 0 auto; }
.side-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side-link.active { background: var(--bs-primary); color: #fff; font-weight: 600; }
.side-user { min-width: 0; line-height: 1.2; }
.side-role { color: rgba(255, 255, 255, .65); }
.topbar { display: flex; align-items: center; gap: .5rem; height: var(--topbar-h); padding: 0 .75rem; background: var(--app-slate); z-index: 1030; }
.topbar .side-brand { flex: 1 1 auto; }
.topbar-btn { width: 44px; height: 44px; padding: 0; font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; }
.app-offcanvas { --bs-offcanvas-width: min(86vw, 320px); }
.app-offcanvas .btn-close { filter: invert(1); }
.app-offcanvas .offcanvas-body { min-height: 0; }

@media (min-width: 992px) {
  .app-shell { margin-left: var(--sidebar-w); }
  .basket { left: var(--sidebar-w); }                 /* le panier fixe ne passe pas sous le menu */
}
.app-main { margin-left: auto; margin-right: auto; }
.net-bar { top: var(--topbar-h); }
@media (min-width: 992px) { .net-bar { top: 0; } .toast-zone { top: .75rem; } }

/* --- Écran cuisine / bar (module Recettes) --- */
.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem;align-items:start}
.k-ticket{border:2px solid var(--bs-border-color);border-radius:.75rem;padding:.75rem;background:var(--bs-body-bg)}
.k-ticket.late{border-color:var(--bs-danger)}
.k-ticket.ready{border-color:var(--bs-success)}
.k-head{display:flex;align-items:baseline;gap:.5rem;font-size:1.25rem;margin-bottom:.1rem}
.k-line{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-top:1px solid var(--bs-border-color-translucent);flex-wrap:wrap}
.k-line .k-name{flex:1 1 8rem;font-weight:600;font-size:1.05rem}
.k-line.k-preparing .bi{color:var(--bs-warning)}
.k-line.k-ready .bi{color:var(--bs-success)}
.k-line .btn{min-height:2.5rem;min-width:5.5rem}

/* --- Avertissement de déconnexion automatique --- */
.idle-banner{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2000;display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem;border-radius:.75rem;background:var(--bs-warning-bg-subtle);color:var(--bs-body-color);border:2px solid var(--bs-warning);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.35);max-width:calc(100vw - 2rem)}

/* --- Pastille « Prêt » sur le plan des tables --- */
.table-tile{position:relative}
.t-badge{position:absolute;top:.35rem;right:.35rem;padding:.1rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:700;
  background:var(--bs-success);color:#fff;animation:t-pulse 1.4s ease-in-out infinite}
@keyframes t-pulse{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.t-badge{animation:none}}

/* --- Rubriques du menu --- */
.side-section{margin:.85rem .9rem .2rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6}