:root {
  --ink: #172033;
  --muted: #637083;
  --line: #d8dde6;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --table-stripe: #f7f7f7;
  --table-hover: #eef5f4;
  --accent: #1b7f70;
  --accent-dark: #12675b;
  --danger: #b42318;
  --warn: #b86b00;

  /* Theme-selectable colors (see admin "Themes" page), default values match the historical palette */
  --theme-page-bg: #eef3f7;
  --theme-button-bg: #1b7f70;
  --theme-button-bg-hover: #12675b;
  --theme-table-row-odd-bg: #f7f7f7;
  --theme-table-row-even-bg: #ffffff;
  --theme-table-row-section-bg: #f7faf9;
  --theme-menu-bg: #2f424f;
  --field-hover-bg: #eef0f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--theme-page-bg);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Survol des zones de saisie : leger fond grise, sur toutes les pages. */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):not(:disabled):not([readonly]):hover,
select:not(:disabled):not([readonly]):hover,
textarea:not(:disabled):not([readonly]):hover,
[contenteditable="true"]:hover {
  background-color: var(--field-hover-bg) !important;
}

/* Ecran de connexion */
.auth-shell {
  --login-teal: #0e9f8c;
  --login-violet: #6d5dfc;
  --login-pink: #e5395f;
  --login-amber: #ffb547;
  --login-line: #e4e1f2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(14, 159, 140, 0.2), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(109, 93, 252, 0.2), transparent 40%),
    radial-gradient(circle at 82% 88%, rgba(229, 57, 95, 0.14), transparent 42%),
    radial-gradient(circle at 16% 90%, rgba(255, 181, 71, 0.22), transparent 40%),
    #f7f5fd;
}

/* Deux taches de couleur derivent lentement derriere le formulaire. */
.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: auth-drift 18s ease-in-out infinite alternate;
}

.auth-shell::before {
  top: -140px;
  left: -120px;
  background: linear-gradient(135deg, var(--login-teal), var(--login-violet));
}

.auth-shell::after {
  right: -140px;
  bottom: -160px;
  background: linear-gradient(135deg, var(--login-pink), var(--login-amber));
  animation-delay: -9s;
}

@keyframes auth-drift {
  to {
    transform: translate(70px, 50px) scale(1.15);
  }
}

.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(440px, 100%);
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -28px rgba(76, 58, 170, 0.45), 0 2px 8px rgba(23, 32, 51, 0.06);
}

/* Lisere multicolore en haut de la carte. */
.auth-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--login-teal), var(--login-violet), var(--login-pink), var(--login-amber));
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--login-teal) 0%, var(--login-violet) 65%, var(--login-pink) 100%);
  box-shadow: 0 10px 22px -10px rgba(109, 93, 252, 0.8);
  font-size: 20px;
  font-weight: 800;
  transform: rotate(-6deg);
  transition: transform 0.3s ease;
}

.auth-panel:hover .brand-mark {
  transform: rotate(0deg) scale(1.04);
}

.auth-brand-name {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.auth-brand-name strong {
  color: var(--ink);
}

.auth-panel h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  color: #1d1b3a;
  background: linear-gradient(90deg, #1d1b3a 0%, #4b3fc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-lead {
  margin: 8px 0 0;
  color: var(--muted);
}

.dashboard-header h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}

.dashboard-header p {
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.auth-shell .field > span,
.auth-field-label {
  color: #3a3758;
  font-size: 14px;
  font-weight: 600;
}

.auth-shell .field input,
.auth-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--login-line);
  border-radius: 12px;
  background: #fbfaff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-shell .field input:focus,
.auth-input:focus {
  outline: none;
  border-color: var(--login-violet);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(109, 93, 252, 0.16);
}

.auth-input[aria-invalid="true"] {
  border-color: var(--login-pink);
}

.auth-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: #ffc9d3;
  border-radius: 12px;
  color: #b4183f;
  background: #fff1f4;
  animation: auth-shake 0.4s ease;
}

.auth-alert::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--login-pink);
  font-size: 13px;
  font-weight: 800;
}

@keyframes auth-shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Dossier : pastilles des dossiers retenus par le navigateur, ou saisie libre. */
.auth-dossier {
  position: relative;
  display: grid;
  gap: 8px;
}

.auth-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.auth-gear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #aaa6c4;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.4s ease;
}

.auth-gear:hover,
.auth-gear[aria-expanded="true"] {
  color: var(--login-violet);
  background: rgba(109, 93, 252, 0.1);
  transform: rotate(90deg);
}

.auth-gear:focus-visible {
  outline: 2px solid var(--login-violet);
  outline-offset: 2px;
}

.auth-dossiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-chip {
  position: relative;
  cursor: pointer;
}

.auth-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 14px 4px 5px;
  border: 1.5px solid var(--login-line);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.auth-chip:hover .auth-chip-body {
  border-color: #c9c3f3;
  transform: translateY(-1px);
}

.auth-chip input:checked + .auth-chip-body {
  border-color: var(--login-violet);
  background: linear-gradient(135deg, rgba(14, 159, 140, 0.1), rgba(109, 93, 252, 0.13));
  box-shadow: 0 8px 18px -12px rgba(109, 93, 252, 0.9);
}

.auth-chip input:focus-visible + .auth-chip-body {
  outline: 2px solid var(--login-violet);
  outline-offset: 2px;
}

.auth-chip-other .auth-chip-body {
  border-style: dashed;
  color: var(--muted);
}

.auth-chip-other input:checked + .auth-chip-body {
  border-style: solid;
  color: var(--ink);
}

.auth-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.auth-avatar-plus {
  color: var(--login-violet);
  background: #efedfb;
  font-size: 18px;
  font-weight: 600;
}

.auth-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Panneau de la roue crantee : dossiers a oublier. */
.auth-forget {
  position: absolute;
  z-index: 5;
  top: 34px;
  right: 0;
  width: min(300px, 100%);
  padding: 16px;
  border: 1px solid var(--login-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px -18px rgba(29, 27, 58, 0.35);
  animation: auth-pop 0.16s ease-out;
}

@keyframes auth-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

.auth-forget-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.auth-forget-hint {
  margin: 2px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.auth-forget-list {
  display: grid;
  gap: 2px;
  max-height: 240px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.auth-forget-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.auth-forget-item:hover {
  background: #f5f3ff;
}

.auth-forget-item input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--login-pink);
}

.auth-forget-label {
  display: grid;
  font-size: 14px;
  font-weight: 600;
}

.auth-forget-label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.auth-forget-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.auth-text-button,
.auth-forget-button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.auth-text-button {
  color: var(--muted);
  background: transparent;
}

.auth-text-button:hover {
  color: var(--ink);
  background: #f3f2f8;
}

.auth-forget-button {
  color: #fff;
  background: #d62e55;
}

.auth-forget-button:hover:not(:disabled) {
  background: #b8203f;
}

.auth-forget-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(120deg, #0b8073 0%, #5b47e6 55%, #c93f78 100%);
  background-size: 180% 100%;
  box-shadow: 0 14px 28px -14px rgba(91, 71, 230, 0.85);
  font-weight: 700;
  cursor: pointer;
  transition: background-position 0.4s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-submit:hover {
  background-position: 100% 0;
  box-shadow: 0 18px 30px -14px rgba(201, 63, 120, 0.8);
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-submit:focus-visible {
  outline: 3px solid rgba(109, 93, 252, 0.4);
  outline-offset: 3px;
}

.auth-submit svg {
  transition: transform 0.2s ease;
}

.auth-submit:hover svg {
  transform: translateX(3px);
}

@media (max-width: 520px) {
  .auth-shell {
    padding: 16px;
  }

  .auth-shell .auth-panel {
    padding: 32px 22px 26px;
    border-radius: 18px;
  }

  .auth-panel h1 {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell::before,
  .auth-shell::after,
  .auth-alert,
  .auth-forget {
    animation: none;
  }

  .brand-mark,
  .auth-gear,
  .auth-chip-body,
  .auth-submit,
  .auth-submit svg {
    transition: none;
  }
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 14px;
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.field input:focus,
.field select:focus {
  outline: 3px solid rgba(27, 127, 112, 0.18);
  border-color: var(--accent);
}

.primary-button,
.ghost-button {
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
}

.primary-button {
  color: #fff;
  background: var(--theme-button-bg);
}

.primary-button:hover {
  background: var(--theme-button-bg-hover);
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
  text-decoration: none;
}

.ghost-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Un bouton principal desactive garde sa couleur pleine : elle le fait passer
   pour actif alors qu il ne repond pas. Il s eteint comme le bouton discret. */
.primary-button:disabled:hover {
  background: var(--theme-button-bg);
}

.alert {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--danger);
  background: #fff0ee;
  border: 1px solid #ffd2cc;
  font-size: 14px;
}

.dashboard-shell {
  min-height: 100vh;
  padding: 28px;
  background: var(--surface-soft);
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.primary-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--theme-button-bg);
  font-weight: 700;
  text-decoration: none;
}

.primary-link:hover {
  background: var(--theme-button-bg-hover);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-card {
  padding: 20px;
  background: #fff;
  box-shadow: none;
}

.dashboard-card h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.dashboard-card strong {
  display: block;
  font-size: 30px;
}

.dashboard-card span {
  color: var(--muted);
}

.activity-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.activity-item {
  padding: 14px;
  background: #fff;
  box-shadow: none;
}

.activity-item b {
  display: block;
  margin-bottom: 4px;
}

.table-panel,
.admin-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.table-panel {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  color: #0f1720;
  font-size: 16px;
  font-weight: 400;
}

.data-table th,
.data-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  color: #26323d;
  font-size: 16px;
  font-weight: 400;
  background: #fff;
}

/* Les listes de pieces de ventes / achats marquent leurs colonnes triables avec
   data-sales-column ; les autres listes utilisent data-sort-column. */
.data-table th[data-sort-column],
.data-table th[data-sales-column] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.data-table th[data-sort-column]::after,
.data-table th[data-sales-column]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.35;
}

.data-table th[data-sort-column].is-sorted-asc::after,
.data-table th[data-sales-column].is-sorted-asc::after {
  border-bottom: 5px solid currentColor;
  opacity: 1;
}

.data-table th[data-sort-column].is-sorted-desc::after,
.data-table th[data-sales-column].is-sorted-desc::after {
  border-top: 5px solid currentColor;
  opacity: 1;
}

.data-table tbody tr:nth-child(odd) {
  background: var(--theme-table-row-odd-bg);
}

.data-table tbody tr:nth-child(even) {
  background: var(--theme-table-row-even-bg);
}

.data-table tbody tr.is-selected,
.data-table tbody tr.is-primary-row {
  background: #e6f4f2;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  background: var(--theme-table-row-section-bg);
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-document-total-label {
  text-align: right;
}

.data-table .clickable-row {
  cursor: pointer;
}

.data-table .clickable-row:hover {
  background: var(--table-hover);
}

.table-link {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.admin-form {
  width: min(620px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.check-field input {
  width: 18px;
  height: 18px;
}

.notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #b9e4c9;
  border-radius: 8px;
  color: #136b35;
  background: #effaf3;
}

.app-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: grid;
  gap: 4px;
  max-width: 520px;
  padding: 12px 18px;
  border-radius: 8px;
  color: #ffffff;
  background: #136b35;
  box-shadow: 0 12px 28px rgba(19, 107, 53, 0.3);
  font-weight: 600;
  transition: opacity 240ms ease, transform 240ms ease;
}

.app-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.app-toast.is-error {
  background: #b42318;
  box-shadow: 0 12px 28px rgba(180, 35, 24, 0.3);
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.payment-status-badge.is-paid {
  color: #136b35;
  background: #effaf3;
  border: 1px solid #b9e4c9;
}

.payment-status-badge.is-partial {
  color: var(--warn);
  background: #fdf3e3;
  border: 1px solid #f0d9a8;
}

.payment-status-badge.is-transformed {
  color: #1b4f9c;
  background: #eef4fd;
  border: 1px solid #bcd3f2;
}

.payment-status-badge.is-not-transformed {
  color: #5c6672;
  background: #f2f4f7;
  border: 1px solid #d8dee6;
}

/* Page Administration : paves de parametrage regroupes par theme. */
.admin-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-toolbar .admin-search-field {
  min-width: min(420px, 100%);
  min-height: 38px;
  flex: 1 1 320px;
  max-width: 520px;
}

.admin-toolbar-count {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}

.admin-theme-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.admin-theme-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 14px;
  text-decoration: none;
}

.admin-theme-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.admin-theme-chip svg {
  width: 15px;
  height: 15px;
}

.admin-section {
  margin-bottom: 26px;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.admin-section-title svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
}

.admin-section-count {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.admin-theme-nav[hidden],
.admin-section[hidden],
.admin-tool-card[hidden],
.admin-toolbar [hidden] {
  display: none;
}

.admin-search-empty {
  padding: 26px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  text-align: center;
}

.admin-menubar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-menubar > ul {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
}

.admin-menubar a,
.admin-menubar button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.admin-menubar a:hover,
.admin-menubar button:hover,
.admin-menubar li:focus-within > a,
.admin-menubar li:focus-within > button {
  color: #fff;
  background: var(--accent);
}

.admin-menubar svg {
  width: 16px;
  height: 16px;
}

.admin-tool-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.admin-tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(23, 32, 51, 0.08);
}

.admin-tool-card strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  line-height: 1.25;
}

.admin-tool-card .admin-tool-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--accent);
  background: var(--surface-soft);
}

.admin-tool-card .admin-tool-icon svg {
  width: 18px;
  height: 18px;
}

.admin-tool-card.is-soon {
  border-style: dashed;
  background: var(--surface-soft);
}

.admin-tool-card.is-soon:hover {
  border-color: var(--line);
  box-shadow: none;
}

.admin-tool-card.is-soon .admin-tool-icon {
  color: var(--muted);
  background: #fff;
}

.admin-tool-card .admin-tool-badge {
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-tool-card span,
.import-summary span,
.import-files p {
  color: var(--muted);
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
}

.import-card {
  width: 100%;
}

.import-summary {
  display: grid;
  gap: 4px;
}

.import-files {
  padding: 20px;
}

.import-files h2,
.import-report h2 {
  margin: 0;
  font-size: 18px;
}

.import-files ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.import-files li {
  margin-bottom: 6px;
}

.import-report {
  margin-top: 18px;
}

.article-import-fields {
  margin-top: 18px;
}

.article-import-update-form {
  width: 100%;
  border: 0;
}

.article-import-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 18px;
}

.muted-text {
  margin: 0;
  color: var(--muted);
}

.report-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.report-heading span {
  color: var(--muted);
  font-weight: 700;
}

.list-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 140px auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.list-toolbar .primary-button {
  padding: 0 18px;
}

.limit-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  color: var(--muted);
}

.pagination-bar div {
  display: flex;
  gap: 10px;
}

.ghost-button.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.workspace {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 28px 1fr;
  color: #fff;
  background: #354956;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  background: #d7dbe0;
  color: #111827;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.window-brand {
  display: flex;
  align-items: center;
}

.window-brand {
  gap: 7px;
  padding: 0 8px;
  font-size: 12px;
  color: #5b6470;
}

/* Exercice de travail affiche a droite de la barre d application. */
.topbar-fiscal-year {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 10px;
  font-size: 12px;
  color: #5b6470;
}

.topbar-fiscal-year select {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  background: #fff;
  padding: 1px 4px;
  font-size: 12px;
  color: #111827;
}

.topbar-fiscal-year-empty {
  color: #b45309;
  font-style: italic;
}

.topbar-fiscal-year a {
  display: inline-flex;
  align-items: center;
  color: #5b6470;
}

.topbar-fiscal-year a svg {
  width: 14px;
  height: 14px;
}

.wd-mark {
  width: 18px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #111;
  background: #f7d900;
  font-size: 10px;
  font-weight: 800;
}

.workspace-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 268px 1fr;
  transition: grid-template-columns 160ms ease;
}

.workspace.is-collapsed .workspace-body {
  grid-template-columns: 76px 1fr;
}

