/* =====================================================================
   HADOTECH ERP RESTAURANT - Charte visuelle
   Bleu HadoTech #1E4B9E · Rouge accent #E30613
   Typographie : Space Grotesk (titres) · Inter (texte) · JetBrains Mono
   ===================================================================== */

:root {
  --brand-blue:      #1E4B9E;
  --brand-blue-600:  #163C82;
  --brand-blue-050:  #EEF3FB;
  --brand-red:       #E30613;
  --brand-red-050:   #FDECEC;

  --ink-900: #0F172A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-050: #F8FAFC;

  --ok-500:    #16A34A;
  --ok-050:    #ECFDF3;
  --warn-500:  #D97706;
  --warn-050:  #FEF7EC;
  --err-500:   #DC2626;
  --err-050:   #FEECEC;
  --info-500:  #2563EB;
  --info-050:  #EFF6FF;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -1px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .18);

  --f-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Menlo', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ink-050);
  color: var(--ink-900);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
  color: var(--ink-900);
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--f-mono); }

/* ---------- Topbar ------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 32px;
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: 12px; }
.brand-mark {
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
}
.brand-mark-accent { color: var(--brand-red); }
.brand-sub {
  margin-top: 2px;
  font-size: .72rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.mainnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.mainnav a {
  padding: 8px 14px;
  color: var(--ink-700);
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mainnav a:hover { background: var(--brand-blue-050); color: var(--brand-blue); }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-name { color: var(--ink-700); font-weight: 500; font-size: .92rem; }
.btn-logout {
  background: transparent;
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .88rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-logout:hover { background: var(--brand-red); color: #fff; }

/* ---------- Main / Footer ------------------------------------------ */
.app-main { max-width: 1280px; margin: 0 auto; padding: 28px; }
.app-footer {
  padding: 20px 28px;
  color: var(--ink-500);
  font-size: .82rem;
  text-align: center;
  border-top: 1px solid var(--ink-200);
  margin-top: 32px;
}

