/* Notes de Frais - styles portes depuis l'app NDF autonome (src/styles/base.css [uniquement les
   variables CSS], layout.css, components.css). Charge APRES styles.css : les blocs qui dupliquaient
   une regle deja definie par SH Suite pour le meme selecteur exact (reset global, .form-error,
   .icon-button, .mfa-qr-code, .mfa-secret-key, .section-heading, .date-field-french*) ont ete
   retires - ce fichier ne contient que ce qui est reellement propre a Notes de Frais. */
:root {
  --color-primary: var(--sh-core-blue-900);
  --color-primary-light: var(--sh-core-blue-light);
  --color-danger: var(--sh-core-danger);
  --color-danger-light: var(--sh-core-danger-light);
  --color-success: var(--sh-core-success);
  --color-success-light: var(--sh-core-success-light);
  --color-warning: var(--sh-core-warning);
  --color-warning-light: var(--sh-core-warning-light);

  --color-bg: var(--sh-core-background);
  --color-surface: var(--sh-core-surface);
  --color-text: var(--sh-core-ink);
  --color-muted: var(--sh-core-muted);
  --color-border: var(--sh-core-border);

  --radius-md: 8px;

  --shadow-card: 0 10px 30px rgba(29, 78, 216, 0.08);

  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  min-height: 0;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.app-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 28px 8px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgb(15 61 46 / 6%);
}

.app-header-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-brand-logo {
  width: 72px;
  height: 49px;
  object-fit: contain;
  flex: 0 0 auto;
}

.app-brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app-brand-copy strong {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
}

.app-brand-copy span {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.3;
}

.app-nav {
  width: 100%;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 5px;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}

/* Navigation transversale du module, sur le meme modele que le bandeau Commissions. Les onglets
   restent de vrais liens afin de conserver l'ouverture native dans un nouvel onglet. */
.expenses-subnav {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  border-bottom: 1px solid #c7dff3;
  background: var(--sh-bg);
  margin: -6px 0 0;
  padding: 3px clamp(16px, 2vw, 32px) 4px;
}

.expenses-subnav strong {
  margin-right: 8px;
  color: var(--sh-blue);
}

.expenses-subnav a {
  border-radius: 9px;
  color: var(--sh-muted);
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.expenses-subnav a:hover,
.expenses-subnav a:focus-visible,
.expenses-subnav a.is-active {
  background: #edf5fd;
  color: var(--sh-blue);
}

.portal-main:has(.expenses-subnav) .app-main {
  padding-top: 8px;
}

.control-main {
  max-width: 100%;
  padding: 16px clamp(16px, 2vw, 32px);
}

.admin-main {
  max-width: 100%;
  padding: 16px clamp(16px, 2vw, 32px) 24px;
}

.reimbursements-main {
  max-width: 100%;
  padding-inline: clamp(16px, 2vw, 32px);
}

.collaborator-main {
  max-width: 100%;
  padding: 16px clamp(16px, 2vw, 32px) 24px;
}

/* Justificatifs / Mes justificatifs / Administration / SH Export Engine — meme bandeau de titre
   condense que .control-main ci-dessus : le titre 28px + marges larges laissaient trop d'espace
   vide avant les premiers blocs utiles. */
.collaborator-main .page-title,
.admin-main .page-title {
  margin: 0;
  font-size: 22px;
}

.collaborator-main .page-subtitle,
.admin-main .page-subtitle {
  font-size: 13px;
}

.collaborator-main > .stack,
.admin-main > .stack {
  gap: 10px;
}

.collaborator-workspace {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1200px) {
  .collaborator-workspace {
    grid-template-columns: minmax(360px, 520px) 1fr;
  }
}

.center-screen {
  min-height: 0;
  width: 100%;
  display: grid;
  flex: 1;
  place-items: center;
  padding: 24px;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  padding: 10px 20px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.app-footer strong {
  color: var(--color-text);
  font-size: inherit;
}

.app-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.suite-return-link {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.suite-return-link:hover,
.suite-return-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.page-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 750;
}

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

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.section-block {
  margin-top: 24px;
}

.section-title {
  margin: 0;
  font-size: 20px;
}

@media (min-width: 720px) {
  .page-heading {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .app-header {
    padding: 12px 14px 10px;
  }

  .app-header-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .app-brand {
    flex: 1 1 230px;
    gap: 10px;
  }

  .app-brand-logo {
    width: 58px;
    height: 40px;
  }

  .app-brand-copy strong {
    font-size: 15px;
  }

  .app-brand-copy span {
    font-size: 10px;
  }

  .app-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .center-screen {
    padding: 16px;
  }

  .app-footer {
    gap: 3px;
    flex-direction: column;
    padding: 8px 12px;
    font-size: 11px;
  }
}


.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: clamp(24px, 5vw, 38px);
}

.auth-form {
  gap: 22px;
}

.auth-brand {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.auth-brand-logo {
  width: min(100%, 220px);
  height: 142px;
  object-fit: contain;
}

.auth-brand-copy {
  display: grid;
  gap: 6px;
}

.auth-brand-copy .page-title {
  margin-bottom: 0;
  color: var(--color-primary);
  font-size: clamp(26px, 6vw, 32px);
}

.auth-brand-copy .page-subtitle {
  max-width: 340px;
  line-height: 1.5;
}

.auth-introduction {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  text-align: center;
}

.auth-introduction span {
  color: var(--color-muted);
  font-size: 14px;
}

/* .btn / .btn-primary / .btn-secondary / .btn-danger / .btn-small proviennent
   du design system partage : sh-core/src/design-system/buttons.css */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  padding: 10px 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary);
}

.nav-link.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
  box-shadow: 0 3px 8px rgb(15 61 46 / 22%);
}

.input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
}

.date-field {
  position: relative;
}

.date-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.date-toggle-button,
.date-calendar-nav,
.date-day {
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 700;
}

.date-toggle-button {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0 12px;
}