.side-nav {
  position: sticky;
  top: 28px;
  align-self: start;
  height: calc(100vh - 28px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px 12px;
  background: var(--theme-menu-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.collapse-button {
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  align-self: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.date-card {
  display: grid;
  justify-items: center;
  padding: 8px 6px 9px;
  background: #ff4039;
  color: #fff;
  text-transform: lowercase;
}

.date-card strong {
  font-size: 18px;
  line-height: 1;
}

.date-day {
  margin-top: 4px;
  font-size: 54px;
  line-height: 0.95;
  font-weight: 300;
}

.side-menu {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.side-item,
.logout-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.side-icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.logout-chevron {
  width: 22px;
  min-width: 22px;
  text-align: center;
  font-weight: 800;
}

.collapse-collapsed,
.server-shell.is-collapsed .collapse-expanded {
  display: none;
}

.server-shell.is-collapsed .collapse-collapsed {
  display: inline;
}

.collapse-button svg {
  width: 20px;
  height: 20px;
}

.side-item:hover,
.side-item.is-active,
.logout-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.side-item.is-disabled {
  cursor: default;
  opacity: 0.55;
}

.side-item.is-disabled:hover {
  background: transparent;
}

.side-group-toggle {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.side-caret {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-left: auto;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 140ms ease;
}

.side-group.is-open .side-caret {
  transform: rotate(180deg);
}

.side-submenu {
  display: grid;
  gap: 4px;
  padding-top: 4px;
  overflow: hidden;
}

.side-group:not(.is-open) .side-submenu {
  display: none;
}

.side-subitem {
  min-height: 38px;
  padding-left: 30px;
}

/* Troisieme niveau : Stock > Inventaire > Creation, Edition... */
.side-subgroup {
  display: grid;
}

.side-subgroup .side-caret {
  width: 14px;
  min-width: 14px;
  height: 14px;
}

.side-subsubitem {
  min-height: 34px;
  padding-left: 48px;
}

.side-subsubitem .side-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.logout-link {
  margin-top: auto;
}

.workspace.is-collapsed .date-card {
  padding: 7px 3px;
}

.workspace.is-collapsed .date-card strong,
.workspace.is-collapsed .date-card span:not(.date-day),
.workspace.is-collapsed .side-item span,
.workspace.is-collapsed .logout-link span {
  display: none;
}

.workspace.is-collapsed .date-day {
  margin: 0;
  font-size: 30px;
}

.workspace.is-collapsed .side-item,
.workspace.is-collapsed .logout-link {
  justify-content: center;
  padding: 0;
}

.workspace.is-collapsed .collapse-button {
  align-self: center;
}

.workspace.is-collapsed .side-caret {
  display: none;
}

.workspace.is-collapsed .side-submenu {
  display: none;
}

.workspace.is-collapsed .side-subitem,
.workspace.is-collapsed .side-subsubitem {
  padding: 0;
}

.dashboard-workarea {
  min-width: 0;
  min-height: 100%;
  padding: 18px;
  background: var(--surface-soft);
  color: var(--ink);
  overflow: auto;
}

.dashboard-welcome {
  display: grid;
  gap: 8px;
}

.dashboard-welcome h1 {
  margin: 0;
  color: #1b2430;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
}

.module-workarea {
  min-width: 0;
  min-height: 100%;
  padding: 28px;
  background: var(--surface-soft);
  color: var(--ink);
  overflow: auto;
}

.module-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.module-page-header h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
}

.module-page-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.module-page-header .ghost-button,
.article-card .primary-button,
.photo-upload-button {
  gap: 8px;
}

.article-card {
  width: 100%;
  display: grid;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.article-main-fields {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(260px, 1fr);
  gap: 18px;
}

.article-card .field {
  gap: 8px;
}

.article-card .field span {
  color: #06153a;
  font-weight: 600;
}

.article-card .field input,
.article-card .field select,
.article-card .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.article-card .field textarea {
  min-height: 140px;
  padding-block: 12px;
  resize: vertical;
}

.article-card .checkbox-field {
  min-height: 46px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.article-card .checkbox-field input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
}

.article-card .checkbox-field span {
  color: var(--ink);
}

.article-card .field input:focus,
.article-card .field select:focus,
.article-card .field textarea:focus {
  outline: 3px solid rgba(27, 127, 112, 0.18);
  border-color: var(--accent);
}

.modern-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.modern-tabs button {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.modern-tabs button.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.modern-tabs button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.article-form-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 320px);
  gap: 24px;
  align-items: start;
}

.article-fields-grid {
  display: grid;
  gap: 18px;
}

.article-tracking-fieldset {
  gap: 12px;
}

.article-tracking-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.6fr) minmax(200px, 1fr);
  gap: 12px 18px;
  align-items: center;
}

.article-tracking-grid .field {
  gap: 6px;
}

.article-tracking-fieldset input:disabled,
.article-tracking-fieldset select:disabled {
  cursor: not-allowed;
  background: #e6e8ee;
}

.article-barcodes-fieldset {
  gap: 12px;
}

.article-barcode-list {
  display: grid;
  gap: 10px;
}

.article-barcode-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
}

.article-barcode-row input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.article-barcode-row input:focus {
  outline: 3px solid rgba(27, 127, 112, 0.18);
  border-color: var(--accent);
}

.article-barcode-row input.is-invalid {
  border-color: var(--danger);
}

.article-barcode-row input.is-invalid:focus {
  outline-color: rgba(180, 35, 24, 0.16);
}

/* Sans badge, le bouton de suppression reste dans la derniere colonne. */
.article-barcode-row .icon-only-button {
  grid-column: 3;
  min-height: 42px;
}

.article-barcode-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: #e8f4f1;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.article-barcode-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--danger);
  font-size: 0.82rem;
}

.article-barcode-empty {
  margin: 0;
}

.article-barcode-actions {
  display: flex;
}

.article-photo-card {
  display: grid;
  gap: 14px;
}

.article-photo-preview {
  min-height: 270px;
  display: grid;
  place-items: center;
  border: 1px dashed #b9c2cf;
  border-radius: 8px;
  color: #91a0b4;
  background: #f8fafc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.photo-upload-button {
  cursor: pointer;
}

.photo-upload-button input {
  display: none;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.article-card .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

.modern-placeholder {
  width: 100%;
  margin: 0;
  border-color: var(--line);
  border-radius: 8px;
}

.customer-card {
  width: min(1120px, 100%);
}

.customer-form-grid,
.supplier-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px;
}

.customer-notes {
  grid-column: 1 / -1;
}

.customer-active,
.customer-prospect {
  align-self: end;
  min-height: 46px;
}

.customer-note-alert,
.customer-blocked-alert,
.customer-prospect-alert {
  display: grid;
  gap: 4px;
}

.customer-note-alert span,
.customer-blocked-alert span,
.customer-prospect-alert span {
  color: var(--ink);
}

.customer-modern-card {
  align-items: stretch;
}

.customer-main-fields {
  grid-template-columns: minmax(120px, 180px) minmax(260px, 1fr);
}

.customer-summary-grid,
.customer-params-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.modern-fieldset {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.modern-fieldset legend {
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.customer-form-grid.compact,
.supplier-form-grid.compact {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.customer-form-grid.single-column,
.supplier-form-grid.single-column {
  grid-template-columns: 1fr;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: 1 / -1;
}

.customer-tab-panel,
.supplier-tab-panel {
  display: none;
  gap: 18px;
}

.customer-tab-panel:not(.is-active),
.customer-tab-panel[hidden],
.supplier-tab-panel:not(.is-active),
.supplier-tab-panel[hidden] {
  display: none !important;
}

.customer-tab-panel.is-active,
.supplier-tab-panel.is-active {
  display: grid;
}

.customer-panel-toolbar,
.supplier-panel-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.customer-panel-toolbar .ghost-button,
.supplier-panel-toolbar .ghost-button,
.module-page-header .ghost-button,
.form-actions .ghost-button,
.form-actions .primary-button {
  gap: 8px;
}

.customer-panel-toolbar svg,
.supplier-panel-toolbar svg,
.module-page-header svg,
.form-actions svg {
  width: 18px;
  height: 18px;
}

.customer-table-panel,
.supplier-table-panel {
  max-height: 240px;
}

.customer-table-panel .data-table th,
.customer-table-panel .data-table td,
.supplier-table-panel .data-table th,
.supplier-table-panel .data-table td {
  padding: 11px 14px;
}

.customer-table-panel .is-primary-row td {
  font-weight: 700;
  background: #f0fdfa;
}

/* Contact ouvert depuis le menu Contacts. */
.customer-table-panel .is-located-row td {
  background: #fdf3dc;
}

.customer-table-panel .is-located-row td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

.customer-editable-table {
  max-height: 360px;
}

.customer-editable-table .data-table th:first-child,
.customer-editable-table .data-table td:first-child,
.customer-editable-table .data-table th:nth-child(2),
.customer-editable-table .data-table td:nth-child(2) {
  width: 54px;
  text-align: center;
}

.customer-editable-table td input:not([type="radio"]):not([type="hidden"]) {
  width: 100%;
  min-width: 120px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.customer-editable-table td input[readonly] {
  background: #eef0fa;
  color: #6b7280;
}

.customer-delivery-table {
  max-height: 420px;
}

.customer-delivery-table .data-table {
  min-width: 1980px;
}

.customer-delivery-table td:nth-child(12) input,
.customer-delivery-table td:nth-child(14) input,
.customer-delivery-table td:nth-child(15) input {
  min-width: 88px;
}

/* Coordonnees geographiques : calculees a l enregistrement, jamais saisies. */
.customer-delivery-table .delivery-coordinate input {
  min-width: 104px;
}

.customer-delivery-table .delivery-map-cell {
  text-align: center;
}

.customer-print-settings {
  width: 100%;
}

.customer-print-settings-table {
  max-height: 320px;
}

.customer-print-settings-table .data-table {
  min-width: 820px;
}

.customer-print-settings-table th:first-child,
.customer-print-settings-table td:first-child {
  width: 52px;
  text-align: center;
}

.customer-print-settings-table th:nth-child(2),
.customer-print-settings-table td:nth-child(2) {
  width: 150px;
}

.customer-print-settings-table th:nth-child(5),
.customer-print-settings-table td:nth-child(5),
.customer-print-settings-table th:nth-child(6),
.customer-print-settings-table td:nth-child(6) {
  width: 140px;
}

.customer-print-settings-table select,
.customer-print-settings-table input[type="number"] {
  width: 100%;
  min-width: 100px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.customer-print-settings-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  background: #f8fafc;
}

.article-tab-panel {
  display: grid;
  gap: 14px;
}

.article-tab-content[hidden] {
  display: none !important;
}

.article-wide-table {
  max-height: 380px;
}

.article-wide-table .data-table {
  min-width: 920px;
}

.article-tariff-table {
  width: min(520px, 100%);
  max-height: 380px;
  overflow: auto;
}

.article-tariff-table .data-table {
  min-width: 320px;
}

.article-tariff-table .data-table th:first-child,
.article-tariff-table .data-table td:first-child {
  width: auto;
  text-align: left;
}

.article-tariff-table .data-table th:nth-child(2),
.article-tariff-table .data-table td:nth-child(2) {
  width: 132px;
  text-align: right;
}

.article-tariff-table td input.tariff-price-input {
  min-width: 88px;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: right;
  font: inherit;
}

.article-tariff-table td input.tariff-price-input:focus {
  outline: 2px solid #60a5fa;
  outline-offset: -2px;
  background: #fff;
}

.article-tariff-table td input.tariff-price-input.is-linked {
  color: var(--muted);
  cursor: not-allowed;
}

.article-tariff-table .tariff-link-badge {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  white-space: nowrap;
}

.article-stock-fieldset {
  gap: 14px;
}

.article-stock-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px 18px;
}

.article-stock-form-grid input.generated-number-input {
  color: var(--muted);
  background: var(--surface-soft);
  cursor: default;
}

.stock-quantity-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-quantity-field input {
  flex: 1;
  min-width: 0;
}

/* Prime sur `.article-card .field span`, qui colore les libelles de champ. */
.article-card .field .stock-unit-suffix,
.stock-unit-suffix {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.article-stock-form-actions {
  display: flex;
  justify-content: flex-end;
}

.article-stock-panels {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: start;
}

.article-stock-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.article-stock-block h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.article-stock-table {
  max-height: 340px;
}

.article-stock-movements-table .data-table {
  min-width: 760px;
}

.article-stock-total-row td {
  background: var(--surface-soft);
  font-weight: 700;
}

.stock-quantity-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.article-stock-line-modal {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 32, 0.18);
}

.article-stock-line-modal h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.article-stock-line-modal p {
  margin: 0;
  color: var(--muted);
}

.article-stock-line-recap {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.article-stock-line-recap dt {
  color: var(--muted);
  font-size: 13px;
}

.article-stock-line-recap dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.article-stock-line-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.stock-quantity-cell.is-positive {
  color: var(--accent);
}

.stock-quantity-cell.is-negative {
  color: var(--danger);
}

.empty-row {
  color: var(--muted);
  font-style: italic;
}

.grouping-box {
  align-content: start;
}

.grouping-box .check-field {
  min-height: 30px;
}

.customer-drop-zone {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed #b9c2cf;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.customer-drop-zone.is-dragging {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}

.customer-drop-zone.has-error {
  border-color: #dc2626;
  color: #b91c1c;
  background: #fef2f2;
}

.customer-drop-zone.is-uploading {
  cursor: wait;
  border-color: var(--primary);
  color: var(--primary);
}

.invoice-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  cursor: pointer;
  text-decoration: none;
}

.invoice-drop-zone {
  margin-bottom: 20px;
}

.invoice-created-toggle {
  margin-bottom: 18px;
  font-weight: 500;
}

.invoice-doc-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.invoice-doc-filter {
  display: flex;
  align-items: end;
  gap: 12px;
}

.invoice-doc-filter .field { min-width: 220px; }

.invoice-doc-bulk { margin-left: auto; }

@media (max-width: 720px) {
  .invoice-doc-toolbar,
  .invoice-doc-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-doc-bulk { margin-left: 0; }
}

.invoice-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.invoice-doc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.invoice-doc-card[hidden] {
  display: none;
}

.invoice-doc-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(23, 32, 51, 0.08);
}

.invoice-doc-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.invoice-doc-thumb-trigger {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  background: none;
}

.invoice-doc-thumb-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invoice-doc-generic-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
}

.invoice-doc-generic-icon svg {
  width: 48px;
  height: 48px;
}

/* Marqueur des factures electroniques (XML/UBL) sur la vignette. */
.invoice-doc-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(67, 56, 202, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

.invoice-doc-badge svg {
  width: 12px;
  height: 12px;
}

.invoice-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.invoice-preview-modal[hidden] {
  display: none;
}

.invoice-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
}

.invoice-preview-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(860px, 100%);
  height: min(90vh, 1000px);
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.invoice-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.invoice-preview-title {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-preview-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
}

.invoice-preview-body iframe,
.invoice-preview-body img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.invoice-preview-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.invoice-preview-footer form {
  display: contents;
}

.invoice-preview-footer .ghost-button {
  gap: 8px;
}

.invoice-preview-footer svg {
  width: 18px;
  height: 18px;
}

/* Les actions du pied de page sont masquees via l'attribut hidden : il doit primer sur leur display. */
.invoice-preview-footer [hidden] {
  display: none;
}

body.invoice-preview-open {
  overflow: hidden;
}

.invoice-doc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 6px;
}

.invoice-doc-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-doc-meta {
  font-size: 12px;
  color: var(--muted);
}

.invoice-doc-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.invoice-doc-card:hover .invoice-doc-actions,
.invoice-doc-card:focus-within .invoice-doc-actions {
  opacity: 1;
  pointer-events: auto;
}

.invoice-doc-actions form {
  display: contents;
}

.invoice-doc-actions .icon-only-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.invoice-doc-actions .icon-only-button svg {
  width: 16px;
  height: 16px;
}

.company-card {
  width: min(1040px, 100%);
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 360px);
  gap: 28px;
  align-items: start;
}

.company-fields {
  display: grid;
  gap: 14px;
}

.company-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
}

.company-media {
  display: grid;
  gap: 18px;
  justify-items: center;
}

.company-logo-preview {
  width: min(300px, 100%);
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #91a0b4;
  background: #f8fafc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.company-logo-preview svg {
  width: 52px;
  height: 52px;
}

.company-logo-button {
  cursor: pointer;
}

.company-logo-button input {
  display: none;
}

.hidden-file-input {
  display: none;
}

.company-documents {
  width: 100%;
  display: grid;
  gap: 10px;
}

.selected-files {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed #b9c2cf;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.icon-only-button {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.danger-button {
  color: var(--danger);
}

.danger-button:hover {
  border-color: #ffd2cc;
  color: var(--danger);
  background: #fff0ee;
}

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

.tariff-card {
  width: min(1060px, 100%);
}

.tariff-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(360px, 1fr);
  gap: 28px;
  align-items: start;
}

.tariff-list-pane {
  display: grid;
  gap: 14px;
}

.tariff-actions-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tariff-actions-top .ghost-button,
.tariff-delete-button,
.tariff-detail-actions .ghost-button {
  gap: 8px;
}

.tariff-table-panel {
  max-height: 560px;
}

.tariff-table td:first-child,
.tariff-table th:first-child {
  width: 92px;
  color: var(--muted);
  text-align: right;
}

.tariff-table tr.is-selected {
  background: #e6f4f2;
}

.tariff-delete-button {
  justify-self: center;
}

.tariff-detail-pane {
  display: grid;
  gap: 120px;
  padding-top: 56px;
}

.tariff-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(140px, auto);
  gap: 22px 28px;
  align-items: end;
}

.tariff-detail-grid .span-2 {
  grid-column: span 2;
}

.tariff-link-hint {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.tariff-detail-actions {
  display: flex;
  justify-content: flex-start;
}

.pricing-rule-card {
  width: min(1180px, 100%);
  margin-top: 24px;
  display: grid;
  gap: 18px;
}

.pricing-rule-table-panel {
  max-height: 420px;
}

.pricing-rule-table td:first-child,
.pricing-rule-table th:first-child {
  width: 86px;
  text-align: right;
  color: var(--muted);
}

.pricing-rule-table tr.is-selected {
  background: #e6f4f2;
}

.pricing-rule-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f5;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pricing-rule-form {
  display: grid;
  gap: 18px;
}

.pricing-rule-actions-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pricing-rule-actions-top .ghost-button {
  gap: 8px;
}

.pricing-rule-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px 24px;
  align-items: end;
}

.pricing-rule-detail-grid .span-2 {
  grid-column: span 2;
}

.pricing-rule-criteria {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.pricing-rule-criteria-header h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.pricing-rule-criteria-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.pricing-rule-criteria,
.pricing-rule-criteria .table-panel {
  width: 100%;
}

.pricing-rule-criteria-table th:last-child,
.pricing-rule-criteria-table td:last-child {
  width: 64px;
  text-align: center;
}

.pricing-rule-criteria-table select,
.pricing-rule-criteria-table input {
  width: 100%;
}

.pricing-rule-hint {
  margin: 0;
  color: var(--muted);
}

.article-family-card {
  width: min(1180px, 100%);
}

.article-family-layout {
  grid-template-columns: minmax(240px, 320px) minmax(560px, 1fr);
}

.article-family-detail {
  display: grid;
  gap: 24px;
  align-content: start;
}

.article-family-top-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 22px;
}

.article-family-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(220px, 1fr) minmax(190px, 230px);
  gap: 28px 36px;
  align-items: start;
}

.article-family-checks,
.article-family-accounts,
.article-family-vat {
  display: grid;
  gap: 10px;
}

.article-family-check {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #f8fafc;
}

.article-family-margin {
  grid-template-columns: 1fr 64px;
  align-items: center;
}

.article-family-margin span {
  margin-bottom: 0;
}

/* Sous-familles et sous-sous-familles, saisies en arbre sous la famille. */
.article-subfamily-fieldset {
  gap: 12px;
}

.article-subfamily-help {
  margin: 0;
}

.article-subfamily-heading,
.article-subfamily-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 76px 38px;
  gap: 8px;
  align-items: center;
}

.article-subfamily-heading {
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-subfamily-list,
.article-subsubfamily-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-subfamily-list {
  gap: 12px;
}

.article-subfamily-item {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.article-subfamily-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.article-subsubfamily-list {
  margin-left: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.article-subsubfamily-list:empty {
  display: none;
}

.article-subfamily-row input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.article-subfamily-row input:focus {
  outline: 3px solid rgba(27, 127, 112, 0.18);
  border-color: var(--accent);
}

.article-subfamily-row input[name$="[code]"] {
  text-transform: uppercase;
}

/* La sous-famille en gras, ses sous-sous-familles en retrait et en maigre. */
.article-subfamily-item > .article-subfamily-row input {
  font-weight: 600;
}

.article-subfamily-row .icon-only-button {
  min-height: 40px;
}

.article-subfamily-usage {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.article-subfamily-restore,
.is-deleted > .article-subfamily-row .article-subfamily-remove {
  display: none;
}

.is-deleted > .article-subfamily-row .article-subfamily-restore {
  display: inline-flex;
}

.is-deleted > .article-subfamily-row input,
.article-subfamily-item.is-deleted .article-subsubfamily-list input {
  color: var(--muted);
  background: var(--surface-soft);
  text-decoration: line-through;
}

/* Les sous-sous-familles d une sous-famille supprimee partent avec elle. */
.article-subfamily-item.is-deleted .article-subsubfamily-list button,
.article-subfamily-item.is-deleted .article-subsubfamily-add {
  visibility: hidden;
}

.article-subsubfamily-add {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-self: start;
  margin-left: 30px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.article-subsubfamily-add:hover {
  text-decoration: underline;
}

.article-subsubfamily-add svg {
  width: 16px;
  height: 16px;
}

.article-subfamily-empty {
  margin: 0;
}

/* Fiche article : famille, sous-famille et sous-sous-famille sur une ligne. */
.article-family-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.unit-card {
  width: min(980px, 100%);
}

.unit-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.unit-actions .ghost-button {
  gap: 8px;
}

.unit-table-panel {
  max-height: 460px;
}

.unit-table th:nth-child(1),
.unit-table td:nth-child(1) {
  width: 120px;
}

.unit-table th:nth-child(2),
.unit-table td:nth-child(2) {
  width: 100px;
}

.unit-table th:nth-child(4),
.unit-table td:nth-child(4) {
  width: 130px;
  text-align: right;
}

.unit-table tr.is-selected {
  background: #e6f4f2;
}

.unit-detail-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(260px, 1.6fr);
  gap: 18px;
  align-items: end;
}

.profile-card {
  width: min(980px, 100%);
}

.profile-table-panel {
  max-height: 320px;
}

.profile-table tr.is-selected {
  background: #e6f4f2;
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px);
  gap: 18px;
}

.profile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.profile-menu-header h2 {
  margin: 0;
  font-size: 1rem;
}

.profile-menu-bulk {
  display: flex;
  gap: 10px;
}

.profile-menu-hint {
  margin: 0 0 12px;
  color: var(--muted);
}

.profile-menu-tree,
.profile-menu-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Chaque niveau de sous-menu est decale et relie par un filet vertical. */
.profile-menu-children {
  margin: 8px 0 0 12px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.profile-menu-node > .check-field {
  font-weight: 600;
}

.profile-menu-node.depth-1 > .check-field,
.profile-menu-node.depth-2 > .check-field {
  font-weight: 500;
}

.profile-menu-node .check-field input:disabled + span {
  color: var(--muted);
}

/* Onglets Menus / Administration / Widgets du detail d un profil */
.profile-tabs {
  margin-top: 4px;
}

.profile-tab-panel {
  padding-top: 4px;
}

.profile-tab-count {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.modern-tabs button.is-active .profile-tab-count {
  background: #e6f4f2;
  color: var(--accent-dark);
}

.profile-admin-master {
  align-items: flex-start;
}

.profile-admin-master span {
  display: grid;
  gap: 2px;
}

.profile-admin-master small {
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}

/* Comptes du profil sans le role administrateur : les cases ne leur ouvrent rien. */
.profile-admin-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #f2d8a8;
  border-radius: 8px;
  background: #fdf6e8;
  color: #8a5300;
  font-size: 14px;
}

.profile-admin-warning svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.profile-admin-warning a {
  color: inherit;
  font-weight: 600;
}

.profile-admin-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.profile-admin-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Legende flottante : elle quitte la bordure du fieldset et devient un
   bandeau de titre ordinaire. */
.profile-admin-section-head {
  float: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}

.profile-admin-section-head .check-field i {
  width: 16px;
  height: 16px;
  color: var(--accent-dark);
}

.profile-admin-section-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.profile-admin-list {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 12px 14px 14px;
  display: grid;
  gap: 8px;
}

.profile-admin-list .check-field {
  font-weight: 500;
}

/* Menu Administration decoche : les pages sont fermees, on les estompe. */
.profile-tab-panel.is-closed .profile-admin-sections {
  opacity: 0.55;
}

.profile-admin-section:disabled .check-field span {
  color: var(--muted);
}

.theme-table-panel {
  max-height: 360px;
}

.theme-table tr.is-selected {
  background: #e6f4f2;
}

.theme-swatch-row {
  display: inline-flex;
  gap: 4px;
}

.theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
}

.theme-color-field .theme-color-input {
  display: flex;
  gap: 8px;
}

.theme-color-input input[type="color"] {
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 4px;
  cursor: pointer;
}

.theme-color-input input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: lowercase;
}

.theme-preview {
  display: grid;
  grid-template-columns: 140px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.theme-preview-menu {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  color: #fff;
  font-weight: 700;
  background: var(--preview-menu);
}

.theme-preview-page {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--preview-page);
}

.theme-preview-button {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  cursor: default;
  background: var(--preview-button);
}

.theme-preview-button:hover {
  background: var(--preview-button-hover);
}

.theme-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.theme-preview-table td {
  padding: 8px 10px;
}

.theme-preview [data-preview-row-odd] {
  background: var(--preview-row-odd);
}

.theme-preview [data-preview-row-even] {
  background: var(--preview-row-even);
}

.theme-preview [data-preview-row-section] {
  background: var(--preview-row-section);
}

/* Apercu du style Pop : meme recette que public/css/theme-pop.css. */
.theme-preview.is-pop {
  border-color: #e4e1f2;
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(76, 58, 170, 0.5);
}

.theme-preview.is-pop .theme-preview-menu {
  background: linear-gradient(175deg, var(--preview-menu) 0%, color-mix(in srgb, var(--preview-menu) 70%, #6d5dfc) 100%);
}

.theme-preview.is-pop .theme-preview-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(109, 93, 252, 0.2), transparent 45%),
    radial-gradient(circle at 8% 96%, rgba(255, 181, 71, 0.24), transparent 45%),
    var(--preview-page);
}

.theme-preview.is-pop .theme-preview-button {
  border-radius: 12px;
  background: linear-gradient(120deg, var(--preview-button), var(--preview-button-hover));
  box-shadow: 0 10px 22px -12px var(--preview-button-hover);
}

.theme-preview.is-pop .theme-preview-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e4e1f2;
  border-radius: 14px;
  background: #fff;
}

.fiscal-year-card {
  width: min(820px, 100%);
}

.fiscal-year-table-panel {
  max-height: 430px;
}

.fiscal-year-table th,
.fiscal-year-table td {
  text-align: right;
}

.fiscal-year-table tr.is-selected {
  background: #e6f4f2;
}

.fiscal-year-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 18px;
}

.vat-card,
.currency-card {
  width: min(1320px, 100%);
}

.vat-table-panel,
.currency-table-panel {
  max-height: 470px;
}

.vat-table {
  min-width: 1200px;
}

.vat-table th:nth-child(1),
.vat-table td:nth-child(1) {
  width: 58px;
  text-align: right;
}

.vat-table th:nth-child(2),
.vat-table td:nth-child(2),
.vat-table th:nth-child(3),
.vat-table td:nth-child(3) {
  width: 70px;
  text-align: center;
}