/* ---------- Flashs ------------------------------------------------- */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 500;
  border-left: 4px solid;
}
.flash-success { background: var(--ok-050);   border-color: var(--ok-500);   color: #065F46; }
.flash-error   { background: var(--err-050);  border-color: var(--err-500);  color: #7F1D1D; }
.flash-warning { background: var(--warn-050); border-color: var(--warn-500); color: #78350F; }
.flash-info    { background: var(--info-050); border-color: var(--info-500); color: #1E3A8A; }

/* ---------- Boutons ------------------------------------------------ */
.btn-primary {
  display: inline-block;
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .94rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .05s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-blue-600); text-decoration: none; box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(1px); }

/* ---------- Page header -------------------------------------------- */
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 24px;
}
.page-header h1 { margin-bottom: 4px; }
.page-sub { margin: 0; color: var(--ink-500); font-size: .95rem; }
.page-actions { display: flex; gap: 8px; }

/* ---------- KPI Grid ----------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .12s;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-blue);
  opacity: .12;
}
.kpi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kpi-label {
  color: var(--ink-500);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.kpi-value {
  font-family: var(--f-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.kpi-primary::before { background: var(--brand-blue); opacity: 1; }
.kpi-primary .kpi-value { color: var(--brand-blue); }
.kpi-warn::before { background: var(--warn-500); opacity: 1; }
.kpi-warn .kpi-value { color: var(--warn-500); }

/* ---------- Panels ------------------------------------------------- */
.panel {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.panel h2 { margin-bottom: 12px; }
.check-list { margin: 12px 0 0; padding-left: 20px; }
.check-list li { margin: 6px 0; color: var(--ink-700); }

/* ---------- Auth shell --------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--brand-blue-050) 0%, #fff 60%, var(--brand-red-050) 100%);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--brand-blue);
}
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand-mark { font-size: 1.75rem; }
.auth-brand-sub {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.auth-title { text-align: center; margin-bottom: 6px; }
.auth-subtitle { text-align: center; color: var(--ink-500); margin: 0 0 24px; font-size: .92rem; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: -6px;
}
.auth-form input {
  padding: 11px 14px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  font-family: var(--f-body);
  font-size: .95rem;
  transition: border-color .12s, box-shadow .12s;
  background: #fff;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-050);
}
.auth-form .btn-primary { margin-top: 12px; padding: 12px; font-size: 1rem; }
.auth-footer {
  text-align: center;
  color: var(--ink-500);
  font-size: .82rem;
  margin: 20px 0 0;
}

/* ---------- Error page --------------------------------------------- */
.error-shell {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
}
.error-card {
  text-align: center;
  padding: 40px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 480px;
}
.error-code {
  display: block;
  font-family: var(--f-heading);
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1;
  letter-spacing: -0.04em;
}
.error-title { margin: 12px 0 8px; }
.error-sub { color: var(--ink-500); margin: 0 0 24px; }

/* ---------- Responsive --------------------------------------------- */
@media (max-width: 768px) {
  .topbar { padding: 10px 14px; gap: 14px; }
  .brand-sub { display: none; }
  .app-main { padding: 16px; }
  .mainnav a { padding: 6px 10px; font-size: .88rem; }
  .user-name { display: none; }
  h1 { font-size: 1.4rem; }
}

/* =====================================================================
   MODULE POS / VENTES / CAISSE / KDS
   ===================================================================== */

/* ---------- Tables de données ------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ink-100); font-size: .92rem; }
.data-table th { background: var(--ink-050); font-weight: 600; color: var(--ink-700); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.data-table tr:hover { background: var(--brand-blue-050); }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.mono { font-family: var(--f-mono); font-size: .88rem; }
.data-table td.empty { text-align: center; color: var(--ink-500); padding: 24px; font-style: italic; }
.text-red { color: var(--brand-red); font-weight: 600; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge-ok    { background: var(--ok-050);   color: var(--ok-500); }
.badge-warn  { background: var(--warn-050); color: var(--warn-500); }
.badge-err   { background: var(--err-050);  color: var(--err-500); }
.badge-muted { background: var(--ink-100);  color: var(--ink-700); }

.btn-secondary {
  background: #fff; color: var(--ink-700); border: 1px solid var(--ink-300);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--f-body); font-weight: 500; font-size: .9rem;
  transition: border-color .12s, color .12s;
}
.btn-secondary:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-mini { padding: 4px 10px; font-size: .8rem; border-radius: 4px; border: 1px solid var(--ink-300); background: #fff; cursor: pointer; }
.btn-mini.btn-primary { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* ---------- POS : layout maître -------------------------------------- */
.pos-shell {
  display: grid; grid-template-columns: 1fr 380px; gap: 20px;
  height: calc(100vh - 130px);
}
.pos-catalog { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); overflow: hidden; }
.pos-header { padding: 16px 20px; border-bottom: 1px solid var(--ink-200); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pos-header h1 { font-size: 1.35rem; margin: 0 0 2px; }
.pos-search input { padding: 8px 14px; border: 1px solid var(--ink-300); border-radius: var(--radius-sm); font-size: .95rem; min-width: 220px; }
.pos-search input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050); }

.pos-tabs { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--ink-200); overflow-x: auto; }
.pos-tab { padding: 8px 16px; border: 1px solid var(--ink-200); background: #fff; border-radius: 999px; font-family: var(--f-body); font-size: .84rem; font-weight: 500; color: var(--ink-700); cursor: pointer; white-space: nowrap; transition: all .12s; }
.pos-tab:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.pos-tab.is-active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.pos-products { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.pos-product {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius);
  padding: 14px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  min-height: 90px; transition: all .12s; font-family: var(--f-body);
}
.pos-product:hover { border-color: var(--brand-blue); box-shadow: var(--shadow); transform: translateY(-1px); }
.pos-product:active { transform: translateY(0); }
.pp-name { font-weight: 600; color: var(--ink-900); font-size: .92rem; line-height: 1.3; }
.pp-price { font-family: var(--f-heading); font-weight: 600; color: var(--brand-blue); font-size: 1.05rem; margin-top: auto; }
.pp-price small { font-weight: 400; color: var(--ink-500); font-size: .72rem; margin-left: 3px; }
.pos-empty { color: var(--ink-500); text-align: center; padding: 40px; grid-column: 1 / -1; }

/* Panier */
.pos-cart {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 20px; display: flex; flex-direction: column; min-height: 0;
}
.pos-cart h2 { margin: 0 0 12px; font-size: 1.1rem; padding-bottom: 12px; border-bottom: 2px solid var(--brand-blue); }
.cart-lines { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.cart-empty { color: var(--ink-500); text-align: center; padding: 40px 20px; font-style: italic; }
.cart-line { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.cl-info { display: flex; flex-direction: column; min-width: 0; }
.cl-name { font-weight: 500; font-size: .9rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-price { font-size: .78rem; color: var(--ink-500); }
.cl-qty { display: flex; align-items: center; gap: 4px; }
.qty-btn { width: 26px; height: 26px; border: 1px solid var(--ink-300); background: #fff; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--ink-700); }
.qty-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.cl-qty span { min-width: 24px; text-align: center; font-weight: 600; }
.cl-total { font-family: var(--f-mono); font-weight: 600; color: var(--ink-900); font-size: .88rem; min-width: 80px; text-align: right; }
.cl-remove { background: transparent; border: none; color: var(--ink-500); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.cl-remove:hover { color: var(--brand-red); }

.cart-totals { border-top: 2px solid var(--ink-100); padding-top: 12px; }
.ct-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: .92rem; color: var(--ink-700); }
.ct-row input { width: 100px; padding: 4px 8px; border: 1px solid var(--ink-300); border-radius: 4px; text-align: right; font-family: var(--f-mono); }
.ct-total { border-top: 1px solid var(--ink-200); margin-top: 8px; padding-top: 12px; font-family: var(--f-heading); font-size: 1.15rem; font-weight: 700; color: var(--brand-blue); }
.cart-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 12px; }
.btn-pay { font-size: 1rem; padding: 14px; }
.btn-pay:disabled { background: var(--ink-300); cursor: not-allowed; }

/* ---------- Modale de paiement --------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-backdrop[hidden] { display: none !important; }
.modal-card { background: #fff; border-radius: var(--radius-lg); padding: 28px; max-width: 560px; width: calc(100% - 32px); box-shadow: var(--shadow-lg); }
.modal-card h2 { margin: 0 0 6px; }
.modal-total { color: var(--ink-500); margin: 0 0 16px; font-size: .95rem; }
.modal-total strong { color: var(--brand-blue); font-family: var(--f-heading); font-size: 1.15rem; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.pay-method { padding: 12px; border: 1px solid var(--ink-200); background: #fff; border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-family: var(--f-body); font-weight: 500; }
.pay-method small { color: var(--ink-500); font-size: .72rem; text-transform: uppercase; }
.pay-method:hover { border-color: var(--brand-blue); }
.pay-method.is-active { background: var(--brand-blue-050); border-color: var(--brand-blue); color: var(--brand-blue); }
.pay-input { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pay-input label { font-size: .82rem; font-weight: 500; color: var(--ink-700); }
.pay-input input { padding: 10px 14px; border: 1px solid var(--ink-300); border-radius: var(--radius-sm); font-family: var(--f-mono); font-size: 1rem; }
.pay-input input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050); }
.pay-list { margin: 12px 0; }
.pay-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--ink-050); border-radius: 6px; margin-bottom: 4px; font-size: .88rem; }
.pay-remove { background: transparent; border: none; color: var(--brand-red); cursor: pointer; font-size: 1.1rem; }
.pay-remaining, .pay-change { margin: 8px 0; }
.pay-remaining strong { color: var(--warn-500); font-family: var(--f-heading); }
.pay-change strong { color: var(--ok-500); font-family: var(--f-heading); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Caisse ---------------------------------------------------- */
.cash-current-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.cash-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--ink-050); border-radius: var(--radius); }
.cash-form h3 { margin: 0 0 8px; font-size: 1rem; }
.cash-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 500; color: var(--ink-700); }
.cash-form input, .cash-form select, .cash-form textarea { padding: 8px 12px; border: 1px solid var(--ink-300); border-radius: var(--radius-sm); font-family: var(--f-body); font-size: .92rem; }
.cash-form input:focus, .cash-form select:focus, .cash-form textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050); }

