/* Shared styles for encaissement-boutique.html and encaissement-personnel.html */
.view-togglebar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
}
.toggle-btn-link{
  margin-left:auto;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-600);
  text-decoration:none;
  padding:6px 10px;
  border-radius: var(--btn-radius);
  white-space:nowrap;
}
.toggle-btn-link:hover{color:var(--text-900);background:var(--muted)}
.toggle-btn {
  margin: 0;
  padding: 10px 12px;
  background: var(--muted);
  color:var(--text-900);
  border: 1px solid var(--border-200);
  border-bottom: none;
  border-radius: var(--btn-radius);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  font-weight: 600;
  cursor: pointer;
}
.toggle-btn.active {
  background: var(--surface);
}
.toggle-btn:not(.active):hover {
  background: var(--surface);
  color: var(--text-900);
}
.tab-section {
  margin: 0 0 16px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.field label,
.field .field-label{
  font-weight:600;
  color:var(--text-700);
  font-size:0.875rem;
}
.field-button{
  justify-content:flex-end;
  align-self:end;
}
.nouveau-debit {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-end;
  overflow-x:auto;
}
.nouveau-debit > * { min-width: 0; }
.nouveau-debit .field{ flex: 1 1 160px; }
.nouveau-debit .field-ref{ flex: 3 1 320px; }
.nouveau-debit .field-price{ flex: 0 0 90px; }
.nouveau-debit .field-qty{ flex: 0 0 70px; }
.nouveau-debit .field-discount{ flex: 0 0 95px; }
.nouveau-debit .field-pay{ flex: 0 0 120px; }
.nouveau-debit .field-button{ flex: 0 0 auto; }
.nouveau-debit input[type="text"],
.nouveau-debit input[type="number"],
.nouveau-debit select{width:100%;height:44px;padding:10px 12px;box-sizing:border-box;background:var(--surface);border:1px solid var(--border-300);color:var(--text-900)}
.nouveau-debit > button{height:44px;white-space:nowrap}
#creatorSelect,
#categorySelect {
  background: var(--muted);
  border-color: var(--border-200);
}
.line-creator,
.line-category {
  background: var(--muted);
  border-color: var(--border-200);
}
#ticketLines{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ticket-line-extra{
  padding-top:10px;
  border-top:1px dashed var(--border-200);
}
.ticket-line-main{ position:relative; }
.line-remove-wrap{ flex:0 0 auto; align-self:flex-end; }
.line-remove-main{ padding-bottom:1px; }
.ticket-remove-line,
.ticket-remove-payment{
  min-width:44px;
  height:44px;
  border-radius: var(--btn-radius);
  font-weight:800;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:1.1rem;
}
.ticket-add-line-wrap{ margin-top:8px; display:flex; justify-content:center; }
.ticket-divider{ border:0; border-top:1px solid var(--border-200); margin:12px 0; }
.ticket-payments{ margin-top:0; padding:0; }
.ticket-add-payment-wrap{ margin-top:4px; display:flex; justify-content:center; }
.ticket-add-payment-trigger-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ticket-add-payment-trigger{
  width:96px;
  height:96px;
  border:none;
  border-radius: var(--radius-xl);
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:#fff;
  font-size:3.35rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 20px 35px rgba(29,78,216,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ticket-add-payment-trigger:hover,
.ticket-add-payment-trigger:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 24px 44px rgba(29,78,216,.35);
}
.ticket-add-payment-trigger-text{
  font-size:.875rem;
  font-weight:600;
  color:var(--text-600);
  text-align:center;
}
.payment-method-modal[hidden]{ display:none !important; }
.payment-method-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--overlay-scrim);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.payment-method-dialog{
  width:min(560px,100%);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid rgba(148,163,184,.26);
  border-radius: var(--radius-xl);
  padding:20px;
  box-shadow: var(--modal-shadow-xl);
}
.payment-method-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.payment-method-dialog-title{ margin:0; font-size:1.15rem; font-weight:800; color:var(--text-900); }
.payment-method-dialog-subtitle{ margin:4px 0 0; color:var(--text-600); font-size:.88rem; }
.payment-method-close{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:1px solid var(--border-200);
  border-radius: var(--radius-sm);
  background:var(--muted);
  color:var(--text-900);
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
}
.payment-method-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.payment-method-card{
  height:64px;
  border:1px solid var(--border-200);
  border-radius: var(--radius-md);
  background:var(--muted);
  color:var(--text-900);
  cursor:pointer;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  padding:0;
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.payment-method-card:hover,
.payment-method-card:focus-visible{
  transform:translateY(-2px);
  border-color:var(--payment-accent,#2563eb);
  box-shadow:0 8px 20px rgba(15,23,42,.12);
}
.payment-method-card-icon{ flex:0 0 64px; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.payment-method-card-icon > span{ font-size:1.9rem; line-height:1; }
.payment-method-card-icon-image{ width:64px; height:64px; display:block; object-fit:cover; }
.payment-method-card-label{
  flex:1;
  padding:0 12px 0 10px;
  font-size:.92rem;
  font-weight:700;
  color:var(--text-900);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.payment-method-card-hint{ display:none; }
.page-settings-dialog{ width:min(780px,100%); }
.page-settings-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.page-settings-card{
  border:1px solid var(--border-200);
  border-radius: var(--radius-xl);
  background:var(--muted);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.page-settings-card-title{ margin:0; font-size:1rem; font-weight:800; color:var(--text-900); }
.page-settings-check{ display:flex; align-items:flex-start; gap:12px; color:var(--text-800); font-size:.94rem; }
.page-settings-check input{ margin-top:3px; }
.page-settings-rate{ max-width:180px; }
.page-settings-note{ margin:0; color:var(--text-600); font-size:.86rem; line-height:1.45; }
.page-settings-actions{ margin-top:22px; display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.page-settings-actions .btn{ min-width:150px; }
.ticket-submit-wrap{ margin-top:10px; display:flex; justify-content:center; }
.ticket-submit-wrap .btn-secondary,
.ticket-payments .btn-secondary,
.ticket-add-line-wrap .btn-secondary,
.ticket-add-payment-wrap .btn-secondary{
  background:var(--muted);
  color:var(--text-900);
  border:1px solid var(--border-200);
}
.ticket-hint{ margin-top:6px; color:var(--text-600); font-size:.875rem; text-align:center; }
.cash-title { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 16px; font-size: 1.5rem; font-weight: 600; color:var(--text-900); line-height: 1.2; }
.cash-title #cashTotalValue,
.cash-title #pochetteTotalValue{ font-weight:600; color:var(--text-900); font-size:1.5rem; }
.cash-subtitle { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; font-size:1rem; font-weight: 700; color:var(--text-900); }
.cash-row-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; padding: 8px; box-sizing:border-box; }
.cash-item{ background:var(--muted); border:1px solid var(--border-200); border-radius:var(--control-radius); padding: 8px 8px 12px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.03); min-width:0; overflow:hidden; box-sizing:border-box; }
.cash-item label{ display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-bottom: 8px; font-weight:700; color:var(--text-900); user-select:none; min-width:0; }
.cash-item img{ display:block; width:clamp(88px,10vw,120px); height:clamp(88px,10vw,120px); object-fit:contain; border-radius:var(--control-radius); background:transparent; margin:0 auto; }
.cash-item input[type="number"]{ width:100%; max-width:100%; min-width:0; height:36px; padding:4px 6px; text-align:center; border:1px solid var(--border-300); border-radius:var(--control-radius); font-size:1rem; box-sizing:border-box; background:var(--surface); color:var(--text-900); }
#transferAmount{ background:var(--surface); border:1px solid var(--border-300); color:var(--text-900); }
.tab-section.cash-fit{ overflow:hidden; display:flex; flex-direction:column; border-radius:var(--control-radius); }
.cash-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:8px; border-bottom:1px solid var(--border-200); }
.cash-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cash-scroll{ flex:1; min-height:0; overflow:auto; padding-top:10px; }
.btn-deactivate{ font-size:.75rem; padding:4px 10px; border:1px solid var(--border-200); border-radius:var(--btn-radius); background:transparent; color:var(--text-900); cursor:pointer; }
.btn-deactivate:hover{ background:var(--muted); }
.small-btn{ height:36px; padding:6px 10px; border-radius:var(--btn-radius); border:1px solid var(--border-200); background:var(--surface); font-weight:700; cursor:pointer; }
.small-btn.primary{ background:var(--btn-gradient-primary); border-color:var(--btn-gradient-primary-border); box-shadow:var(--btn-gradient-primary-shadow); color:#fff; }
.small-btn.primary:hover{ transform:translateY(-1px); box-shadow:var(--btn-gradient-primary-shadow-hover); }
#section-pochette .cash-actions > div{ margin:0 !important; }
.invoice-icon{ cursor:pointer; font-size:1rem; margin-right:6px; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:var(--control-radius); }
.invoice-icon.active{ outline:2px solid var(--btn-bg); }
.save-icon,.cancel-icon{ cursor:pointer; font-size:1.25rem; }
.save-icon{ color:var(--text-700); }
.cancel-icon{ color:var(--text-700); }
#sqlTable td, #sqlTable th{ overflow:hidden; }
#sqlTable td input, #sqlTable td select{ width:100%; max-width:100%; box-sizing:border-box; margin:0; min-width:0; }
#sqlTable .editable{ width:100%; }
#incomeTable{ margin-bottom:12px; }
#productRefInput{ font-size:1rem; }
#priceInput{ font-size:.95rem; }
#quantityInput{ font-size:.95rem; }
.ref-search{ position:relative; width:100%; min-width:0; }
.ref-suggest{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:999;
  background:var(--surface);
  border:1px solid var(--border-200);
  border-radius:var(--control-radius);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  overflow:auto;
  max-height:320px;
}
.ref-suggest .item{ padding:8px 12px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border-200); text-align:left; }
.ref-suggest .item:last-child{ border-bottom:none; }
.ref-suggest .item:hover,
.ref-suggest .item.active{ background:var(--muted); }
.ref-suggest .left{ display:flex; flex-direction:column; gap:var(--space-2xs); min-width:0; text-align:left; align-items:flex-start; }
.ref-suggest .ref{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.ref-suggest .meta{ font-size:0.875rem; color:var(--text-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.ref-suggest .right{ font-weight:800; white-space:nowrap; }
.ref-suggest .thumb{ width:44px; height:44px; flex:0 0 44px; border-radius:var(--control-radius); background:var(--muted); border:1px solid var(--border-200); }
.ref-suggest img.thumb{ object-fit:contain; display:block; }
.ticket-payment-card{
  border:1px solid var(--border-200);
  border-radius: var(--radius-lg);
  background:var(--muted);
  padding:14px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
  min-width:0;
}
.ticket-payment-card-icon{ width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.ticket-payment-card-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.ticket-payment-card-icon span{ font-size:2rem; line-height:1; }
.ticket-payment-card-name{ font-size:.78rem; font-weight:700; color:var(--text-800); text-align:center; line-height:1.2; }
.ticket-payment-card-amount{ width:100%; }
.ticket-payment-card-amount input{ width:100%; height:36px; padding:4px 8px; text-align:center; border:1px solid var(--border-300); border-radius:var(--control-radius); font-size:.95rem; font-weight:600; background:var(--surface); color:var(--text-900); box-sizing:border-box; }
.ticket-payment-card-code{ width:100%; }
.ticket-payment-card-code input{ width:100%; height:30px; padding:3px 6px; text-align:center; border:1px solid var(--border-300); border-radius:var(--control-radius); font-size:.72rem; letter-spacing:1px; background:var(--surface); color:var(--text-900); box-sizing:border-box; text-transform:uppercase; }
.ticket-payment-card-hint{ font-size:.7rem; color:var(--text-600); text-align:center; line-height:1.2; min-height:1.2em; }
.ticket-payment-card-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:20px;
  height:20px;
  border:none;
  background:rgba(220,38,38,.12);
  cursor:pointer;
  font-size:.85rem;
  color:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius-xs);
  padding:0;
  line-height:1;
  transition:background .15s,color .15s;
}
.ticket-payment-card-remove:hover{ color:#fff; background:#dc2626; }

/* ── Inline-style utilities (encaissement forms) ── */
.field--wide   { flex: 2; }
.form-row--mt  { margin-top: 4px; }
.field-hint    { font-size: 0.75rem; color: var(--text-500); }
.input-code    { text-transform: uppercase; letter-spacing: 1px; }
.ml-auto       { margin-left: auto; }