.date-calendar {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  width: min(100%, 340px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: 14px;
}

.date-calendar-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.date-calendar-nav {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 8px 10px;
}

.date-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.date-weekday {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.date-day {
  aspect-ratio: 1;
  background: white;
  color: var(--color-text);
}

.date-day:hover,
.date-day.is-selected {
  background: var(--color-primary);
  color: white;
}

.form-group {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}





.form-label {
  font-size: 14px;
  font-weight: 700;
}







.form-error-list {
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.06);
  color: var(--color-danger);
  padding: 12px 16px;
}

.form-error-list ul {
  margin: 0;
  padding-left: 18px;
}

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

.fieldset {
  border: 0;
  padding: 0;
}

.choice-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  background: var(--color-surface);
}

.form-actions {
  display: grid;
  gap: 12px;
}

.receipt-capture {
  gap: 18px;
}

.receipt-mode-grid {
  display: grid;
  gap: 12px;
}

.receipt-mode-button {
  display: grid;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 18px;
  text-align: left;
}

.receipt-mode-button:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.receipt-mode-title {
  font-weight: 800;
}

.receipt-mode-text {
  color: var(--color-muted);
  font-size: 14px;
}

.receipt-preview-card {
  display: grid;
  gap: 16px;
  box-shadow: none;
}

.receipt-final {
  display: grid;
  gap: 14px;
  scroll-margin-top: 76px;
}

.receipt-final-header {
  display: grid;
  gap: 10px;
}

.receipt-final-header .section-title {
  margin: 0;
}

.receipt-final-actions {
  grid-template-columns: repeat(3, minmax(0, auto));
}

.receipt-image-preview {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.receipt-pdf-preview {
  display: grid;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 16px;
}

.receipt-pdf-preview a {
  color: var(--color-primary);
  font-weight: 700;
}

.receipt-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 0;
}

.receipt-meta div {
  display: contents;
}

.receipt-meta dt {
  color: var(--color-muted);
  font-weight: 700;
}

.receipt-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.receipt-actions {
  display: grid;
  gap: 10px;
}

.proposal-container {
  display: grid;
  gap: 16px;
}

.openai-test-card {
  box-shadow: none;
}

.json-result {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 12px;
  white-space: pre-wrap;
}

.textarea {
  resize: vertical;
}

.notice {
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 12px 14px;
  font-weight: 700;
}

.notice.notice-error { border-color: #fecaca; background: var(--color-danger-light); color: var(--color-danger); }

.stack {
  display: grid;
  gap: 16px;
}

.stack[hidden] {
  display: none;
}

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

.receipt-table-region {
  min-width: 0;
}

.receipt-table-scroll {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.receipt-history-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.receipt-history-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid #c7dff3;
  background: #f2f8fd;
  color: var(--sh-ink);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.receipt-history-table td {
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  padding: 7px 10px;
  font-size: 13px;
}

.receipt-history-table tbody:last-child > tr:last-child > td,
.receipt-history-table tbody > tr:nth-last-child(2) > td {
  border-bottom: 0;
}

.receipt-table-row:hover > td {
  background: #f7fbff;
}

.receipt-history-table td > strong,
.receipt-history-table td > small {
  display: block;
}

.receipt-history-table td > small {
  overflow: hidden;
  max-width: 100%;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-history-table th:nth-child(1) { width: 96px; }
.receipt-history-table th:nth-last-child(1) { width: 92px; text-align: center; }
.receipt-history-table th:nth-last-child(2) { width: 190px; }
.receipt-history-table th:nth-last-child(3) { width: 150px; }
.receipt-table-merchant { width: 25%; }
.receipt-table-amount { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.receipt-table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.receipt-table-actions .btn {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 11px;
}

.receipt-table-preview {
  text-align: center;
}

.receipt-table-preview .receipt-card-preview {
  width: 70px;
  height: 52px;
  max-height: 52px;
  margin: 0 auto;
  border-radius: 6px;
  object-fit: cover;
}

.receipt-table-preview .receipt-pdf-preview {
  display: grid;
  place-content: center;
  gap: 1px;
  overflow: hidden;
  padding: 3px;
  font-size: 10px;
}

.receipt-table-preview .receipt-pdf-preview a,
.receipt-table-preview .receipt-pdf-preview .btn {
  font-size: 9px;
  line-height: 1.1;
}

.receipt-table-detail-row > td {
  background: #f7fbff;
  padding: 0 16px 14px;
}

.receipt-table-detail-row .receipt-detail {
  margin-top: 0;
  border-top: 0;
  padding-top: 12px;
}

.receipt-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  padding: 0 0 10px;
}

.receipt-page-heading {
  min-height: 48px;
  margin-bottom: 0;
}

.receipt-page-heading .page-subtitle {
  margin: 3px 0 0;
}

.receipt-page-heading .btn-primary {
  min-height: 42px;
  padding-inline: 18px;
}

.receipt-filter-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 10px 12px 8px;
  box-shadow: var(--shadow-card);
}

.receipt-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}

.receipt-filter strong {
  min-width: 24px;
  border-radius: 999px;
  background: var(--color-bg);
  padding: 2px 7px;
  color: var(--color-muted);
  text-align: center;
}

.receipt-filter:hover,
.receipt-filter.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.receipt-filter.is-active strong {
  background: var(--color-primary);
  color: white;
}

.receipt-filter-summary {
  margin: -6px 2px 0;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
}

.receipt-collaborator-filter {
  width: 100%;
  display: grid;
  gap: 6px;
}

.receipt-advanced-filters {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(540px, 1.3fr);
  align-items: end;
  gap: 14px;
}

.receipt-period-filter {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  border: 0;
  padding: 0;
}

.receipt-period-title {
  grid-column: 1 / -1;
}

.receipt-advanced-filters > .receipt-period-filter:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
}