/* ---------- Reçu ------------------------------------------------------ */
.receipt { max-width: 480px; margin: 0 auto; background: #fff; padding: 32px; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-family: var(--f-mono); font-size: .82rem; color: var(--ink-900); }
.receipt-head { text-align: center; border-bottom: 2px dashed var(--ink-300); padding-bottom: 14px; margin-bottom: 14px; }
.receipt-head .brand-mark { font-size: 1.4rem; }
.receipt-head h2 { font-size: 1rem; margin: 8px 0 4px; font-family: var(--f-heading); }
.receipt-head p { margin: 2px 0; font-size: .78rem; color: var(--ink-700); }
.receipt-meta { margin-bottom: 12px; }
.receipt-meta div { display: flex; justify-content: space-between; padding: 2px 0; }
.receipt-items { width: 100%; margin-bottom: 12px; }
.receipt-items th { text-align: left; padding: 4px 0; border-bottom: 1px solid var(--ink-300); font-size: .74rem; font-weight: 600; text-transform: uppercase; color: var(--ink-500); }
.receipt-items th.num, .receipt-items td.num { text-align: right; }
.receipt-items td { padding: 4px 0; border-bottom: 1px dotted var(--ink-200); }
.receipt-totals { border-top: 2px dashed var(--ink-300); padding-top: 10px; margin-bottom: 12px; }
.rt-row { display: flex; justify-content: space-between; padding: 3px 0; }
.rt-total { border-top: 1px solid var(--ink-700); border-bottom: 3px double var(--ink-700); padding: 6px 0 !important; margin: 6px 0; font-weight: 700; font-size: 1rem; font-family: var(--f-heading); }
.receipt-payments { border-top: 2px dashed var(--ink-300); padding-top: 10px; margin-bottom: 12px; }
.receipt-payments h4 { margin: 0 0 6px; font-size: .82rem; font-family: var(--f-heading); }
.rp-line { display: flex; justify-content: space-between; font-size: .78rem; padding: 2px 0; }
.receipt-foot { text-align: center; font-size: .74rem; color: var(--ink-500); font-style: italic; border-top: 2px dashed var(--ink-300); padding-top: 12px; }

@media print {
  .topbar, .app-footer, .page-header, .flash { display: none !important; }
  .app-main { padding: 0; }
  .receipt { border: none; box-shadow: none; padding: 12px; max-width: 100%; }
}

/* ---------- KDS ------------------------------------------------------- */
.kds-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kds-empty { grid-column: 1/-1; text-align: center; padding: 60px; color: var(--ink-500); font-size: 1.1rem; }
.kds-ticket { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.kt-head { padding: 10px 14px; background: var(--brand-blue); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kt-ref { font-family: var(--f-mono); font-weight: 700; font-size: .9rem; }
.kt-table { font-size: .8rem; opacity: .9; }
.kt-time { font-family: var(--f-mono); font-size: .85rem; padding: 2px 8px; background: rgba(255,255,255,.15); border-radius: 4px; }
.kt-time--warn { background: var(--warn-500); }
.kt-time--danger { background: var(--brand-red); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.kt-items { list-style: none; margin: 0; padding: 0; }
.kt-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ink-100); align-items: center; }
.kt-item:last-child { border-bottom: none; }
.kt-item--ready { background: var(--ok-050); }
.kt-item--preparing { background: var(--warn-050); }
.ki-qty { font-family: var(--f-mono); font-weight: 700; color: var(--brand-blue); font-size: 1rem; }
.ki-name { font-weight: 500; color: var(--ink-900); }
.ki-note { display: block; font-size: .78rem; color: var(--ink-500); font-style: italic; grid-column: 2; }
.ki-actions { grid-column: 3; }

@media (max-width: 1024px) {
  .pos-shell { grid-template-columns: 1fr; height: auto; }
  .cash-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   MODULE STOCK
   ===================================================================== */
.form-grid { display: flex; flex-direction: column; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 500; color: var(--ink-700); }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: 9px 12px; border: 1px solid var(--ink-300); border-radius: var(--radius-sm);
    font-family: var(--f-body); font-size: .94rem; background: #fff;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050);
}
.form-hint { font-weight: 400; color: var(--ink-500); font-size: .78rem; font-style: italic; }
.form-grid textarea { resize: vertical; min-height: 60px; font-family: var(--f-body); }
.form-grid > div:last-child { display: flex; gap: 8px; margin-top: 8px; }

.filter-bar { display: flex; gap: 12px; align-items: flex-end; padding: 12px; background: var(--ink-050); border-radius: var(--radius); margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 500; color: var(--ink-700); }
.filter-bar select, .filter-bar input { padding: 7px 10px; border: 1px solid var(--ink-300); border-radius: 4px; font-size: .9rem; min-width: 180px; }
.filter-bar button, .filter-bar a { align-self: flex-end; }

.page-header .page-actions { display: flex; gap: 8px; align-items: center; }

/* =====================================================================
   MODULE COMPTABILITÉ
   ===================================================================== */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grid-2col { grid-template-columns: 1fr; } }

.entry-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 16px; background: var(--ink-050); border-radius: var(--radius); margin-bottom: 20px; }
.entry-meta div { font-size: .88rem; }
.entry-meta strong { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }

