:root {
  --page: #c8c8cb;
  --ink: #0a0f1d;
  --navy: #03131b;
  --blue: #305f86;
  --blue-2: #5d82a2;
  --tab: #aaaaad;
  --tab-active: #8e8f92;
  --tab-outline: #2f5e87;
  --line: #9ea9ba;
  --row-a: #c4cad8;
  --row-b: #d0d0d3;
  --teal: #04c8d8;
  --modal: #0f8b8c;
  --modal-dark: #00131e;
  --font-ui: "Inter", "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Poppins", "Inter", "Segoe UI", Tahoma, sans-serif;
  --odoo-purple: #714B67;
  --odoo-purple-light: #8F5BA6;
  --odoo-purple-ghost: #F6F2FA;
  --odoo-surface: #FFFFFF;
  --odoo-row-alt: #F5F5F7;
  --odoo-border: #E5E7EB;
}

.print-settings-modal {
  width: min(1480px, 98vw);
  height: min(900px, 96vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #c9d4df;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f7fa;
  color: #1e2d3b;
}

.print-settings-modal::backdrop { background: rgba(12, 28, 42, 0.68); }
.print-settings-shell { height: 100%; display: grid; grid-template-rows: auto 1fr; font-family: var(--font-ui); }
.print-settings-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 32px; background: #fff; border-bottom: 1px solid #dbe3ea; }
.print-settings-eyebrow { margin: 0 0 5px; color: #17826d; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.print-settings-header h2 { margin: 0; color: #152c42; font-family: var(--font-display); font-size: 1.7rem; }
.print-settings-header h2 span { color: #17826d; }
.print-settings-header p:last-child { margin: 6px 0 0; color: #71808d; font-size: .9rem; }
.print-settings-header-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.print-settings-btn { min-height: 40px; border-radius: 7px; padding: 0 17px; font-weight: 700; cursor: pointer; }
.print-settings-btn-ghost { border: 1px solid #c6d1db; background: #fff; color: #526170; }
.print-settings-btn-primary { border: 1px solid #13715e; background: #17826d; color: #fff; }
.print-settings-layout { min-height: 0; display: grid; grid-template-columns: 215px minmax(380px, 1fr) 310px; }
.print-settings-nav { padding: 25px 13px; background: #edf2f5; border-right: 1px solid #dbe3ea; }
.print-settings-nav-title { margin: 0 12px 12px; color: #8a98a5; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.print-settings-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 3px 0; padding: 12px 11px; border: 0; border-radius: 7px; background: transparent; color: #526170; text-align: left; font-size: .86rem; cursor: pointer; }
.print-settings-nav-item span { width: 22px; text-align: center; font-size: 1rem; }
.print-settings-nav-item:hover { background: #e0e9ed; }
.print-settings-nav-item.is-active { background: #d5ebe5; color: #116b59; font-weight: 800; }
.print-settings-main { min-width: 0; overflow: auto; padding: 31px 35px; background: #f8fafb; }
.print-settings-panel { display: none; max-width: 740px; animation: print-settings-fade .18s ease-out; }
.print-settings-panel.is-active { display: block; }
@keyframes print-settings-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.print-settings-section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 25px; }
.print-settings-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #d8eee8; font-size: 1.25rem; }
.print-settings-section-heading h3 { margin: 0; color: #19354b; font-family: var(--font-display); font-size: 1.45rem; }
.print-settings-section-heading p { margin: 5px 0 0; color: #7a8995; font-size: .88rem; }
.print-settings-grid { display: grid; gap: 18px; }
.print-settings-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.print-settings-field { display: grid; gap: 8px; color: #526170; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.print-settings-field input, .print-settings-field select, .print-settings-field textarea { box-sizing: border-box; width: 100%; border: 1px solid #cbd7df; border-radius: 6px; padding: 10px 11px; background: #fff; color: #243a4d; font: 500 .9rem var(--font-ui); }
.print-settings-field textarea { resize: vertical; line-height: 1.5; }
.print-settings-field input:focus, .print-settings-field select:focus, .print-settings-field textarea:focus { outline: 2px solid rgba(23, 130, 109, .2); border-color: #17826d; }
.print-settings-card { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; padding: 20px; border: 1px solid #dce5eb; border-radius: 9px; background: #fff; }
.print-settings-input-with-unit { display: flex; align-items: center; gap: 9px; }
.print-settings-input-with-unit input { flex: 1; }
.print-settings-input-with-unit span { color: #7d8b97; font-weight: 700; }
.print-settings-radio-group { border: 0; padding: 0; margin: 0; }
.print-settings-radio-group legend { padding: 0 0 8px; color: #526170; font-size: .78rem; font-weight: 800; }
.print-settings-radio-group label { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; color: #485b6a; font-size: .85rem; font-weight: 500; }
.print-settings-radio-group input { width: auto; }
.print-settings-hint, .print-settings-preview-note { color: #82909b; font-size: .78rem; }
.print-settings-stepper { display: flex; align-items: center; width: max-content; border: 1px solid #cbd7df; border-radius: 6px; overflow: hidden; background: #fff; }
.print-settings-stepper button { width: 36px; height: 38px; border: 0; background: #edf4f3; color: #16715f; font-size: 1.25rem; cursor: pointer; }
.print-settings-stepper output { min-width: 64px; color: #233d50; text-align: center; font-size: .9rem; font-weight: 800; }
.print-settings-range-line { display: flex; align-items: center; gap: 12px; }
.print-settings-range-line input { padding: 0; accent-color: #17826d; }
.print-settings-range-line output { min-width: 42px; color: #16715f; font-weight: 800; }
.print-settings-switch { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 12px 14px; border: 1px solid #dce5eb; border-radius: 8px; background: #fff; color: #405566; font-size: .88rem; font-weight: 700; cursor: pointer; }
.print-settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.print-settings-toggle { position: relative; flex: 0 0 auto; width: 37px; height: 21px; border-radius: 20px; background: #c5d0d7; transition: .18s; }
.print-settings-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .18s; }
.print-settings-switch input:checked + .print-settings-toggle { background: #17826d; }
.print-settings-switch input:checked + .print-settings-toggle::after { transform: translateX(16px); }
.print-settings-switch strong, .print-settings-switch small { display: block; }
.print-settings-switch small { margin-top: 3px; color: #8a98a5; font-size: .75rem; font-weight: 500; }
.print-settings-wide-field { margin-top: 20px; }
.print-settings-subheading { margin: 28px 0 13px; color: #19354b; font-size: .85rem; font-weight: 800; }
.print-settings-profile-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 15px; }
.print-settings-option-list { display: grid; gap: 12px; }
.print-settings-preview { min-width: 0; overflow: auto; padding: 31px 23px; border-left: 1px solid #dbe3ea; background: #eef3f4; }
.print-settings-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.print-settings-preview-head h3 { margin: 0; color: #19354b; font-family: var(--font-display); font-size: 1.18rem; }
.print-settings-preview-head > span { padding: 5px 8px; border-radius: 5px; background: #d5ebe5; color: #16715f; font-size: .72rem; font-weight: 800; }
.print-preview-stage { display: flex; justify-content: center; margin-top: 25px; padding: 24px 10px; background: #dce4e7; border-radius: 9px; }
.print-ticket-preview { width: min(100%, 230px); height: 560px; border: 0; background: #fff; box-shadow: 0 5px 16px rgba(33, 49, 57, .14); }
.print-preview-header { display: grid; gap: 3px; margin-bottom: 19px; text-align: center; }
.print-preview-header img { width: auto; max-width: 100%; max-height: 40px; margin: 0 auto 4px; }
.print-preview-header strong { font-size: 1.1em; }
.print-preview-header span { white-space: pre-line; }
.print-preview-title { margin-bottom: 15px; border-top: 1px dashed #777; border-bottom: 1px dashed #777; padding: 7px 0; text-align: center; font-weight: 800; }
.print-preview-client { margin-bottom: 13px; }
.print-preview-lines { display: grid; gap: 7px; }
.print-preview-lines b { text-align: right; }
.print-preview-total { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 9px; border-top: 1px solid #222; font-weight: 800; }
.print-preview-footer { margin-top: 24px; padding-top: 10px; border-top: 1px dashed #777; text-align: center; }
.print-ticket-preview.preset-classic { border: 1px solid #777; }
.print-ticket-preview.preset-detailed { padding: 25px 13px; }

@media (max-width: 1050px) {
  .print-settings-layout { grid-template-columns: 190px minmax(350px, 1fr); }
  .print-settings-preview { display: none; }
}
@media (max-width: 700px) {
  .print-settings-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .print-settings-header { align-items: flex-start; flex-direction: column; padding: 20px; }
  .print-settings-header-actions { width: 100%; justify-content: stretch; }
  .print-settings-header-actions button { flex: 1; }
  .print-settings-layout { display: block; overflow: auto; }
  .print-settings-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid #dbe3ea; }
  .print-settings-nav-title { display: none; }
  .print-settings-nav-item { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .print-settings-main { padding: 24px 18px; }
  .print-settings-grid-two, .print-settings-card, .print-settings-profile-grid { grid-template-columns: 1fr; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  min-height: 100%;
}

.sysbar {
  min-height: 52px;
  background: var(--navy);
  border-bottom: 2px solid #0b8ca0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  padding: clamp(4px, 0.7vw, 8px) clamp(8px, 1vw, 14px);
}

.menu-compact-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #2e6a82;
  border-radius: 12px;
  background: linear-gradient(180deg, #173144, #0f2230);
  color: #f3fbff;
  font-size: 1.1rem;
  cursor: pointer;
}

.user-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-badge {
  display: inline-block;
  padding: 6px 14px;
  background: #0f8b8c;
  color: #e8f8ff;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.user-badge.admin {
  background: #305f86;
  color: #e8f8ff;
}

.user-badge.caisse {
  background: #2a6a3a;
  color: #d8f8d8;
}

.menu-lite {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}

.menu-lite button {
  border: 0;
  background: transparent;
  color: #f3f5f8;
  text-decoration: underline;
  font-size: clamp(0.8rem, 1vw, 0.96rem);
  line-height: 1;
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
}

.header-datetime {
  margin-top: 2px;
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 170px;
  padding: 6px 10px;
  border: 1px solid #2e6a82;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f2a3a 0%, #0b1f2d 100%);
  color: #e8f6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 8, 12, 0.34);
}

#header-date {
  font-size: 0.74rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #a8d8ee;
}

#header-time {
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f0fbff;
}

.shell {
  padding: clamp(6px, 1vw, 12px);
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 74px) 1fr;
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
  min-width: 0;
}

.icon-rail {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 16px;
}

.rail-card,
.rail-collapse-toggle {
  position: relative;
  width: clamp(62px, 5vw, 74px);
  border: 1px solid #2a455f;
  border-radius: 14px;
  background: linear-gradient(180deg, #213247, #152434);
  color: #d6e7f7;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(11, 20, 32, 0.28);
  transition: transform 0.16s ease, box-shadow 0.22s ease, border-color 0.2s ease, background 0.22s ease;
}

.rail-card {
  min-height: 74px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px 6px;
  text-align: center;
}

.rail-card:hover,
.rail-collapse-toggle:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #4f799d;
  box-shadow: 0 10px 18px rgba(12, 26, 41, 0.35);
}

.rail-card:active,
.rail-collapse-toggle:active {
  transform: translateY(0) scale(0.98);
}

.rail-card.is-active {
  background: linear-gradient(180deg, #b51f24, #7a0f14);
  border-color: #d94f52;
  color: #fff4f4;
  box-shadow: 0 10px 18px rgba(122, 15, 20, 0.46);
}

.rail-card[data-hint]:hover::after {
  content: attr(data-hint);
  position: absolute;
  left: 84px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 1px solid #304f6c;
  background: #122537;
  color: #d9ecff;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.76rem;
  z-index: 8;
}

.rail-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
}

.rail-icon svg {
  width: 100%;
  height: 100%;
}

.rail-label {
  font-size: 0.63rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.rail-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  background: #e33539;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(12, 20, 30, 0.65);
}

.rail-card-caisse {
  min-height: 92px;
  background: linear-gradient(180deg, #d53034, #8d1519);
  border-color: #ef7c80;
  color: #fff;
}

.rail-card-caisse.is-active {
  background: linear-gradient(180deg, #ef494d, #b51f24);
}

.rail-collapse-toggle {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.rail-collapse-toggle svg {
  width: 18px;
  height: 18px;
}

.icon-rail.is-collapsed .rail-card,
.icon-rail.is-collapsed .rail-collapse-toggle {
  width: 52px;
}

.icon-rail.is-collapsed .rail-card {
  min-height: 52px;
  padding: 6px 4px;
}

.icon-rail.is-collapsed .rail-label {
  display: none;
}

.icon-rail.is-collapsed .rail-badge {
  top: -3px;
  right: -3px;
}

.icon-rail.is-collapsed .rail-collapse-toggle svg {
  transform: rotate(180deg);
}

.content {
  display: grid;
  gap: clamp(8px, 1.1vw, 14px);
  min-width: 0;
}

.tabs,
.actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tab {
  min-width: clamp(156px, 17vw, 250px);
  height: clamp(54px, 5.2vw, 72px);
  border: 1px solid #2a455f;
  border-radius: 14px;
  background: linear-gradient(180deg, #213247, #152434);
  color: #d6e7f7;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(11, 20, 32, 0.28);
  transition: transform 0.16s ease, box-shadow 0.22s ease, border-color 0.2s ease, background 0.22s ease;
}

.tab.is-active {
  background: linear-gradient(180deg, #b51f24, #7a0f14);
  border-color: #d94f52;
  color: #fff4f4;
  box-shadow: 0 10px 18px rgba(122, 15, 20, 0.46);
}

.tab:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #4f799d;
  box-shadow: 0 10px 18px rgba(12, 26, 41, 0.35);
}

.tab:active {
  transform: translateY(0) scale(0.98);
}

.tool-btn {
  min-width: clamp(112px, 12vw, 170px);
  height: clamp(44px, 4.4vw, 62px);
  border: 1px solid #3a4756;
  border-radius: 14px;
  background: linear-gradient(180deg, #d2d9e0, #aeb9c5);
  color: #1f2a36;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  cursor: pointer;
  position: relative;
  padding: 0 28px 0 12px;
  box-shadow: 0 5px 14px rgba(11, 20, 32, 0.28);
  transition: transform 0.16s ease, box-shadow 0.22s ease, border-color 0.2s ease, background 0.22s ease;
}

.tool-btn::after {
  content: attr(data-icon);
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.72;
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.4vw, 22px);
}

.tool-btn:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #627487;
  box-shadow: 0 10px 18px rgba(12, 26, 41, 0.35);
}

.tool-btn:active,
.tool-btn:focus-visible,
.tool-btn.is-active {
  background: linear-gradient(180deg, #2f8b52, #1f663b);
  border-color: #58be7e;
  color: #f1fff6;
  box-shadow: 0 10px 18px rgba(31, 102, 59, 0.42);
}

.tool-btn:active {
  transform: translateY(0) scale(0.98);
}

.grid-panel {
  border: 1px solid #5f7ea0;
  background: #bfc6d8;
  min-width: 0;
}

.grid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: #b8becf;
}

.grid-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 540px);
  flex-wrap: wrap;
}

#stock-family-filter {
  height: clamp(28px, 2.6vw, 34px);
  border: 1px solid #476789;
  background: #f7fbff;
  padding: 2px 6px;
  min-width: 180px;
}

.grid-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.7rem);
  color: #e7eef7;
  text-shadow: 0 1px 0 #1d3f5a;
}

#quick-search {
  width: min(100%, 320px);
  height: clamp(28px, 2.6vw, 34px);
  border: 1px solid #476789;
  padding: 2px 8px;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
}

#familles-modal {
  width: min(980px, 98vw);
  max-height: 90vh;
  border: 2px solid #456a8e;
  padding: 0;
}

#familles-modal::backdrop {
  background: rgba(3, 19, 27, 0.45);
}

.fam-shell {
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #d5ddea;
}

.fam-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #e2eaf5;
  border-bottom: 1px solid #93a8bf;
}

.fam-head h3 {
  margin: 0;
  color: #1f466a;
  font-family: var(--font-display);
}

#fam-search {
  width: 320px;
  max-width: 100%;
  height: 34px;
  border: 1px solid #6f89a5;
  padding: 0 8px;
}

.fam-table-wrap {
  overflow: auto;
}

#fam-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

#fam-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #2f5f87;
  color: #f2f7fb;
  border: 1px solid #224a6b;
  padding: 8px 6px;
}

#fam-table tbody td {
  border: 1px solid #afbdce;
  padding: 6px;
  font-size: 0.92rem;
}

#fam-table tbody tr.fam-selected {
  outline: 2px solid #04c8d8;
  outline-offset: -2px;
}

.fam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #93a8bf;
  background: #e2eaf5;
}

.fam-actions button {
  min-width: 110px;
  height: 34px;
  border: 1px solid #2e5d83;
  background: #2f6fa0;
  color: #eef7ff;
  cursor: pointer;
  font-weight: 700;
}

.grid-wrap {
  max-height: 66vh;
  overflow: auto;
  border-top: 1px solid #7f90a8;
  background: linear-gradient(180deg, #d8deea 0%, #cfd7e4 100%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  min-width: 0;
}

dialog {
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
}

dialog > * {
  max-width: 100%;
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  background: #e8edf5;
}

th,
td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #5f7996 0%, #4b627d 100%);
  color: #f6f9fc;
  border: 1px solid #415973;
  padding: 9px 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.8rem);
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

tbody td {
  border: 1px solid #c3ccd8;
  padding: 6px 5px;
  font-size: clamp(0.95rem, 1.45vw, 1.95rem);
  line-height: 1;
}

tbody td.payment-notification {
  font-weight: 700;
  text-align: center;
}

tbody td.payment-notification.notif-ok {
  color: #0f8f34;
}

tbody td.payment-notification.notif-late {
  color: #c62b2b;
}

tbody tr:nth-child(odd) {
  background: #eaf0f8;
}

tbody tr:nth-child(even) {
  background: #dfe7f2;
}

tbody tr:hover {
  background: #d3deec;
}

tbody tr:first-child {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

tbody tr.selected-row {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

tbody tr.stock-row-negative {
  background: #ffd8d8 !important;
}

tbody tr.stock-row-negative td {
  border-color: #df9a9a;
}

tbody tr.stock-row-zero {
  background: #ff4b4b !important;
}

tbody tr.stock-row-zero td {
  border-color: #b82222;
  color: #ffffff;
  font-weight: 700;
}

tbody tr.stock-row-low {
  background: #fff2d8 !important;
}

tbody tr.stock-row-low td {
  border-color: #e3c792;
}

.grid-foot {
  border-top: 1px solid #738ea9;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: clamp(1rem, 1.7vw, 2.15rem);
  line-height: 1;
}

#appro-modal {
  width: min(1420px, 98vw);
  max-height: 96vh;
  border: 2px solid #d9d9d9;
  padding: 0;
}

#appro-modal::backdrop {
  background: rgba(8, 15, 23, 0.35);
}

.modal-form {
  background: linear-gradient(180deg, #f7f3fb 0%, #f2ecf8 48%, #eee7f5 100%);
  color: #2f2330;
  padding: 8px;
  max-height: 96vh;
  overflow: auto;
}

.appro-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #714b67 0%, #623f59 100%);
  border: 1px solid #8f5ba6;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(73, 38, 70, 0.28);
  padding: 8px;
}

.top-block {
  background: transparent;
}

.top-middle {
  min-width: 320px;
}

.appro-filter-title {
  font-size: 0.95rem;
  margin-bottom: 2px;
  color: #fdf9ff;
  font-weight: 700;
}

.radio-line {
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f7effc;
}

.top-left,
.top-right {
  display: grid;
  gap: 8px;
  align-content: start;
}

.top-left label,
.top-right label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1rem, 1.6vw, 2.15rem);
  line-height: 1;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(30, 12, 29, 0.45);
}

.appro-supplier-field {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px;
  align-items: center;
}

.appro-supplier-field input {
  width: 100%;
}

#appro-supplier-add {
  height: 30px;
  border: 1px solid #8f5ba6;
  border-radius: 6px;
  background: linear-gradient(180deg, #8f5ba6 0%, #714b67 100%);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

#appro-supplier-add:hover {
  background: linear-gradient(180deg, #9f67b7 0%, #7f5475 100%);
}

.appro-supplier-list {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  max-height: 190px;
  overflow: auto;
  z-index: 20;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(113, 75, 103, 0.2);
}

.appro-supplier-option {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e8eaf0;
  background: transparent;
  color: #2d3748;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}

.appro-supplier-option:hover,
.appro-supplier-option.is-active {
  background: #f6f2fa;
}

.appro-supplier-empty {
  padding: 8px 10px;
  color: #6b7280;
  font-size: 0.9rem;
}

.top-left input,
.top-right input {
  height: clamp(28px, 2.6vw, 35px);
  border: 1px solid #d9c3e8;
  min-width: 180px;
  background: #ffffff;
  color: #1f2937;
  font-weight: 600;
}

.top-middle label {
  color: #ffffff;
  font-weight: 600;
}

.ghost {
  border: 1px solid #8f5ba6;
  background: linear-gradient(180deg, #8f5ba6 0%, #714b67 100%);
  color: #ffffff;
  height: clamp(34px, 2.8vw, 40px);
  cursor: pointer;
  font-family: var(--font-ui);
}

.appro-main {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr clamp(145px, 16vw, 180px);
  gap: 0;
}

.appro-table-wrap {
  border: 1px solid #e5e7eb;
  max-height: 340px;
  overflow: auto;
  border-radius: 10px;
  background: #ffffff;
}

#appro-table thead th {
  background: linear-gradient(180deg, #495f8f 0%, #3a4e79 100%);
  font-size: clamp(1.1rem, 1.7vw, 2.15rem);
  border-color: #2f4268;
}

#appro-table tbody td {
  font-size: clamp(0.95rem, 1.4vw, 1.7rem);
  background: transparent;
  border-color: #a8c0c5;
  color: #0b1116;
  font-weight: 600;
}

.appro-side {
  background: linear-gradient(180deg, #714b67 0%, #623f59 100%);
  border: 1px solid #8f5ba6;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  padding: 8px;
}

.print-box {
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.print-box p {
  margin: 0 0 4px;
}

.print-box label {
  display: block;
  margin-bottom: 2px;
}

.total-title {
  margin: 0 0 6px;
  font-size: clamp(1rem, 1.7vw, 2.3rem);
  line-height: 1;
}

.total-value {
  margin: 0 0 10px;
  background: #f6f2fa;
  color: #2d1f2d;
  padding: 5px;
  text-align: right;
  font-size: clamp(1rem, 1.7vw, 2.25rem);
  line-height: 1;
}

.appro-side button {
  width: 100%;
  margin-top: 6px;
  height: clamp(34px, 2.8vw, 42px);
  border: 1px solid #8f5ba6;
  background: linear-gradient(180deg, #8f5ba6 0%, #714b67 100%);
  color: #ffffff;
  cursor: pointer;
  font-size: clamp(0.95rem, 1.5vw, 1.95rem);
  line-height: 1;
  font-family: var(--font-ui);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(73, 38, 70, 0.26);
}

.appro-side button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.appro-side button:active {
  transform: translateY(0) scale(0.99);
}

.line-editor {
  margin-top: 8px;
  padding: 8px;
  background: #43474d;
  border: 1px solid #19252f;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr clamp(70px, 8vw, 90px);
  gap: 6px;
}

.appro-mode-bar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, #714b67 0%, #623f59 100%);
  border: 1px solid #8f5ba6;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 16px rgba(73, 38, 70, 0.22);
  padding: 4px 6px;
}

.appro-mode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  padding: 3px;
}

.mode-btn {
  height: 34px;
  border: 1px solid #3f505e;
  background: linear-gradient(180deg, #5f6670 0%, #4f5660 100%);
  color: #dce5ef;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.16s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mode-btn.is-active {
  background: linear-gradient(180deg, #8f5ba6 0%, #714b67 100%);
  border-color: #bb8cd0;
  color: #ffffff;
  box-shadow: 0 7px 14px rgba(73, 38, 70, 0.35);
}

.mode-btn:hover {
  filter: brightness(1.06);
}

.mode-btn:active {
  transform: translateY(0) scale(0.98);
}

.mode-hint {
  font-size: 0.92rem;
  color: #f9f5fd;
  text-shadow: 0 1px 0 rgba(50, 27, 48, 0.45);
}

.creation-area {
  margin-top: 8px;
  border: 1px solid #d8cbe3;
  background: linear-gradient(180deg, #f8f4fb 0%, #f1eaf7 100%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 8px;
  display: grid;
  gap: 8px;
}

.creation-row {
  display: grid;
  gap: 8px;
}

.creation-row label {
  display: grid;
  gap: 4px;
  color: #4b5563;
  font-size: 0.95rem;
}

.creation-row input {
  height: 34px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 4px 8px;
}

.creation-row-top {
  grid-template-columns: 1.1fr 1.9fr 1fr 42px;
  align-items: end;
}

.creation-row-bottom {
  grid-template-columns: 0.8fr 1fr 1fr 1.15fr 0.8fr 110px;
  align-items: end;
}

#appro-family-pick,
.add-btn {
  height: 34px;
  border: 1px solid #8f5ba6;
  background: linear-gradient(180deg, #8f5ba6 0%, #714b67 100%);
  color: #ffffff;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(73, 38, 70, 0.24);
}

.creation-preview {
  height: 58px;
  background: linear-gradient(180deg, #714b67 0%, #623f59 100%);
  border: 1px solid #8f5ba6;
  border-radius: 8px;
}

/* Approvisionnement : layout compact, sans modifier les comportements associés. */
#appro-modal {
  width: min(1420px, 98vw);
  height: min(900px, 96vh);
  max-height: 96vh;
}

.modal-form {
  box-sizing: border-box;
  height: min(900px, 96vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 6px;
  overflow: hidden;
}

.appro-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(205px, 240px);
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
}

.appro-info-grid {
  display: grid;
  grid-template-columns: minmax(135px, 170px) minmax(145px, 185px) minmax(220px, 1fr) minmax(130px, 165px);
  gap: 6px 8px;
  align-items: end;
}

.appro-info-grid > label {
  display: grid;
  gap: 3px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.appro-info-grid input,
.appro-options input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 30px;
  border: 1px solid #d9c3e8;
  background: #ffffff;
  color: #1f2937;
  font-weight: 600;
}

.appro-date-field { grid-column: 1; }
.appro-echeance-field { grid-column: 2; }
.appro-supplier-group { grid-column: 3 / 5; }
.appro-facture-field { grid-column: 1 / 3; }
.appro-bl-field { grid-column: 3 / 5; }

.appro-echeance-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
}

.appro-supplier-field {
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 5px;
}

#appro-supplier-add {
  height: 30px;
  border-radius: 5px;
}

.appro-supplier-list {
  left: 0;
  width: calc(100% - 35px);
  max-height: 170px;
  border-radius: 6px;
}

.appro-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-items: center;
}

.appro-options .appro-filter-title,
.appro-options > label:last-child {
  grid-column: 1 / -1;
}

.appro-options .appro-filter-title {
  margin: 0;
  font-size: 0.78rem;
}

.appro-options .radio-line,
.appro-options > label:last-child {
  font-size: 0.75rem;
}

.appro-options .radio-line {
  white-space: nowrap;
}

.appro-options .radio-line input {
  width: auto;
  height: auto;
}

.appro-options > label:last-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.appro-options > label:last-child input {
  height: 26px;
}

.appro-main {
  min-height: 0;
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) clamp(148px, 13vw, 165px);
  gap: 6px;
}

.appro-table-wrap {
  min-height: 0;
  max-height: none;
  border-radius: 7px;
}

#appro-table {
  width: 100%;
  min-width: 660px;
  table-layout: fixed;
}

#appro-table th:nth-child(1) { width: 14%; }
#appro-table th:nth-child(2) { width: 30%; }
#appro-table th:nth-child(3),
#appro-table th:nth-child(4) { width: 16%; }
#appro-table th:nth-child(5) { width: 9%; }
#appro-table th:nth-child(6) { width: 15%; }

#appro-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: clamp(0.78rem, 1vw, 0.96rem);
  white-space: nowrap;
}

#appro-table tbody td {
  font-size: clamp(0.76rem, 0.95vw, 0.93rem);
}

.appro-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border-radius: 7px;
}

.total-title {
  margin: 0;
  font-size: 0.86rem;
}

.total-value {
  margin: 0 0 2px;
  padding: 7px 5px;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 700;
}

.print-box {
  margin: 0;
  padding: 5px;
  font-size: 0.72rem;
}

.appro-side button {
  height: 32px;
  min-height: 32px;
  margin-top: 0;
  border-radius: 6px;
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  box-shadow: none;
}

#appro-validate {
  background: linear-gradient(180deg, #a16ab7 0%, #754782 100%);
  border-color: #d2a7e0;
  font-weight: 700;
}

#appro-follow,
#appro-clear,
#appro-close {
  background: linear-gradient(180deg, #7f6678 0%, #624c5d 100%);
}

.appro-mode-bar {
  margin-top: 0;
  min-height: 38px;
  padding: 3px 5px;
  border-radius: 7px;
  box-shadow: none;
}

.appro-mode-tabs {
  padding: 2px;
  border-radius: 7px;
}

.mode-btn {
  height: 29px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 0.72rem;
}

.mode-hint {
  font-size: 0.72rem;
}

.creation-area,
.reappro-area {
  min-height: 0;
  margin-top: 0;
  padding: 6px;
  gap: 5px;
  border-radius: 7px;
}

.creation-row {
  gap: 6px;
}

.creation-row label {
  gap: 2px;
  font-size: 0.7rem;
}

.creation-row input,
#appro-family-pick,
.add-btn {
  height: 30px;
  min-width: 0;
  border-radius: 5px;
}

.creation-row-top {
  grid-template-columns: minmax(100px, 0.9fr) minmax(180px, 2fr) minmax(130px, 1fr) 32px;
}

.creation-row-bottom {
  grid-template-columns: minmax(70px, 0.7fr) minmax(95px, 1fr) minmax(95px, 1fr) minmax(110px, 1.1fr) minmax(90px, 0.85fr) 94px;
}

.creation-preview {
  display: none;
}

.reappro-area {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.appro-catalog-wrap {
  min-height: 0;
  max-height: none;
  margin-top: 0;
  border-radius: 7px;
}

@media (max-width: 1100px), (max-height: 720px) {
  #appro-modal,
  .modal-form {
    height: 98vh;
    max-height: 98vh;
  }

  .appro-top {
    grid-template-columns: 1fr;
  }

  .appro-options {
    grid-template-columns: auto auto minmax(170px, 1fr);
    justify-content: start;
  }

  .appro-options .appro-filter-title,
  .appro-options > label:last-child {
    grid-column: auto;
  }

  .appro-options > label:last-child {
    grid-template-columns: auto minmax(110px, 1fr);
  }
}

@media (max-width: 760px) {
  .modal-form {
    padding: 4px;
    gap: 4px;
  }

  .appro-top {
    padding: 6px;
  }

  .appro-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .appro-supplier-group,
  .appro-bl-field {
    grid-column: 1 / -1;
  }

  .appro-facture-field {
    grid-column: 1 / -1;
  }

  .appro-main {
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 4px;
  }

  .appro-side {
    padding: 5px;
  }

  .appro-side button {
    height: 29px;
    min-height: 29px;
    font-size: 0.7rem;
  }

  .print-box {
    font-size: 0.64rem;
  }

  .creation-row-top,
  .creation-row-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #appro-family-pick,
  .add-btn {
    width: 100%;
  }

  .mode-hint {
    display: none;
  }
}

.reappro-area {
  margin-top: 8px;
  border: 1px solid #d8cbe3;
  padding: 8px;
  background: linear-gradient(180deg, #f8f4fb 0%, #f1eaf7 100%);
  border-radius: 10px;
}

.reappro-area[hidden],
.creation-area[hidden] {
  display: none;
}

#appro-stock-filter {
  width: min(100%, 320px);
  height: 32px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 4px 8px;
}

.appro-catalog-wrap {
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  max-height: 210px;
  overflow: auto;
  border-radius: 10px;
  background: #ffffff;
}

#appro-catalog-table {
  min-width: 920px;
}

#appro-catalog-table thead th {
  background: linear-gradient(180deg, #5a7395 0%, #455c7a 100%);
  font-size: clamp(0.95rem, 1.4vw, 1.5rem);
  border-color: #3a506b;
}

#appro-catalog-table tbody td {
  font-size: clamp(0.88rem, 1.2vw, 1.2rem);
  background: transparent;
}

#appro-catalog-table tbody tr:hover {
  background: #f6f2fa;
  cursor: pointer;
}

.line-editor input,
.line-editor button {
  height: clamp(34px, 2.8vw, 42px);
  border: 1px solid #355779;
  font-size: clamp(0.95rem, 1.45vw, 1.95rem);
  font-family: var(--font-ui);
}

.line-editor button {
  background: #075d87;
  color: #eff7ff;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .icon-rail {
    grid-auto-flow: column;
    grid-template-columns: repeat(6, minmax(42px, 60px));
    justify-content: center;
    padding-top: 0;
  }

  .tabs {
    justify-content: flex-start;
  }

  .tab {
    min-width: 160px;
    font-size: 0.98rem;
    height: 56px;
  }

  .tool-btn {
    min-width: 110px;
    font-size: 1.45rem;
    height: 48px;
  }

  thead th {
    font-size: 1.4rem;
  }

  tbody td {
    font-size: 0.98rem;
  }

  .grid-foot {
    font-size: 1rem;
  }

  .line-editor {
    grid-template-columns: 1fr 1fr;
  }

  .appro-main {
    grid-template-columns: 1fr;
  }

  .creation-row-top,
  .creation-row-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .appro-mode-bar {
    flex-direction: column;
    align-items: stretch;
  }

  #appro-stock-filter {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .sysbar {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .menu-lite {
    gap: 8px;
  }

  .menu-lite button {
    font-size: 0.88rem;
  }

  .header-datetime {
    display: none;
  }

  .grid-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #quick-search {
    width: 100%;
  }

  table {
    min-width: 760px;
  }

  .tabs,
  .actions {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .shell {
    padding: 6px;
  }

  .tab {
    min-width: 132px;
    height: 50px;
    border-radius: 14px;
    font-size: 0.92rem;
  }

  .tool-btn {
    min-width: 96px;
    height: 42px;
  }

  .line-editor {
    grid-template-columns: 1fr;
  }

  .top-left,
  .top-right {
    gap: 6px;
  }

  .top-left label,
  .top-right label {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 1700px) {
  .shell {
    max-width: 1880px;
    margin: 0 auto;
  }

  table {
    min-width: 1400px;
  }
}

#action-modal {
  width: min(560px, 96vw);
  border: 1px solid #5e7da0;
  padding: 0;
}

#action-modal::backdrop {
  background: rgba(3, 19, 27, 0.45);
}

.action-modal-form {
  background: #d5dbe6;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.action-modal-form h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  color: #1e3f5d;
}

#action-fields {
  display: grid;
  gap: 8px;
}

.su-section {
  display: grid;
  gap: 6px;
  border: 1px solid #9fb1c6;
  border-radius: 8px;
  background: #c9d3e0;
  padding: 6px;
}

.su-section.is-open {
  border-color: #6f88a5;
  background: #c5d0de;
}

.su-toggle {
  height: 34px;
  border: 1px solid #5b7898;
  border-radius: 8px;
  background: linear-gradient(180deg, #6f859e 0%, #5f748d 100%);
  color: #eef6ff;
  font-family: var(--font-ui);
  font-weight: 700;
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.su-content {
  display: none;
  gap: 8px;
}

.su-section.is-open .su-content {
  display: grid;
}

#action-fields label {
  display: grid;
  gap: 4px;
  font-size: 0.95rem;
  color: #1f3550;
}

#action-fields label.transfer-autocomplete-host {
  position: relative;
}

.transfer-suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 230px;
  overflow: auto;
  border: 1px solid #6c87a4;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(22, 44, 68, 0.22);
  z-index: 40;
}

.transfer-suggest-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d5dfeb;
  background: #ffffff;
  text-align: left;
  padding: 8px 9px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.transfer-suggest-item:last-child {
  border-bottom: none;
}

.transfer-suggest-item:hover,
.transfer-suggest-item.is-active {
  background: #e9f2ff;
}

.transfer-suggest-code {
  font-size: 0.85rem;
  color: #133a5f;
  font-weight: 700;
}

.transfer-suggest-name {
  font-size: 0.92rem;
  color: #0f2e49;
  font-weight: 700;
}

.transfer-suggest-meta {
  font-size: 0.78rem;
  color: #536d88;
}

.transfer-suggest-empty {
  padding: 9px 10px;
  font-size: 0.86rem;
  color: #5c7088;
}

#action-fields input {
  height: 36px;
  border: 1px solid #6c87a4;
  padding: 4px 8px;
  font-family: var(--font-ui);
}

#action-fields select {
  height: 36px;
  border: 1px solid #6c87a4;
  padding: 4px 8px;
  font-family: var(--font-ui);
  background: #fff;
}

.action-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.action-modal-footer button {
  min-width: 110px;
  height: 36px;
  border: 1px solid #2b5477;
  background: #0b5f83;
  color: #eff8ff;
  cursor: pointer;
}

#inventaire-modal {
  width: min(1500px, 99vw);
  height: 92vh;
  border: 2px solid #496f95;
  padding: 0;
  overflow: hidden;
}

#inventaire-modal::backdrop {
  background: rgba(3, 19, 27, 0.45);
}

.inv-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #d2dae6;
}

.inv-header {
  padding: 10px;
  background: linear-gradient(180deg, #ebf0f7, #d7e1ef);
  border-bottom: 1px solid #95abc2;
  display: grid;
  gap: 8px;
}

.inv-header h3 {
  margin: 0;
  color: #1f466a;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.9rem);
}

.inv-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.inv-filters label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  color: #244765;
}

.inv-filters input {
  height: 34px;
  border: 1px solid #6f89a5;
  background: #fff;
  padding: 0 8px;
}

.inv-table-wrap .inv-unite-input {
  width: 100%;
  min-width: 72px;
  height: 30px;
  border: 1px solid #7f96b1;
  background: #fffef7;
  padding: 0 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.inv-actions-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inv-actions-top button {
  min-width: 120px;
  height: 34px;
  border: 1px solid #2e5d83;
  background: #2f6fa0;
  color: #eef7ff;
  cursor: pointer;
  font-weight: 700;
}

#inv-btn-validate {
  border-color: #2c7a3f;
  background: linear-gradient(180deg, #43a85c 0%, #2f7f45 100%);
  color: #f4fff6;
  box-shadow: 0 2px 8px rgba(26, 102, 49, 0.22);
}

#inv-btn-validate:hover {
  background: linear-gradient(180deg, #4dbb68 0%, #368f4d 100%);
}

#inv-btn-cancel {
  border-color: #a36518;
  background: linear-gradient(180deg, #e19a38 0%, #c67914 100%);
  color: #fff9ef;
  box-shadow: 0 2px 8px rgba(156, 93, 16, 0.2);
}

#inv-btn-cancel:hover {
  background: linear-gradient(180deg, #efab4b 0%, #d8871c 100%);
}

#inv-btn-close {
  border-color: #6f1d1d;
  background: linear-gradient(180deg, #9d3434 0%, #741d1d 100%);
  color: #fff7f7;
  box-shadow: 0 2px 8px rgba(123, 27, 27, 0.25);
}

#inv-btn-close:hover {
  background: linear-gradient(180deg, #ad4040 0%, #842525 100%);
}

.inv-table-wrap {
  overflow: auto;
  border-top: 1px solid #6a89a8;
  border-radius: 10px;
  background: linear-gradient(180deg, #e5ebf4 0%, #d9e2ef 100%);
}

#inv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
}

#inv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #5f7996 0%, #4b627d 100%);
  color: #f2f7fb;
  border: 1px solid #415973;
  font-size: 0.95rem;
  padding: 8px 6px;
}

#inv-table tbody td {
  border: 1px solid #c3ccd8;
  padding: 6px;
  font-size: 0.9rem;
}

#inv-table tbody input {
  width: 100%;
  height: 30px;
  border: 1px solid #6f89a5;
  padding: 0 6px;
}

#inv-table tbody tr.inv-ok {
  background: #d7f0db;
}

#inv-table tbody tr.inv-warn {
  background: #ffe8c5;
}

#inv-table tbody tr.inv-alert {
  background: #ffd1d1;
}

.inv-footer {
  height: 42px;
  border-top: 1px solid #8ea5bd;
  background: #e0e6ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #234565;
  font-weight: 700;
}

/* ===================== FENETRE DE VENTE / CAISSE ===================== */

.rail-btn-caisse {
  background: #4a7a50;
  border-color: #2a5a30;
}

#vente-modal {
  width: 100dvw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}

#vente-modal[open] {
  position: fixed;
  inset: 0;
}

#vente-modal::backdrop {
  background: rgba(5, 10, 18, 0.5);
}

.vente-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 480px);
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ---- LEFT PANEL ---- */
.vente-left {
  display: grid;
  grid-template-rows: minmax(320px, 1.7fr) auto auto minmax(120px, 0.65fr);
  background: #e8e8eb;
  border-right: 2px solid #8a8a8d;
  overflow: hidden;
  min-width: 0;
}