.vat-table th:nth-child(5),
.vat-table td:nth-child(5),
.vat-table th:nth-child(6),
.vat-table td:nth-child(6),
.vat-table th:nth-child(8),
.vat-table td:nth-child(8),
.vat-table th:nth-child(9),
.vat-table td:nth-child(9),
.vat-table th:nth-child(10),
.vat-table td:nth-child(10) {
  text-align: right;
}

.vat-table tr.is-selected,
.currency-table tr.is-selected {
  background: #e6f4f2;
}

.vat-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 18px;
  align-items: end;
}

.vat-detail-grid .span-2 {
  grid-column: span 2;
}

.currency-card {
  width: min(980px, 100%);
}

.currency-table {
  min-width: 760px;
}

.currency-table th:nth-child(4),
.currency-table td:nth-child(4),
.currency-table th:nth-child(5),
.currency-table td:nth-child(5) {
  text-align: right;
}

.currency-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 18px;
  align-items: end;
}

.language-card {
  width: min(720px, 100%);
}

.language-table-panel {
  max-height: 460px;
}

.language-table th:nth-child(1),
.language-table td:nth-child(1) {
  width: 140px;
}

.language-table th:nth-child(3),
.language-table td:nth-child(3) {
  width: 120px;
  text-align: center;
}

.language-table tr.is-selected {
  background: #e6f4f2;
}

.language-detail-grid {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(200px, 1fr) minmax(140px, 180px);
  gap: 18px;
  align-items: end;
}

.payment-card {
  width: min(860px, 100%);
}

.payment-table-panel {
  max-height: 460px;
}

.payment-mean-table tr.is-selected,
.payment-model-table tr.is-selected,
.payment-line-table tr.is-selected,
.discount-table tr.is-selected {
  background: #e6f4f2;
}

.payment-mean-table th:nth-child(1),
.payment-mean-table td:nth-child(1) {
  width: 170px;
}

.payment-mean-table th:nth-child(3),
.payment-mean-table td:nth-child(3) {
  width: 120px;
  text-align: center;
}

.payment-mean-detail-grid,
.discount-detail-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(280px, 1fr) minmax(140px, 180px);
  gap: 18px;
  align-items: end;
}

/* Le moyen de paiement porte deux cases a cocher : par defaut et banque obligatoire. */
.payment-mean-detail-grid {
  grid-template-columns: minmax(160px, 220px) minmax(280px, 1fr) minmax(140px, 180px) minmax(140px, 180px);
}

.discount-detail-grid .span-2 {
  grid-column: span 2;
}

.discount-table th:nth-child(1),
.discount-table td:nth-child(1) {
  width: 90px;
  text-align: right;
}

.discount-table th:nth-child(3),
.discount-table td:nth-child(3) {
  width: 140px;
  text-align: right;
}

.payment-terms-card {
  width: min(1480px, 100%);
}

.payment-terms-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(580px, 1.6fr);
  gap: 18px;
  align-items: start;
}

.payment-model-table-panel,
.payment-line-table-panel {
  max-height: 420px;
}

.payment-model-table th:nth-child(1),
.payment-model-table td:nth-child(1) {
  width: 100px;
  text-align: right;
}

.payment-line-table {
  min-width: 720px;
}

.payment-line-table th,
.payment-line-table td {
  text-align: right;
}

.payment-line-table th:nth-child(5),
.payment-line-table td:nth-child(5) {
  text-align: center;
}

.payment-term-detail-grid,
.payment-line-detail-grid {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(240px, 1fr) minmax(130px, 160px) minmax(130px, 160px);
  gap: 18px;
  align-items: end;
}

.payment-term-detail-grid .span-2 {
  grid-column: span 2;
}

.payment-line-detail-grid {
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(120px, 0.7fr)) minmax(190px, auto);
}

.inline-actions {
  align-self: end;
  margin: 0;
}

.sales-representative-card {
  width: min(920px, 100%);
}

.sales-representative-table-panel {
  max-height: 460px;
}

.sales-representative-table tr.is-selected {
  background: #e6f4f2;
}

.sales-representative-table th:nth-child(1),
.sales-representative-table td:nth-child(1) {
  width: 140px;
}

.sales-representative-detail-grid {
  display: grid;
  grid-template-columns: minmax(140px, 200px) repeat(2, minmax(220px, 1fr));
  gap: 18px;
  align-items: end;
}

.bank-table-panel {
  max-height: 360px;
}

.bank-table tr.is-selected {
  background: #e6f4f2;
}

.bank-detail-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 200px) minmax(260px, 1.6fr);
  gap: 18px;
  align-items: end;
}

.piece-card {
  width: min(1280px, 100%);
}

.piece-table-panel {
  max-height: 520px;
}

.piece-table {
  min-width: 980px;
}

.piece-table th:nth-child(1),
.piece-table td:nth-child(1) {
  width: 140px;
}

.piece-table th:nth-child(3),
.piece-table td:nth-child(3),
.piece-table th:nth-child(6),
.piece-table td:nth-child(6),
.piece-table th:nth-child(7),
.piece-table td:nth-child(7),
.piece-table th:nth-child(8),
.piece-table td:nth-child(8) {
  text-align: right;
}

.piece-table th:nth-child(5),
.piece-table td:nth-child(5) {
  min-width: 180px;
}

.piece-table tr.is-selected {
  background: #e6f4f2;
}

.piece-detail-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.3fr) minmax(90px, 0.6fr) repeat(4, minmax(110px, 0.7fr));
  gap: 18px;
  align-items: end;
}

.piece-detail-grid .span-2 {
  grid-column: span 2;
}

.edition-model-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

.edition-model-card {
  width: min(1320px, 100%);
}

.edition-model-detail-grid {
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr) auto;
}

.edition-merge-fields {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  background: #f7fafb;
}

.edition-merge-fields-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.edition-merge-fields-header h2 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #1d3948;
}

.edition-merge-fields-header p {
  max-width: 850px;
  margin: 0;
  color: #52616b;
  font-size: 12px;
  line-height: 1.5;
}

.edition-merge-fields-header code,
.edition-merge-field-row code {
  color: #0f766e;
  font-family: Consolas, 'Courier New', monospace;
}

.edition-merge-fields-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edition-merge-field-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(210px, 0.8fr) minmax(320px, 1.7fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid #d8e2e8;
  border-radius: 8px;
  background: #fff;
}

.edition-merge-field-row .field small {
  margin-top: 4px;
  color: #637381;
}

.edition-merge-field-sql textarea {
  min-height: 76px;
  resize: vertical;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.edition-merge-field-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 2px;
}

.edition-merge-fields-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed #c8d4db;
  border-radius: 8px;
  color: #637381;
  text-align: center;
}

.edition-model-table {
  min-width: 760px;
}

.edition-model-table th,
.edition-model-table td {
  text-align: left;
}

.edition-model-table th:nth-child(4),
.edition-model-table td:nth-child(4) {
  text-align: center;
}

.edition-model-wysiwyg {
  min-width: 0;
}

.edition-model-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d8e2e8;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f7fafb;
}

.edition-model-toolbar button {
  width: 34px;
  height: 32px;
  border: 1px solid #d8e2e8;
  border-radius: 6px;
  background: #fff;
  color: #1d3948;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}

.edition-model-toolbar button:hover,
.edition-model-toolbar button.is-active {
  border-color: #0f766e;
  background: #e6f4f2;
}

.edition-model-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.edition-model-toolbar svg {
  width: 16px;
  height: 16px;
}

.edition-model-surface,
.edition-model-source {
  width: 100%;
  min-height: 360px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #d8e2e8;
  border-radius: 0 0 8px 8px;
  background: #fff;
  color: #172026;
  padding: 16px;
  outline: none;
}

.edition-model-source {
  font-family: Consolas, 'Courier New', monospace;
  resize: vertical;
}

.edition-model-surface:focus,
.edition-model-source:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.edition-model-surface[contenteditable="false"] {
  background: #eef1f5;
  color: #7b8794;
}

.edition-model-surface h1,
.edition-model-surface h2,
.edition-model-surface p {
  margin: 0 0 12px;
}

.edition-model-helper {
  align-self: stretch;
  border: 1px solid #d8e2e8;
  background: #f7fafb;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edition-model-helper strong {
  font-size: 12px;
  text-transform: uppercase;
  color: #52616b;
}

.edition-model-helper button {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.edition-model-helper button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.edition-model-helper code {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  background: #eef4f7;
  color: #1d3948;
  white-space: normal;
  overflow-wrap: anywhere;
}

.edition-model-helper button:hover code {
  background: #dcebef;
}

.email-page-header {
  align-items: end;
}

.email-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(620px, 1fr);
  min-height: calc(100vh - 170px);
  border: 1px solid var(--line);
  background: #fff;
}

.email-sidebar {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #f6f8fa;
}

.email-folder-form {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.email-folder-form select {
  width: 100%;
  height: 34px;
}

.email-list {
  overflow: auto;
}

.email-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-height: 74px;
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #edf1f4;
  background: #fff;
}

.email-list-item:nth-child(even) {
  background: #f3f5f7;
}

.email-list-item:hover,
.email-list-item.is-selected {
  background: #d8f0fb;
}

.email-list-item strong,
.email-list-item span,
.email-list-item em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-list-item strong {
  font-size: 14px;
}

.email-list-item > span {
  grid-column: 1 / -1;
  color: #005da8;
}

.email-list-item small {
  color: var(--muted);
  white-space: nowrap;
}

.email-list-item em {
  grid-column: 1 / -1;
  color: var(--danger);
  font-style: normal;
  font-size: 12px;
}

.email-empty-list,
.email-empty-attachments {
  padding: 18px;
  color: var(--muted);
}

.email-editor {
  display: grid;
  grid-template-rows: auto auto minmax(360px, 1fr) auto;
  min-width: 0;
  background: #fff;
}

.email-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.email-actions .ghost-button {
  gap: 8px;
}

/* Adresse expediteur : rappel de la boite du compte, pousse a droite de la barre. */
.email-sender {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.email-sender strong {
  color: var(--ink);
  font-weight: 600;
}

.email-fields {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.email-fields .field {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
}

.email-fields .field span {
  margin: 0;
}

.email-body-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  min-height: 0;
}

.email-body-field {
  min-height: 0;
  padding: 14px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
}

.email-body-field textarea {
  width: 100%;
  min-height: 420px;
  height: 100%;
  resize: vertical;
  font: 15px/1.55 Arial, Helvetica, sans-serif;
}

.email-rich-editor {
  min-width: 0;
}

.email-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f7fafb;
}

.email-rich-toolbar button {
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8e2e8;
  border-radius: 6px;
  color: #1d3948;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}

.email-rich-toolbar button:hover,
.email-rich-toolbar button.is-active {
  border-color: var(--accent);
  background: #e6f4f2;
}

.email-rich-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.email-rich-toolbar svg {
  width: 16px;
  height: 16px;
}

.email-rich-source-button {
  margin-left: auto;
}

.email-rich-surface,
.email-rich-source {
  width: 100%;
  min-height: 340px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  outline: none;
  color: #172026;
  background: #fff;
  font: 15px/1.55 Arial, Helvetica, sans-serif;
}

.email-rich-surface {
  overflow: auto;
}

/* Une image inseree dans le corps garde ses proportions et ne deborde pas de
   la zone de saisie, quelle que soit sa taille d origine. */
.email-rich-surface img {
  max-width: 100%;
  height: auto;
}

.email-rich-source {
  resize: vertical;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
}

.email-rich-surface:focus,
.email-rich-source:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 127, 112, 0.16);
}

.email-rich-surface[contenteditable="false"] {
  color: var(--muted);
  background: #f3f5f7;
}

.email-rich-surface p,
.email-rich-surface h1,
.email-rich-surface h2,
.email-rich-surface h3,
.email-rich-surface ul,
.email-rich-surface ol,
.email-rich-surface table {
  margin-top: 0;
  margin-bottom: 14px;
}

.email-rich-surface table {
  max-width: 100%;
  border-collapse: collapse;
}

.email-rich-surface th,
.email-rich-surface td {
  border: 1px solid #444;
  padding: 6px 8px;
}

.email-message-rich-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.email-message-rich-editor .email-rich-surface,
.email-message-rich-editor .email-rich-source {
  flex: 1 1 auto;
  min-height: 240px;
  height: auto;
}

.email-attachments {
  border-left: 1px solid var(--line);
  background: #f8fafc;
  overflow: auto;
}

.email-attachments-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* Ajout d une piece jointe : le libelle pilote le champ fichier masque. */
.email-attachment-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.email-attachment-add:hover {
  border-color: var(--theme-button-bg);
  color: var(--theme-button-bg);
}

.email-attachment-add i {
  width: 14px;
  height: 14px;
}

.email-attachment-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid #edf1f4;
}

.email-attachment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.email-attachment-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.email-attachment-action:hover {
  color: var(--theme-button-bg);
  background: #eef2f7;
}

.email-attachment-action.is-danger:hover {
  color: var(--danger);
}

.email-attachment-action i {
  width: 15px;
  height: 15px;
}

/* Rappel visuel des dossiers ou l email ne peut plus etre modifie. */
.email-readonly-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.email-readonly-flag i {
  width: 14px;
  height: 14px;
}

.email-fields input[readonly],
.email-rich-editor .email-rich-surface[contenteditable='false'] {
  color: var(--ink);
  background: #f8fafc;
}

.email-attachment-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-attachment-row small {
  color: var(--muted);
  white-space: nowrap;
}

.email-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

/* Documents > Boite email : consultation IMAP, reprend la mise en page de Gestion Emails. */
.mailbox-filters {
  display: grid;
  gap: 8px;
}

.mailbox-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px auto;
  gap: 6px;
}

.mailbox-search input,
.mailbox-search select {
  height: 34px;
}

.mailbox-search .icon-only-button {
  min-height: 34px;
}

/* Rendu des vignettes avant enregistrement : quelques secondes sur un gros PDF. */
.mailbox-save-status {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.mailbox-clip {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

/* Chaque message de la liste porte ses actions : le lien reste le fond de la ligne. */
.mailbox-list-row {
  position: relative;
}

.mailbox-list-row:nth-child(even) .email-list-item {
  background: #f3f5f7;
}

.mailbox-list-row .email-list-item:hover,
.mailbox-list-row .email-list-item.is-selected {
  background: #d8f0fb;
}

/* L objet s arrete avant les boutons, la date garde sa place a droite. */
.mailbox-list-row .email-list-item > span {
  padding-right: 58px;
}

.mailbox-row-actions {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  gap: 2px;
  opacity: 0.45;
}

.mailbox-list-row:hover .mailbox-row-actions,
.mailbox-row-actions:focus-within {
  opacity: 1;
}

/* Etat de lecture : un message deja lu s efface, un message neuf reste marque. */
.mailbox-state {
  display: inline-flex;
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--muted);
}

.mailbox-state svg {
  width: 14px;
  height: 14px;
}

.mailbox-list-row.is-read .email-list-item strong {
  font-weight: 400;
}

.mailbox-list-row.is-read .email-list-item > span {
  color: #5a6b7c;
}

.mailbox-list-row.is-unread .email-list-item {
  box-shadow: inset 3px 0 0 #005da8;
}

.mailbox-list-row.is-unread .email-list-item > span {
  font-weight: 600;
}

.mailbox-list-row.is-unread .mailbox-state {
  color: #005da8;
}

/* Le nombre de bandeaux varie avec les pieces jointes : la pile s adapte d elle meme. */
.mailbox-reader {
  display: flex;
  flex-direction: column;
}

.mailbox-reader .email-body-panel {
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  min-height: 360px;
}

.mailbox-reader .mailbox-placeholder {
  flex: 1;
}

/* Pieces jointes du message : une par ligne, actions a gauche. */
.mailbox-attachments {
  max-height: 210px;
  overflow: auto;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.mailbox-attachments-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mailbox-attachment-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid #edf1f4;
}

.mailbox-attachment-row:last-child {
  border-bottom: 0;
}

/* Largeur reservee aux trois actions : les noms restent alignes d une ligne a l autre. */
.mailbox-attachment-row .email-attachment-actions {
  min-width: 82px;
}

.mailbox-attachment-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-attachment-row small {
  color: var(--muted);
  white-space: nowrap;
}

.mailbox-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.mailbox-body-frame {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  background: #fff;
}

.mailbox-body-text {
  margin: 0;
  padding: 14px;
  font: 14px/1.55 Arial, Helvetica, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mailbox-body-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
}

/* Aucun message ouvert : le volet de lecture reste neutre. */
.mailbox-placeholder {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  grid-row: 1 / -1;
  padding: 40px;
  color: var(--muted);
  text-align: center;
}

.mailbox-placeholder i {
  width: 34px;
  height: 34px;
}

.mailbox-placeholder p {
  margin: 0;
}

.smtp-card {
  width: min(760px, 100%);
}

.smtp-fieldset {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
}

.smtp-fieldset legend {
  padding: 0 8px;
  font-weight: 700;
}

.smtp-port-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(160px, 220px);
  gap: 18px;
}

.smtp-copy-field {
  justify-content: flex-start;
}

/* Facturation electronique : coordonnees de contact et acces API sur une ligne. */
.peppol-contact-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) minmax(180px, 1fr);
  gap: 18px;
}

.peppol-credentials-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr);
  gap: 18px;
}

.smtp-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Fiche utilisateur : enregistrement a gauche, test de la boite a droite. */
.smtp-form-actions {
  justify-content: flex-start;
}

/* Boites email : choix entre serveur classique et compte Gmail en OAuth2. */
.mail-auth-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mail-auth-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

.mail-auth-option:hover {
  border-color: var(--accent);
}

.mail-auth-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--table-hover);
  font-weight: 600;
}

.mail-auth-panel {
  display: grid;
  gap: 16px;
}

.mail-auth-panel[hidden] {
  display: none;
}

.mail-auth-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.mail-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}

.mail-auth-badge.is-linked {
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.mail-auth-badge i {
  width: 15px;
  height: 15px;
}

/* Info-bulle rappelant la marche a suivre chez Google. */
.mail-help {
  position: relative;
  display: inline-flex;
}

.mail-help-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-dark);
  cursor: pointer;
}

.mail-help-toggle:hover,
.mail-help-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--table-hover);
}

.mail-help-toggle i {
  width: 16px;
  height: 16px;
}

.mail-help-bubble {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  display: block;
  width: min(440px, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.18);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  cursor: default;
}

.mail-help-bubble[hidden] {
  display: none;
}

.mail-help-bubble strong {
  display: block;
  margin-bottom: 8px;
}

.mail-help-bubble p {
  margin: 0 0 10px;
  color: var(--muted);
}

.mail-help-bubble ol {
  margin: 0 0 10px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.mail-help-bubble code {
  font-family: Consolas, "Courier New", monospace;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.mail-help-uri {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
}

.database-card {
  width: min(900px, 100%);
}

.database-fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
}

.database-fieldset legend {
  padding: 0 8px;
  font-weight: 700;
}

.database-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 14px;
}

.database-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.database-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--theme-table-row-section-bg, #f7faf9);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.email-template-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-template-variables button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.email-template-variables code {
  display: block;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  padding: 6px 8px;
}

.email-template-variables button:hover code,
.email-template-variables button:focus code {
  border-color: var(--accent);
  background: #e6f4f2;
}

.sequence-card {
  width: min(1400px, 100%);
}

.sequence-domain-tabs {
  width: min(1400px, 100%);
  margin-bottom: 18px;
}

.sequence-domain-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.sequence-domain-tabs a.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.sequence-table-panel {
  max-height: 520px;
}

.sequence-table {
  min-width: 1160px;
}

.sequence-table th:nth-child(3),
.sequence-table td:nth-child(3) {
  width: 90px;
  text-align: center;
}

.sequence-table th:nth-child(7),
.sequence-table td:nth-child(7),
.sequence-table th:nth-child(8),
.sequence-table td:nth-child(8) {
  text-align: right;
}

.sequence-table tr.is-selected {
  background: #e6f4f2;
}

.sequence-detail-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.3fr) minmax(110px, 0.7fr) repeat(5, minmax(110px, 0.7fr));
  gap: 18px;
  align-items: end;
}

.sequence-detail-grid .span-2 {
  grid-column: span 2;
}

.sequence-format-panel {
  display: grid;
  gap: 22px;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.sequence-format-heading {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.45fr);
  gap: 22px;
  align-items: end;
}

.sequence-format-field input {
  font-family: Consolas, "Courier New", monospace;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.sequence-number-preview {
  display: grid;
  gap: 7px;
  min-height: 67px;
  padding: 10px 14px;
  border: 1px solid #b9d6d1;
  border-radius: 8px;
  background: #e6f4f2;
}

.sequence-number-preview span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.sequence-number-preview output {
  overflow-wrap: anywhere;
  color: var(--accent-dark);
  font-family: Consolas, "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
}

.sequence-format-help {
  display: grid;
  gap: 10px;
}

.sequence-format-help p,
.sequence-reset-fieldset p {
  margin: 0;
  color: var(--muted);
}

.sequence-format-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sequence-format-token {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}

.sequence-format-token:hover:not(:disabled) {
  border-color: var(--accent);
  background: #f0f8f6;
}

.sequence-format-token code {
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 700;
}

.sequence-format-token span {
  color: var(--muted);
  font-size: 13px;
}

.sequence-reset-fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sequence-reset-fieldset legend {
  margin-bottom: 6px;
  font-weight: 700;
}

.sequence-reset-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sequence-reset-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.sequence-reset-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: #f0f8f6;
}

.sequence-reset-option input {
  margin-top: 3px;
  accent-color: var(--accent);
}

.sequence-reset-option span {
  display: grid;
  gap: 4px;
}

.sequence-reset-option small {
  color: var(--muted);
  line-height: 1.35;
}

.transformation-card {
  width: min(1320px, 100%);
}

.transformation-table-panel {
  max-height: 520px;
}

.transformation-table {
  min-width: 1120px;
}

.transformation-table th:nth-child(3),
.transformation-table td:nth-child(3),
.transformation-table th:nth-child(4),
.transformation-table td:nth-child(4) {
  text-align: right;
}