.data-table .row-total   { background: var(--brand-blue-050); font-weight: 600; border-top: 2px solid var(--brand-blue); }
.data-table .row-total td { border-bottom: none; padding-top: 12px; padding-bottom: 12px; }
.data-table .row-opening { background: var(--ink-050); font-style: italic; }

@media print {
    .topbar, .app-footer, .page-header, .filter-bar, .flash { display: none !important; }
    .app-main { padding: 0; }
    .panel { border: none; box-shadow: none; padding: 0; }
    .data-table th { background: #fff; border-bottom: 2px solid #000; }
}

/* =====================================================================
   MODULE ACHATS / FOURNISSEURS
   ===================================================================== */
.grid-2col-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .grid-2col-inputs { grid-template-columns: 1fr; } }
.required { color: var(--brand-red); }

/* Petits inputs numériques dans les tableaux */
.data-table input[type="number"] {
    width: 100%; padding: 5px 8px; border: 1px solid var(--ink-300); border-radius: 4px;
    font-family: var(--f-mono); text-align: right; font-size: .88rem;
}
.data-table select {
    width: 100%; padding: 5px 8px; border: 1px solid var(--ink-300); border-radius: 4px;
    font-family: var(--f-body); font-size: .88rem;
}
.data-table input:focus, .data-table select:focus {
    outline: none; border-color: var(--brand-blue);
}

/* =====================================================================
   MODULE RAPPORTS
   ===================================================================== */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.report-card {
    display: block; padding: 24px; background: #fff; border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: all .12s;
}
.report-card:hover { border-color: var(--brand-blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.report-card .rc-icon { display: block; font-size: 2rem; margin-bottom: 8px; }
.report-card h3 { margin: 0 0 6px; color: var(--brand-blue); font-size: 1.05rem; }
.report-card p { margin: 0; color: var(--ink-700); font-size: .88rem; line-height: 1.5; }

.kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; padding: 16px; background: var(--ink-050); border-radius: var(--radius); margin-bottom: 16px;
}
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); font-weight: 600; }
.kpi-value { font-family: var(--f-heading); font-size: 1.25rem; font-weight: 700; color: var(--ink-900); }

.bar {
    display: block; height: 10px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-050));
    border-radius: 5px; min-width: 4px;
}

/* =====================================================================
   MODULE RH / PAIE
   ===================================================================== */
.no-print { }
@media print { .no-print { display: none !important; } }

.payslip {
    max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--ink-200);
    border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm);
}
.payslip-head {
    display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
    border-bottom: 3px solid var(--brand-blue); padding-bottom: 16px; margin-bottom: 20px;
}
.ph-brand .brand-mark { font-size: 1.6rem; }
.ph-employer small { color: var(--ink-500); font-size: .78rem; }
.ph-title { text-align: right; }
.ph-title h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--brand-blue); letter-spacing: .05em; }
.ph-title p { margin: 2px 0; font-size: .88rem; color: var(--ink-700); }

.payslip-employee {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 14px 16px; background: var(--ink-050); border-radius: var(--radius-sm); margin-bottom: 20px;
}
.payslip-employee strong { font-size: 1.05rem; color: var(--ink-900); }
.payslip-employee small { color: var(--ink-700); line-height: 1.7; }