.vente-ticket-wrap {
  min-height: 0;
  overflow: auto;
  background: linear-gradient(180deg, #edf1f8 0%, #e2e8f2 100%);
  border-radius: 10px;
}

#vente-ticket-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

#vente-ticket-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #5f7996 0%, #4b627d 100%);
  color: #f0f5fa;
  border: 1px solid #415973;
  padding: 7px 5px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  white-space: nowrap;
}

.vth-actions {
  width: 30px;
  min-width: 30px;
  text-align: center;
}

.vth-del {
  width: 30px;
  min-width: 30px;
  text-align: center;
}

.th-sort {
  font-size: 0.6em;
  opacity: 0.65;
}

#vente-ticket-table tbody td {
  border: 1px solid #c3ccd8;
  padding: 5px 5px;
  font-size: clamp(0.88rem, 1.2vw, 1.4rem);
}

#vente-ticket-table tbody tr:nth-child(odd) {
  background: #eaf0f8;
}

#vente-ticket-table tbody tr:nth-child(even) {
  background: #dfe7f2;
}

#vente-ticket-table tbody tr:hover {
  background: #d3deec;
}

.vente-row-del {
  background: #c0392b;
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: block;
  margin: auto;
}

.vente-row-del:hover {
  background: #e74c3c;
}