.transformation-table th:nth-child(5),
.transformation-table td:nth-child(5),
.transformation-table th:nth-child(6),
.transformation-table td:nth-child(6),
.transformation-table th:nth-child(7),
.transformation-table td:nth-child(7) {
  text-align: center;
}

.transformation-table tr.is-selected {
  background: #e6f4f2;
}

/* La carte peut devenir etroite (menu lateral deploye, ecran 1280) : les
   colonnes se replient d'elles-memes plutot que de deborder a droite. Le
   minimum de 170px garde le libelle des cases a cocher sur une ligne. */
.transformation-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  align-items: end;
}

.transformation-detail-grid .span-2 {
  grid-column: span 2;
}

/* Les deux cases a cocher restent cote a cote quand la rangee se replie. */
.transformation-flags {
  grid-column: span 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-height: 46px;
}

.sales-list-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.sales-left-actions,
.sales-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sales-list-toolbar .ghost-button {
  min-height: 32px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 4px;
  background: #fff;
}

.sales-list-toolbar .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 4px;
  text-decoration: none;
}

.sales-list-toolbar .ghost-button svg,
.sales-list-toolbar .primary-button svg {
  width: 16px;
  height: 16px;
}

.selection-status {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.list-row-pagination {
  font-size: 13px;
}

.list-page-size-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.list-page-size-field select {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

tr.is-page-hidden {
  display: none;
}

.sales-type-select select {
  min-width: 158px;
  min-height: 32px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}

.sales-search-field {
  min-width: 230px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
}

.sales-search-field svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.sales-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.inline-checkbox {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.sales-columns-control {
  position: relative;
}

.sales-columns-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: auto;
  left: 0;
  width: min(430px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 32, 0.18);
}

.sales-columns-popover[hidden] {
  display: none;
}

.sales-columns-popover form {
  display: grid;
  gap: 0;
}

.sales-columns-header,
.sales-columns-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.sales-columns-header {
  border-bottom: 1px solid var(--line);
}

.sales-columns-header > div {
  display: grid;
  gap: 2px;
}

.sales-columns-header small {
  color: var(--muted);
}

.sales-columns-options {
  display: grid;
  gap: 2px;
  max-height: min(390px, calc(100vh - 230px));
  margin: 0;
  padding: 12px 14px;
  overflow-y: auto;
  list-style: none;
}

.sales-column-option {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
}

.sales-column-option.is-dragging {
  border-color: var(--accent);
  background: #f1f5f9;
  opacity: 0.75;
}

.sales-column-grip {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  cursor: grab;
}

.sales-column-grip svg {
  width: 15px;
  height: 15px;
}

.sales-column-toggle {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sales-column-toggle input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.sales-column-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-column-move {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
}

.sales-column-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.sales-column-move-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.sales-column-move-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.sales-column-move-btn svg {
  width: 14px;
  height: 14px;
}

.sales-columns-error {
  margin: 0 14px;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}

.sales-columns-footer {
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.sales-columns-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-columns-footer .primary-button {
  min-height: 32px;
  padding: 0 12px;
}

.sales-document-workarea {
  height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sales-document-workarea > * {
  flex: 0 0 auto;
}

.sales-document-panel {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 4px;
  overflow: auto;
}

.sales-document-panel thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.sales-document-panel tfoot {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Listes simples (clients, articles...) : meme principe que les listes de
   pieces de ventes / achats. La zone de travail occupe la hauteur de la
   fenetre et ne defile pas, seul le panneau du tableau defile, ce qui permet
   a son entete de rester colle en haut. */
.module-list-workarea {
  height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.module-list-workarea > * {
  flex: 0 0 auto;
}

.module-list-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.module-list-panel thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.sales-document-table {
  min-width: max(100%, var(--sales-table-min-width, 1880px));
  font-size: 16px;
}

.sales-document-table [data-sales-column][hidden] {
  display: none;
}

.sales-document-table th,
.sales-document-table td {
  height: 44px;
  padding: 10px 8px;
  line-height: 1.35;
}

.data-table th[data-sort-column] .th-inner,
.data-table th[data-sales-column] .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
}

.data-table th[data-sort-column] .th-label,
.data-table th[data-sales-column] .th-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-filter-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.column-filter-btn:hover {
  background: var(--table-hover);
  color: var(--ink);
}

.column-filter-btn.is-filter-active {
  background: var(--accent);
  color: #fff;
}

.column-filter-btn.is-filter-active:hover {
  background: var(--accent-dark);
  color: #fff;
}

.column-filter-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.column-filter-popover {
  position: fixed;
  z-index: 90;
  width: min(280px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 32, 0.18);
  display: grid;
  gap: 0;
}

.column-filter-search {
  margin: 10px 12px 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.column-filter-options {
  display: grid;
  gap: 2px;
  max-height: 260px;
  padding: 4px 12px;
  overflow-y: auto;
}

.column-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  cursor: pointer;
  font-size: 13px;
}

.column-filter-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.column-filter-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-filter-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.column-filter-shortcuts {
  display: flex;
  gap: 12px;
  margin: 4px 12px 6px;
}

.column-filter-shortcuts button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.column-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}

.column-filter-footer button {
  min-height: 30px;
  padding: 0 12px;
}

.sales-document-table tbody tr:nth-child(odd) {
  background: var(--theme-table-row-odd-bg);
}

.sales-document-table tbody tr:nth-child(even) {
  background: var(--theme-table-row-even-bg);
}

.sales-document-table tbody tr:hover {
  background: var(--table-hover);
}

.sales-document-table td {
  white-space: nowrap;
}

.sales-document-table .selection-column {
  width: 42px;
  min-width: 42px;
  padding-inline: 6px;
  text-align: center;
}

.sales-document-table .selection-column input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.sales-document-table tbody tr.is-selected,
.sales-document-table tbody tr.is-selected:nth-child(odd),
.sales-document-table tbody tr.is-selected:nth-child(even) {
  background: #e6f4f2;
}

.sales-document-table td:nth-child(10),
.sales-document-table td:nth-child(11) {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-document-table th:nth-child(3),
.sales-document-table td:nth-child(3),
.sales-document-table th:nth-child(5),
.sales-document-table td:nth-child(5),
.sales-document-table th:nth-child(12),
.sales-document-table td:nth-child(12),
.sales-document-table th:nth-child(13),
.sales-document-table td:nth-child(13),
.sales-document-table th:nth-child(14),
.sales-document-table td:nth-child(14),
.sales-document-table th:nth-child(17),
.sales-document-table td:nth-child(17),
.sales-document-table th:nth-child(18),
.sales-document-table td:nth-child(18) {
  text-align: right;
}

.sales-document-table th:nth-child(19),
.sales-document-table td:nth-child(19) {
  text-align: center;
}

.sales-document-table th[data-sales-column="amount_excl_tax"],
.sales-document-table td[data-sales-column="amount_excl_tax"],
.sales-document-table th[data-sales-column="vat_amount"],
.sales-document-table td[data-sales-column="vat_amount"],
.sales-document-table th[data-sales-column="amount_incl_tax"],
.sales-document-table td[data-sales-column="amount_incl_tax"] {
  text-align: right;
}

/* Les sept jours de la planification hebdomadaire tiennent dans une case a cocher. */
.sales-document-table th[data-sales-column^="subscription_day_"],
.sales-document-table td[data-sales-column^="subscription_day_"] {
  width: 52px;
  text-align: center;
}

.sales-modern-card {
  width: min(1480px, 100%);
}

.sales-document-sticky-header {
  position: relative;
  display: grid;
  gap: 22px;
}

.payment-status-badge.is-document-flag {
  position: absolute;
  top: 0;
  right: 0;
}

.sales-document-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
}

.sales-modern-card.is-waiting-customer input:disabled,
.sales-modern-card.is-waiting-customer select:disabled,
.sales-modern-card.is-waiting-customer textarea:disabled,
.sales-modern-card.is-waiting-customer button:disabled {
  cursor: not-allowed;
  background: #eef1f5;
  color: #7b8794;
}

.sales-modern-card.is-waiting-customer .customer-tab-panel,
.sales-modern-card.is-waiting-customer .form-actions {
  opacity: 0.62;
}

.sales-document-summary {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(160px, 0.9fr) minmax(160px, 0.95fr) minmax(180px, 1fr) minmax(240px, 1.35fr);
  gap: 18px;
  align-items: end;
}

.span-4 {
  grid-column: 1 / -1;
}

.sales-document-object {
  grid-column: 4 / 6;
}

.field-inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.field-inline-action .icon-only-button {
  width: 38px;
  min-height: 38px;
  padding: 0;
}

/* Champ client de la piece : loupe de recherche + creation d une fiche. */
.field-inline-action.customer-code-actions {
  grid-template-columns: minmax(0, 1fr) 38px 38px;
}

.customer-code-error,
.supplier-code-error {
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* Suggestions de tiers proposees pendant la saisie du code client/fournisseur. */
.party-autocomplete-anchor {
  position: relative;
}

.party-autocomplete-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 46px;
  min-width: min(420px, 88vw);
  max-height: 288px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 21, 58, 0.16);
}

.party-autocomplete-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.party-autocomplete-option.has-badge {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.party-autocomplete-option:hover,
.party-autocomplete-option.is-active {
  background: rgba(27, 127, 112, 0.14);
}

.party-autocomplete-code {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.party-autocomplete-label {
  color: #3c5580;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-autocomplete-message {
  margin: 0;
  padding: 8px 10px;
  color: #5b6b8c;
  font-size: 13px;
}

.party-autocomplete-message.is-error {
  color: #b42318;
  font-weight: 600;
}

.sales-modern-card [name="customer_code"][aria-invalid="true"] {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.sales-modern-card [name="number"][readonly],
.sales-modern-card [name="customer_code"][readonly],
.sales-modern-card [name="due_date"][readonly],
.sales-modern-card select[name="nature"]:disabled {
  cursor: not-allowed;
  background: #eef1f5;
  color: #667085;
}

.sales-header-layout {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr) minmax(300px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.delivery-address-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 -6px;
}

.delivery-address-picker-button {
  min-height: 32px;
  gap: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.delivery-address-picker-button svg {
  width: 15px;
  height: 15px;
}

.sales-settings-panel textarea {
  min-height: 150px;
}

/* Liste deroulante filtrable des categories de pieces d achats. */
.category-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
  align-items: center;
}

.category-combo-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.category-combo-toggle:hover {
  border-color: var(--accent);
}

.category-combo-toggle svg {
  width: 16px;
  height: 16px;
}

.category-combo-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 21, 58, 0.16);
}

/* `display: grid` prime sur la regle navigateur de l attribut hidden. */
.category-combo-menu[hidden] {
  display: none;
}

.category-combo-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-combo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
  align-items: center;
  border-radius: 6px;
}

.category-combo-item.is-selected {
  background: rgba(27, 127, 112, 0.12);
}

.category-combo-choose {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-combo-choose:hover,
.category-combo-choose:focus-visible {
  background: rgba(27, 127, 112, 0.14);
}

.category-combo-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b42318;
  cursor: pointer;
}

.category-combo-remove:hover {
  background: rgba(180, 35, 24, 0.12);
}

.category-combo-remove svg {
  width: 15px;
  height: 15px;
}

.category-combo-empty {
  margin: 0;
  padding: 8px 10px;
  color: #5b6b8c;
  font-size: 13px;
}

.category-combo-create {
  min-height: 38px;
  padding: 0 10px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.category-combo-create:hover {
  background: rgba(27, 127, 112, 0.1);
}

.category-combo-error {
  margin: 0;
  padding: 4px 10px 6px;
  color: #b42318;
  font-size: 13px;
  font-weight: 600;
}

/* Liste deroulante avec zone de recherche (public/js/select-search.js) : le
   champ de saisie prend la place du select, qui reste masque dans la page. */
select[data-select-search][hidden] {
  display: none;
}

.select-search {
  position: relative;
}

.field .select-search > input.select-search-input {
  width: 100%;
  padding-right: 40px;
  text-overflow: ellipsis;
}

.select-search-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border: 0;
  border-radius: 0 7px 7px 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.select-search-input:disabled + .select-search-toggle {
  color: var(--muted);
  cursor: default;
}

.select-search-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(6, 21, 58, 0.16);
}

.select-search-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.select-search-item {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-search-item.is-selected {
  background: rgba(27, 127, 112, 0.12);
  font-weight: 600;
}

.select-search-item.is-active {
  background: rgba(27, 127, 112, 0.2);
}

.select-search-empty {
  margin: 0;
  padding: 8px 10px;
  color: #5b6b8c;
  font-size: 13px;
}

.sales-lines-card-panel {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 6px 4px 12px;
  background: #fff;
}

.sales-lines-card-list {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.sales-lines-inline-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-left: 46px;
}

.sales-lines-inline-actions .ghost-button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 700;
}

.sales-line-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-left: 2px;
}

.sales-line-card::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 34px;
  bottom: -12px;
  width: 1px;
  background: #d8dce3;
}

.sales-line-card:last-of-type::before {
  display: none;
}

.sales-line-order {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 36px 48px;
  gap: 8px;
  justify-items: center;
  align-content: start;
}

.sales-line-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.sales-line-move-stack {
  display: grid;
  overflow: hidden;
  width: 23px;
  transform: translateX(-1px);
  border-radius: 11px;
  background: #e6e6e6;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.sales-line-content {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  padding-top: 4px;
}

.sales-line-fields {
  display: grid;
  grid-template-columns: minmax(124px, 1.25fr) minmax(104px, 0.95fr) minmax(72px, 0.65fr) minmax(100px, 0.95fr) minmax(90px, 0.85fr) minmax(88px, 0.8fr) minmax(54px, 0.42fr) minmax(100px, 0.9fr) minmax(108px, 0.95fr);
  gap: 8px;
  align-items: end;
  width: 100%;
  min-width: 0;
}

.sales-line-fields.purchase-line-fields {
  grid-template-columns: minmax(124px, 1.25fr) minmax(96px, 0.9fr) minmax(104px, 0.95fr) minmax(72px, 0.65fr) minmax(100px, 0.95fr) minmax(90px, 0.85fr) minmax(88px, 0.8fr) minmax(54px, 0.42fr) minmax(100px, 0.9fr) minmax(108px, 0.95fr);
}

.sales-line-fields label,
.sales-line-description,
.sales-line-period-start,
.sales-line-subtotal-amount {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sales-line-fields span,
.sales-line-description span,
.sales-line-period-start span,
.sales-line-subtotal-amount span {
  color: #06153a;
  font-weight: 600;
}

.sales-line-quantity-field > span {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.sales-line-transformed-info {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.sales-line-vat-select {
  position: relative;
  display: block;
  min-width: 0;
  font-weight: 400;
}

.sales-line-vat-select::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #526173;
  border-bottom: 2px solid #526173;
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.sales-line-vat-select select {
  appearance: none;
  cursor: pointer;
  color: transparent;
  padding-right: 34px;
}

.sales-line-vat-select option {
    color: var(--ink);
}

.sales-line-vat-display {
  position: absolute;
  z-index: 1;
  inset: 1px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 34px 0 13px;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 400;
  pointer-events: none;
  white-space: nowrap;
}

.sales-line-fields input,
.sales-line-fields select,
.sales-line-period-start input,
.sales-line-subtotal-amount input,
.sales-line-description textarea,
.sales-line-rich-editor {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.sales-line-fields input,
.sales-line-fields select,
.sales-line-period-start input,
.sales-line-subtotal-amount input {
  padding: 0 14px;
  min-width: 0;
}

.sales-line-fields input[readonly] {
  background: #eef0fa;
}

.sales-line-subtotal-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.22fr);
  gap: 12px;
  align-items: end;
}

.sales-line-period-fields {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.sales-line-subtotal-amount input[readonly] {
  background: #eef0fa;
  font-weight: 700;
  text-align: right;
}

.sales-line-description textarea {
  min-height: 46px;
  padding: 12px 14px;
  resize: vertical;
}

.sales-line-designation-source {
  display: none;
}

.sales-line-rich-editor {
  min-height: 46px;
  max-height: 190px;
  overflow-y: auto;
  padding: 12px 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}

.sales-line-rich-editor:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
  outline: none;
}

.sales-line-rich-editor:empty::before {
  color: #98a2b3;
  content: attr(data-placeholder);
  pointer-events: none;
}

.sales-line-rich-editor[contenteditable="false"] {
  background: #eef0fa;
  cursor: default;
}

.sales-line-format-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  padding: 5px 7px;
  border: 1px solid #d8dce5;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.sales-line-format-panel[hidden] {
  display: none;
}

.sales-line-format-label {
  padding: 0 5px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.sales-line-format-group,
.sales-line-highlight-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #cfd5df;
  border-radius: 6px;
  background: #fff;
}

.sales-line-format-panel button,
.sales-line-format-panel select,
.sales-line-color-control {
  min-height: 30px;
  border: 1px solid #cfd5df;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  font: inherit;
}

.sales-line-format-panel button {
  display: inline-flex;
  min-width: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  cursor: pointer;
}

.sales-line-format-group button,
.sales-line-highlight-control button {
  border: 0;
  border-radius: 0;
}

.sales-line-format-group button + button {
  border-left: 1px solid #e1e5eb;
}

.sales-line-format-panel button:hover,
.sales-line-format-panel button.is-active,
.sales-line-format-panel button[aria-pressed="true"] {
  background: #e9eaff;
  color: #3730a3;
}

.sales-line-format-panel button:focus-visible,
.sales-line-format-panel select:focus-visible,
.sales-line-format-panel input:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 1px;
}

.format-underline {
  text-decoration: underline;
}

.sales-line-color-control {
  position: relative;
  display: inline-grid;
  grid-template-columns: 24px 16px;
  gap: 2px;
  align-items: center;
  padding: 0 6px;
  cursor: pointer;
  font-weight: 800;
}

.sales-line-format-panel input[type="color"] {
  width: 16px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.sales-line-highlight-control {
  align-items: center;
  padding-right: 6px;
}

.sales-line-format-panel select {
  padding: 0 26px 0 9px;
  cursor: pointer;
}

.sales-line-format-reset {
  gap: 5px;
}

.sales-line-format-reset svg,
.sales-line-highlight-control svg,
.line-format-toggle svg {
  width: 15px;
  height: 15px;
}

.line-format-toggle {
  position: relative;
}

.sales-line-card.has-designation-formatting .line-format-toggle::after {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #6366f1;
  content: "";
}
.sales-line-card.is-comment-line .sales-line-content,
.sales-line-card.is-subtotal-line .sales-line-content {
  padding: 4px 0 2px;
}

.sales-line-card.is-comment-line .sales-line-description textarea,
.sales-line-card.is-comment-line .sales-line-rich-editor {
  min-height: 88px;
  border-left: 4px solid var(--primary);
  background: #fbfcff;
}

.sales-line-card.is-subtotal-line .sales-line-description textarea,
.sales-line-card.is-subtotal-line .sales-line-rich-editor {
  min-height: 70px;
  border-left: 4px solid var(--primary);
  background: #fbfcff;
  font-weight: 700;
}

/* Presentation compacte de la saisie des lignes : la description quitte sa
   ligne dediee pour rejoindre les autres champs. Le bouton du bandeau bascule
   entre les deux vues et le choix est memorise par utilisateur. */
.lines-layout-toggle .lines-layout-icon-compact,
.lines-layout-toggle[aria-pressed="true"] .lines-layout-icon-detailed {
  display: none;
}

.lines-layout-toggle[aria-pressed="true"] .lines-layout-icon-compact {
  display: inline-flex;
}

.sales-lines-card-list.is-compact {
  gap: 6px;
}

/* Les bandeaux lateraux dictaient la hauteur de la rangee : pastille reduite,
   fleches de deplacement cote a cote et actions sur deux colonnes ramenent la
   ligne a la hauteur de ses seuls champs. */
.sales-lines-card-list.is-compact .sales-line-card {
  grid-template-columns: 36px minmax(0, 1fr) 44px;
  gap: 6px;
}

.sales-lines-card-list.is-compact .sales-line-card::before {
  top: 24px;
  bottom: -6px;
}

.sales-lines-card-list.is-compact .sales-line-content {
  padding-top: 0;
}

.sales-lines-card-list.is-compact .sales-line-order {
  grid-template-rows: 22px 16px;
  gap: 4px;
}

.sales-lines-card-list.is-compact .sales-line-number {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.sales-lines-card-list.is-compact .sales-line-move-stack {
  grid-auto-flow: column;
  width: 36px;
  height: 16px;
  border-radius: 8px;
  transform: none;
}

.sales-lines-card-list.is-compact .line-order-button {
  width: 18px;
  height: 16px;
}

.sales-lines-card-list.is-compact .line-order-button svg {
  width: 12px;
  height: 12px;
}

/* Pile devenue horizontale : le filet de separation change de cote. */
.sales-lines-card-list.is-compact .line-order-button + .line-order-button {
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.65);
}

/* Actions sur deux colonnes, a hauteur des champs de la ligne. */
.sales-lines-card-list.is-compact .sales-line-actions {
  grid-template-columns: repeat(2, 20px);
  gap: 4px;
  align-content: start;
  padding-top: 20px;
}

/* "display: contents" fait remonter les champs dans la grille de la ligne :
   description et champs partagent alors les memes colonnes. */
.sales-lines-card-list.is-compact .sales-line-fields {
  display: contents;
}

.sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-content {
  grid-template-columns:
    minmax(76px, 0.95fr) minmax(150px, 2.4fr) minmax(64px, 0.7fr) minmax(46px, 0.45fr)
    minmax(70px, 0.75fr) minmax(66px, 0.68fr) minmax(60px, 0.6fr) minmax(40px, 0.34fr)
    minmax(70px, 0.72fr) minmax(76px, 0.78fr);
  gap: 6px;
  /* Cale les libelles sur une meme ligne : une description longue etire la
     rangee vers le bas sans decrocher les autres champs. */
  align-items: start;
}

.purchase-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-content {
  grid-template-columns:
    minmax(68px, 0.85fr) minmax(68px, 0.85fr) minmax(130px, 2.2fr) minmax(60px, 0.68fr)
    minmax(44px, 0.44fr) minmax(64px, 0.72fr) minmax(62px, 0.66fr) minmax(58px, 0.58fr)
    minmax(40px, 0.34fr) minmax(64px, 0.7fr) minmax(70px, 0.76fr);
}

/* Vente : code article, description, puis le reste des champs.
   Achat : code article et code fournisseur precedent la description. */
.sales-lines-card-list.is-compact .sales-line-fields:not(.purchase-line-fields) > label {
  order: 3;
}

.sales-lines-card-list.is-compact .sales-line-fields:not(.purchase-line-fields) > label:first-child {
  order: 1;
}

.sales-lines-card-list.is-compact .purchase-line-fields > label {
  order: 3;
}

.sales-lines-card-list.is-compact .purchase-line-fields > label:nth-child(-n + 2) {
  order: 1;
}

.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description {
  order: 2;
}

.sales-lines-card-list.is-compact .sales-line-content > .sales-line-format-panel {
  order: 4;
  grid-column: 1 / -1;
}

/* Densite : libelles et champs resserres pour gagner la hauteur liberee. */
.sales-lines-card-list.is-compact .sales-line-fields > label,
.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description {
  gap: 4px;
}

.sales-lines-card-list.is-compact .sales-line-fields > label > span:first-child,
.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description > span {
  font-size: 12px;
}

.sales-lines-card-list.is-compact .sales-line-fields input,
.sales-lines-card-list.is-compact .sales-line-fields select,
.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description textarea,
.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description .sales-line-rich-editor {
  min-height: 40px;
}

.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description textarea,
.sales-lines-card-list.is-compact .sales-line-content > .sales-line-description .sales-line-rich-editor {
  max-height: 96px;
  padding: 9px 10px;
}

/* Lignes texte, periode et sous-total : meme densite que les lignes article,
   sinon elles rouvriraient l'ecart que la vue compacte vient de refermer. */
.sales-lines-card-list.is-compact .sales-line-subtotal-fields,
.sales-lines-card-list.is-compact .sales-line-period-fields {
  gap: 6px;
}

.sales-lines-card-list.is-compact .sales-line-subtotal-fields > label,
.sales-lines-card-list.is-compact .sales-line-period-fields > label {
  gap: 4px;
}

.sales-lines-card-list.is-compact .sales-line-subtotal-fields > label > span:first-child,
.sales-lines-card-list.is-compact .sales-line-period-fields > label > span:first-child {
  font-size: 12px;
}

.sales-lines-card-list.is-compact .sales-line-subtotal-fields textarea,
.sales-lines-card-list.is-compact .sales-line-subtotal-fields .sales-line-rich-editor,
.sales-lines-card-list.is-compact .sales-line-period-fields textarea,
.sales-lines-card-list.is-compact .sales-line-period-fields .sales-line-rich-editor {
  min-height: 40px;
  max-height: 96px;
  padding: 9px 10px;
}

.sales-lines-card-list.is-compact .sales-line-subtotal-amount input,
.sales-lines-card-list.is-compact .sales-line-period-start input {
  min-height: 40px;
  padding: 0 10px;
}

/* Colonnes etroites : les marges internes laissent la place au texte saisi. */
.sales-lines-card-list.is-compact .sales-line-fields input,
.sales-lines-card-list.is-compact .sales-line-fields select {
  padding: 0 10px;
}

.sales-lines-card-list.is-compact .sales-line-vat-select select {
  padding-right: 24px;
}

.sales-lines-card-list.is-compact .sales-line-vat-select::after {
  right: 9px;
}

.sales-lines-card-list.is-compact .sales-line-vat-display {
  padding: 0 24px 0 10px;
}

/* Les libelles ne servent que d'entete de colonnes : seule la premiere ligne
   article les porte, les suivantes se rangent dessous comme les rangees d'un
   tableau. Le selecteur designe toute ligne article precedee d'une autre, donc
   toutes sauf la premiere, et se reevalue seul apres un ajout ou un deplacement.
   Cet entete n'a de sens qu'au-dessus du point de repli, ou la ligne tient sur
   une rangee. */
@media (min-width: 1081px) {
  /* font-size: 0 plutot que display: none : le rappel de quantite transformee
     vit dans ce meme libelle et doit rester lisible. */
  .sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) ~ .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-fields > label > span:first-child,
  .sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) ~ .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-content > .sales-line-description > span {
    font-size: 0;
    line-height: 0;
  }

  .sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) ~ .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-transformed-info {
    font-size: 11px;
    line-height: 1.35;
  }

  /* Plus de libelle au-dessus des champs : les actions remontent d'autant. */
  .sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) ~ .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-actions {
    padding-top: 0;
  }
}