.payslip-items { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.payslip-items th, .payslip-items td { padding: 8px 12px; border-bottom: 1px solid var(--ink-100); font-size: .88rem; }
.payslip-items th { background: var(--ink-050); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; color: var(--ink-700); text-align: left; }
.payslip-items th.num, .payslip-items td.num { text-align: right; font-variant-numeric: tabular-nums; }

.payslip-summary {
    border-top: 2px solid var(--brand-blue); padding-top: 12px;
    max-width: 400px; margin-left: auto;
}
.ps-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .92rem; color: var(--ink-700); }
.ps-net {
    border-top: 1px solid var(--ink-300); border-bottom: 4px double var(--ink-900);
    margin: 8px 0; padding: 10px 0; font-family: var(--f-heading); font-size: 1.1rem; font-weight: 700; color: var(--brand-blue);
}
.payslip-foot { text-align: center; margin-top: 20px; color: var(--ink-500); font-style: italic; padding-top: 12px; border-top: 1px dashed var(--ink-300); }

/* =====================================================================
   MODULE FILIALES / CONSOLIDATION + SÉLECTEUR
   ===================================================================== */

/* Sélecteur dans la topbar */
.branch-switcher { position: relative; margin-right: 12px; }
.branch-btn {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-family: var(--f-body); font-size: .84rem; font-weight: 500;
}
.branch-btn:hover { background: rgba(255,255,255,.2); }
.branch-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px; background: #fff; border: 1px solid var(--ink-200);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 6px 0; z-index: 50; display: none;
}
.branch-menu.open { display: block; }
.branch-menu a {
    display: block; padding: 8px 14px; color: var(--ink-900); text-decoration: none;
    font-size: .88rem; transition: background .1s;
}
.branch-menu a:hover { background: var(--brand-blue-050); color: var(--brand-blue); }
.branch-menu a.is-active { background: var(--brand-blue-050); color: var(--brand-blue); font-weight: 600; }
.branch-menu-manage {
    border-top: 1px solid var(--ink-100); margin-top: 4px; padding-top: 10px !important;
    color: var(--ink-500) !important; font-size: .8rem !important;
}

/* Page de sélection */
.branch-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px; margin-top: 20px;
}
.branch-card {
    display: block; padding: 24px; background: #fff; border: 2px solid var(--ink-200);
    border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: all .12s;
    position: relative; text-align: center;
}
.branch-card:hover { border-color: var(--brand-blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.branch-card h3 { margin: 8px 0 4px; color: var(--brand-blue); }
.branch-card .bc-code { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-500); margin: 0 0 6px; }
.branch-card .bc-city { color: var(--ink-700); font-size: .88rem; margin: 0; }
.branch-card .bc-star { position: absolute; top: 8px; right: 12px; color: var(--warn-500); font-size: 1.2rem; }
.branch-card .bc-icon { display: block; font-size: 2rem; margin-bottom: 8px; }
.branch-consolidation { border-color: var(--brand-blue); background: var(--brand-blue-050); }

/* =====================================================================
   ONBOARDING (page publique d'inscription entreprise)
   ===================================================================== */
.onboarding {
    max-width: 780px; margin: 40px auto; padding: 0 20px;
}
.onb-hero { text-align: center; margin-bottom: 32px; }
.onb-hero .brand-mark { font-size: 2rem; }
.onb-hero h1 { font-family: var(--f-heading); font-size: 2rem; margin: 12px 0 6px; color: var(--brand-blue); }
.onb-hero p { color: var(--ink-700); font-size: 1rem; margin: 0; }

.onb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.plan-card {
    background: #fff; border: 2px solid var(--ink-200); border-radius: var(--radius);
    padding: 20px; text-align: center; position: relative;
}
.plan-featured { border-color: var(--brand-blue); box-shadow: var(--shadow); }
.plan-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--brand-blue); color: #fff; padding: 3px 12px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.plan-card h3 { margin: 0 0 8px; color: var(--brand-blue); font-size: 1.1rem; }
.plan-price strong { font-family: var(--f-heading); font-size: 1.6rem; color: var(--ink-900); }
.plan-price small { color: var(--ink-500); font-weight: 400; }
.plan-features { list-style: none; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid var(--ink-100); font-size: .84rem; color: var(--ink-700); }
.plan-features li { padding: 3px 0; }
.plan-desc { font-size: .78rem; color: var(--ink-500); margin: 8px 0 0; font-style: italic; }
.onb-trial-note { text-align: center; padding: 12px; background: var(--brand-blue-050); border-radius: var(--radius); color: var(--brand-blue); font-weight: 500; margin: 12px 0 24px; }