.vente-row-edit {
  background: #27ae60;
  color: #fff;
  border: none;
  width: 26px;
  height: 26px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: block;
  margin: auto;
}

.vente-row-edit:hover {
  background: #2ecc71;
}

.vente-edit-cell {
  cursor: cell;
  user-select: none;
  position: relative;
}

.vente-edit-cell:hover {
  background: rgba(39, 174, 96, 0.1);
  text-decoration: underline dotted #27ae60;
}

/* search bar */
.vente-search-bar {
  flex-shrink: 0;
  background: #090b0f;
  color: #ccc;
  padding: 5px 8px 6px;
}

.vente-family-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 8px 6px;
  background: #1f2a39;
  border-top: 1px solid #3b4f68;
  border-bottom: 1px solid #3b4f68;
}

.vente-family-tab {
  border: 1px solid #3b5773;
  background: #2c3f57;
  color: #dcecff;
  height: 30px;
  border-radius: 8px;
  padding: 0 10px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
}

.vente-family-tab.is-active {
  background: #b51f24;
  border-color: #e15b5f;
  color: #fff;
}

.vente-sb-main {
  display: flex;
  gap: 6px;
}

.vente-sb-left {
  flex: 0 0 56%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vente-sb-lbl {
  font-size: 0.68rem;
  color: #8a96aa;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

#vente-code-input {
  width: 100%;
  height: 36px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #111111;
  padding: 4px 10px;
  font-size: clamp(0.95rem, 1.35vw, 1.5rem);
  font-family: var(--font-ui);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

#vente-code-input::placeholder {
  color: #666666;
}

.vente-code-spin {
  align-self: flex-start;
  width: 32px;
  height: 32px;
  border: 1px solid #252830;
  background: #1a1d2a;
  color: #7090a8;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.vente-sb-right-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vente-sb-info-labels {
  display: flex;
  gap: 4px;
}

.vente-sb-info-labels span {
  flex: 1;
  font-size: 0.68rem;
  color: #8a96aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}

.vente-sb-info-vals {
  display: flex;
  gap: 4px;
}

.vente-info-cell {
  flex: 1;
  background: #14172a;
  border: 1px solid #252830;
  color: #5ab0d0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  font-size: clamp(0.85rem, 1.1vw, 1.25rem);
}

.vente-suggest-list {
  min-height: 0;
  overflow-y: auto;
  background: #1a1e28;
  border-top: 1px solid #252830;
}

.vente-suggest-item {
  padding: 5px 8px;
  color: #c8ddf0;
  font-size: 0.9rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: 90px 1fr 90px 130px;
  gap: 8px;
  border-bottom: 1px solid #2a2e38;
}

.vente-suggest-item:hover {
  background: #2a3248;
}

.vente-suggest-item span:nth-child(3),
.vente-suggest-item span:nth-child(4) {
  text-align: right;
}

/* ---- RIGHT PANEL ---- */
.vente-right {
  background: #f3f5f9;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #d9e0ea;
  min-width: 0;
}

.vente-right > * {
  flex-shrink: 0;
}

.vente-right-header {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  margin: 10px 10px 8px;
  background: linear-gradient(135deg, #0a2451 0%, #123e86 100%);
  border: 1px solid #214f93;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(18, 44, 84, 0.25);
}

.vente-rh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vente-rh-row-bottom {
  border-top: 1px solid rgba(184, 214, 255, 0.35);
  padding-top: 5px;
}

.vente-rh-item {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.vente-rh-muted {
  color: #dbe9ff;
  font-weight: 500;
}

.vente-vendor-block {
  margin: 0 10px 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(31, 53, 80, 0.08);
}

.vente-vendor-row {
  font-size: clamp(0.88rem, 1.1vw, 1.25rem);
  line-height: 1.55;
  color: #122649;
}

.vente-totals-block {
  margin: 0 10px 8px;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(31, 53, 80, 0.08);
}

.vente-trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  border-bottom: 1px solid #e6ebf2;
  font-size: clamp(0.88rem, 1.15vw, 1.3rem);
  line-height: 1;
}

.vente-trow span:first-child {
  font-weight: 700;
  color: #122649;
  letter-spacing: 0.02em;
}

.vente-trow span:last-child {
  color: #122649;
}

.vente-trow-monnaie input {
  width: 100px;
  height: 28px;
  border: 1px solid #2e73c8;
  background: #ffffff;
  color: #169c2f;
  text-align: right;
  padding: 2px 6px;
  font-size: clamp(0.88rem, 1.1vw, 1.25rem);
  font-family: var(--font-ui);
}

.vente-trow-arendre span:last-child {
  color: #cc0000;
  font-weight: 700;
}

.vente-trow-apayer {
  font-size: clamp(1rem, 1.4vw, 1.6rem) !important;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #000000;
  padding: 5px 4px !important;
}

.vente-trow-apayer span:first-child {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: inherit;
}

.vente-trow-apayer span:last-child {
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: inherit;
}

.vente-quick-money {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 8px 6px;
  background: #ffffff;
  border-bottom: 1px solid #e6ebf2;
}

.vqm-btn {
  height: 36px;
  border: 1px solid #183f78;
  background: linear-gradient(135deg, #0d2e63 0%, #123f84 100%);
  color: #f4f8ff;
  font-family: var(--font-ui);
  font-size: clamp(0.72rem, 0.9vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  padding: 0 2px;
  transition: background 0.1s;
}

.vqm-btn:hover {
  background: linear-gradient(135deg, #124184 0%, #1856a9 100%);
  color: #fff;
}

.vqm-btn:active {
  background: #0f3569;
}

.vente-client-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 8px;
  padding: 7px 8px;
  background: #ffffff;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.2rem);
  color: #122649;
  box-shadow: 0 2px 8px rgba(31, 53, 80, 0.08);
}

.vente-client-block input {
  flex: 1;
  height: 28px;
  border: 1px solid #d2dceb;
  background: #ffffff;
  padding: 2px 6px;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  font-family: var(--font-ui);
}

.vente-client-balance {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #0a8a9c;
  color: #ffffff;
  font-size: clamp(0.72rem, 0.92vw, 0.95rem);
  font-weight: 700;
  white-space: nowrap;
}

.vente-act-strip {
  display: flex;
  gap: 4px;
  margin: 0 10px 8px;
  padding: 6px;
  background: #f3f5f9;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  flex-wrap: nowrap;
}

.vente-act {
  flex: 1;
  min-width: 30px;
  height: 46px;
  border: 1px solid #d3dbe8;
  background: #ffffff;
  color: #13315f;
  cursor: pointer;
  font-size: clamp(0.75rem, 0.95vw, 1rem);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
}

.vente-act:hover {
  background: #f3f7ff;
}

.vente-act-direct {
  flex: 1.6;
  font-size: clamp(0.6rem, 0.75vw, 0.82rem);
  font-weight: 700;
}

.vente-act-dl {
  font-size: 32px;
  font-weight: 700;
  flex: 1.4;
  background: linear-gradient(135deg, #23b437 0%, #13a824 100%);
  color: #a0ffcc;
  border-color: #1ea84d;
  height: 56px;
}

.vente-act-dl:hover {
  background: linear-gradient(135deg, #2dc643 0%, #19b62c 100%);
  color: #c0ffdd;
}

.vente-tabs-bar {
  display: flex;
  margin: 0 10px;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.vente-ptab {
  flex: 1;
  height: 36px;
  border: 0;
  border-right: 1px solid #dbe2ed;
  background: #ffffff;
  color: #3c4f6d;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  cursor: pointer;
  font-family: var(--font-ui);
}

.vente-ptab:last-child {
  border-right: 0;
}

.vente-ptab.is-active {
  background: linear-gradient(135deg, #1a78e0 0%, #1563c4 100%);
  color: #fff;
  font-weight: 700;
}

.vente-panel-content {
  margin: 6px 10px 0;
  padding: 8px;
  background: #f3f5f9;
  border: 1px solid #dbe2ed;
  border-radius: 10px;
  min-height: 0;
  overflow: auto;
}

#vpc-menu {
  flex: 1;
}

@media (max-width: 1400px) {
  .vente-shell {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 33vw, 430px);
  }

  .vente-left {
    grid-template-rows: minmax(260px, 1.45fr) auto auto minmax(110px, 0.55fr);
  }
}

@media (max-width: 1024px) {
  .vente-shell {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.vente-panel-content[hidden] {
  display: none;
}

.vente-chk-row {
  display: flex;
  gap: 14px;
  padding: 4px 0 8px;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  color: #1a2b46;
}

.vente-chk-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.vente-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.vmenu-btn {
  border: 1px solid #d3dbe8;
  background: #ffffff;
  color: #102544;
  height: clamp(46px, 5vw, 62px);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.82rem, 1vw, 1.08rem);
  font-weight: 700;
  text-align: left;
  line-height: 1.25;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(31, 53, 80, 0.08);
}

.vmenu-btn:hover {
  background: #f5f8fd;
}

.vmenu-ico {
  font-size: 1.15em;
  opacity: 1;
  color: #1a78e0;
  flex-shrink: 0;
}

.vmenu-depense {
  background: #ffffff;
}

.vente-btn-fermer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  height: clamp(44px, 5vw, 58px);
  border: 1px solid #d4122e;
  background: linear-gradient(135deg, #ff0f2e 0%, #d90b26 100%);
  color: #ffeef0;
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.35vw, 1.6rem);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 10px;
  padding: 0 10px;
}

.vente-btn-fermer:hover {
  background: linear-gradient(135deg, #ff2743 0%, #e21230 100%);
}

.vfermer-ico {
  font-size: 1.4em;
  opacity: 0.9;
}

/* numpad (tab Monnaie) */
.vente-np-label {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: #333;
}

.vente-numpad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

.vnte-np {
  height: 46px;
  border: 1px solid #3a5a70;
  background: #2e5060;
  color: #e8f0f8;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
}

.vnte-np:hover {
  background: #3c6070;
}

.vnte-np-zero {
  grid-column: span 2;
}

/* ===================== LISTE CLIENT MODAL ===================== */

#liste-client-modal {
  width: min(900px, 98vw);
  border: 2px solid #1a7a9a;
  padding: 0;
  overflow: hidden;
}

#liste-client-modal::backdrop {
  background: rgba(5, 10, 18, 0.65);
}

.lcli-shell {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 85vh;
  background: #1ab8cc;
  color: #fff;
  overflow: hidden;
}

.lcli-title {
  margin: 0;
  padding: 6px 10px;
  background: #0a8a9c;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: #e8f8ff;
  border-bottom: 2px solid #08a8c4;
  line-height: 1.1;
}

.lcli-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  background: #0a8a9c;
  border-bottom: 1px solid #0a5a6c;
}

.lcli-search-lbl {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: #b0e8f8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

#lcli-search-input {
  height: 32px;
  border: 1px solid #087a8c;
  background: #e8f8ff;
  color: #0a2a3a;
  padding: 4px 8px;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  font-family: var(--font-ui);
}

#lcli-search-input::placeholder {
  color: #80b0c0;
}

.lcli-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  background: #fff;
  min-height: 300px;
  max-height: 580px;
}

#lcli-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#lcli-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #087a8c;
  color: #e8f8ff;
  border: 1px solid #065a6c;
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.1vw, 1.35rem);
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

#lcli-table thead th:nth-child(2) {
  text-align: right;
  padding-right: 12px;
}

#lcli-table tbody td {
  border-bottom: 1px dotted #a8c8d8;
  padding: 5px 8px;
  font-size: clamp(0.82rem, 0.95vw, 1.05rem);
  color: #1a3a4a;
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: break-word;
}