/* Sous cette largeur la rangee ne tient plus sur une ligne : la vue compacte
   reprend l'empilement de la vue detaillee. Les selecteurs reprennent ceux de
   la vue compacte, sans quoi leur specificite l'emporterait ici. */
@media (max-width: 1080px) {
  .sales-lines-card-list.is-compact .sales-line-card {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
  }

  .sales-lines-card-list.is-compact .sales-line-actions {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-top: 8px;
  }

  .sales-lines-card-list.is-compact .sales-line-fields {
    display: grid;
  }

  .sales-lines-card-list.is-compact .sales-line-card:not(.is-comment-line):not(.is-subtotal-line) .sales-line-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-lines-card-list.is-compact .sales-line-fields:not(.purchase-line-fields) > label,
  .sales-lines-card-list.is-compact .sales-line-fields:not(.purchase-line-fields) > label:first-child,
  .sales-lines-card-list.is-compact .purchase-line-fields > label,
  .sales-lines-card-list.is-compact .purchase-line-fields > label:nth-child(-n + 2),
  .sales-lines-card-list.is-compact .sales-line-content > .sales-line-description,
  .sales-lines-card-list.is-compact .sales-line-content > .sales-line-format-panel {
    order: 0;
  }
}

@media (max-width: 860px) {
  .sales-lines-card-list.is-compact .sales-line-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .sales-lines-card-list.is-compact .sales-line-actions {
    grid-template-columns: repeat(2, 40px);
  }
}

.sales-line-actions {
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  padding-top: 8px;
}

.line-action-button,
.line-order-button {
  display: grid;
  place-items: center;
  border: 0;
  color: #4b5563;
  cursor: pointer;
}

.line-action-button {
  width: 20px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  background: #eef0f3;
}

.line-action-button svg {
  width: 14px;
  height: 14px;
}

.sales-lines-bottom {
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(240px, 320px);
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  margin-top: 16px;
  padding-left: 46px;
  padding-right: 32px;
}

.quick-entry-modern {
  width: 100%;
  padding-block: 14px;
}

.quick-entry-error-backdrop,
.line-delete-confirm-backdrop {
  align-items: center;
  justify-content: center;
}

.line-delete-confirm-backdrop {
  display: block;
  padding: 0;
  background: transparent;
}

.quick-entry-error-modal,
.line-delete-confirm-modal {
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 32, 0.18);
  outline: none;
}

.line-delete-confirm-modal {
  position: fixed;
  width: min(320px, calc(100vw - 24px));
}

.quick-entry-error-modal h2,
.line-delete-confirm-modal h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.quick-entry-error-modal p,
.line-delete-confirm-modal p {
  margin: 0;
  color: var(--muted);
}

.quick-entry-error-modal button {
  justify-self: end;
}

.line-delete-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.line-delete-confirm-actions .danger-button {
  background: #b91c1c;
  color: #fff;
}

.line-delete-confirm-actions .danger-button:hover {
  background: #991b1b;
  color: #fff;
}

/* Icone discrete de fin de ligne : elle ouvre la fenetre de details (Intrastat,
   puis champs parametrables). Plus effacee que Supprimer et Dupliquer pour ne
   pas alourdir la ligne. */
.line-action-button-details {
  width: 18px;
  min-height: 18px;
  height: 18px;
  background: transparent;
  color: #9ca3af;
}

.line-action-button-details:hover {
  background: #eef0f3;
  color: #4b5563;
}

.line-action-button-details svg {
  width: 12px;
  height: 12px;
}

.line-details-backdrop {
  display: block;
  padding: 0;
  background: transparent;
}

.line-details-modal {
  position: fixed;
  width: min(320px, calc(100vw - 24px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(15, 23, 32, 0.18);
  outline: none;
}

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

.line-details-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.line-details-close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #eef0f3;
  color: #4b5563;
  cursor: pointer;
}

.line-details-close svg {
  width: 13px;
  height: 13px;
}

.line-details-panel {
  display: grid;
  gap: 8px;
}

/* Les champs parametrables sont separes du bloc Intrastat par un filet. */
.line-details-panel + .line-details-panel {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* La liste des champs parametrables peut etre longue, elle defile. */
.line-details-custom-fields {
  display: grid;
  gap: 8px;
  max-height: min(320px, 50vh);
  overflow-y: auto;
}

.line-details-custom-fields .field span {
  font-size: 12px;
}

.line-details-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.sales-total-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  justify-self: end;
  width: min(320px, 100%);
}

.sales-total-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

.sales-total-row span {
  color: var(--muted);
  font-weight: 700;
}

.sales-total-row strong {
  color: var(--ink);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Ligne "Net a payer" : total de la piece une fois les acomptes deduits. */
.sales-total-row-net {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sales-total-row-net strong {
  font-weight: 700;
}

.compact-total {
  width: min(320px, 100%);
  margin-left: auto;
}

.sales-payment-modern-panel {
  max-height: 340px;
}

.sales-payment-table th:first-child,
.sales-payment-table td:first-child {
  width: 42px;
  text-align: center;
}

.sales-payment-table input,
.sales-payment-table select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: var(--ink);
}

.sales-payment-table input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

.sales-payment-table td:nth-child(3) input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-list-payment-modal {
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto;
}

.sales-list-payment-table-panel {
  max-height: 360px;
}

.sales-list-payment-table input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-list-payment-table th:nth-child(5),
.sales-list-payment-table td:nth-child(5),
.sales-list-payment-table th:nth-child(6),
.sales-list-payment-table td:nth-child(6) {
  text-align: right;
}

.line-order-button {
  width: 23px;
  height: 24px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #8a8f98;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.line-order-button svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.line-order-button + .line-order-button {
  border-top: 1px solid rgba(255, 255, 255, 0.65);
}

.line-order-button:not(:disabled):hover {
  background: #d2d5da;
  color: #5e636b;
}

.line-order-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(23, 32, 51, 0.42);
}

.modal-backdrop[hidden] {
  display: none;
}

body.has-modal {
  overflow: hidden;
}

.article-picker-modal {
  width: min(1120px, 100%);
  max-height: min(760px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.28);
}

.delivery-address-picker-modal {
  width: min(860px, 100%);
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
}

.delivery-address-picker-table-panel {
  min-height: 180px;
}

.delivery-address-picker-table th:first-child,
.delivery-address-picker-table td:first-child {
  width: 190px;
  text-align: left;
}

.delivery-address-picker-table th:nth-child(2),
.delivery-address-picker-table td:nth-child(2) {
  min-width: 240px;
}

.delivery-address-picker-table .clickable-row.is-selected {
  background: #eef0ff;
  box-shadow: inset 3px 0 0 var(--primary);
}

.delivery-address-picker-table .clickable-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.delivery-address-name {
  display: block;
  font-weight: 700;
}

.delivery-address-default-badge {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #3730a3;
  background: #e9eaff;
  font-size: 11px;
  font-weight: 800;
}

/* Fournisseur propose a la selection du tiers d une piece de vente, quand un
   plugin actif l autorise (facture de commission a un fournisseur). */
.tiers-supplier-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  color: #92400e;
  background: #fef3c7;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
}

.article-picker-header,
.article-picker-footer,
.article-picker-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.article-picker-header,
.article-picker-footer {
  justify-content: space-between;
}

.article-picker-header h2 {
  margin: 0;
  font-size: 24px;
}

.article-picker-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.article-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 140px auto;
  gap: 14px;
  align-items: end;
}

.article-picker-toolbar.purchase-article-picker-toolbar {
  grid-template-columns: minmax(260px, 1fr) 140px auto auto;
}

.article-picker-toolbar .primary-button {
  padding: 0 18px;
}

.article-picker-table-panel {
  min-height: 220px;
}

.article-picker-table th:first-child,
.article-picker-table td:first-child {
  width: 46px;
  text-align: center;
}

.article-picker-table th:nth-child(7),
.article-picker-table td:nth-child(7) {
  text-align: right;
}

.customer-picker-table th:nth-child(4),
.customer-picker-table td:nth-child(4),
.supplier-picker-table th:nth-child(4),
.supplier-picker-table td:nth-child(4) {
  white-space: nowrap;
}

/*
 * Creation rapide d une fiche client depuis une piece : meme habillage que les
 * fenetres de selection, mais seul le corps du formulaire defile afin de garder
 * l entete et les boutons visibles.
 */
.customer-create-modal {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
}

.customer-create-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 16px;
}

.customer-create-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/*
 * Fenetres de selection (client, fournisseur, article) : mise en page en
 * colonne plutot qu en grille. Le bloc d erreur est masque la plupart du temps,
 * et la grille a lignes fixes attribuait alors la ligne souple au pied de page
 * au lieu du tableau, qui debordait donc en bas de la fenetre quand la liste
 * etait longue. Vaut aussi pour les selecteurs ouverts depuis la duplication
 * d une piece.
 */
[data-customer-picker] .article-picker-modal,
[data-supplier-picker] .article-picker-modal,
[data-article-picker] .article-picker-modal,
[data-duplicate-customer-picker] .article-picker-modal,
[data-duplicate-supplier-picker] .article-picker-modal {
  display: flex;
  flex-direction: column;
}

/* Seule la zone de tableau defile : entete, recherche et pagination restent visibles. */
[data-customer-picker] .article-picker-table-panel,
[data-supplier-picker] .article-picker-table-panel,
[data-article-picker] .article-picker-table-panel,
[data-duplicate-customer-picker] .article-picker-table-panel,
[data-duplicate-supplier-picker] .article-picker-table-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

[data-customer-picker] .article-picker-table thead th,
[data-supplier-picker] .article-picker-table thead th,
[data-article-picker] .article-picker-table thead th,
[data-duplicate-customer-picker] .article-picker-table thead th,
[data-duplicate-supplier-picker] .article-picker-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* La bordure d une cellule collante ne suit pas le defilement en border-collapse. */
  box-shadow: inset 0 -1px 0 var(--line);
}

.history-document-modal {
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
}

.history-document-table {
  min-width: 980px;
}

.history-document-table th:first-child,
.history-document-table td:first-child {
  width: 170px;
  text-align: left;
}

.history-document-table th:nth-child(7),
.history-document-table td:nth-child(7),
.history-document-table th:nth-child(8),
.history-document-table td:nth-child(8) {
  text-align: right;
}

.history-document-table .clickable-row {
  cursor: pointer;
}

.history-document-table .is-current-history-row td {
  font-weight: 700;
  background: #e6f4f2;
}

.history-relation {
  display: inline-block;
  white-space: nowrap;
}

.article-picker-pagination {
  flex: 1;
  margin-top: 0;
}

.article-picker-actions .primary-button,
.article-picker-actions .ghost-button,
.article-picker-header .ghost-button {
  gap: 8px;
}

.article-picker-error {
  margin: 0;
}

.article-picker-error[hidden] {
  display: none;
}

.bom-picker-toolbar {
  grid-template-columns: 1fr;
}

.bom-picker-table th:first-child,
.bom-picker-table td:first-child {
  width: 140px;
}

.bom-picker-table th:last-child,
.bom-picker-table td:last-child {
  width: 110px;
  text-align: right;
}

.bom-picker-table .clickable-row {
  cursor: pointer;
}

.bom-picker-table .clickable-row:hover {
  background: #f3f4fb;
}

.bom-tree-panel {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}

.bom-tree-panel h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.bom-tree-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.bom-tree-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.bom-tree,
.bom-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bom-tree-children {
  margin-left: 22px;
  padding-left: 14px;
  border-left: 1px dashed var(--line);
}

.bom-tree-node {
  margin: 6px 0;
}

.bom-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.bom-tree-row svg {
  flex: none;
  color: var(--primary);
}

.bom-tree-code {
  font-weight: 800;
  color: var(--ink);
}

.bom-tree-designation {
  color: var(--ink);
}

.bom-tree-qty {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.bom-tree-qty em {
  font-weight: 600;
  font-style: normal;
  color: var(--muted);
}

.sales-form-window {
  min-width: 980px;
  min-height: calc(100vh - 56px);
  margin: -28px;
  background: #f3f3f3;
  color: #000;
  font-family: inherit;
  font-size: 12px;
}

.sales-form-window input,
.sales-form-window select,
.sales-form-window textarea {
  min-height: 19px;
  border: 1px solid #c9ced4;
  border-radius: 0;
  background: #f8f8f8;
  color: #000;
  font: inherit;
}

.sales-form-window input,
.sales-form-window select {
  height: 19px;
  padding: 0 5px;
}

.sales-form-window textarea {
  padding: 5px;
  resize: vertical;
}

.sales-form-header {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 12px 6px 16px;
}

.sales-identity-grid {
  display: grid;
  grid-template-columns: 116px 140px 116px 138px 116px minmax(210px, 292px);
  gap: 5px 6px;
  align-items: center;
}

.wd-field {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.wd-field span {
  white-space: nowrap;
}

.wd-field.no-label {
  grid-template-columns: 1fr;
}

.wd-field.no-label span {
  display: none;
}

.wd-field.short input {
  width: 116px;
}

.wd-field.compact {
  grid-template-columns: 40px 100px;
}

.wd-field.date {
  grid-column: 5 / 7;
  grid-template-columns: 124px 96px;
}

.wd-field.date input {
  width: 96px;
}

.wd-field.wide input {
  width: 292px;
}

.wd-field.object {
  grid-column: 1 / 7;
}

.wd-field.object input {
  width: 672px;
}

.sales-command-bar {
  display: flex;
  gap: 8px;
}

.sales-command-bar button,
.sales-command-bar a {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid #c9ced4;
  color: #101828;
  background: #f6f6f6;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.sales-command-bar svg {
  width: 20px;
  height: 20px;
}

.sales-command-bar span {
  font-size: 10px;
}

.sales-command-bar [data-lucide="mail"] {
  color: #e2a223;
}

.sales-command-bar [data-lucide="check"] {
  color: #37a348;
  stroke-width: 3;
}

.sales-command-bar [data-lucide="x"] {
  color: #ed4139;
  stroke-width: 3;
}

.wd-tabs {
  display: flex;
  align-items: end;
  height: 30px;
  padding-left: 4px;
  border-bottom: 2px solid #00a8e8;
}

.wd-tabs button {
  min-width: 150px;
  height: 30px;
  border: 0;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  color: #111;
  background: #f3f3f3;
  cursor: pointer;
}

.wd-tabs button.is-active {
  border: 1px solid #00a8e8;
  border-bottom-color: #fff;
  background: #fff;
}

.sales-tab-panel {
  display: none;
}

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

.wd-subtabs {
  display: flex;
  height: 30px;
  align-items: end;
  padding-left: 10px;
  border-bottom: 2px solid #00a8e8;
}

.wd-subtabs button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  cursor: pointer;
}

.wd-subtabs button.is-active {
  border-color: #00a8e8;
  background: #fff;
}

.sales-address-panel {
  display: none;
}

.sales-address-panel.is-active {
  display: block;
}

.sales-document-grid {
  display: grid;
  grid-template-columns: 420px 430px;
  gap: 26px;
  padding: 14px 20px 28px;
}

.sales-left-form,
.sales-right-form {
  display: grid;
  gap: 7px;
  align-content: start;
}

.sales-tax-mode {
  display: flex;
  gap: 22px;
  align-items: center;
  height: 28px;
}

.sales-tax-mode label {
  color: #89909a;
}

.wd-field.full input,
.wd-field.full select {
  width: 312px;
}

.wd-field.with-select input {
  width: 312px;
}

.wd-field.with-select::before {
  content: "";
  justify-self: end;
  align-self: center;
  width: 102px;
  height: 19px;
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #c9ced4;
  background: linear-gradient(#fff, #eceff2);
  pointer-events: none;
}

.wd-field.with-select input {
  grid-column: 2;
  grid-row: 1;
  padding-left: 110px;
}

.sales-two-fields {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 8px;
}

.sales-two-fields .wd-field {
  grid-template-columns: 80px 1fr;
}

.sales-two-fields .wd-field.postal input,
.sales-two-fields .wd-field.origin input {
  width: 108px;
}

.sales-two-fields .wd-field.city input {
  width: 160px;
}

.sales-two-fields.small .wd-field input,
.sales-two-fields.account .wd-field input {
  width: 108px;
}

.wd-field.half input {
  width: 108px;
}

.sales-right-form {
  padding-top: 39px;
}

.wd-field.small-select {
  grid-template-columns: 80px 106px;
}

.wd-field.small-select select {
  width: 106px;
}

.sales-source-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.sales-source-row input {
  width: 220px;
}

.wd-field.comments {
  grid-template-columns: 80px 330px;
  align-items: start;
  margin-top: 34px;
}

.wd-field.comments textarea {
  width: 330px;
  min-height: 118px;
}

.sales-delivery-layout {
  display: grid;
  grid-template-columns: 80px 420px;
  gap: 8px;
  padding: 14px 20px;
}

.map-pin {
  display: grid;
  justify-content: end;
  padding-top: 8px;
  color: #d84336;
}

.map-pin svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke: currentColor;
}

.wd-grid-panel {
  border-radius: 0;
  background: #fff;
}

.wd-grid-table {
  font-size: 12px;
}

.wd-grid-table th,
.wd-grid-table td {
  height: 20px;
  padding: 2px 5px;
  border: 1px solid #cfd4da;
}

.wd-grid-table th {
  color: #111;
  background: linear-gradient(#f4f4f4, #dddddd);
  font-weight: 400;
  text-align: center;
}

.wd-grid-table tbody tr:nth-child(even) {
  background: #f3f3f3;
}

.wd-grid-table tr.is-selected {
  background: #c5e7f3;
}

.sales-lines-panel {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 6px 4px 10px;
}

.sales-lines-grid {
  height: calc(100vh - 218px);
}

.sales-lines-grid table {
  min-width: 1200px;
}

.sales-lines-grid th:nth-child(1),
.sales-lines-grid td:nth-child(1) {
  width: 32px;
  text-align: right;
}

.sales-lines-grid th:nth-child(2),
.sales-lines-grid td:nth-child(2) {
  width: 80px;
}

.sales-lines-grid th:nth-child(8),
.sales-lines-grid td:nth-child(8) {
  min-width: 520px;
}

.sales-lines-footer {
  display: grid;
  grid-template-columns: 322px 190px 1fr;
  gap: 8px;
  align-items: end;
  padding: 10px 4px 0 62px;
}

.sales-form-window .sales-line-actions {
  display: grid;
  grid-template-columns: repeat(2, 108px);
  gap: 4px 7px;
}

.sales-form-window .sales-line-actions button,
.sales-attachment-actions button {
  min-height: 25px;
  border: 1px solid #c9ced4;
  background: #f0f0f0;
  cursor: pointer;
  font: inherit;
}

.sales-form-window .sales-line-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px;
}

.sales-form-window .sales-line-actions svg {
  width: 16px;
  height: 16px;
}

.sales-form-window .sales-line-actions [data-lucide="plus-circle"],
.sales-mini-toolbar [data-lucide="plus-circle"] {
  color: #5fb84b;
  fill: #5fb84b;
  stroke: #fff;
}

.sales-form-window .sales-line-actions [data-lucide="minus-circle"],
.sales-mini-toolbar [data-lucide="minus-circle"] {
  color: #e34a43;
  fill: #e34a43;
  stroke: #fff;
}

.quick-entry {
  width: 190px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 4px 8px 7px;
  border: 1px solid #c9ced4;
}

.quick-entry legend {
  color: #555;
}

.quick-entry input {
  width: 54px;
}

.sales-totals,
.sales-total-bottom {
  display: grid;
  justify-content: end;
  gap: 6px;
}

.sales-totals .wd-field,
.sales-total-bottom .wd-field {
  grid-template-columns: 94px 116px;
}

.sales-totals input,
.sales-total-bottom input {
  width: 116px;
  text-align: right;
}

.sales-payments-panel {
  position: relative;
  min-height: calc(100vh - 148px);
  padding: 14px 15px;
}

.sales-mini-toolbar {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}

.sales-mini-toolbar button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #c9ced4;
  background: #f3f3f3;
  cursor: pointer;
}