.onb-form {
    background: #fff; padding: 32px; border-radius: var(--radius-lg);
    border: 1px solid var(--ink-200); box-shadow: var(--shadow-sm);
}
.onb-form fieldset { border: none; padding: 0; margin: 0 0 20px; }
.onb-form legend { font-family: var(--f-heading); font-size: 1.1rem; color: var(--brand-blue); font-weight: 600; margin-bottom: 12px; padding: 0; }
.onb-form label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 500; color: var(--ink-700); margin-bottom: 12px; }
.onb-form input { padding: 10px 14px; border: 1px solid var(--ink-300); border-radius: var(--radius-sm); font-family: var(--f-body); font-size: .95rem; }
.onb-form input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050); }
.onb-terms { display: flex; flex-direction: row !important; align-items: center; gap: 10px; padding: 12px; background: var(--ink-050); border-radius: var(--radius-sm); font-weight: 400 !important; }
.onb-terms input { width: auto; }
.onb-actions { display: flex; gap: 12px; margin-top: 20px; }
.onb-submit { padding: 14px 32px; font-size: 1rem; flex: 1; }
.onb-note { margin-top: 16px; padding: 12px; background: var(--ink-050); border-radius: var(--radius-sm); font-size: .82rem; color: var(--ink-700); line-height: 1.6; }

.auth-signup { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.auth-signup:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .onb-form { padding: 20px; }
    .onb-hero h1 { font-size: 1.5rem; }
}

/* =====================================================================
   USERS / ROLES / HR STRUCTURE
   ===================================================================== */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 12px; background: var(--ink-050); border-radius: var(--radius-sm); }
.cb-item { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 4px 8px; margin: 0 !important; font-weight: 400 !important; font-size: .88rem; }
.cb-item input { width: auto !important; }
.cb-item small { color: var(--ink-500); font-size: .72rem; }

.permissions-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.perm-module { background: var(--ink-050); border-radius: var(--radius-sm); padding: 12px; }
.perm-module h4 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink-200); font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-blue); display: flex; justify-content: space-between; align-items: center; }
.perm-module h4 small a { color: var(--ink-500); font-weight: 400; font-size: .72rem; text-transform: none; letter-spacing: 0; }
.perm-list { display: flex; flex-direction: column; gap: 3px; }
.perm-code { font-family: var(--f-mono); font-size: .78rem; color: var(--brand-blue); min-width: 130px; }

.row-inactive { opacity: .5; }
.text-muted { color: var(--ink-500); }
.btn-link { background: none; border: none; color: var(--brand-blue); cursor: pointer; padding: 0; font-size: .88rem; text-decoration: underline; }
.btn-link:hover { color: var(--brand-red); }

/* Nav dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: #fff; min-width: 180px; box-shadow: var(--shadow-lg);
    border-radius: var(--radius); z-index: 40; padding: 6px 0; margin-top: 4px;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a { color: var(--ink-900) !important; padding: 8px 14px !important; display: block; font-size: .88rem; }
.nav-dropdown-menu a:hover { background: var(--brand-blue-050); color: var(--brand-blue) !important; }

/* =====================================================================
   DOCUMENTS IMPRIMABLES (bons de commande, factures, bulletins)
   Optimisé pour "Enregistrer en PDF" du navigateur
   ===================================================================== */
.doc-print {
    max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--ink-200);
    border-radius: var(--radius); padding: 32px;
}
.doc-head {
    display: grid; grid-template-columns: 1fr auto; gap: 24px;
    border-bottom: 3px solid var(--brand-blue); padding-bottom: 16px; margin-bottom: 20px;
}
.doc-head .brand-mark { font-size: 1.4rem; }
.doc-title { text-align: right; }
.doc-title h2 { margin: 0 0 4px; font-size: 1.2rem; color: var(--brand-blue); letter-spacing: .05em; }
.doc-title p { margin: 2px 0; font-size: .9rem; color: var(--ink-700); }
.doc-parties {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 14px 16px; background: var(--ink-050); border-radius: var(--radius-sm); margin-bottom: 20px;
}
.doc-items { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.doc-items th, .doc-items td { padding: 8px 10px; border-bottom: 1px solid var(--ink-100); font-size: .86rem; }
.doc-items th { background: var(--brand-blue); color: #fff; text-align: left; font-weight: 600; }
.doc-items th.num, .doc-items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-totals { max-width: 340px; margin-left: auto; padding-top: 12px; border-top: 2px solid var(--brand-blue); }
.dt-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: .92rem; color: var(--ink-700); }
.dt-total { border-top: 1px solid var(--ink-300); border-bottom: 4px double var(--ink-900); margin-top: 6px; padding: 8px 0; font-family: var(--f-heading); font-size: 1.05rem; color: var(--brand-blue); font-weight: 700; }
.doc-notes { margin-top: 20px; padding: 12px; background: var(--ink-050); border-radius: var(--radius-sm); font-size: .88rem; }
.doc-foot { margin-top: 20px; text-align: center; color: var(--ink-500); font-size: .8rem; }

@media print {
    body { background: #fff; }
    .topbar, .no-print, .flash { display: none !important; }
    .app-main { padding: 0; margin: 0; }
    .doc-print, .payslip { box-shadow: none; border: none; padding: 0; margin: 0; max-width: none; }
    .panel { box-shadow: none; border: none; }
    @page { size: A4; margin: 15mm; }
}

.text-warn { color: var(--warn-500); }

/* =====================================================================
   HARMONISATION & RESPONSIVE - Phase 1 (Sep 2026)
   Ajouté après audit UI global : tables, forms, cards, boutons, mobile.
   ===================================================================== */

/* ---- Boutons cohérents partout ---- */
.btn, .btn-primary, .btn-secondary, .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .05s;
    user-select: none;
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary        { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.btn-primary:hover  { background: var(--brand-blue-600); border-color: var(--brand-blue-600); }
.btn-secondary      { background: #fff; color: var(--ink-700); border-color: var(--ink-300); }
.btn-secondary:hover{ background: var(--ink-050); border-color: var(--ink-500); }
.btn-danger         { background: var(--err-500); color: #fff; border-color: var(--err-500); }
.btn-danger:hover   { background: #b91c1c; border-color: #b91c1c; }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* ---- Formulaires uniformes ---- */
.form-control, input[type="text"].form-control, input[type="email"].form-control,
input[type="tel"].form-control, input[type="number"].form-control, input[type="password"].form-control,
input[type="date"].form-control, input[type="search"].form-control, input[type="file"].form-control,
select.form-control, textarea.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ink-300);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-900);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.form-control:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(30,75,158,.12); }
.form-control[readonly], .form-control:disabled { background: var(--ink-100); color: var(--ink-500); cursor: not-allowed; }
textarea.form-control { min-height: 60px; resize: vertical; font-family: var(--f-body); }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-700); margin-bottom: 4px; }
.form-hint  { font-size: 11px; color: var(--ink-500); margin-top: 4px; }

/* ---- Cartes ---- */
.card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
    padding: 20px;
    margin-bottom: 16px;
}