#lcli-table tbody td:nth-child(2) {
  text-align: right;
  padding-right: 12px;
  font-weight: 600;
  color: #0a5a6c;
  background: #c0dce8;
}

#lcli-table tbody tr {
  background: #d0e8f0;
}

#lcli-table tbody tr:nth-child(even) {
  background: #e0f0f8;
}

#lcli-table tbody tr:nth-child(even) td:nth-child(2) {
  background: #d8ecf5;
}

#lcli-table tbody tr:hover {
  background: #a8d8e8;
}

#lcli-table tbody tr:hover td:nth-child(2) {
  background: #8ac8d8;
  color: #06353a;
}

.lcli-name-cell {
  font-weight: 700;
  color: #073d44;
}

.lcli-balance-cell {
  text-align: right;
  font-weight: 800;
  color: #b21f24;
  white-space: nowrap;
}

#lcli-table tbody tr.lcli-selected {
  background: #6ab8d8;
  outline: 2px solid #086a8c;
  outline-offset: -2px;
}

#lcli-table tbody tr.lcli-selected .lcli-name-cell,
#lcli-table tbody tr.lcli-selected .lcli-balance-cell {
  color: #fff;
}

#lcli-table tbody td:last-child {
  text-align: right;
}

.lcli-footer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #0a8a9c;
  border-top: 1px solid #08a8c4;
}

.lcli-btn {
  flex: 1;
  height: 36px;
  border: 1px solid #087a8c;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.lcli-btn-primary {
  background: #0f7a8c;
  color: #e8f8ff;
}

.lcli-btn-primary:hover {
  background: #1a9aac;
}

.lcli-btn-success {
  background: #2a7a4a;
  color: #d0f8d0;
  border-color: #4a9a6a;
}

.lcli-btn-success:hover {
  background: #3a9a5a;
  border-color: #6aba8a;
}

.lcli-btn-info {
  background: #5a7a8c;
  color: #d8e8f8;
  border-color: #7a9aac;
}

.lcli-btn-info:hover {
  background: #6a8aac;
  border-color: #9abacc;
}

.lcli-btn-secondary {
  background: #6a4a4a;
  color: #ffd8d8;
  border-color: #8a3a3a;
}

.lcli-btn-secondary:hover {
  background: #8a3a3a;
  border-color: #aa2a2a;
}

/* ===================== QTY PAD MODAL ===================== */

#qty-pad-modal {
  width: clamp(360px, 32vw, 520px);
  border: 2px solid #1a5a8c;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

#qty-pad-modal::backdrop {
  background: rgba(5, 10, 18, 0.55);
}

.qpad-shell {
  display: flex;
  flex-direction: column;
  background: #1a2a3a;
  color: #e8f0ff;
}

.qpad-header {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.35vw, 8px);
  padding: clamp(10px, 0.9vw, 16px) clamp(12px, 1vw, 18px);
  background: #0a1a2a;
  border-bottom: 1px solid #1a4a6a;
  order: 1;
}

.qpad-article-name {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 0.8vw, 1.15rem);
  font-weight: 700;
  color: #a8d8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qpad-stock-info {
  font-size: clamp(0.82rem, 0.7vw, 1rem);
  color: #60a0c0;
}

.qpad-price-info {
  margin-top: 2px;
  font-size: clamp(0.84rem, 0.72vw, 1.02rem);
  color: #c1ecff;
}

.qpad-display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2.2vw, 3.5rem);
  font-weight: 700;
  text-align: right;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 22px);
  background: #0f1f2f;
  color: #fff;
  border-bottom: 1px solid #2a4a6a;
  letter-spacing: 0.05em;
  min-height: clamp(68px, 6vw, 92px);
  order: 2;
}

.qpad-units-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 0.45vw, 8px);
  padding: clamp(8px, 0.8vw, 12px);
  background: #12283a;
  border-bottom: 1px solid #2a4a6a;
  order: 5;
}

.qpad-unit-btn {
  height: clamp(60px, 5.2vw, 78px);
  border: 1px solid #2d8a4f;
  border-radius: 5px;
  background: linear-gradient(180deg, #1f7a43 0%, #175f35 100%);
  color: #eafff2;
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 1vw, 1.38rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 10px rgba(8, 52, 27, 0.35);
}

.qpad-unit-btn:hover {
  background: linear-gradient(180deg, #2a8a4a 0%, #1f6f3e 100%);
}

.qpad-unit-btn:active {
  transform: scale(0.98);
  background: linear-gradient(180deg, #176a39 0%, #145a30 100%);
}

.qpad-live {
  padding: clamp(6px, 0.65vw, 10px) clamp(10px, 0.9vw, 14px);
  font-size: clamp(0.8rem, 0.72vw, 0.98rem);
  color: #b9def8;
  background: #102435;
  border-bottom: 1px solid #2a4a6a;
  order: 3;
}

.qpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 0.45vw, 8px);
  padding: clamp(8px, 0.8vw, 12px);
  background: #1a2a3a;
  order: 4;
}

.qpad-btn {
  height: clamp(54px, 4.8vw, 70px);
  border: 1px solid #2a4a6a;
  background: #243444;
  color: #e0f0ff;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.35vw, 1.9rem);
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qpad-btn:hover {
  background: #2a5a8a;
}

.qpad-btn:active {
  background: #1a4a7a;
}

.qpad-clear {
  background: #243444;
  border-color: #2a4a6a;
  color: #e0f0ff;
}

.qpad-clear:hover {
  background: #2a5a8a;
}

.qpad-back {
  background: #2a1a4a;
  border-color: #5a3a8a;
  color: #d0a0ff;
}

.qpad-back:hover {
  background: #5a3a8a;
}

.qpad-zero {
  grid-column: span 1;
}

.qpad-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4px, 0.45vw, 8px);
  padding: clamp(8px, 0.8vw, 12px);
  background: #0f1f2f;
  border-top: 1px solid #2a4a6a;
  order: 6;
}

.qpad-btn-cancel {
  height: clamp(46px, 4vw, 60px);
  border: none;
  background: #6a1a1a;
  color: #ffa0a0;
  font-family: var(--font-ui);
  font-size: clamp(0.98rem, 0.9vw, 1.2rem);
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
}

.qpad-btn-cancel:hover {
  background: #8a2a2a;
}

.print-only {
  display: none;
}

@media print {
  body.print-table-mode {
    background: #ffffff !important;
  }

  body.print-table-mode * {
    visibility: hidden !important;
  }

  body.print-table-mode .grid-panel,
  body.print-table-mode .grid-panel * {
    visibility: visible !important;
  }

  body.print-table-mode .grid-panel {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  body.print-table-mode .print-only {
    display: block !important;
    margin: 0 0 8mm 0;
    padding: 0;
  }

  body.print-table-mode .print-only-title {
    font-size: 16pt;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #111111;
    margin-bottom: 2mm;
  }

  body.print-table-mode .print-only-meta {
    font-size: 10pt;
    color: #3b3b3b;
    margin-bottom: 2mm;
  }

  body.print-table-mode .grid-head,
  body.print-table-mode .grid-foot,
  body.print-table-mode .actions,
  body.print-table-mode .tabs,
  body.print-table-mode .sysbar,
  body.print-table-mode .icon-rail,
  body.print-table-mode .menu-lite,
  body.print-table-mode .user-info-bar,
  body.print-table-mode .header-datetime {
    display: none !important;
  }

  body.print-table-mode .grid-wrap {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  body.print-table-mode #data-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 10pt;
  }

  body.print-table-mode.print-table-compact #data-table {
    font-size: 8.7pt;
  }

  body.print-table-mode #data-table thead {
    display: table-header-group !important;
  }

  body.print-table-mode #data-table tfoot {
    display: table-footer-group !important;
  }

  body.print-table-mode #data-table th,
  body.print-table-mode #data-table td {
    border: 1px solid #444444 !important;
    padding: 2.2mm 2.4mm !important;
    color: #111111 !important;
    background: #ffffff !important;
    white-space: nowrap;
  }

  body.print-table-mode #data-table th {
    font-weight: 700;
  }

  body.print-table-mode #data-table tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ===================== LISTE ATTENTE MODAL ===================== */

#liste-attente-modal {
  width: min(850px, 98vw);
  border: 2px solid #1a7a9a;
  padding: 0;
  overflow: hidden;
}

#liste-attente-modal::backdrop {
  background: rgba(5, 10, 18, 0.65);
}

.la-shell {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 88vh;
  background: #1ab8cc;
  color: #fff;
  overflow: hidden;
}

.la-title {
  margin: 0;
  padding: 6px 10px;
  background: #0a8a9c;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: #e8f8ff;
  border-bottom: 2px solid #08a8c4;
  line-height: 1.1;
}

.la-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  min-height: 200px;
  max-height: 450px;
}

#la-table {
  width: 100%;
  border-collapse: collapse;
}

#la-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #087a8c;
  color: #e8f8ff;
  border: 1px solid #065a6c;
  padding: 6px 8px;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.1vw, 1.3rem);
  text-align: left;
  white-space: nowrap;
}

#la-table tbody td {
  border-bottom: 1px dotted #a8c8d8;
  padding: 5px 8px;
  font-size: clamp(0.82rem, 0.95vw, 1.05rem);
  color: #1a3a4a;
  cursor: pointer;
}

#la-table tbody tr {
  background: #d0e8f0;
}

#la-table tbody tr:nth-child(even) {
  background: #e0f0f8;
}

#la-table tbody tr:hover {
  background: #a8d8e8;
}

#la-table tbody tr.la-selected {
  background: #6ab8d8;
  outline: 2px solid #086a8c;
  outline-offset: -2px;
}

.la-top-section {
  flex: 0 0 auto;
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-bottom: 1px solid #08a8c4;
}

.la-bottom-section {
  flex: 0 0 auto;
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.la-articles-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #087a8c;
  color: #e8f8ff;
  padding: 5px 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid #065a6c;
  text-transform: uppercase;
}

#la-articles-table {
  width: 100%;
  border-collapse: collapse;
  flex: 1;
}

#la-articles-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #087a8c;
  color: #e8f8ff;
  border: 1px solid #065a6c;
  padding: 5px 6px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-align: left;
  white-space: nowrap;
}

#la-articles-table tbody td {
  border-bottom: 1px dotted #a8c8d8;
  padding: 4px 6px;
  font-size: 0.8rem;
  color: #1a3a4a;
}

#la-articles-table tbody tr {
  background: #d0e8f0;
}

#la-articles-table tbody tr:nth-child(even) {
  background: #e0f0f8;
}

#la-articles-table tbody td:nth-child(2),
#la-articles-table tbody td:nth-child(3) {
  text-align: right;
}

.la-footer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #0a8a9c;
  border-top: 1px solid #08a8c4;
}

.la-btn {
  flex: 1;
  height: 36px;
  border: 1px solid #087a8c;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.la-btn-primary {
  background: #0f7a8c;
  color: #e8f8ff;
}

.la-btn-primary:hover {
  background: #1a9aac;
}

.la-btn-danger {
  background: #8a3a3a;
  color: #ffd8d8;
  border-color: #aa2a2a;
}

.la-btn-danger:hover {
  background: #aa2a2a;
  border-color: #cc1a1a;
}

.la-btn-secondary {
  background: #4a5a7a;
  color: #e8f8ff;
}

.la-btn-secondary:hover {
  background: #5a6a8a;
}

/* ===== LOGIN MODAL ===== */
.login-modal-wrapper {
  backdrop-filter: blur(2px);
  border: 0;
  background: transparent;
  padding: 0;
  width: min(460px, 94vw);
  max-width: min(460px, 94vw);
}

.login-modal-wrapper::backdrop {
  background: linear-gradient(180deg, rgba(30, 17, 53, 0.7) 0%, rgba(60, 45, 96, 0.62) 100%);
}

.login-container {
  width: 100%;
  max-width: none;
  background: linear-gradient(180deg, #65538d 0%, #514172 100%);
  border: 1px solid #7a6a9a;
  border-radius: 0;
  padding: 74px 40px 28px;
  box-shadow: 0 18px 36px rgba(13, 8, 26, 0.45);
  text-align: center;
  position: relative;
}

.login-container::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #1d1431;
  box-shadow: 0 8px 20px rgba(8, 3, 16, 0.45);
}

.login-container::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background:
    radial-gradient(circle at 50% 30%, #ffffff 0 10px, transparent 10px),
    radial-gradient(ellipse at 50% 84%, transparent 0 15px, #ffffff 15px 18px, transparent 18px);
}

.login-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-group {
  position: relative;
}

.login-group label {
  display: none;
}

.login-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 42px;
  border-right: 1px solid #d7d8df;
  background: #ececf2;
}

.login-group::after {
  content: "\1F464";
  position: absolute;
  left: 11px;
  top: 10px;
  font-size: 14px;
  color: #666;
  z-index: 1;
}

.login-group:nth-of-type(2)::after {
  content: "\1F512";
}

.login-group input,
.login-group select {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 50px;
  border: 1px solid #d2d5df;
  border-radius: 0;
  font-size: 1.02rem;
  font-family: var(--font-ui);
  background: #f6f7fb;
  color: #34384a;
}

.login-group input:focus,
.login-group select:focus {
  outline: none;
  border-color: #ebeef8;
  box-shadow: 0 0 0 2px rgba(239, 245, 255, 0.35);
}