.sales-mini-toolbar svg {
  width: 16px;
  height: 16px;
}

.sales-payment-grid {
  width: 510px;
  height: 312px;
}

.sales-payment-grid th:nth-child(1),
.sales-payment-grid td:nth-child(1) {
  width: 100px;
}

.sales-payment-grid th:nth-child(2),
.sales-payment-grid td:nth-child(2) {
  width: 120px;
}

.sales-payment-grid th:nth-child(3),
.sales-payment-grid td:nth-child(3) {
  width: 172px;
}

.sales-total-bottom {
  position: absolute;
  right: 8px;
  bottom: 16px;
}

.sales-attachments-panel {
  padding: 8px;
}

.sales-attachment-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.sales-attachment-actions button {
  min-width: 82px;
}

.sales-attachment-actions button:nth-child(3),
.sales-attachment-actions button:nth-child(4) {
  min-width: 120px;
}

.sales-attachment-grid {
  width: 765px;
  height: 240px;
}

.sales-attachment-grid th {
  text-align: center;
}

.article-window {
  min-height: 100vh;
  background: #f3f3f3;
  color: #000;
  font-family: inherit;
  font-size: 13px;
}

.article-titlebar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  color: #6a6a6a;
  background: #eeeeee;
}

.article-form-window {
  display: grid;
  gap: 0;
}