/* ---- Tables : scroll horizontal automatique sur écran étroit ---- */
.card > .data-table, .card > table.data-table { margin: -20px; width: calc(100% + 40px); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--ink-050); text-align: left; padding: 10px 12px; font-size: 12px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500);
    border-bottom: 2px solid var(--ink-200); white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--ink-100); font-size: 14px; vertical-align: middle; }
.data-table tr:hover td { background: var(--ink-050); }
.data-table tr:last-child td { border-bottom: none; }

/* Wrapper responsive automatique sur tout div.card contenant une table */
@media (max-width: 900px) {
    .card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card > .data-table { margin: -14px; width: calc(100% + 28px); }
    .data-table th, .data-table td { padding: 10px 8px; font-size: 13px; }
}

/* ---- Badges cohérents ---- */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.badge-info    { background: var(--info-050); color: var(--info-500); }
.badge-success { background: var(--ok-050);   color: var(--ok-500); }
.badge-warn    { background: var(--warn-050); color: var(--warn-500); }
.badge-danger  { background: var(--err-050);  color: var(--err-500); }
.badge-muted   { background: var(--ink-100);  color: var(--ink-500); }
.badge-ok      { background: var(--ok-050);   color: var(--ok-500); }
.badge-err     { background: var(--err-050);  color: var(--err-500); }

/* ---- Page header ---- */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h1 { margin: 0; font-size: 24px; color: var(--ink-900); }
.page-header .page-sub { margin: 4px 0 0; color: var(--ink-500); font-size: 13px; }
.page-header .page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar > form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.filter-bar input, .filter-bar select { min-width: 180px; }