.login-error {
  color: #ffe4e6;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 18px;
  text-align: left;
}

.login-btn-submit {
  margin-top: 2px;
  height: 42px;
  padding: 0 16px;
  background: linear-gradient(90deg, #241c3d 0%, #1b1532 100%);
  color: #f6f7fb;
  border: 1px solid #2e2550;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.login-btn-submit:hover {
  background: linear-gradient(90deg, #2f2350 0%, #241c43 100%);
  box-shadow: 0 6px 16px rgba(24, 17, 43, 0.45);
}

.login-btn-submit:active {
  background: #1a142d;
}

/* ===== ADMIN PANEL MODAL ===== */
.admin-modal-wrapper {
  backdrop-filter: blur(4px);
}

.admin-modal-wrapper::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.admin-container {
  width: 100%;
  max-width: min(1100px, 96vw);
  background: #e8eef5;
  border: 2px solid #305f86;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.admin-title {
  font-size: 1.5rem;
  color: #03131b;
  margin: 0 0 12px;
  text-align: center;
}

.admin-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid #c4cad8;
}

.admin-tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: #5d82a2;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.admin-tab:hover {
  color: #305f86;
}

.admin-tab.is-active {
  color: #03131b;
  border-bottom-color: #04c8d8;
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.is-active {
  display: block;
}

.admin-tab-content[data-tab="users"].is-active {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  column-gap: 18px;
  row-gap: 8px;
  align-items: start;
}

.admin-tab-content[data-tab="users"] > h3:first-of-type {
  grid-column: 1;
  margin: 0 0 8px;
}

.admin-tab-content[data-tab="users"] > #create-user-form {
  grid-column: 1;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.admin-tab-content[data-tab="users"] > h3:nth-of-type(2) {
  grid-column: 2;
  margin: 0 0 8px !important;
}

.admin-tab-content[data-tab="users"] > .users-list {
  grid-column: 2;
}

.admin-tab-content h3 {
  color: #305f86;
  font-size: 1.2rem;
  margin: 0 0 15px;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #c4cad8;
  margin-bottom: 14px;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-form-group label {
  font-weight: 600;
  color: #0a0f1d;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-form-group input[type="text"],
.admin-form-group input[type="password"] {
  padding: 10px;
  border: 1px solid #305f86;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: var(--font-ui);
}

.admin-form-group input:focus {
  outline: none;
  border-color: #04c8d8;
  box-shadow: 0 0 8px rgba(4, 200, 216, 0.3);
}

.admin-form-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-error {
  color: #aa2a2a;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 20px;
}

.admin-btn-primary {
  padding: 10px 20px;
  background: #305f86;
  color: #f3f5f8;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.admin-btn-primary:hover {
  background: #5d82a2;
}

.admin-btn-secondary {
  padding: 10px 20px;
  background: #8a8a8d;
  color: #f3f5f8;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.admin-btn-secondary:hover {
  background: #aaaaad;
}

.admin-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #d0d0d3;
  border: 1px solid #9ea9ba;
  border-radius: 4px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info strong {
  color: #03131b;
  font-weight: 700;
}

.user-role {
  display: inline-block;
  padding: 4px 12px;
  background: #305f86;
  color: #f3f5f8;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.user-neg-stock-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.user-neg-stock-badge.allowed {
  background: #d8f5dd;
  color: #115327;
  border: 1px solid #8bc89a;
}

.user-neg-stock-badge.blocked {
  background: #ffe5d7;
  color: #7a2f12;
  border: 1px solid #e0a17f;
}

.user-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 980px) {
  .admin-container {
    max-height: 84vh;
    overflow-y: auto;
  }

  .admin-tab-content[data-tab="users"].is-active {
    display: block;
  }
}

.user-delete-btn {
  padding: 6px 12px;
  background: #8a3a3a;
  color: #ffd8d8;
  border: 1px solid #aa2a2a;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.user-delete-btn:hover {
  background: #aa2a2a;
  border-color: #cc1a1a;
}

.gr-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gr-filters input,
.gr-filters select {
  height: 36px;
  border: 1px solid #c8d6ea;
  border-radius: 10px;
  background: #fff;
  color: #102544;
  padding: 0 10px;
  font-family: var(--font-ui);
}

.gr-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gr-kpi-sub {
  margin-top: 6px;
  color: #5a6e8d;
  font-size: 0.78rem;
  line-height: 1.25;
}

.gr-table-tools {
  padding: 10px;
}

.gr-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#gr-search {
  flex: 1;
  min-width: 240px;
  height: 38px;
  border: 1px solid #c8d6ea;
  border-radius: 10px;
  padding: 0 12px;
  font-family: var(--font-ui);
}

.gr-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

#gr-page-info {
  min-width: 72px;
  text-align: center;
  color: #35567f;
  font-weight: 700;
}

.gr-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .gr-filters,
  .gr-kpis,
  .gr-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .gr-filters,
  .gr-kpis,
  .gr-charts-grid {
    grid-template-columns: 1fr;
  }

  .gr-table-toolbar {
    align-items: stretch;
  }

  .gr-pagination {
    width: 100%;
    justify-content: space-between;
  }
}

.admin-shortcuts {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 16px;
}

.annual-modal-wrapper::backdrop,
.annual-detail-modal-wrapper::backdrop {
  background: rgba(8, 14, 24, 0.58);
  backdrop-filter: blur(3px);
}

.annual-container {
  width: min(1460px, 98vw);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
  border: 1px solid #cad6e6;
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(18, 35, 63, 0.24);
  padding: 14px;
}

.annual-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.annual-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  color: #102848;
}

.annual-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.annual-btn {
  border: 1px solid #bfd0e8;
  background: #fff;
  color: #13335e;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.annual-btn:hover {
  background: #f5f8ff;
}

.annual-btn-info {
  border-color: #2f78cb;
  background: linear-gradient(135deg, #1f83eb 0%, #176ecf 100%);
  color: #eef6ff;
}

.annual-btn-info:hover {
  background: linear-gradient(135deg, #3794f2 0%, #247ed9 100%);
}

.annual-btn-soft {
  border-color: #c8d6ea;
}

.annual-btn-danger {
  border-color: #d43b47;
  background: linear-gradient(135deg, #f03d4f 0%, #d3293b 100%);
  color: #fff;
}

.annual-btn-danger:hover {
  background: linear-gradient(135deg, #f55e6d 0%, #de3f50 100%);
}

.annual-filters {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.annual-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #2a4167;
  font-size: 0.86rem;
  font-weight: 600;
}

.annual-filters select {
  height: 36px;
  border: 1px solid #c8d6ea;
  border-radius: 10px;
  background: #fff;
  color: #102544;
  padding: 0 10px;
  font-family: var(--font-ui);
}

.annual-kpis {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.annual-kpi-card {
  background: #fff;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 3px 10px rgba(25, 45, 74, 0.08);
}

.annual-kpi-label {
  display: block;
  color: #4a607f;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.annual-kpi-value {
  color: #0f2e57;
  font-size: clamp(1rem, 1.4vw, 1.45rem);
}

.amount-positive {
  color: #148236 !important;
}

.amount-negative {
  color: #c62828 !important;
}

.annual-tabs {
  margin-top: 12px;
  display: inline-flex;
  gap: 6px;
  background: #e8eef8;
  border: 1px solid #d0dcef;
  border-radius: 10px;
  padding: 4px;
}

.annual-tab {
  border: 0;
  background: transparent;
  color: #2d466d;
  font-weight: 700;
  font-family: var(--font-ui);
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
}

.annual-tab.is-active {
  background: linear-gradient(135deg, #1f83eb 0%, #176ecf 100%);
  color: #fff;
}

.annual-tab-panel {
  display: none;
  margin-top: 10px;
}

.annual-tab-panel.is-active {
  display: block;
}

.annual-table-wrap,
.annual-detail-table-wrap {
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  overflow: auto;
}

#ar-table,
#ar-detail-ca-table,
#ar-detail-dep-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

#ar-table thead th,
#ar-detail-ca-table thead th,
#ar-detail-dep-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #355d8f 0%, #2a4f7d 100%);
  color: #eef5ff;
  border: 1px solid #27486f;
  padding: 8px 6px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: left;
}

#ar-table tbody td,
#ar-detail-ca-table tbody td,
#ar-detail-dep-table tbody td {
  border: 1px solid #d5deea;
  padding: 6px;
  font-size: 0.88rem;
  color: #153255;
}

#ar-table tbody tr:nth-child(odd),
#ar-detail-ca-table tbody tr:nth-child(odd),
#ar-detail-dep-table tbody tr:nth-child(odd) {
  background: #f7faff;
}

#ar-table tfoot th,
#ar-detail-ca-table tfoot th,
#ar-detail-dep-table tfoot th {
  background: #e6eef9;
  color: #102c50;
  border: 1px solid #c9d7ea;
  padding: 8px 6px;
  text-align: left;
  font-size: 0.9rem;
}

.annual-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.annual-chart-card {
  background: #fff;
  border: 1px solid #d8e3f0;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 3px 10px rgba(25, 45, 74, 0.08);
}

.annual-chart-card h3 {
  margin: 0 0 8px;
  color: #143259;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.annual-chart-card canvas {
  width: 100%;
  height: 220px;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.annual-detail-container {
  width: min(1200px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #f3f7fc;
  border: 1px solid #d2ddec;
  border-radius: 14px;
  padding: 12px;
}

.annual-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.annual-detail-header h3 {
  margin: 0;
  color: #10315c;
  font-family: var(--font-ui);
}

@media (max-width: 1200px) {

.stock-value-modal-wrapper::backdrop,
.stock-value-detail-modal-wrapper::backdrop {
  background: rgba(8, 14, 24, 0.58);
  backdrop-filter: blur(3px);
}

.stock-value-container {
  width: min(1600px, 98vw);
  max-height: 94vh;
  overflow: auto;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
  border: 1px solid #cad6e6;
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(18, 35, 63, 0.24);
  padding: 14px;
}

.stock-value-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.stock-value-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  color: #102848;
}

.stock-value-subtitle {
  margin: 4px 0 0;
  color: #5a6e8d;
  font-size: 0.88rem;
}

.stock-value-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stock-value-filters {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
}

.stock-value-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #2a4167;
  font-size: 0.86rem;
  font-weight: 600;
}

.stock-value-filters input,
.stock-value-filters select {
  height: 36px;
  border: 1px solid #c8d6ea;
  border-radius: 10px;
  background: #fff;
  color: #102544;
  padding: 0 10px;
  font-family: var(--font-ui);
}

.sv-kpis {
  margin-top: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stock-value-table-card {
  margin-top: 12px;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(25, 45, 74, 0.08);
}

.stock-value-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e1e8f1;
  background: #f7faff;
}

.stock-value-row-count {
  color: #17385e;
  font-weight: 700;
}

.stock-value-toolbar-hint {
  color: #5a6e8d;
  font-size: 0.84rem;
}

.stock-value-table-wrap {
  overflow: auto;
}

#sv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1450px;
}

#sv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #355d8f 0%, #2a4f7d 100%);
  color: #eef5ff;
  border: 1px solid #27486f;
  padding: 8px 6px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

#sv-table tbody td,
#sv-table tfoot th {
  border: 1px solid #d5deea;
  padding: 6px;
  font-size: 0.88rem;
  color: #153255;
}

#sv-table tbody tr:nth-child(odd) {
  background: #f7faff;
}

.sv-row.sv-low {
  background: #fff3d8 !important;
}

.sv-row.sv-empty {
  background: #ffe3df !important;
}

.sv-row.sv-negative {
  background: #ffd0d0 !important;
  color: #7f0f0f;
}

.sv-row.sv-negative td {
  border-color: #e49a9a;
}

#sv-table tfoot th {
  background: #e6eef9;
  color: #102c50;
  font-size: 0.9rem;
}

.stock-value-detail-container {
  width: min(1300px, 96vw);
  height: min(90vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f3f7fc;
  border: 1px solid #d2ddec;
  border-radius: 14px;
  padding: 12px;
}

.stock-value-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.stock-value-detail-header h3 {
  margin: 0;
  color: #102848;
}

.stock-value-detail-header p {
  margin: 4px 0 0;
  color: #5a6e8d;
}

.stock-value-detail-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.ph-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ph-product-cards,
.ph-summary-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.ph-summary-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ph-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 8px;
}

.ph-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ph-meta-label {
  margin-bottom: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  color: #4f6785;
  letter-spacing: 0.01em;
}

.ph-meta-value {
  margin: 0;
  font-size: 1rem !important;
  font-weight: 800;
  color: #0f2f4d;
  text-align: right;
  line-height: 1.2;
  word-break: break-word;
}

.ph-product-cards article,
.ph-summary-cards article {
  background: #ffffff;
  border: 1px solid #d8e3f0;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 7px rgba(17, 42, 66, 0.1);
}

.ph-product-cards span,
.ph-summary-cards span {
  display: block;
  font-size: 0.75rem;
  color: #4f6785;
  margin-bottom: 3px;
}

.ph-product-cards strong,
.ph-summary-cards strong {
  display: block;
  font-size: 0.95rem;
  color: #112b48;
  line-height: 1.1;
}

.ph-filter-bar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 8px;
}

.ph-filter-bar label {
  display: grid;
  gap: 4px;
  font-size: 0.76rem;
  color: #45617f;
}

@media (max-width: 980px) {
  .ph-meta-grid {
    grid-template-columns: 1fr;
  }

  .ph-summary-cards {
    grid-template-columns: 1fr;
  }
}

.ph-filter-bar input,
.ph-filter-bar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #c0cfe0;
  border-radius: 9px;
  padding: 0 10px;
  font-size: 0.88rem;
  background: #fcfdff;
  color: #113355;
}

.ph-filter-bar input:focus,
.ph-filter-bar select:focus {
  outline: 2px solid #8eb4dd;
  border-color: #7ea8d6;
}

.ph-table-shell {
  min-height: 0;
  flex: 1;
  background: #ffffff;
  border: 1px solid #d6e1ee;
  border-radius: 12px;
  overflow: hidden;
}

.ph-table-wrap {
  height: 100%;
  overflow: auto;
}

.ph-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
}

.ph-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #1f496f 0%, #1b3e62 100%);
  color: #edf6ff;
  font-size: 0.81rem;
  letter-spacing: 0.02em;
  border: 1px solid #36587d;
  padding: 8px 6px;
  text-align: left;
}

.ph-table tbody td {
  border: 1px solid #dbe4ef;
  padding: 7px 6px;
  font-size: 0.82rem;
  color: #14314f;
  vertical-align: top;
}

.ph-table tbody tr:nth-child(odd) {
  background: #f8fbff;
}

.ph-table tbody tr:nth-child(even) {
  background: #eef4fb;
}

.ph-table tbody tr:hover {
  background: #deecfb;
}

.ph-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ph-in {
  color: #16653b;
  font-weight: 700;
}

.ph-out {
  color: #8a1d1d;
  font-weight: 700;
}

.ph-empty {
  text-align: center;
  padding: 16px;
  color: #5d7592;
}

.sv-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sv-detail-summary article {
  background: #fff;
  border: 1px solid #d8e3f0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(25, 45, 74, 0.08);
}

.sv-detail-summary span {
  display: block;
  color: #5a6e8d;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.sv-detail-summary strong {
  color: #102848;
  font-size: 1.1rem;
}

.sv-detail-history {
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  overflow: auto;
}

.sv-detail-history table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
}

.sv-detail-history th,
.sv-detail-history td {
  border: 1px solid #d5deea;
  padding: 8px 6px;
  font-size: 0.88rem;
  color: #153255;
}

.sv-detail-history thead th {
  background: linear-gradient(180deg, #355d8f 0%, #2a4f7d 100%);
  color: #eef5ff;
}

@media (max-width: 1200px) {
  .stock-value-filters,
  .sv-detail-summary,
  .sv-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ph-product-cards,
  .ph-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ph-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .stock-value-filters,
  .sv-detail-summary,
  .sv-kpis {
    grid-template-columns: 1fr;
  }

  .stock-value-table-toolbar {
    align-items: stretch;
  }

  .stock-value-head-actions {
    width: 100%;
  }

  .ph-head-actions {
    width: 100%;
  }

  .ph-head-actions .annual-btn {
    flex: 1;
    min-width: 132px;
  }

  .ph-product-cards,
  .ph-summary-cards,
  .ph-filter-bar {
    grid-template-columns: 1fr;
  }
}
  .annual-filters,
  .annual-kpis,
  .annual-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .annual-filters,
  .annual-kpis,
  .annual-charts-grid {
    grid-template-columns: 1fr;
  }

  .annual-head-actions {
    width: 100%;
  }

  .annual-btn {
    flex: 1;
    text-align: center;
  }
}
  background: #6a4a4a;
  color: #ffd8d8;
  border-color: #8a3a3a;
}

.la-btn-secondary:hover {
  background: #8a3a3a;
  border-color: #aa2a2a;
}