.article-headline {
  display: grid;
  grid-template-columns: 114px minmax(320px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
}

.article-field {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 9px;
}

.article-field input,
.article-field select,
.article-field textarea {
  min-height: 18px;
  border: 1px solid #c9ced4;
  border-radius: 0;
  background: #f8f8f8;
  color: #000;
  font-size: 12px;
}

.article-field input,
.article-field select {
  height: 19px;
  padding: 0 5px;
}

.article-field textarea {
  min-height: 126px;
  padding: 6px;
  resize: vertical;
}

.code-field input {
  width: 74px;
}

.designation-field input {
  width: min(520px, 100%);
}

.article-tabs {
  display: flex;
  align-items: end;
  height: 29px;
  padding-left: 2px;
  border-bottom: 2px solid #00a8e8;
}

.article-tabs button {
  height: 27px;
  padding: 0 8px;
  border: 1px solid #c8cdd3;
  border-bottom: 0;
  background: #f3f3f3;
  cursor: pointer;
  font-size: 13px;
}

.article-tabs button.is-active {
  background: #fff;
  border-color: #00a8e8;
}

.article-notice {
  margin: 10px 22px 0;
}

.article-general-grid {
  display: grid;
  grid-template-columns: 386px 110px 212px 42px;
  grid-auto-rows: min-content;
  column-gap: 8px;
  row-gap: 16px;
  align-items: start;
  padding: 26px 22px 18px;
}

.secondary-designation {
  grid-column: 1 / 3;
}

.secondary-designation input {
  width: 374px;
}

.active-check {
  grid-column: 3 / 4;
  width: 106px;
  padding: 4px;
  border: 1px solid #c9ced4;
  background: #f8f8f8;
}

.external-code {
  grid-column: 2 / 4;
}

.external-code input {
  width: 106px;
}

.copy-check {
  grid-column: 1 / 3;
  margin-top: 1px;
}

.article-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-check input {
  width: 13px;
  height: 13px;
  accent-color: #00a8e8;
}

.description-field {
  grid-column: 1 / 2;
  align-items: start;
}

.description-field textarea {
  width: 314px;
}

.photo-field {
  grid-column: 3 / 5;
  grid-row: 4 / span 4;
  display: grid;
  grid-template-columns: 212px 28px;
  gap: 7px;
  align-items: start;
}

.photo-preview {
  width: 212px;
  height: 208px;
  display: grid;
  place-items: center;
  border: 1px solid #c9ced4;
  background: #f8f8f8;
  color: #9aa3ad;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.photo-button {
  width: 27px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #c9ced4;
  background: #eeeeee;
  cursor: pointer;
}

.photo-button input {
  display: none;
}

.article-placeholder {
  width: min(720px, calc(100% - 44px));
  min-height: 240px;
  display: grid;
  place-items: center;
  gap: 8px;
  margin: 26px 22px;
  border: 1px solid #c9ced4;
  background: #fff;
  color: #4b5563;
}

.article-actions {
  display: flex;
  gap: 10px;
  padding: 10px 22px 22px;
}

.article-actions .ghost-button,
.article-actions .primary-button {
  gap: 8px;
  min-height: 36px;
}

@media (max-width: 860px) {
  .email-workbench,
  .email-body-panel {
    grid-template-columns: 1fr;
  }

  .email-sidebar,
  .email-attachments {
    border-right: 0;
    border-left: 0;
  }

  .smtp-port-row,
  .peppol-contact-row,
  .peppol-credentials-row {
    grid-template-columns: 1fr;
  }

  .auth-panel,
  .dashboard-shell {
    padding: 28px;
  }

  .dashboard-header {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .dashboard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .import-layout {
    grid-template-columns: 1fr;
  }

  .list-toolbar {
    grid-template-columns: 1fr;
  }

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

  .workspace {
    grid-template-rows: auto 1fr;
  }

  .workspace-body,
  .workspace.is-collapsed .workspace-body {
    grid-template-columns: 64px 1fr;
  }

  .side-nav {
    top: 0;
    height: 100vh;
    padding-inline: 6px;
  }

  .side-item,
  .logout-link {
    justify-content: center;
    padding: 0;
  }

  .side-item span,
  .logout-link span,
  .date-card strong,
  .date-card span:not(.date-day) {
    display: none;
  }

  .side-caret,
  .side-submenu {
    display: none;
  }

  .side-subitem,
  .side-subsubitem {
    padding: 0;
  }

  .date-day {
    margin: 0;
    font-size: 30px;
  }

  .dashboard-workarea {
    padding: 14px;
  }

  .module-workarea {
    padding: 18px;
  }

  .module-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .article-main-fields,
  .article-form-grid,
  .article-family-levels,
  .article-tracking-grid,
  .article-stock-form-grid,
  .article-stock-panels,
  .article-stock-line-fields,
  .customer-form-grid,
  .supplier-form-grid,
  .customer-main-fields,
  .customer-summary-grid,
  .customer-params-layout,
  .customer-form-grid.compact,
  .supplier-form-grid.compact,
  .sales-document-summary,
  .sales-header-layout,
  .sales-lines-bottom,
  .article-picker-toolbar,
  .company-layout,
  .company-inline-fields,
  .tariff-layout,
  .tariff-detail-grid,
  .tariff-actions-top,
  .pricing-rule-detail-grid,
  .pricing-rule-actions-top,
  .unit-detail-grid,
  .fiscal-year-detail-grid,
  .vat-detail-grid,
  .currency-detail-grid,
  .language-detail-grid,
  .piece-detail-grid,
  .edition-merge-field-row,
  .edition-model-editor,
  .sequence-detail-grid,
  .sequence-format-heading,
  .sequence-reset-options,
  .transformation-detail-grid,
  .database-inline-fields,
  .bank-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-notes {
    grid-column: auto;
  }

  .span-2,
  .span-3,
  .span-4,
  .sales-document-object,
  .vat-detail-grid .span-2,
  .piece-detail-grid .span-2,
  .sequence-detail-grid .span-2,
  .transformation-detail-grid .span-2,
  .transformation-flags {
    grid-column: auto;
  }

  .tariff-detail-pane {
    padding-top: 0;
    gap: 24px;
  }

  .article-headline,
  .article-general-grid,
  .sales-form-header,
  .sales-identity-grid,
  .sales-document-grid,
  .sales-delivery-layout,
  .sales-lines-footer {
    grid-template-columns: 1fr;
  }

  .sales-form-window {
    min-width: 0;
    margin: -18px;
    overflow: auto;
  }

  .sales-command-bar,
  .sales-two-fields,
  .sales-line-actions {
    flex-wrap: wrap;
    grid-template-columns: 1fr;
  }

  .sales-line-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .sales-line-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-line-subtotal-fields,
  .sales-line-period-fields {
    grid-template-columns: 1fr;
  }

  .sales-line-actions {
    grid-column: 2;
    grid-template-columns: repeat(2, 40px);
    justify-content: end;
  }

  .wd-field,
  .wd-field.date,
  .wd-field.compact,
  .wd-field.comments,
  .wd-field.small-select {
    grid-template-columns: 1fr;
  }

  .wd-field.object,
  .wd-field.date {
    grid-column: auto;
  }

  .wd-field input,
  .wd-field select,
  .wd-field textarea,
  .wd-field.object input,
  .wd-field.full input,
  .wd-field.full select,
  .wd-field.comments textarea {
    width: 100%;
  }

  .secondary-designation,
  .active-check,
  .external-code,
  .copy-check,
  .description-field,
  .photo-field {
    grid-column: auto;
    grid-row: auto;
  }

  .article-field {
    grid-template-columns: 1fr;
  }

  .secondary-designation input,
  .description-field textarea,
  .designation-field input {
    width: 100%;
  }

  .photo-field {
    grid-template-columns: 1fr 28px;
  }

  .photo-preview {
    width: 100%;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .article-picker-modal {
    max-height: calc(100vh - 24px);
    padding: 16px;
  }

  .article-picker-header,
  .article-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .article-picker-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 860px) {
  .sales-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-search-field {
    min-width: min(230px, 100%);
    flex: 1 1 100%;
  }

}

@media (max-width: 560px) {
  .sales-left-actions,
  .sales-right-actions {
    align-items: stretch;
  }

  .sales-type-select,
  .sales-type-select select,
  .sales-search-field,
  .sales-columns-control,
  .sales-columns-control > [data-toggle-sales-columns] {
    width: 100%;
  }

  .sales-columns-popover {
    right: auto;
    left: 0;
    width: min(400px, calc(100vw - 48px));
  }

  .edition-merge-fields-header {
    flex-direction: column;
  }

}

.subscription-settings-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.3fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.subscription-destination-card {
  grid-column: 1 / -1;
}

.subscription-weekly-card {
  grid-column: 1 / -1;
}

.subscription-weekly-toggle {
  margin-bottom: 14px;
}

.subscription-weekdays {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 18px;
  transition: opacity 0.15s ease;
}

.subscription-weekdays.is-disabled,
.subscription-pause-fields.is-disabled {
  opacity: 0.45;
}

.subscription-pause-fields {
  max-width: 620px;
  margin-top: 18px;
  transition: opacity 0.15s ease;
}

.subscription-periodic-card {
  transition: opacity 0.15s ease;
}

.subscription-periodic-card.is-disabled {
  opacity: 0.5;
}

.subscription-periodic-card.is-disabled input,
.subscription-periodic-card.is-disabled select {
  cursor: not-allowed;
  background: #e6e8ee;
}

.field-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.subscription-generation-header {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.subscription-generation-search {
  width: 100%;
  margin-bottom: 18px;
}

.subscription-generation-failures ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.subscription-generation-failures li {
  margin-top: 2px;
}

.subscription-search-mode {
  width: 100%;
}

.subscription-search-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.subscription-search-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.subscription-search-option:has(input:checked) {
  border-color: var(--primary);
  background: #f3f7ff;
}

.subscription-search-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.subscription-search-option span {
  display: grid;
  gap: 4px;
}

.subscription-search-option small {
  color: var(--muted);
  font-weight: 400;
}

.subscription-generation-filters,
.subscription-generation-actions {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.subscription-generation-filters {
  width: 100%;
}

.subscription-generation-filter {
  min-width: min(320px, 100%);
}

.subscription-generation-filters .primary-button {
  margin-left: auto;
}

.subscription-generation-table .selection-column {
  width: 42px;
}

@media (max-width: 900px) {
  .subscription-settings-grid {
    grid-template-columns: 1fr;
  }

  .subscription-destination-card {
    grid-column: auto;
  }

  .subscription-weekly-card {
    grid-column: auto;
  }

  .subscription-search-mode-options {
    grid-template-columns: 1fr;
  }

  .subscription-generation-filters .primary-button {
    margin-left: 0;
  }
}

.object-type-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
}

.enum-scope-tabs {
  margin-bottom: 16px;
}

.enum-scope-tabs > ul {
  gap: 6px;
}

.enum-scope-tabs li.is-selected > a {
  color: #fff;
  background: var(--accent);
}

.enum-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.enum-value-row input {
  flex: 1 1 240px;
}

.adjust-state-modal {
  width: min(560px, 100%);
  grid-template-rows: auto auto;
}

.adjust-state-fields {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
}

.adjust-state-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
  gap: 18px;
  align-items: center;
}

.adjust-state-row label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-weight: 600;
}

.adjust-state-row label input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.adjust-state-row > input,
.adjust-state-row > select {
  width: 100%;
}

.adjust-state-row > :disabled {
  opacity: 0.55;
}

@media (max-width: 560px) {
  .adjust-state-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reminder-page-header { align-items: end; }

.reminder-search {
  width: 100%;
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.reminder-search .field { min-width: 220px; }
.reminder-search-summary { margin-left: auto; color: var(--muted); }
.reminder-search-summary strong { color: var(--ink); }

.reminder-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
}

.reminder-toolbar .primary-button {
  min-width: 210px;
  margin-left: auto;
  padding: 0 16px;
}

.reminder-toolbar .primary-button:disabled { cursor: not-allowed; opacity: 0.5; }
.reminder-select-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.reminder-select-all input,
.reminder-table .selection-column input { width: 18px; height: 18px; }

.reminder-table-panel {
  max-height: calc(100vh - 330px);
  overflow: auto;
  border-radius: 0 0 8px 8px;
}

.reminder-table { min-width: 1450px; }
.reminder-table thead th { position: sticky; top: 0; z-index: 1; }
.reminder-table .selection-column { width: 46px; text-align: center; }
.reminder-table .money-cell { text-align: right; white-space: nowrap; }
.reminder-table tr.is-reminder-maxed { color: var(--muted); background: #f3f5f7; }
.reminder-customer-email { display: block; margin-top: 3px; color: var(--muted); }
.reminder-customer-email.is-missing { color: var(--warn); font-weight: 600; }

.reminder-level-badge {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-right: 6px;
  border-radius: 50%;
  color: #fff;
  background: #64748b;
  font-weight: 700;
}

.reminder-level-badge.level-1 { background: #0f766e; }
.reminder-level-badge.level-2 { background: #b86b00; }
.reminder-level-badge.level-3,
.reminder-level-badge.level-4 { background: var(--danger); }
.reminder-footnote { margin: 12px 2px 0; color: var(--muted); font-size: 13px; }

/* Relances externe : liste triee par client, un filet marque le changement. */
.external-reminder-table { min-width: 1550px; }
.external-reminder-table tbody tr.is-customer-start > td { border-top: 2px solid var(--line, #cbd5e1); }

@media (max-width: 900px) {
  .reminder-search,
  .reminder-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .reminder-search-summary,
  .reminder-toolbar .primary-button {
    width: 100%;
    margin-left: 0;
  }
}

/* Reconnaissance d'une facture approuvee et creation de la facture fournisseur */
.ocr-workbench-area {
  /* .module-workarea sets overflow: auto, which makes it the scroll container
     that position: sticky computes against below. Since this area never grows
     a scrollbar of its own (the page/window scrolls instead), the sticky panel
     never reacts to scrolling. Falling back to the window as the scroll
     container lets .ocr-document-panel stick as expected. */
  overflow: visible;
}

.ocr-workbench {
  display: grid;
  grid-template-columns: minmax(300px, 4fr) minmax(560px, 8fr);
  align-items: start;
  gap: 18px;
}

.ocr-document-panel {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.ocr-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.ocr-panel-header h2 {
  margin: 0;
  font-size: 17px;
}

.ocr-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ocr-document-viewer {
  flex: 1;
  min-height: 480px;
  background: #4a4f57;
}

.ocr-document-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ocr-document-viewer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ocr-form-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ocr-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  background: var(--surface);
}

.ocr-status[data-state="busy"] {
  border-left-color: var(--warn);
}

.ocr-status[data-state="done"] {
  border-left-color: var(--accent);
}

.ocr-status[data-state="error"] {
  border-left-color: var(--danger);
}

.ocr-status-text {
  font-weight: 600;
}

/* Rappel du format d'origine dans l'en-tete du plan de travail. */
.ocr-electronic-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(67, 56, 202, 0.12);
  color: #4338ca;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.ocr-electronic-tag svg {
  width: 13px;
  height: 13px;
}

.ocr-warnings {
  display: grid;
  gap: 6px;
}

.ocr-warning {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #f2d8a8;
  border-radius: 8px;
  background: #fdf6e8;
  color: #8a5300;
  font-size: 14px;
}

.ocr-manual-text {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.ocr-manual-text summary {
  cursor: pointer;
  font-weight: 600;
}

.ocr-manual-text textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ocr-block {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.ocr-block legend {
  padding: 0 8px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
}

.ocr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ocr-span-2 {
  grid-column: span 2;
}

.ocr-span-3 {
  grid-column: 1 / -1;
}

.ocr-grid textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ocr-supplier-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 14px;
}

.ocr-supplier-panel[hidden] {
  display: none;
}

.ocr-field-row {
  display: flex;
  align-items: end;
  gap: 12px;
}

.ocr-field-row .field {
  min-width: 200px;
}

.ocr-supplier-match {
  margin: 0 0 12px;
  color: var(--accent);
  font-weight: 700;
}

.ocr-lines-panel {
  overflow-x: auto;
}

.ocr-lines-table {
  min-width: 800px;
  font-size: 14px;
}

.ocr-lines-table th,
.ocr-lines-table td {
  padding: 6px 6px;
  vertical-align: top;
}

.ocr-lines-table input,
.ocr-lines-table select,
.ocr-lines-table textarea {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}

.ocr-lines-table textarea {
  min-height: 38px;
  resize: vertical;
}

.ocr-lines-table .ocr-input-num {
  text-align: right;
}

.ocr-col-ref { width: 110px; }
.ocr-col-num { width: 84px; text-align: right; }
.ocr-col-unit { width: 64px; }
.ocr-col-vat { width: 128px; }
.ocr-col-action { width: 40px; }

.ocr-lines-table td.ocr-col-action {
  text-align: center;
}

.ocr-lines-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.ocr-decimals-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.ocr-decimals-field select {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}

.ocr-totals-table {
  max-width: 520px;
  font-size: 15px;
}

.ocr-totals-table.is-single-column {
  max-width: 340px;
}

.ocr-totals-table td,
.ocr-totals-table th {
  padding: 6px 8px;
}

.ocr-totals-table .ocr-col-num {
  width: 132px;
}

.ocr-total-check {
  margin: 10px 0 0;
  font-weight: 600;
}

.ocr-total-check.is-valid {
  color: var(--accent);
}

.ocr-total-check.is-warning {
  color: var(--warn);
}

.ocr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 1200px) {
  .ocr-workbench {
    grid-template-columns: 1fr;
  }

  .ocr-document-panel {
    position: static;
    height: auto;
  }

  .ocr-document-viewer {
    height: 60vh;
  }
}

.invoice-preview-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  text-decoration: none;
}

.ocr-workbench > *,
.ocr-form-panel > * {
  min-width: 0;
}

.ocr-block {
  min-inline-size: 0;
}

.warehouse-code-input {
  text-transform: uppercase;
}

.warehouse-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.warehouse-hours input {
  width: 110px;
}

.warehouse-hours span {
  color: var(--muted);
  font-weight: 700;
}

/* Inventaires (Stock > Inventaire) : creation puis saisie du comptage. */
.inventory-family-picker {
  display: grid;
  gap: 10px;
}

.inventory-family-picker.is-disabled {
  opacity: 0.5;
}

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

.inventory-family-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.inventory-family-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.inventory-family-list .check-field {
  font-weight: 400;
}

.inventory-family-list em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.inventory-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.inventory-row-actions .ghost-button {
  min-height: 32px;
  padding: 0 10px;
}

.inventory-entry-header {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.inventory-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
}

.inventory-summary dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.inventory-summary dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.inventory-entry-form {
  display: grid;
  gap: 18px;
}

.inventory-entry-table {
  max-height: 62vh;
}

.inventory-entry-table .data-table {
  min-width: 1420px;
}

.inventory-entry-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.inventory-entry-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
}

.inventory-entry-actions .field-help {
  margin: 0;
}

.inventory-entry-table th,
.inventory-entry-table td {
  padding: 6px 8px;
}

.inventory-entry-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--line);
}

.inventory-entry-table td input {
  width: 100%;
  min-width: 100px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

/* Champ non saisissable : colonne theorique, ou suivi que l article n a pas. */
.inventory-entry-table td input[readonly],
.inventory-fiche input[readonly],
[data-inventory-generation] input[readonly] {
  border-color: transparent;
  background: #e4e6ef;
  color: #6b7280;
}

.inventory-entry-table td input[readonly]::-webkit-calendar-picker-indicator,
.inventory-fiche input[readonly]::-webkit-calendar-picker-indicator {
  opacity: 0.3;
  pointer-events: none;
}

/* Champ obligatoire encore vide : DLC / DLUO d un lot compte. */
.inventory-entry-table td input.is-missing,
.inventory-fiche input.is-missing {
  border-color: #b42318;
  background: #fef2f2;
}

.inventory-entry-table .quantity-input {
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inventory-entry-table .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventory-entry-table [data-gap].has-gap {
  color: #b42318;
  font-weight: 700;
}

.inventory-entry-table tbody tr.is-current {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.inventory-entry-table tbody tr.is-counted td:first-child {
  font-weight: 700;
}

.inventory-entry-table tbody tr.is-added {
  background: #fff7ed;
}

.inventory-added-flag {
  margin-left: 6px;
  color: #b45309;
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inventory-entry-table td select {
  width: 100%;
  min-width: 180px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

/* La colonne d action garde sa largeur, quel que soit le nombre de boutons. */
.inventory-entry-table th:last-child,
.inventory-line-actions {
  width: 78px;
  min-width: 78px;
  text-align: center;
  white-space: nowrap;
}

.inventory-line-actions .ghost-button + .ghost-button {
  margin-left: 4px;
}

.inventory-line-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.inventory-line-actions svg {
  width: 16px;
  height: 16px;
}

.inventory-fiche {
  width: min(920px, 100%);
}

.inventory-fiche-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inventory-fiche-nav .ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
}

.inventory-entry-hint {
  margin-right: auto;
  align-self: center;
  color: #b42318;
  font-weight: 700;
}

/* Generation d inventaire : apercu des ecarts a corriger. */
.inventory-gap-table {
  max-height: 46vh;
}

.inventory-gap-table .data-table {
  min-width: 900px;
}

.inventory-gap-table .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventory-gap-table .numeric-cell.has-gap {
  color: #b42318;
  font-weight: 700;
}

/* Edition des ecarts : etat complet, la table n est pas bornee en hauteur. */
.inventory-gaps-table .data-table {
  min-width: 900px;
}

.inventory-gaps-table .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventory-gaps-table .numeric-cell.has-gap {
  color: #b42318;
  font-weight: 700;
}

.inventory-gaps-table .numeric-cell.has-surplus {
  color: #0a6c3d;
  font-weight: 700;
}

.inventory-gaps-table tr.is-uncounted td {
  color: var(--muted);
  font-style: italic;
}

.inventory-gap-split {
  color: var(--muted);
  font-weight: 400;
}

/*
 * Mouvement de stock anterieur au dernier inventaire de son depot : conserve
 * dans l historique de la fiche article, mais hors des totaux.
 */
.article-stock-movements-table tbody tr.is-ignored-movement {
  color: var(--muted);
}

.article-stock-movements-table tbody tr.is-ignored-movement .stock-quantity-cell {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Menu contextuel (clic droit) sur une ligne de liste des pieces de vente. */
.row-context-menu {
  position: fixed;
  z-index: 120;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(15, 23, 32, 0.18);
}

.row-context-menu[hidden] {
  display: none;
}

.row-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.row-context-menu-item:hover,
.row-context-menu-item:focus-visible {
  background: var(--table-hover);
  outline: none;
}

.row-context-menu-item[disabled] {
  opacity: 0.45;
  cursor: default;
}

.row-context-menu-item[disabled]:hover {
  background: transparent;
}

.row-context-menu-item.is-danger {
  color: var(--danger);
}

.row-context-menu-item i,
.row-context-menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.row-context-menu-item.is-danger i,
.row-context-menu-item.is-danger svg {
  color: inherit;
}

.row-context-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

/*
 * Mise en page en colonne plutot qu en grille : le bloc d erreur est masque la
 * plupart du temps, et une grille a lignes fixes attribuerait alors la ligne
 * souple au pied de page au lieu du tableau.
 */
.contacts-modal {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
}

/* Seule la zone de tableau defile : entete et pied restent visibles. */
.contacts-modal .article-picker-table-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.contacts-modal .contacts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* La bordure d une cellule collante ne suit pas le defilement en border-collapse. */
  box-shadow: inset 0 -1px 0 var(--line);
}

.contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Pictogramme d appel : ouvre l application de communication par defaut (tel:). */
.contact-call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
  text-decoration: none;
}

.contact-call-button:hover,
.contact-call-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.contact-call-button svg {
  width: 14px;
  height: 14px;
}

/* Reordonnancement des contacts dans la fiche client et des documents dans
   les onglets Documents (fiches tiers, fiche societe, plugins). */
.customer-editable-table .contact-move-cell,
.document-move-cell {
  width: 66px;
  text-align: center;
}

.contact-move,
.document-move {
  display: inline-flex;
  gap: 2px;
}

.contact-move-btn,
.document-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.contact-move-btn:hover:not(:disabled),
.document-move-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.contact-move-btn:disabled,
.document-move-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.contact-move-btn svg,
.document-move-btn svg {
  width: 14px;
  height: 14px;
}

/* Administration > Systeme > Generation de pieces de ventes fictives. */
.fake-documents-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.fake-documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

/* Pieces de ventes > Facture d acompte. */
.deposit-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.28);
}

.deposit-modal .alert[hidden] {
  display: none;
}

.deposit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.deposit-detail-grid .span-2 {
  grid-column: span 2;
}

.deposit-vat-panel {
  max-height: 220px;
}

.deposit-vat-table .numeric-cell,
.sales-deposit-table .numeric-cell {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.deposit-vat-table tfoot th {
  border-top: 1px solid var(--line);
  font-weight: 800;
}

.deposit-modal .article-picker-actions {
  justify-content: space-between;
}

.deposit-modal .article-picker-actions > div {
  display: flex;
  gap: 10px;
}

@media (max-width: 720px) {
  .deposit-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .deposit-detail-grid .span-2 {
    grid-column: auto;
  }
}


/* Recherche lignes : bloc "Criteres de recherche" des menus Ventes et Achats */
.line-search-form {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.line-search-groups {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.line-search-group {
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.line-search-group legend {
  padding: 0 6px;
  color: #06153a;
  font-weight: 700;
}

.line-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.line-search-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.line-search-grid .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.line-search-grid .field span {
  color: #06153a;
  font-weight: 600;
}

.line-search-grid .field input,
.line-search-grid .field select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.line-search-grid .field input:focus,
.line-search-grid .field select:focus {
  outline: 3px solid rgba(27, 127, 112, 0.18);
  border-color: var(--accent);
}

.line-search-sold {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
  min-height: 42px;
}

.line-search-sold input {
  width: 18px;
  height: 18px;
}

.line-search-period {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
  gap: 14px 20px;
}

.line-search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.line-search-table td:nth-child(9) {
  max-width: 320px;
}

@media (max-width: 1100px) {
  .line-search-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .line-search-grid,
  .line-search-period {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-search-actions .primary-button,
  .line-search-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }
}

/*
 * Annuaire Peppol.
 *
 * Bouton pose contre le champ ID Peppol de la fiche client, ligne d etat sous
 * ce champ, et fenetre de recherche des participants.
 */
.peppol-id-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.peppol-directory-button {
  min-height: 38px;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

.peppol-directory-button svg {
  width: 16px;
  height: 16px;
}

.peppol-id-status {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.peppol-id-status.is-valid {
  color: #067647;
}

.peppol-id-status.is-invalid {
  color: #b42318;
}

.peppol-directory-modal {
  width: min(980px, 100%);
}

/*
 * Meme raison que pour la selection du client : le bloc d erreur et le resume
 * de verification sont masques la plupart du temps, et une grille a lignes
 * fixes donnerait alors la ligne souple au pied de page plutot qu au tableau.
 */
[data-peppol-directory] .article-picker-modal {
  display: flex;
  flex-direction: column;
}

[data-peppol-directory] .article-picker-table-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.peppol-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px auto auto;
  gap: 14px;
  align-items: end;
}

.peppol-directory-checks {
  display: grid;
  gap: 8px;
}

.peppol-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.peppol-check.is-valid {
  border-color: #abefc6;
  background: #f0fdf4;
}

.peppol-check.is-invalid {
  border-color: #ffd2cc;
  background: #fff7f6;
}

.peppol-check strong {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.peppol-check-origin {
  color: var(--muted);
}

.peppol-check-detail {
  grid-column: 1 / 3;
}

.peppol-check-use {
  grid-row: 1 / 3;
  grid-column: 3;
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.peppol-directory-table {
  min-width: 820px;
}

.peppol-directory-table th:first-child,
.peppol-directory-table td:first-child {
  width: 210px;
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.peppol-directory-table th:nth-child(3),
.peppol-directory-table td:nth-child(3),
.peppol-directory-table th:nth-child(5),
.peppol-directory-table td:nth-child(5) {
  white-space: nowrap;
}

[data-peppol-directory] .peppol-directory-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* La bordure d une cellule collante ne suit pas le defilement en border-collapse. */
  box-shadow: inset 0 -1px 0 var(--line);
}

@media (max-width: 900px) {
  .peppol-directory-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Rappel des regles de saisie sous un formulaire de parametrage. */
.field-hint {
  margin: 0;
  font-size: 12px;
  color: #5b6470;
}

/* Bouton "Historique" de la saisie des lignes de vente : fenetre flottante
   posee en bas a droite, qui laisse la saisie accessible derriere elle. */
.sales-history-backdrop {
  z-index: 1100;
  place-items: end;
  padding: 20px;
  background: transparent;
  pointer-events: none;
}

.sales-history-toast {
  pointer-events: auto;
  width: min(980px, 100%);
  max-height: min(560px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto auto auto minmax(120px, 1fr) auto;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.28);
  outline: none;
}

.sales-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sales-history-header h2 {
  margin: 0;
  font-size: 18px;
}

.sales-history-header p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.sales-history-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(150px, 240px);
  gap: 14px;
  align-items: end;
}

.sales-history-toolbar .field span {
  font-size: 13px;
  font-weight: 600;
}

.sales-history-toolbar .field select {
  min-height: 38px;
}

.sales-history-error {
  margin: 0;
}

.sales-history-error[hidden] {
  display: none;
}

.sales-history-table-panel {
  min-height: 0;
  overflow: auto;
}

.sales-history-table th,
.sales-history-table td {
  padding: 6px 10px;
  font-size: 14px;
  white-space: nowrap;
}

/* La designation est la seule colonne longue : elle est tronquee pour garder la
   fenetre lisible sans defilement horizontal, le libelle complet reste en info-bulle. */
.sales-history-table .sales-history-designation {
  max-width: 240px;
}

.sales-history-table .sales-history-designation {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* La bordure d une cellule collante ne suit pas le defilement en border-collapse. */
  box-shadow: inset 0 -1px 0 var(--line);
}

.sales-history-table .numeric-cell {
  text-align: right;
}

.sales-history-table th[hidden],
.sales-history-table td[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .sales-history-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bilan d affaire (Affaires > Bilan) : choix de l affaire, synthese chiffree
   puis les lignes de ventes et d achats qui la composent. */
.case-report-selection {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.case-report-selection form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.case-report-selection .field {
  min-width: 260px;
}

.case-report-help {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.case-report-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.case-report-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.case-report-card span {
  color: var(--muted);
  font-size: 13px;
}

.case-report-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 26px;
}

.case-report-card.is-negative strong {
  color: var(--danger);
}

.case-report-section-title {
  margin: 22px 0 10px;
  font-size: 18px;
}

.case-report-total-row td {
  background: var(--surface-soft);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .case-report-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sales-history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sales-history-footer span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.sales-history-table .sales-history-select-cell {
  width: 38px;
  text-align: center;
}

.sales-history-table .sales-history-select-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Ligne dont l article a ete desactive ou supprime : elle reste consultable
   mais la reprise la refusera. */
.sales-history-table tr.is-unavailable td {
  color: var(--muted);
}

.sales-history-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #ffd2cc;
  background: #fff0ee;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Historique epingle : la fenetre quitte son coin flottant pour se poser sous
   les lignes de la piece, ou elle reste ouverte pendant la saisie. Les lignes
   s y reprennent alors une a une, quantite corrigee sur place. */
.sales-history-dock {
  margin-top: 12px;
  padding: 0 4px;
}

.sales-history-dock[hidden] {
  display: none;
}

.sales-history-toast.is-pinned {
  width: 100%;
  max-height: none;
  background: #fbfcff;
  box-shadow: none;
}

/* Posee dans le flux de la page, la fenetre n est plus bornee par la hauteur de
   l ecran : c est la liste qui defile, l en-tete et le pied restant en vue. */
.sales-history-toast.is-pinned .sales-history-table-panel {
  max-height: 260px;
}

.sales-history-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sales-history-pin .sales-history-pin-icon-on,
.sales-history-pin[aria-pressed="true"] .sales-history-pin-icon-off {
  display: none;
}

.sales-history-pin[aria-pressed="true"] {
  border-color: var(--primary);
  color: var(--primary);
}

.sales-history-pin[aria-pressed="true"] .sales-history-pin-icon-on {
  display: inline-flex;
}

/* La quantite reprise se corrige dans la colonne meme : le champ y garde l
   alignement a droite des autres valeurs chiffrees. */
.sales-history-table .sales-history-quantity-cell {
  padding: 3px 6px;
}

.sales-history-quantity {
  width: 80px;
  min-height: 26px;
  height: 26px;
  padding: 0 6px;
  text-align: right;
  font-size: 13px;
}

.sales-history-table .sales-history-action-cell {
  width: 38px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.sales-history-pricing-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sales-history-pricing-mode[hidden] {
  display: none;
}

.sales-history-mode-reset {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.line-history-pricing-backdrop {
  z-index: 1200;
}

.line-history-pricing-modal {
  width: min(560px, 100%);
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.28);
  outline: none;
}

.line-history-pricing-modal h2 {
  margin: 0;
  font-size: 20px;
}

.line-history-pricing-modal p {
  margin: 0;
  font-size: 14px;
}

.line-history-pricing-help {
  color: var(--muted);
}

.line-history-pricing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/*
 * Verification du numero de TVA dans VIES : fenetre posee en bas a droite, qui
 * laisse la fiche client accessible derriere elle. Meme parti pris que l
 * historique des lignes de vente, le fond du backdrop ne capte donc rien.
 */
.vat-check-backdrop {
  z-index: 1150;
  place-items: end;
  padding: 20px;
  background: transparent;
  pointer-events: none;
}

.vat-check-toast {
  pointer-events: auto;
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.28);
  outline: none;
}

.vat-check-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.vat-check-header h2 {
  margin: 0;
  font-size: 18px;
}

.vat-check-header p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.vat-check-verdict {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.vat-check-verdict.is-valid {
  color: #067647;
}

.vat-check-verdict.is-invalid {
  color: #b42318;
}

.vat-check-record {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 13px;
  line-height: 1.45;
}

/* L adresse arrive de VIES avec ses retours a la ligne : on les respecte. */
.vat-check-record span {
  white-space: pre-line;
  color: var(--muted);
}

.vat-check-fields {
  display: grid;
  gap: 8px;
}

.vat-check-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  cursor: pointer;
}

.vat-check-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.vat-check-field > span {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}

.vat-check-field strong {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.vat-check-value {
  word-break: break-word;
}

.vat-check-current {
  font-size: 12px;
  color: #b54708;
}

.vat-check-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.vat-check-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vat-check-button svg {
  width: 16px;
  height: 16px;
}

.vat-check-status {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.vat-check-status.is-valid {
  color: #067647;
}

.vat-check-status.is-invalid {
  color: #b42318;
}
/* Administration > Web API */
.api-token-reveal {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #b8dbc4;
  border-radius: 12px;
  background: #f2fbf5;
}

.api-token-reveal strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #067647;
}

.api-token-reveal p {
  margin: 6px 0 12px;
  font-size: 13px;
  color: #46584d;
}

.api-token-value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.api-token-value code {
  flex: 1 1 320px;
  padding: 10px 12px;
  border: 1px solid #cfe3d6;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  word-break: break-all;
}

.api-token-value .ghost-button.is-copied {
  border-color: #067647;
  color: #067647;
}

.api-code-block {
  margin: 8px 0 18px;
  padding: 14px 16px;
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.api-doc-card h2,
.api-key-card h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.api-switch,
.api-scope {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* La feuille de style generale etire les champs de saisie : une case a cocher
   doit au contraire garder sa taille naturelle. */
.api-switch input[type="checkbox"],
.api-scope input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
}

.api-switch span,
.api-scope span {
  font-size: 13.5px;
  font-weight: 500;
}

.api-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.api-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px 18px;
  margin-top: 14px;
}

.api-scope span code {
  margin-right: 6px;
  font-size: 12px;
}

.api-key-row {
  padding: 16px 0;
  border-top: 1px solid #e6e9ef;
}

.api-key-row:first-of-type {
  border-top: 0;
}

.api-key-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.api-key-row-header code {
  margin-left: 10px;
  font-size: 12.5px;
  color: #5b6472;
}

.api-key-state {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.api-key-state.is-active {
  background: #e7f6ed;
  color: #067647;
}

.api-key-state.is-off {
  background: #fdeceb;
  color: #b42318;
}

.api-status-ok {
  color: #067647;
  font-weight: 600;
}

.api-status-error {
  color: #b42318;
  font-weight: 600;
}

/* Calendrier de selection des zones de date (pieces de ventes et d achats). */
.date-picker-field {
  position: relative;
  display: block;
  width: 100%;
}

.date-picker-field > input {
  padding-right: 34px;
}

.date-picker-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* Zone verrouillee (piece en attente du tiers) ou en lecture seule : le
   bouton disparait pour ne pas promettre une saisie impossible. */
.date-picker-field > input:disabled ~ .date-picker-toggle,
.date-picker-field > input[readonly] ~ .date-picker-toggle,
.date-picker-toggle:disabled {
  display: none;
}

.date-picker-toggle:hover {
  background: rgba(27, 127, 112, 0.12);
  color: var(--accent);
}

.date-picker-toggle svg {
  width: 16px;
  height: 16px;
}

/* Ancre au champ par coordonnees fixes : le calendrier reste visible meme
   ouvert depuis un tableau defilant ou une fenetre modale. */
.date-picker-popup {
  position: fixed;
  z-index: 1300;
  top: 0;
  left: 0;
  width: 258px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(6, 21, 58, 0.22);
}

.date-picker-popup[hidden] {
  display: none;
}

.date-picker-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 68px 28px;
  gap: 4px;
  align-items: center;
}

.date-picker-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.date-picker-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.date-picker-nav svg {
  width: 16px;
  height: 16px;
}

.date-picker-month,
.date-picker-year {
  width: 100%;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}

.date-picker-weekdays,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker-weekdays span {
  padding: 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.date-picker-day {
  min-height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

.date-picker-day:hover {
  background: var(--table-hover);
}

.date-picker-day.is-outside {
  color: var(--muted);
}

.date-picker-day.is-today {
  border-color: var(--accent);
  font-weight: 600;
}

.date-picker-day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.date-picker-day:focus-visible {
  outline: 3px solid rgba(27, 127, 112, 0.28);
  outline-offset: -1px;
}

.date-picker-foot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}

.date-picker-action {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.date-picker-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.date-picker-action[hidden] {
  display: none;
}

/* Administration > Parametres avances > Purges. Le bouton qui declenche la
   suppression definitive se distingue du bouton d analyse pose a cote. */
.purge-button {
  color: #fff;
  background: var(--danger);
}

.purge-button:hover {
  background: #92180f;
}

.purge-confirm {
  padding: 12px 14px;
  border: 1px solid #ffd2cc;
  border-radius: 8px;
  background: #fff5f3;
}


/* Ventes > Statistiques : navigation interne, barre de filtres, graphiques et
   classements. La palette des series part de l accent de l application. */
:root {
  --stats-series-1: #1b7f70;
  --stats-series-2: #2f6fed;
  --stats-series-3: #b86b00;
  --stats-series-4: #7c4dbd;
  --stats-series-5: #0d9488;
  --stats-series-6: #c2410c;
  --stats-series-7: #64748b;
}

.stats-tabs {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stats-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.stats-tabs a.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.stats-toolbar .ghost-button {
  min-height: 42px;
}

.stats-field {
  min-width: 170px;
  margin: 0;
}

.stats-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-switch-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.stats-switch-buttons {
  border-bottom: 0;
  gap: 0;
}

.stats-switch-buttons button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-right-width: 0;
  border-bottom-width: 1px;
  border-radius: 0;
  background: var(--surface);
}

.stats-switch-buttons button:first-child {
  border-radius: 8px 0 0 8px;
}

.stats-switch-buttons button:last-child {
  border-right-width: 1px;
  border-radius: 0 8px 8px 0;
}

.stats-switch-buttons button.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.stats-panel {
  margin-bottom: 18px;
  padding: 0;
}

.stats-panel-title,
.stats-section-title {
  margin: 0;
  padding: 12px 16px;
  color: var(--accent-dark);
  font-size: 15px;
}

.stats-section-title {
  padding-left: 0;
}

.stats-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.stats-columns .stats-panel {
  margin-bottom: 0;
}

.stats-range {
  color: var(--muted);
  font-size: 13px;
}

.stats-progress-row td {
  font-weight: 700;
}

.stats-progress-row td.is-up,
.stats-rate.is-up {
  color: var(--accent-dark);
}

.stats-progress-row td.is-down,
.stats-rate.is-down {
  color: var(--danger);
}

.stats-rate {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  font-weight: 700;
}

.stats-chart,
.stats-pie {
  padding: 4px 16px 16px;
}

.stats-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.stats-chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.stats-chart-axis {
  fill: var(--muted);
  font-size: 12px;
}

.stats-chart-value {
  fill: var(--ink);
  font-weight: 700;
}

.stats-chart-bar:hover,
.stats-pie-slice:hover {
  opacity: .82;
}

.stats-chart-legend,
.stats-pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.stats-chart-legend li,
.stats-pie-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.stats-legend-bullet {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.stats-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.stats-pie-svg {
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
}

.stats-pie-legend {
  flex: 1 1 260px;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.stats-pie-legend-label {
  flex: 1 1 auto;
}

.stats-chart-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .stats-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ==========================================================================
   Tableaux de bord de l accueil et leur parametrage (menu Profil)
   ========================================================================== */

.dashboard-tabs {
  flex-wrap: wrap;
  margin: 18px 0;
  background: #fff;
  border-radius: 10px 10px 0 0;
}

.dashboard-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.dashboard-tabs a.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.dashboard-empty {
  margin: 18px 0 0;
  padding: 24px;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  text-align: center;
}

/* La grille compte quatre colonnes : un widget en occupe de une a quatre,
   selon la largeur choisie sur le tableau de bord. */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.widget-span-1 { grid-column: span 1; }
.widget-span-2 { grid-column: span 2; }
.widget-span-3 { grid-column: span 3; }
.widget-span-4 { grid-column: span 4; }

.widget-card {
  min-width: 0;
  padding: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.widget-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 0;
}

.widget-card-header h2 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 15px;
}

.widget-card-subtitle {
  margin: 2px 16px 0;
  color: var(--muted);
  font-size: 13px;
}

.widget-card-error {
  margin: 12px 16px;
  color: var(--danger);
}

/* Administration > Widgets */
.widget-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: end;
}

.widget-field-wide {
  grid-column: 1 / -1;
}

.widget-settings-panel {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.widget-settings-panel .stats-panel-title {
  padding-left: 0;
}

/* Widgets autorises dans un profil utilisateur */
.profile-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.profile-widget-state {
  margin-left: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

/* Menu Profil > Tableaux de bord */
.dashboard-config {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-config-subtitle {
  margin: 18px 0 8px;
  font-size: 15px;
}

.dashboard-tab-list,
.dashboard-widget-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.dashboard-tab-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-tab-line.is-selected {
  border-color: var(--accent);
  background: #e6f4f2;
}

.dashboard-tab-name {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}

.dashboard-tab-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}

.dashboard-line-actions,
.dashboard-widget-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-widget-line {
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.dashboard-widget-name {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
}

.dashboard-widget-name span {
  color: var(--muted);
  font-size: 13px;
}

.dashboard-widget-width {
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dashboard-add-form,
.dashboard-rename-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-add-form .field,
.dashboard-rename-form .field {
  flex: 1 1 200px;
}

/* Bouton reduit a son icone : fleches d ordre et corbeille des listes. */
.icon-button {
  min-width: 40px;
  padding: 0 10px;
}

@media (max-width: 1280px) {
  .widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .widget-span-2,
  .widget-span-3,
  .widget-span-4 {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .dashboard-config {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .widget-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .widget-span-1,
  .widget-span-2,
  .widget-span-3,
  .widget-span-4 {
    grid-column: span 1;
  }
}

/* Plugin "Contrats de livraisons" : entete de la fiche client, reprise de la
   presentation de FEN_Fiche_Client (informations, adresses, commentaires). */
.knp-client-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.knp-client-column {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Fiche fournisseur : quatre colonnes comme FEN_Fiche_Fournisseur (identite,
   adresses, reglement et banques, langue et commentaires). */
.knp-fournisseur-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

/* Les colonnes de l entete sont etroites : les grilles de champs de Cesium y
   debordent avec leur largeur minimale de 180px. */
.knp-client-column .customer-form-grid {
  gap: 12px;
}

.knp-client-column .customer-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knp-client-column textarea {
  resize: vertical;
}

.knp-address-panel[hidden] {
  display: none;
}

/* Editeur des commentaires : meme composant que le corps des messages, a la
   hauteur d une zone de saisie de la fiche. */
.knp-comment-editor .email-rich-toolbar {
  gap: 4px;
  padding: 6px;
}

.knp-comment-editor .email-rich-surface,
.knp-comment-editor .email-rich-source {
  min-height: 170px;
  padding: 10px 12px;
  font-size: 14px;
}

/* Usines : tableau large, defile horizontalement. La colonne du nom et la
   seconde ligne d en-tete ne suivent pas la largeur reduite que les tableaux de
   la fiche client donnent a leurs deux premieres colonnes. */
.knp-usines-table {
  max-height: 420px;
}

.knp-usines-table .data-table {
  min-width: 2400px;
}

.knp-usines-table .data-table td:nth-child(2),
.knp-usines-table .data-table thead tr:first-child th:nth-child(2),
.knp-usines-table .data-table thead tr:last-child th {
  width: auto;
  text-align: left;
}

@media (max-width: 1500px) {
  .knp-fournisseur-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .knp-client-grid,
  .knp-fournisseur-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fiche contrat : la saisie de l engagement a gauche, les totaux calcules a
   droite, comme le cartouche de FEN_Fiche_Contrats. */
.knp-contrat-engagement {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: start;
}

.knp-contrat-totals {
  display: grid;
  gap: 10px;
}

.knp-contrat-figure {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafb;
  text-align: center;
}

.knp-contrat-figure span {
  color: var(--muted);
  font-size: 13px;
}

.knp-contrat-figure strong {
  font-size: 20px;
}

.knp-contrat-figure.is-total strong {
  color: var(--accent-dark);
  font-size: 24px;
}

/* Les tableaux du plugin remplissent la largeur de la fiche ; la largeur
   minimale n est plus qu un plancher de lisibilite, atteint quand la fenetre se
   retrecit. */
.knp-contrats-table .data-table {
  min-width: 1150px;
}

/* Contrat choisi dans la liste des contrats : sa ligne reste reperable dans
   l onglet Contrats de la fiche client. */
.knp-contrats-table .data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
  font-weight: 700;
}

/* Liste des contrats : la colonne Client s ajoute a celles de l onglet. */
.knp-contrats-list .data-table {
  min-width: 1300px;
}

@media (max-width: 1100px) {
  .knp-contrat-engagement {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le navigateur donne aux champs date une largeur minimale qui deborde des
   colonnes etroites de l entete : ils suivent la leur. */
.knp-client-column input[type="date"] {
  min-width: 0;
}

/* Appels de marchandises : le statut se lit d un coup d oeil dans la liste du
   contrat, avec les couleurs que la table des appels de l application WinDev
   donnait a chaque etape. */
.knp-appel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: #5c6672;
  background: #f2f4f7;
  border: 1px solid #d8dee6;
}

.knp-appel-badge.is-info {
  color: #1b6fa8;
  background: #eef7fd;
  border-color: #bcdcf2;
}

.knp-appel-badge.is-info-strong {
  color: #12457a;
  background: #e7eefb;
  border-color: #b8c9ec;
}

.knp-appel-badge.is-warn {
  color: #8a6100;
  background: #fdf6e3;
  border-color: #f0dfa8;
}

.knp-appel-badge.is-warn-strong {
  color: #9a4d06;
  background: #fdf0e3;
  border-color: #f0cca8;
}

.knp-appel-badge.is-danger {
  color: #b42318;
  background: #fdeceb;
  border-color: #f3c3bf;
}

.knp-appel-badge.is-danger-strong {
  color: #7a1610;
  background: #fbe0de;
  border-color: #eaaba5;
}

.knp-appel-badge.is-success {
  color: #136b35;
  background: #effaf3;
  border-color: #b9e4c9;
}

.knp-appel-badge.is-teal {
  color: #0a6a6a;
  background: #e6f6f6;
  border-color: #b0dedd;
}

.knp-appel-badge.is-purple {
  color: #6b3fa0;
  background: #f3eefb;
  border-color: #d5c4ee;
}

.knp-appel-badge.is-purple-strong {
  color: #4c2a75;
  background: #ece3f7;
  border-color: #c7b1e4;
}

/* L onglet "Non-conformité" porte le numero en pastille : il ne doit pas
   pousser le libelle hors du bouton. */
.modern-tabs .knp-appel-badge {
  margin-left: 8px;
}

.knp-appels-table .data-table {
  min-width: 1150px;
}

/* Fiche appel : les trois blocs de facturation cote a cote, chacun avec sa
   propre grille de champs. */
.knp-appel-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.knp-appel-block {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.knp-appel-block h3 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.knp-appel-block .customer-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knp-appel-block input[type="date"] {
  min-width: 0;
}

@media (max-width: 1100px) {
  .knp-appel-blocks {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fiches du plugin "Contrats de livraisons" : elles reprennent des fenetres
   WinDev denses (trois colonnes d entete, tableaux de quinze a vingt colonnes)
   et etouffent dans la largeur de fiche de Cesium. Elles prennent donc toute la
   largeur de la zone de travail : les champs y respirent et les tableaux des
   contrats et des appels tiennent sans defilement horizontal. */
.knp-workarea .customer-card {
  width: 100%;
}

/* Liste des appels de marchandises : la ligne est ecrite dans la couleur que
   FEN_Liste_Appels donnait a son statut, posee par le gabarit en variable.
   Les couleurs viennent des constantes du WLangage (Noir, BleuClair,
   BleuFonce, JauneFonce, RougeClair, RoseFonce, VertFonce, RougeFonce,
   VioletFonce) et de deux RVB ecrits en clair dans le code WinDev. */
.knp-appel-row {
  color: var(--knp-statut, inherit);
}

.knp-appel-row td {
  color: inherit;
}

/* La colonne du statut explique la couleur de la ligne : elle est appuyee, ou
   que l utilisateur l ait rangee. */
.knp-appel-row td[data-appel-column="statut"] {
  font-weight: 600;
}

/* La liste reprend les trente-quatre colonnes de FEN_Liste_Appels : sa largeur
   suit le nombre de colonnes laissees visibles, posee par le gabarit. */
.knp-appels-list .data-table {
  min-width: max(100%, var(--knp-appels-min-width, 1250px));
}

/* Comme la fenetre WinDev, une ligne tient sur une ligne : un libelle produit
   de cent caracteres est coupe plutot que de doubler la hauteur de toutes les
   lignes. L infobulle du gabarit rend le texte entier. */
.knp-appels-list .data-table [data-appel-column] {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knp-appels-list [data-appel-column][hidden] {
  display: none;
}

/* Bascule "Afficher les appels clotures" et navigation entre les deux listes du
   plugin : l entree courante se distingue sans sortir du style des boutons. */
.knp-list-nav {
  display: flex;
  gap: 8px;
}

.ghost-button.is-current {
  color: var(--accent-dark);
  border-color: var(--accent-dark);
  background: #eef6f6;
  font-weight: 700;
}

/* Colonne de selection de la liste des appels : elle ne se trie ni ne se
   filtre, et reste etroite. */
.knp-select-cell {
  width: 38px;
  text-align: center;
}

.knp-select-cell input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.knp-select-cell input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

[data-selection-count] {
  color: var(--accent-dark);
  font-weight: 700;
}

/* Plugin "Contrats de livraisons" : liste des memos, reprise de FEN_Rappels.
   La ligne prend la couleur que la fenetre WinDev donnait a son echeance :
   RougeClair quand elle est passee, RVB(102, 204, 51) le jour meme. */
.knp-memos-list .data-table {
  min-width: 1400px;
}

.knp-memo-row.is-late {
  color: #ff0000;
}

.knp-memo-row.is-today {
  color: #66cc33;
}

.knp-memo-row td {
  color: inherit;
}

/* La description est un texte libre de plusieurs lignes : la colonne en montre
   le debut et la fiche le reste. */
.knp-memo-description {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fiche memo : la saisie a gauche, la table "Suivi par" a droite, comme
   FEN_Fiche_Rappel. */
.knp-memo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.knp-memo-grid .customer-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knp-memo-grid textarea {
  resize: vertical;
}

/* La case "Cloture" est posee en face de la date de creation : elle s aligne
   sur le champ voisin plutot que sur le haut de la ligne. */
.knp-memo-cloture {
  align-self: end;
  padding-bottom: 10px;
}

.knp-memo-suivi-title {
  font-size: 14px;
  font-weight: 600;
}

.knp-memo-suivi .data-table {
  min-width: 0;
}

@media (max-width: 1100px) {
  .knp-memo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Onglet "Memos" des fiches client et contrat. */
.knp-memos-table .data-table {
  min-width: 1100px;
}

/* ---------------------------------------------------------------------------
   Ventes > Prospection : interets de prospection et campagnes de mailing.
   --------------------------------------------------------------------------- */

.prospection-tabs {
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.prospection-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.prospection-tabs a.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

/* Bouton de soumission par defaut : invisible, il capte la touche Entree
   frappee dans un intitule pour enregistrer plutot qu ajouter une ligne. */
.default-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.prospection-interest-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.interest-card {
  display: grid;
  gap: 12px;
}

.interest-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.interest-editable-table {
  max-height: 480px;
}

.interest-editable-table td input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.interest-editable-table .interest-count-cell,
.interest-editable-table th:nth-child(2) {
  width: 70px;
  text-align: center;
}

.interest-editable-table .interest-actions-cell,
.interest-editable-table th:last-child {
  width: 128px;
  text-align: center;
}

.contact-move-btn.danger-move-btn:hover:not(:disabled) {
  border-color: #c0392b;
  color: #c0392b;
}

/* Arborescence des interets : fiche client (onglet "Interets") et filtre de
   diffusion d une campagne. */
.interest-tree-panel {
  max-height: 460px;
}

.interest-tree-table .interest-tree-check {
  width: 54px;
  text-align: center;
}

.interest-tree-table label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.interest-tree-table svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.interest-tree-parent > td {
  font-weight: 700;
}

.interest-tree-child > td:nth-child(2) {
  padding-left: 42px;
  font-weight: 400;
}

/* Colonnes "Facturation" et "Mailing" des tableaux de contacts clients et
   fournisseurs : la regle generale des tableaux editables etirerait la case a
   cocher. */
.customer-editable-table .contact-role-cell {
  width: 96px;
  text-align: center;
}

.customer-editable-table td.contact-role-cell input[type="checkbox"] {
  width: 18px;
  min-width: 0;
  height: 18px;
  padding: 0;
}

/* Fiche campagne. */
.campaign-body-field {
  display: grid;
  gap: 8px;
}

.campaign-rich-editor .email-rich-surface,
.campaign-rich-editor .email-rich-source {
  min-height: 320px;
}

.campaign-diffusion-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.campaign-max-field {
  width: 200px;
}

.campaign-diffusion-toolbar .field-help {
  margin: 0;
}

.campaign-interests {
  margin-bottom: 18px;
}

.campaign-recipients {
  display: grid;
  gap: 10px;
}

@media (max-width: 1100px) {
  .prospection-interest-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Administration > Caisses (TPV) */
.tpv-register-card {
  width: min(980px, 100%);
}

.tpv-register-table th:nth-child(1),
.tpv-register-table td:nth-child(1) {
  width: 120px;
}

.tpv-register-table th:nth-child(4),
.tpv-register-table td:nth-child(4) {
  width: 130px;
  text-align: right;
}

.tpv-register-table th:nth-child(5),
.tpv-register-table td:nth-child(5) {
  width: 80px;
  text-align: center;
}

.tpv-register-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}

.tpv-register-grid .span-2 {
  grid-column: span 2;
}

.tpv-register-grid .span-4 {
  grid-column: span 4;
}

/* Administration > Paves de caisse (TPV) */
.tpv-pad-table th:nth-child(2),
.tpv-pad-table td:nth-child(2),
.tpv-pad-table th:nth-child(3),
.tpv-pad-table td:nth-child(3),
.tpv-pad-table th:nth-child(4),
.tpv-pad-table td:nth-child(4) {
  width: 90px;
  text-align: right;
}

.tpv-pad-table th:nth-child(5),
.tpv-pad-table td:nth-child(5) {
  width: 100px;
  text-align: right;
}

.tpv-pad-color-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.tpv-pad-color-field input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
}

.tpv-pad-color-field input[type="color"] {
  width: 64px;
  height: 36px;
  padding: 2px;
}

.ghost-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Moyens de paiement : parametrage de la caisse tactile. */
.payment-mean-tpv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 180px)) minmax(120px, 140px);
  gap: 18px;
  align-items: end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e3e8ef;
}

.payment-mean-tpv-grid h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
}

.payment-mean-color-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
  .tpv-register-grid,
  .payment-mean-tpv-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tpv-register-grid .span-2,
  .tpv-register-grid .span-4 {
    grid-column: auto;
  }
}

/* ===== Comptabilite : plan comptable, profils TVA, export des ecritures ===== */

.account-card {
  width: min(1180px, 100%);
}

.account-layout {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 420px);
}

.account-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.account-search {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}

.account-search svg,
.account-search i {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.account-search input {
  width: 100%;
  padding-left: 34px;
}

.account-table-panel {
  max-height: 560px;
}

.account-table td.account-code {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.account-table th:last-child,
.account-table td:last-child {
  width: 64px;
  text-align: center;
}

.account-table tr.is-selected {
  background: #e6f4f2;
}

.account-table tr.is-inactive td {
  color: var(--muted);
}

.account-detail {
  display: grid;
  gap: 16px;
  align-content: start;
}

.account-detail h2,
.account-import h2,
.accounting-export-anomalies h2 {
  margin: 0;
  font-size: 17px;
}

.account-detail-grid {
  display: grid;
  gap: 14px;
}

.account-detail .form-actions {
  justify-content: flex-end;
  gap: 10px;
}

.account-import {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.account-import-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr);
  gap: 18px;
  align-items: start;
}

.account-import textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.accounting-settings-fieldset {
  margin-bottom: 18px;
}

.accounting-settings-fieldset .field-help {
  margin: 0;
}

.accounting-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
}

.accounting-settings-journals {
  grid-template-columns: repeat(3, minmax(140px, 200px));
}

/* Comptes de la table TVA : des libelles, plus des nombres. */
.vat-table td:nth-child(8),
.vat-table td:nth-child(9),
.vat-table td:nth-child(10),
.vat-table th:nth-child(8),
.vat-table th:nth-child(9),
.vat-table th:nth-child(10) {
  text-align: left;
}

/* Profils TVA de la famille : compte de vente, compte d achat et TVA par profil. */
/* Les cases a cocher sur deux colonnes, les profils TVA sur toute la largeur dessous. */
.article-family-form-grid.has-profiles {
  grid-template-columns: minmax(0, 1fr);
}

.article-family-form-grid.has-profiles .article-family-checks {
  grid-template-columns: repeat(2, minmax(0, 280px));
}

.article-family-profiles {
  gap: 10px;
  align-content: start;
}

.article-family-profiles .field-help {
  margin: 0;
}

.accounting-profile-grid {
  display: grid;
  gap: 8px;
}

.accounting-profile-head,
.accounting-profile-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) minmax(104px, 140px);
  gap: 10px;
  align-items: center;
}

.accounting-profile-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.accounting-profile-row strong {
  font-size: 14px;
}

.accounting-profile-row .field {
  margin: 0;
}

.accounting-profile-row select {
  width: 100%;
}

/* Liste de recherche plus large que la colonne, pour lire "numero - intitule". */
.accounting-profile-row .select-search-menu,
.vat-detail-grid .select-search-menu,
.bank-detail-grid .select-search-menu,
.payment-mean-detail-grid .select-search-menu {
  min-width: 320px;
}

.line-details-panel .select-search-menu {
  max-height: 220px;
}

/* Onglet Profils TVA de la fiche article. */
.article-vat-profiles {
  display: grid;
  gap: 12px;
}

.article-vat-profile-table th[scope="row"] {
  width: 160px;
  text-align: left;
  white-space: nowrap;
}

.article-vat-profile-table td select {
  width: 100%;
  min-width: 200px;
}

/* Export des ecritures. */
.accounting-export-form {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) minmax(240px, 1fr) auto;
  gap: 16px 20px;
  align-items: end;
}

.accounting-export-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.accounting-export-sources legend {
  width: 100%;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.accounting-export-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.accounting-export-help {
  grid-column: 1 / -1;
  margin: 0;
}

.accounting-export-anomalies {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  border-left: 4px solid var(--warn);
}

.accounting-export-anomalies ul {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin: 0;
  padding-left: 18px;
  overflow-y: auto;
}

.accounting-export-anomalies p {
  margin: 0;
}

.accounting-export-summary .numeric-cell,
.accounting-export-table .numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.accounting-export-table-panel {
  max-height: 620px;
}

.accounting-export-table td {
  white-space: nowrap;
}

.accounting-export-table td:nth-child(6) {
  white-space: normal;
  min-width: 220px;
}

.accounting-export-table tr.is-piece-start td {
  border-top: 2px solid var(--line);
}

.accounting-export-table td.is-missing {
  color: var(--danger);
  font-weight: 700;
}

@media (max-width: 900px) {
  .account-layout,
  .account-import-grid,
  .accounting-settings-grid,
  .accounting-settings-journals,
  .article-family-form-grid.has-profiles .article-family-checks,
  .accounting-export-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .accounting-profile-head {
    display: none;
  }

  .accounting-profile-row {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
}