/* ---- Responsive : mobile (≤ 900px) ---- */
@media (max-width: 900px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .page-actions { justify-content: flex-start; }
    .page-header .page-actions .btn { flex: 1; }

    /* Formulaires : grilles → 1 colonne */
    .form-row[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

    /* Stats cards : passer en 2 colonnes */
    div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    .modal-card { max-width: 95vw !important; padding: 16px !important; }
}

/* ---- Flash messages harmonisés ---- */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.flash-success { background: var(--ok-050);   color: var(--ok-500);   border-color: #86efac; }
.flash-error   { background: var(--err-050);  color: var(--err-500);  border-color: #fca5a5; }
.flash-warning, .flash-warn { background: var(--warn-050); color: var(--warn-500); border-color: #fcd34d; }
.flash-info    { background: var(--info-050); color: var(--info-500); border-color: #93c5fd; }

/* ---- Modale générique cohérente ---- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55);
    z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn .15s ease;
}
.modal-backdrop[hidden] { display: none !important; }
.modal-card {
    background: #fff; border-radius: 12px; padding: 24px; max-width: 560px; width: 100%;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px rgba(15,23,42,.25);
    animation: slideUp .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Sidebar : logo entreprise ---- */
.sidebar-brand img { max-width: 44px; max-height: 44px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; }

/* ---- Empty states ---- */
.empty-state, td.empty, .no-data {
    text-align: center; padding: 40px 20px; color: var(--ink-500); font-size: 14px;
}


/* =====================================================================
   REÇU DE CAISSE - v2 (V1 → REMPLACER intégralement par ce bloc)
   Corrige : logo trop grand · police plus lisible · noir pur · gras +++
   À la fin de public/assets/css/app.css
   ===================================================================== */

/* --- LOGO : contrainte stricte à l'écran ET en impression --- */
.receipt-head img,
.receipt-head .brand-mark img {
    display: block !important;
    max-height: 55px !important;      /* ~ 15 mm équivalent écran */
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 6px !important;
    object-fit: contain;
}

/* --- Écran : reçu lisible avec police plus grosse + gras --- */
.receipt {
    max-width: 340px;                 /* colonne étroite type ticket */
    padding: 20px 18px !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #000 !important;
    font-weight: 600 !important;      /* tout en semi-bold */
}
.receipt-head h2 {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #000 !important;
    margin: 6px 0 3px !important;
    letter-spacing: 0.3px;
}
.receipt-head p {
    font-size: 12.5px !important;
    color: #000 !important;
    margin: 2px 0 !important;
    font-weight: 600 !important;
}
.receipt-meta { font-size: 14px !important; color: #000 !important; }
.receipt-meta div { padding: 3px 0 !important; }
.receipt-meta strong { font-weight: 900 !important; color: #000 !important; }

.receipt-items th {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #000 !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    padding: 6px 0 !important;
    text-transform: uppercase;
}
.receipt-items td {
    font-size: 14px !important;
    color: #000 !important;
    padding: 6px 0 !important;
    font-weight: 700 !important;
    border-bottom: 1px dotted #333 !important;
}
.receipt-totals { font-size: 14px !important; color: #000 !important; }
.receipt-totals .rt-row { padding: 4px 0 !important; }
.receipt-totals .rt-total {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #000 !important;
    border-top: 2px solid #000 !important;
    border-bottom: 4px double #000 !important;
    padding: 8px 0 !important;
    margin: 4px 0 !important;
}
.receipt-payments { font-size: 13px !important; color: #000 !important; }
.receipt-payments h4 {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #000 !important;
}
.receipt-foot {
    font-size: 12.5px !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* --- IMPRESSION THERMIQUE 80 mm --- */
@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
    html, body {
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Cacher toute la chrome de l'app pendant l'impression */
    .topbar, .app-footer, .app-sidebar, .sidebar, .page-header,
    .page-actions, .flash, .no-print, nav, header.topbar, .toolbar {
        display: none !important;
    }
    .app-main, .app-content, main, .container {
        padding: 0 !important;
        margin: 0 !important;
        width: 80mm !important;
        max-width: 80mm !important;
    }

    /* Le reçu */
    .receipt {
        width: 72mm !important;
        max-width: 72mm !important;
        margin: 0 auto !important;
        padding: 3mm 2mm !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
        font-family: 'Courier New', 'Consolas', monospace !important;
        font-size: 12pt !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;      /* toujours en gras */
    }

    /* Logo : petite taille papier thermique */
    .receipt-head img {
        max-height: 14mm !important;
        max-width: 50mm !important;
        margin: 0 auto 2mm !important;
        filter: grayscale(100%) contrast(1.4);
    }

    .receipt-head {
        text-align: center !important;
        border-bottom: 1px dashed #000 !important;
        padding-bottom: 3mm !important;
        margin-bottom: 3mm !important;
    }
    .receipt-head h2 {
        font-size: 14pt !important;
        font-weight: 900 !important;
        color: #000 !important;
        margin: 2mm 0 1mm !important;
    }
    .receipt-head p {
        font-size: 10.5pt !important;
        margin: 0.5mm 0 !important;
        color: #000 !important;
        font-weight: 700 !important;
    }

    .receipt-meta {
        font-size: 11pt !important;
        margin-bottom: 3mm !important;
        color: #000 !important;
    }
    .receipt-meta div {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.7mm 0 !important;
        gap: 3mm;
    }
    .receipt-meta strong { font-weight: 900 !important; color: #000 !important; }

    .receipt-items {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 3mm !important;
    }
    .receipt-items th {
        text-align: left !important;
        border-top: 1.5px solid #000 !important;
        border-bottom: 1.5px solid #000 !important;
        padding: 1.5mm 0 !important;
        font-size: 10pt !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        color: #000 !important;
    }
    .receipt-items th.num,
    .receipt-items td.num { text-align: right !important; }
    .receipt-items td {
        padding: 2mm 0 !important;
        border-bottom: 1px dotted #333 !important;
        font-size: 11.5pt !important;
        color: #000 !important;
        font-weight: 700 !important;
        vertical-align: top;
    }

    .receipt-totals {
        border-top: 1.5px dashed #000 !important;
        padding-top: 2mm !important;
        margin-bottom: 3mm !important;
        color: #000 !important;
    }
    .receipt-totals .rt-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 1mm 0 !important;
        font-size: 11pt !important;
        font-weight: 700 !important;
    }
    .receipt-totals .rt-total {
        font-size: 15pt !important;
        font-weight: 900 !important;
        color: #000 !important;
        border-top: 1.5px solid #000 !important;
        border-bottom: 3px double #000 !important;
        padding: 2mm 0 !important;
        margin: 1mm 0 !important;
    }

    .receipt-payments {
        border-top: 1.5px dashed #000 !important;
        padding-top: 2mm !important;
        margin-bottom: 3mm !important;
        font-size: 11pt !important;
        color: #000 !important;
        font-weight: 700 !important;
    }
    .receipt-payments h4 {
        font-size: 11.5pt !important;
        font-weight: 900 !important;
        margin: 0 0 1.5mm !important;
        color: #000 !important;
        text-transform: uppercase;
    }
    .receipt-payments .rp-line {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.7mm 0 !important;
    }

    .receipt-foot {
        text-align: center !important;
        font-size: 10.5pt !important;
        color: #000 !important;
        font-style: normal !important;
        font-weight: 700 !important;
        border-top: 1.5px dashed #000 !important;
        padding: 3mm 0 6mm !important;
    }

    * { box-shadow: none !important; text-shadow: none !important; }
}