#liste-vente-modal {
  width: min(1300px, 98vw);
  height: 84vh;
  max-height: 84vh;
  border: 2px solid #5a7a8a;
  padding: 0;
  overflow: hidden;
}

#liste-vente-modal::backdrop {
  background: rgba(5, 10, 18, 0.6);
}

.lv-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #eef0f2;
}

/* header */
.lv-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 12px;
  background: #1a2530;
  color: #fff;
  flex-shrink: 0;
}

.lv-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 2.2rem);
  color: #d8eaf8;
  white-space: nowrap;
}

.lv-hinfo {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  font-size: clamp(0.82rem, 1.05vw, 1.15rem);
}

.lv-hlabel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c0d4e8;
}

#lv-date-input {
  border: 1px solid #4a7090;
  background: #f0f8ff;
  color: #0a1a2a;
  padding: 2px 6px;
  height: 28px;
  font-size: clamp(0.82rem, 1vw, 1.1rem);
  font-family: var(--font-ui);
}

.lv-hstat,
.lv-hca {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0e1820;
  border: 1px solid #3a6080;
  padding: 3px 10px;
  color: #a0c8d8;
  font-size: clamp(0.82rem, 1vw, 1.1rem);
}

.lv-hstat strong,
.lv-hca strong {
  color: #6ad8f0;
}

.lv-hbtns {
  display: flex;
  gap: 5px;
}

.lv-hbtns button {
  width: 30px;
  height: 30px;
  border: 1px solid #4a7090;
  background: #243a50;
  color: #b0cce0;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lv-hdots {
  font-size: 11px !important;
  letter-spacing: 0.05em;
}

/* body */
.lv-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* top section (ventes + sidebar) */
.lv-top-section {
  flex: 1;
  display: flex;
  overflow: hidden;
  border-bottom: 2px solid #8a9aaa;
  min-height: 0;
}

.lv-top-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
}

#lv-ventes-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

#lv-ventes-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #2a5068;
  color: #e0f0fa;
  border: 1px solid #1a3a50;
  padding: 7px 6px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.35vw, 1.7rem);
  white-space: nowrap;
  text-align: left;
}

.lv-th-suppr {
  text-align: center !important;
  width: 90px;
}

#lv-ventes-table tbody td {
  border: 1px solid #b8cad8;
  padding: 5px 6px;
  font-size: clamp(0.85rem, 1.1vw, 1.25rem);
  cursor: pointer;
  white-space: nowrap;
}

#lv-ventes-table tbody td.lv-num {
  text-align: right;
}

#lv-ventes-table tbody tr:nth-child(odd) {
  background: #d4eaf5;
}

#lv-ventes-table tbody tr:nth-child(even) {
  background: #e8f5fb;
}

#lv-ventes-table tbody tr:hover {
  background: #b0d8ee;
}

#lv-ventes-table tbody tr.lv-selected {
  background: #88c4e0 !important;
  outline: 2px solid #1a6090;
  outline-offset: -2px;
}

.lv-suppr-btn {
  background: #5a7080;
  color: #fff;
  border: 1px solid #3a5060;
  padding: 3px 9px;
  cursor: pointer;
  font-size: 0.82rem;
  white-space: nowrap;
  font-family: var(--font-ui);
}

.lv-suppr-btn:hover {
  background: #c0392b;
  border-color: #8b0808;
}

/* sidebar buttons */
.lv-sidebar {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: #d0dce8;
  border-left: 1px solid #a0b8c8;
}

.lv-sb-btn {
  width: 100%;
  height: 44px;
  border: 1px solid #3a6070;
  background: #4a7085;
  color: #e8f4ff;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.82rem, 1vw, 1.1rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lv-sb-btn:hover {
  background: #5a8095;
}

.lv-sb-close {
  background: #383838;
  border-color: #222;
}

.lv-sb-close:hover {
  background: #c0392b;
  border-color: #8b0808;
}

/* bottom detail section */
.lv-bottom-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.lv-bottom-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
}

#lv-detail-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

#lv-detail-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #2a5068;
  color: #e0f0fa;
  border: 1px solid #1a3a50;
  padding: 6px 6px;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.25vw, 1.6rem);
  text-align: left;
  white-space: nowrap;
}

#lv-detail-table tbody td {
  border: 1px solid #b8cad8;
  padding: 5px 6px;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
}

#lv-detail-table tbody td.lv-num {
  text-align: right;
}

#lv-detail-table tbody tr:nth-child(odd) {
  background: #daeef6;
}

#lv-detail-table tbody tr:nth-child(even) {
  background: #eaf6fb;
}

.lv-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  background: #f4f6f8;
  border-top: 2px solid #8a9aaa;
  font-size: clamp(0.9rem, 1.3vw, 1.5rem);
  font-weight: 700;
  flex-shrink: 0;
}

.lv-total-label {
  color: #1a2a3a;
  letter-spacing: 0.05em;
}

#lv-detail-total {
  color: #0a3a5a;
  font-size: clamp(1rem, 1.5vw, 1.8rem);
}

/* ===== REIMPRESSION FACTURES MODAL ===== */
.reimp-modal-wrapper {
  backdrop-filter: blur(4px);
}

.reimp-modal-wrapper::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.reimp-container {
  width: 100%;
  max-width: 900px;
  background: #e8eef5;
  border: 2px solid #305f86;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reimp-title {
  font-size: 1.6rem;
  color: #03131b;
  margin: 0;
  text-align: center;
}

.reimp-client-select {
  display: flex;
  align-items: center;
  gap: 15px;
}

.reimp-client-select label {
  font-weight: 600;
  color: #0a0f1d;
  min-width: 150px;
}

.reimp-client-select select {
  flex: 1;
  padding: 10px;
  border: 1px solid #305f86;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: var(--font-ui);
  background: white;
  color: #0a0f1d;
}

.reimp-client-select select:focus {
  outline: none;
  border-color: #04c8d8;
  box-shadow: 0 0 8px rgba(4, 200, 216, 0.3);
}

.reimp-tickets-wrap {
  border: 1px solid #c4cad8;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

#reimp-tickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#reimp-tickets-table thead {
  background: #305f86;
  color: #f3f5f8;
  position: sticky;
  top: 0;
}

#reimp-tickets-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #03131b;
}

#reimp-tickets-table td {
  padding: 12px;
  border-bottom: 1px solid #d0d0d3;
}

#reimp-tickets-table tbody tr {
  background: #d0d0d3;
}

#reimp-tickets-table tbody tr:hover {
  background: #c4cad8;
}

.reimp-action-btn {
  padding: 6px 12px;
  background: #04c8d8;
  color: #03131b;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.reimp-action-btn:hover {
  background: #00a8b8;
  color: #f3f5f8;
}

.reimp-detail-section {
  border: 2px solid #305f86;
  border-radius: 6px;
  padding: 15px;
  background: #f3f5f8;
}

.reimp-detail-section h3 {
  margin: 0 0 12px;
  color: #305f86;
  font-size: 1.1rem;
}

#reimp-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-size: 0.9rem;
}

#reimp-detail-table thead {
  background: #c4cad8;
  border-bottom: 2px solid #305f86;
}

#reimp-detail-table th {
  padding: 8px;
  text-align: left;
  font-weight: 600;
}

#reimp-detail-table td {
  padding: 8px;
  border-bottom: 1px solid #d0d0d3;
}

.reimp-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
  padding: 12px;
  background: white;
  border: 1px solid #c4cad8;
  border-radius: 4px;
}

.reimp-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  color: #0a0f1d;
}

.reimp-total-row strong {
  font-weight: 700;
  font-size: 1rem;
}

.reimp-total-row.reimp-apayer {
  background: #305f86;
  color: #f3f5f8;
  padding: 12px;
  border-radius: 4px;
  font-size: 1.1rem;
}

.reimp-total-row.reimp-apayer strong {
  font-size: 1.3rem;
}

.reimp-print-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.reimp-btn-primary {
  padding: 10px 20px;
  background: #04c8d8;
  color: #03131b;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.reimp-btn-primary:hover {
  background: #00a8b8;
  color: #f3f5f8;
  box-shadow: 0 4px 12px rgba(4, 200, 216, 0.4);
}

.reimp-btn-secondary {
  padding: 10px 20px;
  background: #8a8a8d;
  color: #f3f5f8;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.reimp-btn-secondary:hover {
  background: #aaaaad;
}

.reimp-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  border-top: 1px solid #c4cad8;
  padding-top: 15px;
}

/* ========== ENCAISSEMENT AVANCÉ ========== */

.enc-modal-wrapper {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.enc-modal-wrapper::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.enc-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(130px, 20vh) auto;
  height: 100%;
  background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
  padding: 0;
  gap: 0;
}

.enc-title {
  margin: 0;
  padding: 12px 18px;
  background: linear-gradient(135deg, #1a5f7a 0%, #0d8ba8 100%);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.enc-top-section {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid #04c8d8;
  padding: 8px;
}

.enc-clients-panel {
  background: #fff;
  border: 1px solid #c9d8e4;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(9, 27, 43, 0.07);
}

.enc-clients-panel h3 {
  margin: 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, #0d8ba8 0%, #048fa3 100%);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  border-bottom: 1px solid #04c8d8;
  letter-spacing: 0.3px;
}

.enc-search-wrap {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background: #f9fafb;
}

.enc-search-wrap input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #04c8d8;
  border-radius: 8px;
  font-size: 0.88rem;
  background: #fff;
  color: #333;
  transition: all 0.3s;
}

.enc-search-wrap input:focus {
  outline: none;
  border-color: #0d8ba8;
  box-shadow: 0 0 8px rgba(4, 200, 216, 0.3);
  background: #f0f9fa;
}

.enc-clients-list {
  flex: 1;
  overflow-y: auto;
}

.enc-clients-list::-webkit-scrollbar {
  width: 8px;
}

.enc-clients-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.enc-clients-list::-webkit-scrollbar-thumb {
  background: #04c8d8;
  border-radius: 4px;
}

.enc-clients-list::-webkit-scrollbar-thumb:hover {
  background: #0d8ba8;
}

.enc-client-item {
  padding: 8px 10px;
  border-bottom: 1px solid #e8f0f2;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.enc-client-item:hover {
  background: linear-gradient(90deg, #e0f7fb 0%, #f0fafb 100%);
  border-left: 4px solid #04c8d8;
  padding-left: 10px;
}

.enc-client-item.active {
  background: linear-gradient(90deg, #04c8d8 0%, #0d8ba8 100%);
  border-left: 4px solid #fff;
  padding-left: 10px;
  color: #fff;
}

.enc-client-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.enc-client-label {
  font-weight: 700;
  color: #1a5f7a;
  font-size: 0.88rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enc-client-item:hover .enc-client-label {
  color: #0d8ba8;
}

.enc-client-item.active .enc-client-label {
  color: #fff;
}

.enc-client-due {
  color: #d9534f;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.enc-client-item.active .enc-client-due {
  color: #fff;
}

.enc-no-results {
  text-align: center;
  color: #999;
  padding: 30px 10px;
  font-style: italic;
}

.enc-details-panel {
  background: #fff;
  display: grid;
  grid-template-rows: auto auto minmax(0, 45fr) minmax(0, 35fr);
  gap: 8px;
  overflow: hidden;
  min-height: 0;
  border: 1px solid #d2dee9;
  border-radius: 10px;
  padding: 8px;
}

.enc-client-header {
  padding: 8px 10px;
  background: linear-gradient(135deg, #e0f7fb 0%, #b3e5fc 100%);
  border: 1px solid #cfe3f1;
  border-radius: 8px;
}

.enc-client-header h3 {
  margin: 0;
  color: #0d8ba8;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.enc-totals-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0;
  background: linear-gradient(135deg, #f5fafb 0%, #f0f9fa 100%);
  border: none;
}

.enc-total-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 8px;
  background: #fff;
  border: 1px solid #d4dde8;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.enc-total-item:hover {
  border-color: #04c8d8;
  box-shadow: 0 4px 12px rgba(4, 200, 216, 0.2);
}

.enc-total-item span {
  font-size: 0.72rem;
  color: #666;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.enc-total-item strong {
  font-size: 1rem;
  color: #1a5f7a;
  font-weight: 700;
}

.enc-total-item.enc-solde strong {
  color: #d9534f;
  font-size: 1.05rem;
}

.enc-history-wrap {
  overflow: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #d7e3ee;
  border-radius: 8px;
  min-height: 0;
}

.enc-history-wrap h4 {
  margin: 0 0 8px;
  color: #0d8ba8;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.enc-history-head-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.enc-history-head-tools h4 {
  margin: 0;
}

.enc-history-tools {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.enc-btn-mini-select {
  border: 1px solid #2f6f97;
  background: linear-gradient(180deg, #f0f7ff, #dbeeff);
  color: #104668;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.enc-btn-mini-select:hover {
  filter: brightness(0.97);
}

#enc-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#enc-history-table thead th {
  background: linear-gradient(135deg, #0d8ba8 0%, #048fa3 100%);
  color: #fff;
  padding: 8px 9px;
  text-align: left;
  border: 1px solid #04c8d8;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

#enc-history-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.2s;
}

#enc-history-table tbody tr:nth-child(odd) {
  background: #f8fafb;
}

#enc-history-table tbody tr:nth-child(even) {
  background: #fff;
}

#enc-history-table tbody tr:hover {
  background: #e0f7fb;
  cursor: pointer;
}

#enc-history-table tbody td {
  padding: 7px 9px;
  border: 1px solid #e8e8e8;
  line-height: 1.15;
}

#enc-history-table .enc-invoice-select,
#fcp-history-table .fcp-invoice-select {
  transform: scale(1.18);
  cursor: pointer;
}

#enc-history-table td:first-child,
#enc-history-table th:first-child,
#fcp-history-table td:nth-child(10),
#fcp-history-table th:nth-child(10) {
  text-align: center;
  width: 58px;
}

.enc-reste {
  font-weight: 700;
  color: #d9534f;
}

.enc-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.enc-status-paid {
  background: #e6f7ee;
  color: #1d7f49;
}

.enc-status-partial {
  background: #fff2df;
  color: #ad6a08;
}

.enc-status-unpaid {
  background: #ffe7e7;
  color: #c4383d;
}

.enc-action-btn {
  border: 1px solid #2b7aa7;
  background: linear-gradient(180deg, #edf7ff, #d4ecff);
  color: #0e4f73;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

#enc-payment-history-modal.enc-payhist-modal {
  width: min(1000px, 94vw);
  height: min(78vh, 760px);
  border: none;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

#enc-payment-history-modal .enc-payhist-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  background: linear-gradient(180deg, #f6fbff 0%, #edf5fc 100%);
  border: 1px solid #c8d9ea;
}

#enc-payment-history-modal .enc-payhist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(130deg, #0f3653, #11658f);
  color: #f5fbff;
}

#enc-payment-history-modal .enc-payhist-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

#enc-payment-history-modal .enc-payhist-head p {
  margin: 2px 0 0;
  color: #cde6f8;
  font-size: 0.82rem;
}

#enc-payment-history-modal .enc-payhist-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #eaf3fb;
  border-bottom: 1px solid #d2e2f1;
}

#enc-payment-history-modal .enc-payhist-kpi span {
  color: #3d5f7e;
  font-size: 0.8rem;
  font-weight: 700;
}

#enc-payment-history-modal .enc-payhist-kpi strong {
  color: #0d4f74;
  font-size: 0.95rem;
}

#enc-payment-history-modal .enc-payhist-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 8px;
  padding: 8px 12px;
  background: #f4f8fc;
  border-bottom: 1px solid #d2e2f1;
}

#enc-payment-history-modal .enc-payhist-filters label {
  display: grid;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #335978;
}

#enc-payment-history-modal .enc-payhist-filters input,
#enc-payment-history-modal .enc-payhist-filters select {
  border: 1px solid #bfd4e7;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.payment-detail-body {
  padding: 14px;
  overflow: auto;
  line-height: 1.45;
  color: #18354b;
}

.payment-detail-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 10px;
  background: #fff;
  border: 1px solid #d9e7f3;
  border-radius: 10px;
  padding: 10px;
}

.payment-detail-grid .label {
  font-weight: 700;
  color: #295273;
}

.payment-detail-note {
  margin-top: 12px;
  background: #f7fbff;
  border: 1px solid #d8e9f8;
  border-radius: 10px;
  padding: 10px;
  white-space: pre-wrap;
}

#enc-payment-history-modal .enc-payhist-table-wrap {
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

#enc-payhist-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #d8e4f0;
  border-radius: 10px;
  overflow: hidden;
}

#enc-payhist-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #1a5f86 0%, #2177a8 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #3f86b0;
}

#enc-payhist-table tbody td {
  padding: 7px 10px;
  font-size: 0.82rem;
  border: 1px solid #e4edf5;
  color: #18354b;
}

#enc-payhist-table tbody tr:nth-child(odd) {
  background: #f8fbff;
}