.receipt-period-filter label {
  display: grid;
  gap: 5px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.receipt-period-filter .input {
  min-width: 0;
  padding: 9px 10px;
}

.receipt-filter-summary {
  margin: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 7px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1120px) {
  .receipt-advanced-filters { grid-template-columns: 1fr; }
  .receipt-period-filter { max-width: 680px; }
}

@media (max-width: 640px) {
  .receipt-period-filter { grid-template-columns: 1fr; }
  .receipt-period-title { grid-column: auto; }
  .receipt-page-heading { align-items: stretch; }
  .receipt-page-heading .btn-primary { width: 100%; }
}

.receipt-collaborator-name {
  margin: 5px 0 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
}

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

.expense-card-header {
  display: grid;
  gap: 12px;
}

.expense-title {
  margin: 0 0 4px;
  font-size: 18px;
}

.expense-amount {
  font-size: 20px;
  color: var(--color-primary);
}

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

.expense-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.badge {
  width: fit-content;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
}

.receipt-status--received,
.receipt-status--archived {
  background: #f1f5f9;
  color: #475569;
}

.receipt-status--analyzed {
  background: #ede9fe;
  color: #6d28d9;
}

.receipt-status--to_review {
  background: #fef3c7;
  color: #92400e;
}

.receipt-status--validated {
  background: #dbeafe;
  color: #1d4ed8;
}

.receipt-status--reimbursed {
  background: #dcfce7;
  color: #15803d;
}

.receipt-status--rejected {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.receipt-card-compact {
  display: grid;
  gap: 0;
  padding: 14px;
}

.receipt-card-summary {
  display: grid;
  gap: 12px;
}

.receipt-card-overview {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 9px;
}

.receipt-card-compact .expense-card-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.receipt-card-compact .expense-title {
  overflow: hidden;
  margin-bottom: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-ticket-date,
.receipt-last-step {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.receipt-last-step {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-detail-toggle {
  justify-self: start;
}

.receipt-card-compact .receipt-card-preview {
  width: 100%;
  height: 116px;
  max-height: 116px;
  object-fit: cover;
}

.receipt-card-compact .receipt-pdf-preview {
  place-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
}

.receipt-card-compact .receipt-pdf-preview span {
  color: var(--color-muted);
  font-size: 13px;
}

.receipt-detail {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.receipt-detail[hidden] {
  display: none;
}

.receipt-detail-title {
  margin: 0;
  font-size: 15px;
}

.receipt-name-meta {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 12px;
  font-size: 14px;
}

.receipt-name-meta dt {
  color: var(--color-muted);
  font-weight: 700;
}

.receipt-name-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.receipt-history-section {
  display: grid;
  gap: 10px;
}

.receipt-timeline {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  margin: 0;
  padding: 2px 2px 8px;
  list-style: none;
}

.receipt-timeline-step {
  position: relative;
  min-width: 130px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 10px;
}

.receipt-timeline-step:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -21px;
  color: var(--color-muted);
  content: "→";
  font-weight: 800;
  transform: translateY(-50%);
}

.receipt-timeline-step.is-current {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.receipt-timeline-step.is-paid {
  border-color: #22c55e;
  background: #dcfce7;
  color: #166534;
}

.receipt-timeline-step strong {
  font-size: 13px;
}

.receipt-timeline-step time {
  color: var(--color-muted);
  font-size: 12px;
}

.receipt-card-compact .receipt-actions-row {
  justify-content: flex-start;
}

.receipt-deletion-note {
  color: var(--color-muted);
  font-size: 13px;
}

.empty-state {
  box-shadow: none;
}

.control-empty-state {
  display: grid;
  gap: 8px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 16px;
}

.control-empty-state h3 {
  margin: 0;
  font-size: 16px;
}

.control-empty-state p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Même compression que .reimbursements-main : titre + repère de file + raccourcis clavier
   laissaient trop d'espace vide avant les panneaux de contrôle eux-mêmes. Le repère de file
   ("File · Justificatif · Contrôle / Correction") passe à droite, au-dessus des raccourcis
   clavier, au lieu de prendre sa propre ligne sous le titre. */
.control-main .page-heading {
  gap: 4px;
  align-items: start;
}

.control-main .page-title {
  margin: 0;
  font-size: 22px;
}

.control-heading-aside {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.control-main .control-breadcrumb {
  font-size: 12px;
  margin: 0;
}

.control-main > .stack {
  gap: 8px;
}

.control-grid {
  display: grid;
  gap: 10px;
  align-items: start;
}

.control-panel {
  align-self: start;
  padding: 10px;
}

.control-panel.stack {
  gap: 8px;
}

.control-panel h2.section-title {
  font-size: 15px;
}

.control-panel > div:first-child::before {
  content: "1";
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  font-size: 12px;
  font-weight: 800;
}

/* Pas de max-height/overflow ici par defaut : en dessous de 1024px (mobile/tablette), un seul
   panneau est affiche a la fois sans hauteur fixee par ailleurs, donc une limite ici forcait un
   ascenseur INTERNE a la liste en plus du defilement normal de la page - les deux se disputaient
   le geste tactile, et la derniere carte de la file restait a peine atteignable/selectionnable.
   La page defile normalement ; la limite + l'ascenseur propre a la liste ne reapparaissent qu'a
   partir de 1024px, ou les 3 colonnes sont visibles simultanement (voir plus bas). */
.review-list {
  display: grid;
  gap: 6px;
  padding-right: 3px;
}

.review-item {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 9px;
  text-align: left;
}

.review-item:hover {
  border-color: var(--color-primary);
}

.review-item.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.review-item-content {
  display: grid;
  gap: 4px;
}

.review-item p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.risk-badge {
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.status-badge {
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.control-workspace {
  min-width: 0;
}

.control-center-zone,
.control-right-zone {
  min-width: 0;
  gap: 8px;
}

.control-zone-heading {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-zone-number {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: white;
  font-weight: 800;
}

.control-zone-heading .section-title {
  font-size: 18px;
}

.control-metrics,
.control-detail-grid {
  display: grid;
  gap: 16px;
}

.metric-card {
  display: grid;
  gap: 4px;
  padding: 14px;
}

.metric-label,
.metric-caption {
  color: var(--color-muted);
  font-size: 14px;
}

.metric-value {
  color: var(--color-primary);
  font-size: 22px;
}

.metric-value-muted {
  color: var(--color-muted);
  font-size: 22px;
}

.receipt-large-preview {
  display: grid;
  min-height: 640px;
  padding: 8px;
  place-items: center;
  background: var(--color-bg);
}

.receipt-paper {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.receipt-paper-kicker {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.receipt-paper-line {
  height: 1px;
  background: var(--color-border);
}

.receipt-paper-total {
  color: var(--color-primary);
  font-size: 26px;
}

.receipt-empty-content {
  display: grid;
  gap: 10px;
  width: min(100%, 360px);
  text-align: center;
}

.receipt-control-content {
  display: grid;
  gap: 12px;
  width: 100%;
}

.receipt-image-frame {
  display: grid;
  gap: 8px;
  width: 100%;
}

.receipt-large-preview .receipt-image-preview {
  width: 100%;
  max-height: 650px;
  border: 0;
  background: transparent;
}

.receipt-zoom-button {
  justify-self: end;
}

.receipt-zoom-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(9 24 20 / 82%);
  padding: 20px;
}

.receipt-zoom-modal[hidden] {
  display: none;
}

.receipt-zoom-dialog {
  width: min(96vw, 1500px);
  height: min(94vh, 1050px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
  padding: 16px;
}

.receipt-zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.receipt-zoom-stage {
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 8px;
}

.receipt-zoom-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

body.is-modal-open {
  overflow: hidden;
}

.receipt-fullscreen-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgb(9 24 20 / 94%);
}

.receipt-fullscreen-modal[hidden] {
  display: none;
}

.receipt-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(16px, 2vw, 32px);
  background: var(--color-surface);
  color: var(--color-text);
}

.receipt-fullscreen-stage {
  position: relative;
  min-height: 0;
}

.receipt-fullscreen-image {
  position: absolute;
  inset: clamp(12px, 2vw, 24px);
  width: calc(100% - clamp(24px, 4vw, 48px));
  height: calc(100% - clamp(24px, 4vw, 48px));
  object-fit: contain;
}

.receipt-fullscreen-pdf {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-md);
  background: white;
}

.expense-card-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.receipt-card-preview--zoomable {
  cursor: zoom-in;
}

.receipt-card-preview--zoomable:hover,
.receipt-card-preview--zoomable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.reimbursement-summary {
  display: grid;
  gap: 12px;
}

.reimbursement-queue,
.reimbursement-filters label,
.payment-history-detail {
  display: grid;
  gap: 8px;
}

.reimbursement-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft, #f6f8f7);
}

.reimbursement-selection > div:first-child {
  display: grid;
  gap: 2px;
}

.reimbursement-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.reimbursement-table {
  min-width: 1180px;
}

/* En-tête de la page Remboursements fortement compressé : avant les onglets, le titre, les 3
   cartes de synthèse et les filtres consommaient à eux seuls près des deux tiers de l'écran avant
   la moindre ligne du tableau. Resserré ici plutôt que sur .stack/.card/.page-heading globaux, qui
   servent toutes les autres pages de l'app. */
.reimbursements-main .page-heading {
  gap: 4px;
}

.reimbursements-main .page-title {
  margin-bottom: 2px;
  font-size: 22px;
}

.reimbursements-main .page-subtitle {
  font-size: 13px;
}

.reimbursements-main > .stack {
  gap: 10px;
}

.reimbursements-main .reimbursement-summary {
  gap: 6px;
}

.reimbursements-main .metric-card {
  padding: 6px 12px;
  gap: 0;
}

.reimbursements-main .metric-label {
  font-size: 12px;
}

.reimbursements-main .metric-value {
  font-size: 16px;
}

.reimbursements-main .reimbursement-queue.card {
  padding: 10px;
  gap: 8px;
}

.reimbursements-main .admin-list-filters {
  gap: 6px 10px;
}

.reimbursements-main .admin-list-filters label {
  gap: 2px;
}

.reimbursements-main .reimbursement-selection {
  padding: 8px 12px;
  gap: 12px;
}

.reimbursements-main .reimbursement-selection > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.reimbursements-main .reimbursement-selection > div:first-child span::before {
  content: "·";
  margin-right: 6px;
  color: var(--color-muted);
}

/* La règle generique ".form-actions { grid-template-columns: auto auto }" (>= 640px) ne prevoit
   que 2 colonnes : avec 3 boutons ici, "Rembourser les depenses selectionnees" retombait seul sur
   une 2e ligne, faisant chevaucher la barre de selection avec la ligne "Total". */
.reimbursements-main .reimbursement-selection .form-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.reimbursements-main .page-tabs {
  padding: 3px;
}

.reimbursements-main .page-tab {
  padding: 6px 12px;
  font-size: 12px;
}

.advance-preview {
  display: grid;
  gap: 2px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-warning-light);
  border-left-width: 3px;
  border-left-color: var(--color-warning);
  border-radius: var(--radius-sm, 6px);
  background: #fffaf0;
  font-size: 13px;
}

.advance-preview p { margin: 0; }

.advance-preview-paid {
  font-weight: 800;
  color: var(--color-primary);
}

.advance-preview-skip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text);
}

.advances-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.advance-create-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  background: var(--color-surface-soft, #f6f8f7);
}

.advance-create-form .form-actions {
  grid-column: 1 / -1;
  justify-content: start;
}

.advance-ledger {
  margin: 0;
  padding-left: 20px;
}

.page-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft, #f6f8f7);
  width: fit-content;
}

.page-tab {
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-tab:hover { color: var(--color-text); }

.page-tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Lignes plus compactes : avec des boutons icône, la cellule "Actions" n'a plus besoin de la
   hauteur que demandaient les libellés texte empilés (Modifier/Supprimer en colonne). */
.reimbursement-table :is(th, td),
.payment-history-table :is(th, td) {
  padding: 7px 10px;
}

.admin-list-filters.payment-history-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payment-history-table-wrap {
  max-height: min(70vh, 760px);
}

.payment-history-table {
  width: 100%;
  min-width: 1240px;
  table-layout: fixed;
}

.payment-history-table th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.payment-history-col-date { width: 10%; }
.payment-history-col-collaborator { width: 15%; }
.payment-history-col-count { width: 6%; }
.payment-history-col-amount { width: 8%; }
.payment-history-col-reference { width: 16%; }
.payment-history-col-initiator { width: 13%; }
.payment-history-col-status { width: 7%; }
.payment-history-col-actions { width: 25%; }

.payment-history-table :is(th, td) {
  vertical-align: middle;
}

.payment-history-table :is(th, td):is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(7), :nth-child(8)) {
  white-space: nowrap;
}

.payment-history-initiator {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-history-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  white-space: nowrap;
}

/* Boutons d'action compacts (icône seule + couleur) utilisés dans les colonnes "Actions" des
   tableaux - même principe que sh-suite (.icon-button / .claims-row-actions, .commission-row-
   actions) : une pastille 28x28 colorée par intention plutôt qu'un libellé texte qui force le
   passage à la ligne et gonfle la hauteur des lignes du tableau. */


.icon-button .icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button:disabled { opacity: 0.5; cursor: not-allowed; }

.icon-button-edit { color: #b0630d; border-color: #f3dcb8; }
.icon-button-edit:hover:not(:disabled) { background: #fdf3e4; }
.icon-button-mail { color: var(--color-primary); border-color: var(--color-primary-light); }
.icon-button-mail:hover:not(:disabled) { background: var(--color-primary-light); }
.icon-button-refresh { color: #146b49; border-color: #b9ddc9; }
.icon-button-refresh:hover:not(:disabled) { background: #e7f5ee; }
.icon-button-danger { color: var(--color-danger); border-color: var(--color-danger-light); }
.icon-button-danger:hover:not(:disabled) { background: var(--color-danger-light); }

.table-row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  white-space: nowrap;
}

.reimbursement-table input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.payment-history-detail ul {
  margin: 0;
  padding-left: 20px;
}

.payment-outcome {
  border-left: 4px solid var(--color-success, #287a4b);
}

.payment-outcome--warning {
  border-left-color: var(--color-warning, #b36b00);
}

.payment-outcome ul {
  margin: 8px 0 16px;
  padding-left: 20px;
}

.receipt-payment-information {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.reimbursement-groups {
  display: grid;
  gap: 16px;
}

.reimbursement-group-card {
  display: grid;
  gap: 16px;
}

.reimbursement-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.reimbursement-group-total {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--color-muted);
  white-space: nowrap;
}

.reimbursement-group-total strong {
  color: var(--color-primary);
  font-size: 22px;
}

.reimbursement-expense-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reimbursement-expense-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--color-border);
  padding: 11px 0;
}

.reimbursement-expense-list li div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.reimbursement-expense-list li span {
  color: var(--color-muted);
  font-size: 13px;
}

.reimbursement-pay-button {
  min-height: 48px;
  justify-self: end;
}

.payment-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: rgb(9 24 20 / 78%);
  padding: 20px;
}

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

.payment-dialog {
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.receipt-empty-content p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5;
}

.ai-proposal-panel {
  align-self: start;
  padding: 10px;
}

.ai-proposal-panel.stack {
  gap: 8px;
}

.ai-proposal-panel h2.section-title {
  margin: 0;
  font-size: 13px;
}

/* Formulaire de correction (#controlEditForm) : .expense-form avait un gap de 18px ET chaque
   .form-group ajoutait encore 16px de margin-bottom (la marge ne se "collapse" pas dans une grille,
   donc les deux s'additionnaient) - une quinzaine de champs empilaient ça au point de faire
   défiler toute la colonne. Scopé par id plutôt que sur .form-group/.input/.expense-form eux-mêmes,
   qui sont des classes génériques réutilisées ailleurs (Export, etc.). */
#controlEditForm {
  gap: 6px;
}

#controlEditForm .form-group {
  gap: 3px;
  margin-bottom: 0;
}

#controlEditForm .form-label {
  font-size: 12px;
}

#controlEditForm .input {
  padding: 7px 10px;
}

#controlEditForm .choice {
  padding: 6px 10px;
}

#controlEditForm .page-subtitle {
  font-size: 11px;
}