#enc-payhist-table tbody tr:hover {
  background: #e8f4ff;
}

.enc-row-selected {
  background: #d8efff !important;
  box-shadow: inset 3px 0 0 #0e82bc;
}

.enc-line-detail {
  margin-top: 0;
  padding: 8px;
  background: #f9fafb;
  border: 1px solid #04c8d8;
  border-radius: 8px;
  overflow: auto;
  min-height: 0;
}

.enc-line-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.enc-line-detail h4 {
  margin: 0;
  color: #0d8ba8;
  font-size: 0.86rem;
  font-weight: 700;
}

#enc-line-detail-summary {
  color: #3f6988;
  font-size: 0.76rem;
  font-weight: 700;
}

#enc-line-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

#enc-line-detail-table thead th {
  background: #0d8ba8;
  color: #fff;
  padding: 7px 8px;
  text-align: left;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

#enc-line-detail-table tbody tr:nth-child(odd) {
  background: #f0fafb;
}

#enc-line-detail-table tbody tr:nth-child(even) {
  background: #fff;
}

#enc-line-detail-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #e0e0e0;
}

.enc-payment-section {
  background: #fff;
  border-top: 1px solid #04c8d8;
  padding: 8px 12px;
  max-height: none;
  overflow: auto;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.enc-payment-section h3 {
  margin: 0 0 8px;
  color: #0d8ba8;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.enc-payment-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

#enc-selected-total,
#fcp-selected-total {
  background: #eef6ff;
  border: 1px solid #9ec3e6;
  font-weight: 700;
  color: #0f4f7d;
}

.enc-form-group {
  display: flex;
  flex-direction: column;
}

.enc-form-group label {
  font-weight: 700;
  margin-bottom: 4px;
  color: #1a5f7a;
  font-size: 0.78rem;
  letter-spacing: 0.2px;
}

.enc-form-group input,
.enc-form-group select,
.enc-form-group textarea {
  padding: 7px 9px;
  border: 1px solid #ddd;
  border-radius: 7px;
  font-size: 0.82rem;
  font-family: inherit;
  background: #fff;
  color: #333;
  transition: all 0.3s;
}

.enc-form-group input:focus,
.enc-form-group select:focus,
.enc-form-group textarea:focus {
  outline: none;
  border-color: #04c8d8;
  box-shadow: 0 0 8px rgba(4, 200, 216, 0.3);
  background: #f0f9fa;
}

.enc-form-group textarea {
  grid-column: auto;
  resize: vertical;
  min-height: 38px;
}

.enc-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f5fafb 0%, #f0f9fa 100%);
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.enc-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  transition: all 0.3s;
  letter-spacing: 0.3px;
  min-width: 118px;
  text-align: center;
}

.enc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.enc-btn:active {
  transform: translateY(0);
}

.enc-btn-success {
  background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%);
  color: #fff;
  border: 2px solid #3d8b3d;
}

.enc-btn-success:hover {
  background: linear-gradient(135deg, #4cae4c 0%, #3d8b3d 100%);
}

.enc-btn-info {
  background: linear-gradient(135deg, #04c8d8 0%, #0d8ba8 100%);
  color: #fff;
  border: 2px solid #048fa3;
}

.enc-btn-info:hover {
  background: linear-gradient(135deg, #0d8ba8 0%, #048fa3 100%);
}

.enc-btn-secondary {
  background: linear-gradient(135deg, #888 0%, #777 100%);
  color: #fff;
  border: 2px solid #666;
}

.enc-btn-secondary:hover {
  background: linear-gradient(135deg, #777 0%, #666 100%);
}

.fcp-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 20px 0;
  background: #fff;
}

.fcp-info-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: linear-gradient(135deg, #f5fafb 0%, #fff 100%);
}

.fcp-info-card span {
  font-size: 0.8rem;
  color: #666;
  font-weight: 600;
}

.fcp-info-card strong {
  font-size: 1rem;
  color: #1a5f7a;
}

.fcp-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px 0;
  background: #fff;
}

.fcp-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a5f7a;
}

.fcp-filter-bar input,
.fcp-filter-bar select {
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  background: #fff;
  color: #333;
}

#fcp-history-table,
#fcp-detail-items-table,
#fcp-detail-payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#fcp-history-table thead th,
#fcp-detail-items-table thead th,
#fcp-detail-payments-table thead th {
  background: linear-gradient(135deg, #0d8ba8 0%, #048fa3 100%);
  color: #fff;
  padding: 12px;
  text-align: left;
  border: 1px solid #04c8d8;
  font-weight: 700;
  letter-spacing: 0.3px;
}

#fcp-history-table tbody tr,
#fcp-detail-items-table tbody tr,
#fcp-detail-payments-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.2s;
}

#fcp-history-table tbody tr:nth-child(odd),
#fcp-detail-items-table tbody tr:nth-child(odd),
#fcp-detail-payments-table tbody tr:nth-child(odd) {
  background: #f8fafb;
}

#fcp-history-table tbody tr:nth-child(even),
#fcp-detail-items-table tbody tr:nth-child(even),
#fcp-detail-payments-table tbody tr:nth-child(even) {
  background: #fff;
}

#fcp-history-table tbody tr:hover,
#fcp-detail-items-table tbody tr:hover,
#fcp-detail-payments-table tbody tr:hover {
  background: #e0f7fb;
  cursor: pointer;
}

#fcp-history-table tbody td,
#fcp-detail-items-table tbody td,
#fcp-detail-payments-table tbody td {
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
}

.fcp-detail-number {
  margin: 4px 0 10px;
  color: #1a5f7a;
  font-weight: 700;
}

.fcp-detail-total {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a5f7a;
}

@media (max-width: 1200px) {
  .fcp-info-grid,
  .fcp-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .fcp-info-grid,
  .fcp-filter-bar {
    grid-template-columns: 1fr;
  }
}

#fcp-modal.fcp-modal-shell {
  width: min(98vw, 1880px);
  height: min(96vh, 1240px);
  padding: 0;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 30px 80px rgba(8, 20, 38, 0.45);
}

#fcp-modal .fcp-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  height: 100%;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 28%),
    linear-gradient(180deg, #f6f9fc 0%, #eef4f9 100%);
}

#fcp-modal .fcp-header-bar {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2.5fr);
  gap: 8px;
  align-items: stretch;
  padding: 8px 12px;
  background: linear-gradient(135deg, #0f2740 0%, #114f78 55%, #1f6f8b 100%);
  color: #fff;
}

#fcp-modal .fcp-header-title-wrap {
  display: grid;
  gap: 6px;
  align-content: start;
}

#fcp-modal .fcp-module-title {
  font-family: "Segoe UI", var(--font-ui);
  font-size: clamp(0.9rem, 0.95vw, 1.06rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.92;
}

#fcp-modal .fcp-client-header-modern {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#fcp-modal .fcp-client-header-modern h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.02rem, 1.1vw, 1.26rem);
  font-weight: 800;
}

#fcp-modal .fcp-header-subtitle {
  color: rgba(233, 244, 255, 0.84);
  font-size: 0.74rem;
}

#fcp-modal .fcp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
}

#fcp-modal .fcp-kpi-card {
  align-items: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(242, 247, 251, 0.98));
  box-shadow: 0 12px 24px rgba(8, 21, 36, 0.18);
}

#fcp-modal .fcp-kpi-card span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4d6178;
  font-size: 0.7rem;
  font-weight: 700;
}

#fcp-modal .fcp-kpi-card strong {
  color: #12344d;
  font-size: clamp(0.86rem, 0.88vw, 1.06rem);
  line-height: 1.15;
}

#fcp-modal .fcp-kpi-danger strong {
  color: #c12f3c;
}

#fcp-modal .fcp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets", sans-serif;
  font-style: normal;
  font-size: 0.95rem;
}

#fcp-modal .fcp-top-section {
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-areas: "sidebar workspace";
  gap: 10px;
  padding: 8px 12px 4px;
  border: none;
  background: transparent;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

#fcp-modal .fcp-workspace {
  grid-area: workspace;
}

#fcp-modal .fcp-sidebar {
  grid-area: sidebar;
}

#fcp-modal .fcp-sidebar {
  border: 1px solid #d7e1eb;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfefe, #f4f8fc);
  box-shadow: 0 12px 28px rgba(15, 35, 56, 0.08);
  align-self: start;
  max-width: none;
}

#fcp-modal .fcp-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
}

#fcp-modal .fcp-sidebar h3 {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: #12344d;
  font-size: 0.92rem;
}

#fcp-modal .fcp-sidebar-pill {
  padding: 3px 8px;
  border-radius: 999px;
  background: #deedf8;
  color: #205a89;
  font-size: 0.68rem;
  font-weight: 700;
}

#fcp-modal .fcp-supplier-search {
  padding: 0 10px 8px;
  background: transparent;
  border: none;
}

#fcp-modal .fcp-supplier-search input,
#fcp-modal .fcp-toolbar input,
#fcp-modal .fcp-toolbar select,
#fcp-modal .fcp-payment-form-modern input,
#fcp-modal .fcp-payment-form-modern select,
#fcp-modal .fcp-payment-form-modern textarea {
  border: 1px solid #cfd8e3;
  border-radius: 10px;
  background: #fff;
  min-height: 38px;
  box-shadow: inset 0 1px 1px rgba(14, 28, 47, 0.02);
}

#fcp-modal .fcp-supplier-search input:focus,
#fcp-modal .fcp-toolbar input:focus,
#fcp-modal .fcp-toolbar select:focus,
#fcp-modal .fcp-payment-form-modern input:focus,
#fcp-modal .fcp-payment-form-modern select:focus,
#fcp-modal .fcp-payment-form-modern textarea:focus {
  border-color: #2784c7;
  box-shadow: 0 0 0 4px rgba(39, 132, 199, 0.12);
  background: #fff;
}

#fcp-modal .fcp-suppliers-list-modern {
  padding: 0 8px 8px;
}

#fcp-modal .enc-client-item {
  margin-bottom: 6px;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
}

#fcp-modal .enc-client-item:hover {
  border-left: 1px solid transparent;
  padding-left: 14px;
  border-color: #b9d8ef;
  background: linear-gradient(90deg, #f7fbff 0%, #eef7ff 100%);
}

#fcp-modal .enc-client-item.active {
  border-left: 1px solid transparent;
  padding-left: 14px;
  border-color: #0f5f93;
  background: linear-gradient(135deg, #155e91 0%, #0b7fa0 100%);
  box-shadow: 0 12px 22px rgba(13, 76, 110, 0.25);
}

#fcp-modal .fcp-supplier-icon {
  width: 18px;
  height: 18px;
  color: #2784c7;
}

#fcp-modal .enc-client-item.active .fcp-supplier-icon,
#fcp-modal .enc-client-item.active .enc-client-due,
#fcp-modal .enc-client-item.active .enc-client-label {
  color: #fff;
}

#fcp-modal .fcp-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding-bottom: 2px;
  background: transparent;
}

#fcp-modal .fcp-meta-grid,
#fcp-modal .fcp-history-panel,
#fcp-modal .fcp-payment-card {
  border: 1px solid #d8e1eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(14, 31, 53, 0.08);
}

#fcp-modal .fcp-meta-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 14px;
}

#fcp-modal .fcp-info-card {
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

#fcp-modal .fcp-toolbar {
  grid-template-columns: minmax(190px, 1.45fr) repeat(4, minmax(130px, 0.9fr)) minmax(290px, auto);
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d8e1eb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 16px rgba(14, 31, 53, 0.05);
}

#fcp-modal .fcp-toolbar label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #2f556f;
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 0;
}

#fcp-modal .fcp-toolbar input[type="date"] {
  min-width: 130px;
  padding-right: 34px;
}

#fcp-modal .fcp-toolbar input[type="search"] {
  min-width: 180px;
}

#fcp-modal .fcp-inline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#fcp-modal .fcp-inline-actions .enc-btn {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 12px;
}

#fcp-modal .fcp-export-actions .enc-btn {
  min-width: 98px;
}

#fcp-modal .fcp-export-actions:empty {
  display: none;
}

#fcp-modal .fcp-history-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  padding: 8px;
  border-radius: 12px;
}

#fcp-modal .fcp-section-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

#fcp-modal .fcp-section-head h4 {
  margin: 0;
  color: #12344d;
  font-size: 0.92rem;
}

#fcp-modal .fcp-summary-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #607487;
  font-size: 0.72rem;
  justify-content: flex-end;
  margin-left: auto;
}

#fcp-modal .fcp-summary-strip strong {
  color: #12344d;
}

#fcp-modal .fcp-table-wrap {
  overflow: auto;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  min-height: 0;
  height: 100%;
}

#fcp-modal #fcp-history-table,
#fcp-modal #fcp-detail-items-table,
#fcp-modal #fcp-detail-payments-table {
  min-width: 100%;
  background: #fff;
  box-shadow: none;
}

#fcp-modal #fcp-history-table thead th,
#fcp-modal #fcp-detail-items-table thead th,
#fcp-modal #fcp-detail-payments-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-color: #2c7198;
  background: linear-gradient(180deg, #133f60 0%, #176b8f 100%);
  font-family: "Segoe UI", var(--font-ui);
  font-size: 0.84rem;
  line-height: 1.05;
}

#fcp-modal #fcp-history-table thead th[data-sort] {
  cursor: pointer;
}

#fcp-modal #fcp-history-table tbody td,
#fcp-modal #fcp-detail-items-table tbody td,
#fcp-modal #fcp-detail-payments-table tbody td {
  padding: 7px 10px;
  border-color: #e7edf3;
  font-size: 0.84rem;
  line-height: 1.05;
}

#fcp-modal #fcp-history-table tbody tr:nth-child(odd),
#fcp-modal #fcp-detail-items-table tbody tr:nth-child(odd),
#fcp-modal #fcp-detail-payments-table tbody tr:nth-child(odd) {
  background: #fbfdff;
}

#fcp-modal #fcp-history-table tbody tr:nth-child(even),
#fcp-modal #fcp-detail-items-table tbody tr:nth-child(even),
#fcp-modal #fcp-detail-payments-table tbody tr:nth-child(even) {
  background: #f5f9fd;
}

#fcp-modal #fcp-history-table tbody tr:hover {
  background: #eaf4fd;
}

#fcp-modal #fcp-history-table tbody tr.fcp-row-selected {
  background: #dbeeff;
  box-shadow: inset 4px 0 0 #2174a3;
}

#fcp-modal .fcp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

#fcp-modal .fcp-history-action {
  text-align: center;
  white-space: nowrap;
}

#fcp-modal .fcp-delete-entry-btn {
  border: 1px solid #a94444;
  background: linear-gradient(180deg, #c95b5b 0%, #a63f3f 100%);
  color: #fff5f5;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

#fcp-modal .fcp-delete-entry-btn:hover {
  filter: brightness(1.05);
}

#fcp-modal .fcp-status-paid {
  background: #e6f7ee;
  color: #1d7f49;
}

#fcp-modal .fcp-status-partial {
  background: #fff2df;
  color: #ad6a08;
}

#fcp-modal .fcp-status-unpaid {
  background: #ffe7e7;
  color: #c4383d;
}

#fcp-modal .fcp-status-late {
  background: #6e1320;
  color: #fff0f0;
}

#fcp-modal .fcp-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

#fcp-modal .fcp-pagination-left label,
#fcp-modal .fcp-pagination-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a6078;
  font-size: 0.8rem;
  font-weight: 700;
}

#fcp-modal .fcp-pagination-left select {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
}

#fcp-modal .fcp-pagination-right .enc-btn {
  min-width: 86px;
  min-height: 34px;
  padding: 6px 10px;
}

#fcp-modal .enc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#fcp-modal .fcp-detail-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  width: min(1180px, calc(100vw - 90px));
  max-height: min(82vh, 980px);
  margin: 0;
  padding: 18px;
  border: 1px solid #cfe0ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7fbfe);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 100vmax rgba(7, 18, 31, 0.46),
    0 28px 90px rgba(8, 20, 37, 0.32);
  overflow: auto;
}

#fcp-modal .fcp-detail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#fcp-modal .fcp-detail-head h4 {
  margin: 0;
}

#fcp-modal .fcp-detail-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

#fcp-modal .fcp-detail-card {
  padding: 12px;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  background: #fff;
  overflow: auto;
}

#fcp-modal .fcp-detail-card h5 {
  margin: 0 0 10px;
  color: #12344d;
  font-size: 0.95rem;
}

#fcp-modal .fcp-detail-total {
  display: inline-flex;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #eef5fb;
  color: #12344d;
}

#fcp-modal .fcp-payment-card {
  margin: 2px 16px 0;
  padding: 8px 10px;
  border-top: none;
  max-height: 128px;
  overflow: auto;
}

#fcp-modal .fcp-payment-head {
  margin-bottom: 4px;
}

#fcp-modal .fcp-payment-head h3 {
  margin: 0 0 2px;
  color: #12344d;
  font-size: 0.94rem;
}

#fcp-modal .fcp-payment-head p {
  margin: 0;
  color: #667b8f;
  font-size: 0.72rem;
}

#fcp-modal .fcp-payment-form-modern {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

#fcp-modal .fcp-payment-form-modern .enc-form-group:last-child {
  grid-column: span 2;
}

#fcp-modal .fcp-payment-form-modern textarea {
  min-height: 38px;
  padding-top: 8px;
}

#fcp-modal .fcp-footer-modern {
  padding: 2px 18px 6px;
  background: transparent;
  border-top: none;
  justify-content: flex-end;
  gap: 8px;
}

#fcp-modal .fcp-footer-modern .enc-btn {
  min-width: 150px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 12px;
}

@media (max-width: 1600px) {
  #fcp-modal .fcp-kpi-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  #fcp-modal .fcp-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #fcp-modal .fcp-toolbar {
    grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(118px, 0.85fr)) minmax(280px, auto);
  }

  #fcp-modal .fcp-inline-actions,
  #fcp-modal .fcp-export-actions {
    grid-column: auto;
  }

  #fcp-modal .fcp-payment-form-modern {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  #fcp-modal .fcp-header-bar,
  #fcp-modal .fcp-top-section {
    grid-template-columns: 1fr;
  }

  #fcp-modal .fcp-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #fcp-modal .fcp-detail-grid {
    grid-template-columns: 1fr;
  }

  #fcp-modal .fcp-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #fcp-modal .fcp-inline-actions {
    grid-column: span 3;
  }
}

@media (max-width: 960px) {
  #fcp-modal.fcp-modal-shell {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  #fcp-modal .fcp-top-section {
    padding: 14px;
  }

  #fcp-modal .fcp-payment-card {
    max-height: none;
    overflow: visible;
  }

  #fcp-modal .fcp-kpi-grid,
  #fcp-modal .fcp-meta-grid,
  #fcp-modal .fcp-toolbar,
  #fcp-modal .fcp-payment-form-modern {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #fcp-modal .fcp-summary-strip,
  #fcp-modal .fcp-pagination-bar,
  #fcp-modal .fcp-footer-modern {
    flex-direction: column;
    align-items: stretch;
  }

  #fcp-modal .fcp-pagination-right {
    justify-content: space-between;
  }

  #fcp-modal .fcp-detail-sheet {
    width: calc(100vw - 28px);
    max-height: 88vh;
    padding: 14px;
  }
}

@media (max-width: 640px) {
  #fcp-modal .fcp-kpi-grid,
  #fcp-modal .fcp-meta-grid,
  #fcp-modal .fcp-toolbar,
  #fcp-modal .fcp-payment-form-modern {
    grid-template-columns: 1fr;
  }

  #fcp-modal .fcp-footer-modern .enc-btn,
  #fcp-modal .fcp-inline-actions .enc-btn,
  #fcp-modal .fcp-pagination-right .enc-btn {
    width: 100%;
  }
}

@media (max-width: 1365px) {
  .sysbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .menu-lite button {
    font-size: 0.86rem;
  }

  .tab,
  .tool-btn {
    min-height: 44px;
  }
}

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

  .icon-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding-top: 0;
  }

  .rail-card,
  .rail-collapse-toggle {
    width: 100%;
    min-height: 64px;
  }

  .tabs,
  .actions {
    justify-content: stretch;
  }

  .tab,
  .tool-btn {
    flex: 1 1 180px;
    max-width: none;
  }

  .grid-head-tools {
    width: 100%;
  }

  #stock-family-filter,
  #quick-search {
    width: 100%;
    min-width: 0;
  }

  .vente-shell,
  .enc-top-section,
  #fcp-modal .fcp-header-bar,
  #fcp-modal .fcp-top-section {
    grid-template-columns: 1fr;
  }

  .enc-container {
    grid-template-rows: auto minmax(0, 1fr) minmax(160px, 24vh) auto;
  }

  .enc-details-panel {
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.85fr);
  }

  .enc-payment-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enc-form-group textarea {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .sysbar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "toggle user date"
      "menu menu menu";
    align-items: start;
    row-gap: 8px;
  }

  .menu-compact-toggle {
    display: inline-flex;
    grid-area: toggle;
  }

  .menu-lite {
    grid-area: menu;
    display: none;
    width: 100%;
    padding: 8px 0 2px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .sysbar.is-menu-open .menu-lite {
    display: flex;
  }

  .user-info-bar {
    grid-area: user;
    justify-content: flex-end;
  }

  .header-datetime {
    grid-area: date;
    min-width: 0;
    width: 100%;
  }

  .shell {
    padding: 8px;
    gap: 8px;
  }

  .icon-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab,
  .tool-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    width: 100%;
    font-size: 0.9rem;
    padding-inline: 10px;
  }

  .grid-head {
    padding: 8px;
  }

  .grid-head h1 {
    font-size: 1.5rem;
  }

  table,
  #vente-ticket-table,
  #appro-table,
  #appro-catalog-table,
  #inv-table,
  #lv-ventes-table,
  #lcli-table,
  #fam-table,
  #enc-history-table,
  #enc-line-detail-table,
  #fcp-history-table,
  #fcp-detail-items-table,
  #fcp-detail-payments-table {
    min-width: 0;
    table-layout: fixed;
  }

  thead th,
  tbody td {
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 7px 6px;
  }

  .grid-wrap,
  .vente-ticket-wrap,
  .appro-table-wrap,
  .appro-catalog-wrap,
  .inv-table-wrap,
  .lv-top-wrap,
  .lcli-table-wrap,
  .fam-table-wrap,
  .enc-history-wrap,
  .enc-line-detail,
  .fcp-table-wrap,
  .fcp-detail-card {
    max-width: 100%;
    overflow: auto;
  }

  .vente-shell {
    min-height: calc(100vh - 16px);
  }

  .vente-left {
    grid-template-rows: minmax(240px, 1fr) auto auto auto;
  }

  .vente-menu-grid,
  .enc-payment-form,
  .fcp-payment-form-modern,
  .fcp-toolbar,
  .fcp-meta-grid,
  .fcp-kpi-grid,
  .fcp-info-grid,
  .inv-filters,
  .creation-row-top,
  .creation-row-bottom {
    grid-template-columns: 1fr;
  }

  .enc-container {
    grid-template-rows: auto minmax(0, 1fr) minmax(180px, auto) auto;
  }

  .enc-details-panel {
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 0.9fr);
  }

  #appro-modal,
  #action-modal,
  #familles-modal,
  #inventaire-modal,
  #vente-modal,
  #liste-client-modal,
  #liste-vente-modal,
  #liste-attente-modal,
  #qty-pad-modal,
  #encaissement-modal,
  #fcp-modal,
  #reimpression-modal,
  #annual-result-modal,
  #global-recap-modal,
  #stock-value-modal {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
  }

  .modal-form,
  .action-modal-form,
  .fam-shell,
  .inv-shell,
  .vente-shell,
  .lcli-shell,
  .lv-shell,
  .la-shell,
  .qpad-shell,
  .enc-container,
  .fcp-shell {
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
  }

  .menu-lite button {
    white-space: normal;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .menu-compact-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .icon-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab,
  .tool-btn,
  .fam-actions button,
  .enc-btn,
  .vmenu-btn,
  .vente-btn-fermer {
    min-height: 44px;
  }

  .tab,
  .tool-btn {
    flex-basis: 100%;
  }

  .grid-head h1 {
    font-size: 1.35rem;
  }

  .grid-head-tools {
    grid-template-columns: 1fr;
  }

  th,
  td {
    font-size: 0.78rem;
    padding: 6px 4px;
  }
}

@media (min-width: 1700px) {
  .shell,
  .sysbar {
    max-width: 1920px;
    margin: 0 auto;
  }
}

.history-container {
  width: min(1120px, 96vw);
}

.history-filters {
  grid-template-columns: minmax(260px, 2fr) minmax(190px, 1fr);
}

.history-table-wrap {
  margin-top: 10px;
  max-height: 62vh;
  overflow: auto;
}

#history-table {
  min-width: 100%;
}

#history-table thead th:nth-child(1) {
  width: 190px;
}

#history-table thead th:nth-child(2) {
  width: 130px;
}

#history-table tbody td:nth-child(3) {
  white-space: normal;
}

@media (max-width: 760px) {
  .history-filters {
    grid-template-columns: 1fr;
  }
}

/* ===== Unified Odoo-Like Table Theme (UI only) ===== */
.grid-wrap,
.fam-table-wrap,
.appro-table-wrap,
.appro-catalog-wrap,
.inv-table-wrap,
.annual-table-wrap,
.annual-detail-table-wrap,
.stock-value-table-wrap,
.sv-detail-history,
.enc-history-wrap,
#enc-payment-history-modal .enc-payhist-table-wrap,
.fcp-table-wrap,
.fcp-detail-card,
.lcli-table-wrap,
.la-table-wrap {
  background: var(--odoo-surface) !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(113, 75, 103, 0.08) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

table,
#fcp-history-table,
#fcp-detail-items-table,
#fcp-detail-payments-table,
#enc-history-table,
#enc-payhist-table,
.ph-table {
  background: var(--odoo-surface) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th,
#fcp-history-table thead th,
#fcp-detail-items-table thead th,
#fcp-detail-payments-table thead th,
#enc-history-table thead th,
#enc-payhist-table thead th,
.ph-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 45px;
  background: linear-gradient(180deg, var(--odoo-purple) 0%, #623d5a 100%) !important;
  color: #ffffff !important;
  border-top: 1px solid var(--odoo-purple-light) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid var(--odoo-purple-light) !important;
  padding: 10px 12px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

tbody td,
tfoot th,
#fcp-history-table tbody td,
#fcp-detail-items-table tbody td,
#fcp-detail-payments-table tbody td,
#enc-history-table tbody td,
#enc-payhist-table tbody td,
.ph-table tbody td {
  background: transparent !important;
  border-right: 1px solid var(--odoo-border) !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  padding: 11px 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #1f2937 !important;
}

tbody tr:nth-child(odd),
#fcp-history-table tbody tr:nth-child(odd),
#fcp-detail-items-table tbody tr:nth-child(odd),
#fcp-detail-payments-table tbody tr:nth-child(odd),
#enc-history-table tbody tr:nth-child(odd),
#enc-payhist-table tbody tr:nth-child(odd),
.ph-table tbody tr:nth-child(odd) {
  background: #ffffff !important;
}

tbody tr:nth-child(even),
#fcp-history-table tbody tr:nth-child(even),
#fcp-detail-items-table tbody tr:nth-child(even),
#fcp-detail-payments-table tbody tr:nth-child(even),
#enc-history-table tbody tr:nth-child(even),
#enc-payhist-table tbody tr:nth-child(even),
.ph-table tbody tr:nth-child(even) {
  background: var(--odoo-row-alt) !important;
}

tbody tr:hover,
#fcp-history-table tbody tr:hover,
#fcp-detail-items-table tbody tr:hover,
#fcp-detail-payments-table tbody tr:hover,
#enc-history-table tbody tr:hover,
#enc-payhist-table tbody tr:hover,
.ph-table tbody tr:hover {
  background: var(--odoo-purple-ghost) !important;
  transition: background-color 0.18s ease;
}

tbody tr.selected-row,
#lcli-table tbody tr.lcli-selected,
#la-table tbody tr.la-selected,
.enc-row-selected,
.fcp-row-selected {
  background: rgba(143, 91, 166, 0.24) !important;
  box-shadow: inset 0 0 0 1px rgba(113, 75, 103, 0.34);
}

tbody tr:first-child {
  outline: none !important;
}

tbody td.payment-notification.notif-ok {
  color: #1f7a46 !important;
}

tbody td.payment-notification.notif-late {
  color: #b4232d !important;
}

.grid-panel,
.stock-value-table-card,
.enc-history-wrap,
.fcp-history-panel {
  background: #ffffff !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(113, 75, 103, 0.08) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f2edf7;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5ba6, #714b67);
  border-radius: 999px;
  border: 2px solid #f2edf7;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9963b0, #68445f);
}

@media (max-width: 980px) {
  thead th,
  tbody td,
  tfoot th,
  #fcp-history-table thead th,
  #fcp-detail-items-table thead th,
  #fcp-detail-payments-table thead th,
  #enc-history-table thead th,
  #enc-payhist-table thead th,
  .ph-table thead th,
  .ph-table tbody td {
    font-size: 13px !important;
    padding: 9px 10px !important;
  }
}

.import-modal-wrapper {
  width: min(1120px, 96vw);
  max-width: 96vw;
  height: min(86vh, 820px);
  border: none;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  box-shadow: 0 26px 70px rgba(6, 22, 34, 0.42);
}

.import-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto auto;
  gap: 10px;
  height: 100%;
  padding: 14px;
  background:
    radial-gradient(circle at right top, rgba(19, 108, 159, 0.2), transparent 28%),
    linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
}

.import-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.import-head h3 {
  margin: 0;
  color: #12344d;
  font-size: 1.28rem;
}

.import-head p {
  margin: 4px 0 0;
  color: #45627b;
  font-size: 0.86rem;
}

.import-file-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #cfdae6;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.import-file-meta {
  display: grid;
  gap: 2px;
}

#import-file-name {
  color: #1b405c;
}

#import-file-status {
  color: #4a667f;
  font-size: 0.82rem;
}

.import-summary {
  min-height: 60px;
  padding: 10px;
  border: 1px dashed #b9c9d9;
  border-radius: 12px;
  background: #ffffff;
  font-size: 0.9rem;
  color: #203b53;
  overflow: auto;
}

.import-preview-wrap {
  overflow: auto;
  border: 1px solid #d4dce6;
  border-radius: 12px;
  background: #fff;
}

#import-preview-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

#bulk-edit-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

#import-preview-table th,
#import-preview-table td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  font-size: 0.85rem;
}

#bulk-edit-table th,
#bulk-edit-table td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  font-size: 0.85rem;
}

#import-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #204d6c, #15354b);
  color: #fff;
  font-weight: 700;
}

#bulk-edit-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #204d6c, #15354b);
  color: #fff;
  font-weight: 700;
}

#bulk-edit-table input,
#bulk-edit-table select,
#bulk-edit-search {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
}

#bulk-edit-table input:focus,
#bulk-edit-table select:focus,
#bulk-edit-search:focus {
  outline: none;
  border-color: #2784c7;
  box-shadow: 0 0 0 3px rgba(39, 132, 199, 0.12);
}

#import-preview-body tr:nth-child(even) {
  background: #f7fafc;
}

#import-preview-body .import-row-error {
  background: #fff2f2;
}

#import-preview-body .import-row-duplicate {
  background: #fff9e8;
}

#import-preview-body .import-row-ok {
  background: #f1fbf5;
}

.import-empty {
  text-align: center;
  color: #6a7f93;
}

.import-progress-block {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #c8d8e7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.import-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #194560;
}

#import-progress {
  width: 100%;
  height: 14px;
}

.import-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  #stock-import-modal {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
  }

  .import-shell {
    grid-template-rows: auto auto auto minmax(220px, 1fr) auto auto;
    padding: 10px;
  }

  .import-file-zone {
    flex-direction: column;
    align-items: stretch;
  }

  .import-foot {
    justify-content: stretch;
  }

  .import-foot button {
    flex: 1;
  }
}

/* Les actions restent visibles à côté des articles sur les écrans de travail compacts. */
@media (max-width: 1100px) and (min-width: 761px) {
  #appro-modal,
  .modal-form {
    height: 98vh;
    max-height: 98vh;
  }

  .appro-top {
    grid-template-columns: minmax(0, 1fr) 205px;
  }

  .appro-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .appro-options .appro-filter-title,
  .appro-options > label:last-child {
    grid-column: 1 / -1;
  }

  .appro-main {
    grid-template-columns: minmax(0, 1fr) 154px;
  }

  .creation-row-top {
    grid-template-columns: minmax(90px, 0.9fr) minmax(160px, 2fr) minmax(120px, 1fr) 32px;
  }

  .creation-row-bottom {
    grid-template-columns: minmax(65px, 0.7fr) minmax(85px, 1fr) minmax(85px, 1fr) minmax(100px, 1.1fr) minmax(80px, 0.85fr) 88px;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .appro-top {
    padding: 5px 6px;
  }

  .appro-info-grid input {
    height: 27px;
  }

  .appro-options > label:last-child input {
    height: 24px;
  }

  .appro-side {
    gap: 3px;
    padding: 5px;
  }

  .total-value {
    padding: 5px;
  }

  .print-box {
    padding: 4px;
  }

  .appro-side button {
    height: 28px;
    min-height: 28px;
  }

  .appro-mode-bar {
    min-height: 34px;
  }

  .mode-btn {
    height: 26px;
  }

  .creation-area {
    padding: 4px;
    gap: 4px;
  }

  .creation-row {
    gap: 4px;
  }

  .creation-row input,
  #appro-family-pick,
  .add-btn {
    height: 27px;
  }
}