.control-checks-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.control-checks-heading h3 { margin: 0; }
.conformity-badge { border-radius: 999px; padding: 5px 9px; font-size: 12px; white-space: nowrap; }
.conformity-badge--ok { color: var(--color-success); background: var(--color-success-light); }
.conformity-badge--error { color: var(--color-danger); background: var(--color-danger-light); }
.conformity-reason { margin: 8px 0 0; color: var(--color-danger); font-weight: 700; }
.correction-actions { position: sticky; bottom: 0; z-index: 9; padding: 8px 0; background: var(--color-surface); }
.correction-see-receipt { margin-top: 8px; }

.proposal-summary {
  display: grid;
  gap: 10px;
  margin: 0;
}

.proposal-summary div {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}

.proposal-summary dt {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
}

.proposal-summary dd {
  margin: 0;
  font-weight: 700;
}

.control-actions {
  display: grid;
  gap: 10px;
}

.control-actions .btn {
  min-height: 50px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 850;
}

.control-loading,
.control-load-error {
  display: flex;
  max-width: 720px;
  align-items: center;
  gap: 16px;
  margin: 32px auto;
}

.control-load-error {
  display: grid;
}

.control-spinner {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 3px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: control-spin 0.8s linear infinite;
}

@keyframes control-spin {
  to { transform: rotate(360deg); }
}

.control-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--color-muted);
  font-size: 12px;
}

.control-shortcuts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

kbd,
.action-shortcut {
  min-width: 20px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.control-mobile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  position: sticky;
  z-index: 20;
  top: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 4px;
}

.control-mobile-tab,
.queue-filter {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  padding: 9px 10px;
  font-weight: 750;
}

.control-mobile-tab.is-active,
.queue-filter.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

[data-mobile-panel] {
  display: none;
}

[data-mobile-panel].is-mobile-active {
  display: grid;
}

.control-toast {
  border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-success-light);
  color: var(--color-success);
  padding: 11px 14px;
  font-weight: 750;
}

.queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.queue-filter {
  border-color: var(--color-border);
  padding: 7px 9px;
  font-size: 12px;
}

.queue-collaborator-filter {
  display: grid;
  gap: 5px;
  width: min(100%, 280px);
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
}

.queue-collaborator-filter select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 819px) {
  .accounting-mapping-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-collaborator-filter { width: 100%; }
}

@media (max-width: 1023px) {
  .admin-list-filters.payment-history-filters {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

.review-item {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px;
}

.review-item-content b {
  font-size: 15px;
}

.review-item-indicators {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.review-item .status-badge,
.anomaly-badge {
  padding: 4px 7px;
  font-size: 11px;
}

.anomaly-badge {
  border-radius: 999px;
  font-weight: 800;
}

.anomaly-badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.anomaly-badge--clear {
  background: var(--color-success-light);
  color: var(--color-success);
}

.control-note-navigation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.control-note-navigation span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.control-expense-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.control-expense-summary div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.control-expense-summary span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
}

.control-expense-summary strong {
  overflow-wrap: anywhere;
}

.control-summary-amount {
  color: var(--color-primary);
  font-size: 20px;
}

/* Sous "Contrôle de la dépense" (résumé Société/Collaborateur/Date/Nature/Montant/Fournisseur,
   laissé tel quel), les sections suivantes - Synthèse des contrôles, Comparaison des données,
   Propositions IA - sont purement informatives : condensées pour redonner de la place au résumé
   et aux boutons de décision au-dessus, qui restent ce que l'utilisateur regarde en premier. */
.control-checks,
.control-comparison {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.control-checks h3,
.control-comparison h3 {
  margin: 0;
  font-size: 13px;
}

.control-checks ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.control-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 12px;
}

.control-check div {
  display: grid;
  gap: 1px;
}

.control-check div span {
  color: var(--color-muted);
  font-size: 11px;
}

.control-check-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.control-check--success { border-left-color: var(--color-success); }
.control-check--success .control-check-icon { background: var(--color-success-light); color: var(--color-success); }
.control-check--warning { border-left-color: var(--color-warning); }
.control-check--warning .control-check-icon { background: var(--color-warning-light); color: var(--color-warning); }
.control-check--error { border-left-color: var(--color-danger); }
.control-check--error .control-check-icon { background: var(--color-danger-light); color: var(--color-danger); }
.control-check--neutral { border-left-color: var(--color-muted); }
.control-check--neutral .control-check-icon { background: var(--color-bg); color: var(--color-muted); }

.comparison-table {
  display: grid;
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.8fr) repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding: 5px 4px;
  font-size: 12px;
}

.comparison-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.comparison-header {
  border-top: 0;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.comparison-row.has-difference {
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-light);
  padding-left: 8px;
}

.difference-label {
  display: block;
  color: var(--color-warning);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.receipt-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.receipt-document-stage {
  width: 100%;
  min-height: min(68vh, 720px);
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: var(--radius-md);
  background: #eef2f7;
}

.receipt-large-preview {
  min-height: min(72vh, 760px);
}

.collaborator-kpis { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collaborator-kpis article { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.collaborator-kpis span { color: var(--color-muted); font-size: 13px; }
.collaborator-kpis strong { font-size: 22px; }

.receipt-document {
  transform-origin: center top;
  transition: transform 0.15s ease;
}

.receipt-pdf-frame {
  width: 100%;
  min-height: 610px;
  border: 0;
  background: white;
}

.receipt-zoom-pdf {
  width: 100%;
  height: 100%;
  border: 0;
}

.control-actions {
  position: sticky;
  z-index: 10;
  top: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
  padding: 8px;
}

.control-actions .btn:disabled {
  color: var(--color-muted);
  background: var(--color-border);
  opacity: 1;
}

.duplicate-candidates {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.duplicate-candidates article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
}

.duplicate-candidates article > div {
  display: grid;
  gap: 3px;
}

.duplicate-detail {
  grid-column: 1 / -1;
  margin: 0;
}

.camera-modal {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: #020617;
  padding: 12px;
}

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

.camera-dialog {
  width: min(100%, 720px);
  min-height: min(94vh, 940px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 12px;
  color: white;
}

.camera-dialog header,
.camera-dialog header div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.camera-dialog header div {
  align-items: flex-start;
  flex-direction: column;
}

.camera-stage {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #0f172a;
}

.camera-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.camera-editor-surface {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}

.camera-editor-surface[hidden] { display: none; }

.camera-editor-surface > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.camera-crop-overlay,
.camera-crop-overlay svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.camera-crop-overlay polygon {
  fill: rgb(37 99 235 / 12%);
  stroke: #facc15;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.camera-corner {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  padding: 0;
  touch-action: none;
}

.camera-corner::before {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 4px solid #facc15;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 0 0 3px rgb(15 23 42 / 72%);
  content: "";
}

.camera-corner--topLeft { translate: 0 0; }
.camera-corner--topRight { translate: -100% 0; }
.camera-corner--bottomRight { translate: -100% -100%; }
.camera-corner--bottomLeft { translate: 0 -100%; }
.camera-corner--topLeft::before { top: -10px; left: -10px; }
.camera-corner--topRight::before { top: -10px; right: -10px; }
.camera-corner--bottomRight::before { right: -10px; bottom: -10px; }
.camera-corner--bottomLeft::before { bottom: -10px; left: -10px; }

.camera-corner span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.camera-corner:focus-visible::before {
  outline: 4px solid white;
  outline-offset: 3px;
}

.camera-status {
  min-height: 42px;
  margin: 0;
  color: rgb(255 255 255 / 88%);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

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

.camera-actions[hidden] { display: none; }

@media (max-width: 639px) {
  .accounting-mapping-form,
  .accounting-mapping-filters { grid-template-columns: 1fr; }
  #photoButton { order: -1; border-color: var(--color-primary); background: var(--color-primary); color: white; }
  #photoButton .receipt-mode-text { color: rgb(255 255 255 / 85%); }
  #importFileButton { background: var(--color-surface); }
  .receipt-mode-grid { display: flex; flex-direction: column; }
  .duplicate-candidates article { grid-template-columns: minmax(0, 1fr); }
  .camera-modal { padding: 0; }
  .camera-dialog { width: 100%; height: 100dvh; min-height: 100vh; padding: 8px 10px; }
  .camera-stage { width: 100%; height: min(70dvh, 680px); min-height: 0; border-radius: 0; }
  .camera-actions--editor,
  .camera-actions--final { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-actions--editor .btn-primary,
  .camera-actions--final .btn-primary { grid-column: 1 / -1; }
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  padding-bottom: 2px;
}

.admin-tab {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 12px;
  white-space: nowrap;
}

.admin-tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

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

.admin-form {
  display: grid;
  gap: 12px;
}

.admin-list-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

/* SH Export Engine — un seul grid auto-flow pour tous les filtres au lieu de 4 .admin-panel-grid
   a 2 colonnes fixes empiles (le 3e champ d'une ligne retombait seul sur la ligne suivante avec
   la moitie de la largeur vide a cote). Se remplit naturellement sur toute la largeur disponible. */
.export-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

.admin-list-filters label {
  display: grid;
  gap: 4px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
}

.pipeline-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 4px;
}

.input-small {
  padding: 8px 10px;
  font-size: 13px;
}

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  min-width: 0;
}

.accounting-mapping-panel { min-width: 0; }
.accounting-mapping-editor h3 { margin: 0; }
.accounting-mapping-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.accounting-mapping-form .choice,
.accounting-mapping-form .form-actions { grid-column: 1 / -1; }
.accounting-mapping-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(190px, 1.3fr);
  gap: 10px;
}
.accounting-mapping-card { min-width: 0; overflow: hidden; }
.accounting-mapping-table-wrap { max-height: min(62vh, 700px); overflow: auto; }
.mapping-nature-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid #bad7f4; border-radius: var(--radius-md); background: #f2f8fe; }
.mapping-nature-banner > div { min-width: 0; }
.mapping-nature-eyebrow { display: block; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.mapping-nature-banner strong { display: block; margin-top: 2px; font-size: 18px; }
.mapping-nature-banner p { margin: 4px 0; overflow-wrap: anywhere; }
.mapping-nature-banner small { color: var(--color-muted); }
.mapping-nature-banner-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.mapping-nature-company-count { color: var(--color-muted); font-size: 12px; font-weight: 700; }
.mapping-table-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 4px; }
.mapping-table-heading h3 { margin: 0; font-size: 15px; }
.mapping-table-heading p { margin: 0; color: var(--color-muted); font-size: 12px; }
.accounting-mapping-table { width: 100%; min-width: 1260px; table-layout: fixed; }
.accounting-mapping-table--selected { min-width: 1110px; }
.accounting-mapping-table :is(th, td) { padding: 8px 9px; vertical-align: middle; white-space: nowrap; }
.accounting-mapping-table th { position: sticky; z-index: 2; top: 0; }
.mapping-col-nature { width: 13%; }
.mapping-col-company { width: 16%; }
.mapping-col-collaborator { width: 16%; }
.mapping-col-expense { width: 11%; }
.mapping-col-vat { width: 10%; }
.mapping-col-rate { width: 8%; }
.mapping-col-label { width: 15%; }
.mapping-col-actions { width: 190px; }
.mapping-col-status { width: 96px; }
.accounting-mapping-row { min-height: 56px; }
.accounting-mapping-row.is-new { background: #f2f8fe; }
.mapping-cell-input { width: 100%; min-width: 0; min-height: 34px; padding: 5px 7px; font-size: 12px; }
.mapping-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 180px; white-space: normal; }
.mapping-inline-actions .btn { min-height: 30px; padding: 5px 7px; font-size: 11px; white-space: nowrap; }
.mapping-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.mapping-status-cell { text-align: center !important; }
.mapping-active { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.mapping-active input { accent-color: var(--color-primary); }
.mapping-nature-cell { display: grid; gap: 3px; min-width: 0; }
.mapping-nature-cell small { color: var(--color-muted); overflow-wrap: anywhere; white-space: normal; }
.mapping-nature-link { display: inline-flex; width: fit-content; max-width: 100%; border: 0; padding: 0; color: var(--color-primary); background: transparent; font: inherit; font-weight: 800; text-align: left; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; white-space: normal; }
.mapping-collaborator-cell { display: grid; gap: 5px; min-width: 0; }
.mapping-kind-badge { width: fit-content; border-radius: 999px; padding: 2px 6px; color: #174d83; background: #e5f1fd; font-size: 10px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.mapping-kind-badge--override { color: #6a3e00; background: #fff0d6; }
.accounting-mapping-table td:has(.mapping-label) { white-space: normal; }
.mapping-label { white-space: normal; overflow-wrap: anywhere; }
.accounting-delete-dialog { position: fixed; z-index: 100; inset: 50% auto auto 50%; transform: translate(-50%, -50%); margin: 0; }
.accounting-delete-summary { display: grid; gap: 8px; margin: 0 0 22px; }
.accounting-delete-summary div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; border-top: 1px solid var(--table-border); padding-top: 8px; }
.accounting-delete-summary dt { color: var(--color-muted); font-weight: 700; }
.accounting-delete-summary dd { margin: 0; }
.table-account { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; text-align: right !important; }
.table-number { text-align: right !important; white-space: nowrap; }

.account-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--color-surface);
}

.account-card h3 { margin: 8px 0 12px; overflow-wrap: anywhere; }
.account-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-code { color: var(--color-primary); font-size: 18px; }
.account-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.account-card-meta div { min-width: 0; }
.account-card-meta dt { color: var(--color-muted); font-size: 11px; text-transform: uppercase; }
.account-card-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.status-badge-warning { background: #fff1cc; color: #805400; border-color: #e8bd55; }
.status-badge-muted { background: var(--color-background); color: var(--color-muted); }
.manual-expense-entry { display: grid; gap: 14px; border-top: 1px solid var(--color-border); padding-top: 18px; }
.manual-expense-form { max-width: 760px; }
.manual-receipt-preview { border-style: dashed; border-color: #e8bd55; }
.meal-guests-entry, .meal-guests-editor { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.payment-history { margin-top: 20px; }
.payment-history-list { display: grid; gap: 12px; }
.payment-history-item { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.payment-history-item > div:first-child { display: grid; gap: 4px; }
.payment-history-item span { color: var(--color-muted); font-size: 14px; }

.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--color-border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--color-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.admin-card-list {
  display: grid;
  gap: 10px;
}

.admin-list-item {
  display: grid;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.admin-list-item p {
  margin: 4px 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-logo-preview {
  max-width: 180px;
  max-height: 90px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 10px;
}

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

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.export-filter-checkbox {
  align-self: end;
  padding-bottom: 2px;
}

.export-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.export-summary-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
}

.export-summary-card span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.export-summary-card strong {
  font-size: 20px;
}

.export-summary-card.is-balanced {
  border-color: #86efac;
  background: #f0fdf4;
}

.export-summary-card.is-balanced strong {
  color: #166534;
}

.export-summary-card.is-unbalanced {
  border-color: #fecaca;
  background: var(--color-danger-light);
}

.export-summary-card.is-unbalanced strong {
  color: var(--color-danger);
}

.export-actions {
  justify-content: flex-end;
}

.export-preview-table {
  margin-top: 4px;
}

.export-preview-table .admin-table {
  min-width: 1320px;
}

@media (min-width: 640px) {
  .form-actions {
    grid-template-columns: auto auto;
    justify-content: end;
  }

  .receipt-mode-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .receipt-actions {
    grid-template-columns: auto auto auto;
    justify-content: end;
  }

  .expense-card-header {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .receipt-filters {
    flex-wrap: wrap;
  }

  .receipt-card-summary {
    grid-template-columns: 144px minmax(0, 1fr);
    align-items: stretch;
  }

  .receipt-card-compact .receipt-card-preview {
    width: 144px;
    height: 116px;
  }

  .admin-list-item {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 820px) {
  .correction-see-receipt { display: none; }
  .reimbursement-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .control-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .control-grid {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  }

  .control-panel {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .control-center-zone,
  .control-right-zone,
  [data-mobile-panel] {
    display: grid;
  }

  .control-center-zone,
  .control-right-zone {
    grid-column: 2;
  }

  .control-mobile-tabs {
    display: none;
  }

  .receipt-large-preview {
    min-height: 640px;
  }

  .control-actions {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .admin-panel-grid {
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
  }
}

@media (max-width: 819px) {
  .reimbursement-selection,
  .reimbursement-selection .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reimbursement-selection .btn,
  .reimbursement-filters label {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .control-grid {
    grid-template-columns: minmax(220px, 0.65fr) minmax(440px, 1.7fr) minmax(340px, 1fr);
    align-items: start;
  }

  .control-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .control-center-zone,
  .control-right-zone {
    grid-column: auto;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  /* Essai precedent : .control-panel en colonne flex (overflow hidden) + .review-list en
     flex:1/min-height:0 pour que la liste occupe exactement l'espace restant sous l'en-tete. En
     pratique le defilement restait bloque (toujours pas de dernier ticket accessible) - trop de
     sensibilite au calcul de hauteur flex dans une grille. Repli sur le pattern le plus simple et
     le plus fiable qui existe en CSS : TOUT le panneau (titre, filtres, onglets, liste) defile comme
     un seul bloc borne par max-height + overflow-y:auto, sans dependre d'aucun calcul de hauteur
     interne. Les filtres remontent avec la liste au defilement au lieu de rester epingles en haut -
     compromis assume pour que ca marche vraiment, dans tous les cas. */
  .control-panel {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .control-panel::-webkit-scrollbar {
    width: 6px;
  }

  .control-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-border);
  }

  /* Repère d'étape ("1") utile en vue mobile (un seul des 3 panneaux visible à la fois, onglets
     File/Justificatif/Contrôle) ; en 3 colonnes simultanées sur desktop, il ne numérote plus rien
     (les 2 autres colonnes ont un vrai titre, pas de badge) - purement décoratif ici, retiré pour
     gagner la place. */
  .control-panel > div:first-child::before {
    display: none;
  }
}

@media (max-width: 639px) {
  .collaborator-kpis { grid-template-columns: 1fr; }
  .receipt-final-actions { position: sticky; top: 64px; z-index: 8; grid-template-columns: repeat(3, 1fr); background: var(--color-surface); padding: 6px 0; }
  .receipt-final-actions .btn { min-width: 0; padding-inline: 6px; }
}
.meal-guest-add { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto; gap: .5rem; align-items: end; }
.meal-guests-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.meal-guest-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .55rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; }
.meal-guest-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; }
@media (max-width: 700px) { .meal-guest-add { grid-template-columns: 1fr; } }