/* =============================================================================
 * Prolog IMS - component parity layer  (Layer 3)
 *
 * Shape, type and spacing that a colour swap cannot express: radii, shadows,
 * button and form geometry, badge shape, plus overrides for the CDN libraries
 * (toastr, bootstrap-select) that load AFTER our vendor CSS.
 *
 * Colour comes from Layer 2 (the re-themed vendor CSS) and Layer 1 (tokens).
 * Every rule here references var(--prolog-*) rather than a literal, so
 * enabling dark mode later stays a CSS-only change.
 *
 * IMS source of truth: src/assets/css/tailwind.css lines 309-468.
 * ========================================================================== */

/* ---------------------------------------------------------------- base ---- */

body {
  font-family: var(--prolog-font-body);
  font-size: var(--prolog-text-sm);
  color: var(--prolog-text);
  background: var(--prolog-bg-app);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--prolog-font-heading);
  color: var(--prolog-text);
  font-weight: var(--prolog-fw-semibold);
}
a { color: var(--prolog-primary); }
a:hover { color: var(--prolog-primary-700); }

/* MDI glyphs sit on a different baseline from Remix; without this the topbar
   and KPI tiles shift ~2px when an icon is swapped. */
.mdi { line-height: 1; vertical-align: -.125em; }

/* --------------------------------------------------------------- buttons -- */
/* IMS .btn: rounded-md px-5 py-2 text-sm font-semibold transition duration-300
   shadow-[0_10px_20px_-10px] <colour>/60, hover:shadow-none                   */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* border-WIDTH and -STYLE only. Using the `border` shorthand here would set
     border-color:transparent, and since this file loads after the vendor CSS
     at equal specificity it would erase every .btn-outline-* border colour. */
  border-width: 1px;
  border-style: solid;
  border-radius: var(--prolog-radius-md);
  padding: .5rem 1.25rem;
  font-size: var(--prolog-text-sm);
  font-weight: var(--prolog-fw-semibold);
  line-height: 1.5;
  outline: none;
  transition: all .3s;
  /* buttons-standardization.css forces min-height:44px on every .btn, which
     contradicts IMS. Its WCAG 2.5.5 target-size intent is preserved for touch
     devices only, at the bottom of this file. */
  min-height: 0;
  min-width: 0;
}
.btn-sm { padding: .375rem .625rem; font-size: var(--prolog-text-xs); }
.btn-lg { padding: .625rem 1.75rem; font-size: var(--prolog-text-base); }
.btn:disabled, .btn.disabled { cursor: not-allowed; opacity: .6; box-shadow: none; }
/* hover:shadow-none — and cancel global-visual-improvements.css's lift */
.btn:hover { box-shadow: none; transform: none; }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--prolog-primary-rgb) / .25); }

/* The coloured drop shadow is the IMS button signature. */
.btn-primary   { box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-primary-rgb) / .6); }
.btn-success   { box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-success-rgb) / .6); }
.btn-danger    { box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-error-rgb) / .6); }
.btn-warning   { box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-warning-rgb) / .6); }
.btn-info      { box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-info-rgb) / .6); }
.btn-secondary,
.btn-light,
.btn-dark      { box-shadow: none; }
.btn-link { box-shadow: none; text-decoration: none; font-weight: var(--prolog-fw-semibold); }
.btn-link:hover { text-decoration: underline; }

[class*="btn-outline-"] { box-shadow: none; background: transparent; }

/* IMS has no Bootstrap "secondary" accent; the WMS accent is a NEW variant so
   that .btn-secondary can stay neutral for Annuler/Fermer. */
.btn-accent {
  background: var(--prolog-accent);
  border-color: var(--prolog-accent);
  color: #fff;
  box-shadow: var(--prolog-shadow-btn) rgb(var(--prolog-accent-rgb) / .6);
}
.btn-accent:hover, .btn-accent:focus { background: var(--prolog-accent-dark); border-color: var(--prolog-accent-dark); color: #fff; }
.btn-outline-accent { border-color: var(--prolog-accent); color: var(--prolog-accent); background: transparent; }
.btn-outline-accent:hover { background: var(--prolog-accent); color: #fff; }
.text-accent { color: var(--prolog-accent) !important; }
.bg-accent { background-color: var(--prolog-accent) !important; }

/* ----------------------------------------------------------------- cards -- */
/* IMS page cards: rounded-xl shadow-sm border-0                               */

.card {
  border: 0;
  border-radius: var(--prolog-radius-xl);
  box-shadow: var(--prolog-shadow-sm);
  background: var(--prolog-bg-card);
  margin-bottom: 1.5rem;
}
/* global-visual-improvements.css lifts cards on hover; IMS cards are static. */
.card:hover { transform: none; box-shadow: var(--prolog-shadow-sm); }
.card-body { padding: 1.5rem; }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--prolog-border-light);
  padding: 1rem 1.5rem;
  font-weight: var(--prolog-fw-semibold);
  color: var(--prolog-text);
}
.card-title { font-size: var(--prolog-text-base); font-weight: var(--prolog-fw-semibold); margin: 0; }
.card-footer { background: transparent; border-top: 1px solid var(--prolog-border-light); padding: 1rem 1.5rem; }
/* IMS .panel = rounded-md bg-white p-5 shadow */
.panel {
  position: relative;
  border-radius: var(--prolog-radius-md);
  background: var(--prolog-bg-card);
  padding: 1.25rem;
  box-shadow: var(--prolog-shadow);
}

/* ---------------------------------------------------------------- tables -- */

.table {
  color: var(--prolog-text);
  font-size: var(--prolog-text-sm);
  margin-bottom: 0;
  border-color: var(--prolog-border-light);
}
.table > thead > tr > th {
  background: var(--prolog-primary-50);
  color: var(--prolog-text-light);
  font-weight: var(--prolog-fw-semibold);
  font-size: var(--prolog-text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--prolog-border);
  padding: .75rem 1rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--prolog-border-light);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
  background: var(--prolog-bg-hover);       /* IMS bg.hover #E8F5FF */
  --bs-table-accent-bg: transparent;
  color: var(--prolog-text);
}
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected { background: rgb(var(--prolog-primary-rgb) / .08); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--prolog-border);
  border-radius: var(--prolog-radius-md);
  padding: .375rem .75rem;
  font-size: var(--prolog-text-sm);
  color: var(--prolog-text);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--prolog-primary); outline: none; box-shadow: none; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: var(--prolog-text-sm); color: var(--prolog-text-light); }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { color: var(--prolog-text-muted); opacity: .6; }

/* Export toolbar (Copy / Excel / PDF / Column visibility). Skote ships these
   as solid dark-grey .dt-button pills, which read as primary actions and
   compete with the real page actions in the header card. */
.dt-buttons .dt-button,
div.dt-buttons .btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--prolog-border) !important;
  border-radius: var(--prolog-radius-md) !important;
  color: var(--prolog-text-light) !important;
  font-size: var(--prolog-text-xs) !important;
  font-weight: var(--prolog-fw-semibold) !important;
  padding: .375rem .75rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.dt-buttons .dt-button:hover,
div.dt-buttons .btn:hover {
  background: var(--prolog-bg-hover) !important;
  border-color: var(--prolog-primary) !important;
  color: var(--prolog-primary) !important;
}
.dt-button-collection .dt-button.active,
.dt-button-collection .dt-button:hover { background: rgb(var(--prolog-primary-rgb) / .10) !important; color: var(--prolog-primary) !important; }

/* ----------------------------------------------------------------- forms -- */
/* IMS: w-full rounded-md border border-[#e0e6ed] px-4 py-2 text-sm
   font-semibold focus:border-primary focus:ring-transparent                   */

.form-control,
.form-select,
textarea.form-control,
.form-control:focus,
.form-select:focus {
  border: 1px solid #e0e6ed;
  background-color: var(--prolog-bg-card);
  border-radius: var(--prolog-radius-md);
  padding: .5rem 1rem;
  font-size: var(--prolog-text-sm);
  font-weight: var(--prolog-fw-semibold);
  color: var(--prolog-text);
  outline: none;
  transition: border-color .2s;
}
.form-control:focus, .form-select:focus { border-color: var(--prolog-primary); box-shadow: none; }
.form-control::placeholder { font-weight: var(--prolog-fw-normal); color: var(--prolog-text-muted); }
.form-control-sm, .form-select-sm { padding: .375rem .75rem; font-size: var(--prolog-text-xs); }
.form-control-lg, .form-select-lg { padding: .625rem 1rem; font-size: var(--prolog-text-base); }

label, .form-label {
  display: block;
  margin-bottom: .375rem;
  font-weight: var(--prolog-fw-semibold);
  font-size: var(--prolog-text-sm);
  color: var(--prolog-text);
}
.form-check-label, .form-check-input + label { display: inline-block; margin-bottom: 0; }
.form-check-input:checked { background-color: var(--prolog-primary); border-color: var(--prolog-primary); }
.form-check-input:focus { border-color: var(--prolog-primary); box-shadow: 0 0 0 3px rgb(var(--prolog-primary-rgb) / .2); }

/* validation — IMS .has-error / .has-success */
.form-control.is-invalid, .was-validated .form-control:invalid,
.has-error .form-control, .has-error .form-select {
  border-color: var(--prolog-error);
  background-color: rgb(var(--prolog-error-rgb) / .08);
  color: var(--prolog-error);
}
.invalid-feedback, .has-error .form-label { color: var(--prolog-error); font-size: var(--prolog-text-xs); }
.form-control.is-valid, .was-validated .form-control:valid,
.has-success .form-control, .has-success .form-select {
  border-color: var(--prolog-success);
  background-color: rgb(var(--prolog-success-rgb) / .08);
  color: var(--prolog-success);
}
.valid-feedback { color: var(--prolog-success); font-size: var(--prolog-text-xs); }

/* typography-improvements.css puts a 3px red left border on EVERY :required
   field. That is not an IMS pattern and reads as a permanent error state; the
   asterisk in the label (also provided by that file) carries the meaning. */
.form-control:required, .form-select:required, textarea:required { border-left-width: 1px; }
.form-label.required::after, label.required::after { content: " *"; color: var(--prolog-error); }
/* crispy-bootstrap4 ecrit l'asterisque en <span class="asteriskField">*</span> :
   meme rouge que celui des formulaires ecrits a la main. */
.asteriskField { color: var(--prolog-error); font-weight: bold; margin-left: 2px; }

/* crispy-bootstrap4 emits Bootstrap 4 markup into a Bootstrap 5 page. These
   shims are pre-existing breakage that only becomes visible once forms are
   restyled. CRISPY_TEMPLATE_PACK = 'bootstrap4' in prolog/settings.py. */
.form-group { margin-bottom: 1rem; }
.custom-select {
  display: block; width: 100%;
  border: 1px solid #e0e6ed;
  border-radius: var(--prolog-radius-md);
  padding: .5rem 1rem;
  font-size: var(--prolog-text-sm);
  font-weight: var(--prolog-fw-semibold);
  color: var(--prolog-text);
  background-color: var(--prolog-bg-card);
}
.custom-select:focus { border-color: var(--prolog-primary); outline: none; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--prolog-primary); border-color: var(--prolog-primary); }
.custom-file-label, .form-control-file { font-size: var(--prolog-text-sm); }

/* ---------------------------------------------------------------- modals -- */

.modal-content {
  border: 0;
  border-radius: var(--prolog-radius-xl);
  box-shadow: var(--prolog-shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--prolog-border-light); padding: 1.25rem 1.5rem; }
.modal-title { font-size: var(--prolog-text-lg); font-weight: var(--prolog-fw-bold); color: var(--prolog-text); }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--prolog-border-light); padding: 1rem 1.5rem; gap: .5rem; }
.modal-backdrop.show { opacity: .6; }        /* IMS overlay: bg-[black]/60 */

/* ---------------------------------------------------------------- badges -- */
/* IMS .badge: rounded (4px) px-2 py-0.5 text-xs font-semibold                 */

.badge {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--prolog-radius);
  padding: .25rem .5rem;
  font-size: var(--prolog-text-xs);
  font-weight: var(--prolog-fw-semibold);
  line-height: 1.2;
}
.badge-outline-primary { border-color: var(--prolog-primary); color: var(--prolog-primary); background: transparent; }
.badge-outline-success { border-color: var(--prolog-success); color: var(--prolog-success); background: transparent; }
.badge-outline-danger  { border-color: var(--prolog-error);   color: var(--prolog-error);   background: transparent; }
.badge-outline-warning { border-color: var(--prolog-warning); color: var(--prolog-warning); background: transparent; }
.badge-outline-info    { border-color: var(--prolog-info);    color: var(--prolog-info);    background: transparent; }

/* Texte blanc unifie sur TOUS les fonds pleins : c'est deja ce que font
   .btn-success / .btn-info / .btn-warning (color:#fff en vendeur), les badges
   etaient les seuls a diverger et le melange noir/blanc se voyait.
   .bg-light garde un texte sombre : c'est un fond gris clair, du blanc y serait
   illisible -- il ne s'agit pas d'une exception esthetique mais du seul cas ou
   la regle ne peut pas s'appliquer. */
.badge.bg-light { color: var(--prolog-text) !important; }

/* Statut « en cours » — voir --prolog-status-progress (prolog-ims-tokens.css).
   Memes regles que les utilitaires Bootstrap .bg-* / .text-* / .border-* qu'il
   remplace (d'ou le !important), texte blanc sur le fond plein. */
.bg-progress { background-color: var(--prolog-status-progress) !important; }
.badge.bg-progress, .bg-progress.avatar-title { color: #fff; }
.text-progress { color: var(--prolog-status-progress) !important; }
.border-progress { border-color: var(--prolog-status-progress) !important; }

/* Subtle badges used on the dashboard KPI cards */
.bg-primary-subtle { background-color: rgb(var(--prolog-primary-rgb) / .12) !important; }
.bg-success-subtle { background-color: var(--prolog-success-light) !important; }
.bg-danger-subtle  { background-color: var(--prolog-error-light) !important; }
.bg-warning-subtle { background-color: var(--prolog-warning-light) !important; }
.bg-info-subtle    { background-color: var(--prolog-info-light) !important; }

/* ---------------------------------------------------------------- alerts -- */
/* IMS Alert: tinted background + 4px coloured left border + icon slot         */

.alert {
  border: 0;
  border-left: 4px solid transparent;
  border-radius: var(--prolog-radius-lg);
  padding: 1rem 1.25rem;
  font-size: var(--prolog-text-sm);
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.alert > .btn-close { margin-left: auto; }
.alert-success { background: var(--prolog-success-light); color: var(--prolog-success-dark); border-left-color: var(--prolog-success); }
.alert-danger,
.alert-error   { background: var(--prolog-error-light);   color: var(--prolog-error-dark);   border-left-color: var(--prolog-error); }
.alert-warning { background: var(--prolog-warning-light); color: var(--prolog-warning-dark); border-left-color: var(--prolog-warning); }
.alert-info    { background: var(--prolog-info-light);    color: var(--prolog-info-dark);    border-left-color: var(--prolog-info); }
.alert-secondary { background: var(--prolog-primary-50);  color: var(--prolog-text-light);   border-left-color: var(--prolog-text-light); }

/* ------------------------------------------------------------ navigation -- */

.breadcrumb { margin: 0; padding: 0; background: transparent; font-size: var(--prolog-text-xs); }
.breadcrumb-item, .breadcrumb-item a { color: var(--prolog-text-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--prolog-primary); }
.breadcrumb-item.active { color: var(--prolog-text-light); font-weight: var(--prolog-fw-medium); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--prolog-border); }

.pagination { gap: .25rem; }
.page-link {
  border: 1px solid var(--prolog-border);
  border-radius: var(--prolog-radius-md);
  color: var(--prolog-text-light);
  font-size: var(--prolog-text-sm);
  font-weight: var(--prolog-fw-semibold);
  padding: .375rem .75rem;
}
.page-link:hover { background: var(--prolog-bg-hover); border-color: var(--prolog-primary); color: var(--prolog-primary); }
.page-item.active .page-link { background: var(--prolog-primary); border-color: var(--prolog-primary); color: #fff; }
.page-item.disabled .page-link { color: var(--prolog-text-muted); background: transparent; opacity: .6; }

.nav-tabs { border-bottom: 1px solid var(--prolog-border-light); }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--prolog-text-light);
  font-weight: var(--prolog-fw-semibold);
  font-size: var(--prolog-text-sm);
  padding: .625rem 1rem;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--prolog-border); color: var(--prolog-primary); }
.nav-tabs .nav-link.active { background: transparent; color: var(--prolog-primary); border-bottom-color: var(--prolog-primary); }

.dropdown-menu {
  border: 1px solid var(--prolog-border);
  border-radius: var(--prolog-radius-lg);
  box-shadow: var(--prolog-shadow-lg);
  padding: .5rem 0;
  font-size: var(--prolog-text-sm);
}
.dropdown-item { padding: .5rem 1rem; font-weight: var(--prolog-fw-medium); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--prolog-bg-hover); color: var(--prolog-primary); }
.dropdown-divider { border-color: var(--prolog-border-light); }

.progress { background: var(--prolog-primary-50); border-radius: var(--prolog-radius-full); }
.progress-bar { background: var(--prolog-primary); }

/* ------------------------------------------------- empty state / loaders -- */

.prolog-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 3rem 1.5rem; text-align: center;
}
.prolog-empty__icon {
  width: 4rem; height: 4rem;
  border-radius: var(--prolog-radius-2xl);
  background: var(--prolog-primary-50);
  color: var(--prolog-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.prolog-empty__title { font-size: var(--prolog-text-lg); font-weight: var(--prolog-fw-semibold); color: var(--prolog-text); margin: 0; }
.prolog-empty__text { font-size: var(--prolog-text-sm); color: var(--prolog-text-light); margin: 0; max-width: 32rem; }

/* loading-overlay.js — same treatment reception-index.html used ad hoc */
.prolog-loading, #loading-overlay {
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(2px);
}

/* --------------------------------------- reusable bits from inline styles -- */
/* Extracted from the 311 static style="" attributes: these three idioms
   accounted for ~200 declarations across the five index pages. */

.prolog-stat-icon {
  width: 2rem; height: 2rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--prolog-radius-full);
  font-size: var(--prolog-text-sm);
}
.prolog-stat-icon--primary { background: rgb(var(--prolog-primary-rgb) / .10); color: var(--prolog-primary); }
.prolog-stat-icon--success { background: var(--prolog-success-light); color: var(--prolog-success); }
.prolog-stat-icon--warning { background: var(--prolog-warning-light); color: var(--prolog-warning); }
.prolog-stat-icon--danger  { background: var(--prolog-error-light);   color: var(--prolog-error); }
.prolog-stat-icon--muted   { background: var(--prolog-border-light);  color: var(--prolog-text-light); }

.prolog-table--spaced { border-collapse: separate; border-spacing: 0 .25rem; }

.prolog-kpi {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--prolog-border);
  border-radius: var(--prolog-radius-lg);
  background: var(--prolog-bg-card);
}
.prolog-kpi__value { font-size: var(--prolog-text-lg); font-weight: var(--prolog-fw-bold); line-height: 1; color: var(--prolog-text); }
.prolog-kpi__label { font-size: var(--prolog-text-xs); color: var(--prolog-text-muted); }

/* Token-scale font sizes, so pages never need style="font-size:11px" again. */
.fs-token-xs   { font-size: var(--prolog-text-xs) !important; }
.fs-token-sm   { font-size: var(--prolog-text-sm) !important; }
.fs-token-base { font-size: var(--prolog-text-base) !important; }
.fs-token-lg   { font-size: var(--prolog-text-lg) !important; }
.fs-token-xl   { font-size: var(--prolog-text-xl) !important; }
.fs-token-2xl  { font-size: var(--prolog-text-2xl) !important; }

/* =============================================================================
 * CDN library overrides.
 *
 * bootstrap-select and toastr are loaded from a CDN AFTER our vendor CSS and
 * use !important themselves, so !important is unavoidable here. It is confined
 * to this clearly-labelled section and used nowhere else in the file.
 * ========================================================================== */

.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--prolog-border) !important;
  border-radius: var(--prolog-radius-md) !important;
  background: var(--prolog-bg-card) !important;
  color: var(--prolog-text) !important;
  padding: .5rem 1rem !important;
  font-size: var(--prolog-text-sm) !important;
  font-weight: var(--prolog-fw-semibold) !important;
  box-shadow: none !important;
}
.bootstrap-select > .dropdown-toggle:focus { border-color: var(--prolog-primary) !important; outline: none !important; }
.bootstrap-select .dropdown-menu { border: 1px solid var(--prolog-border); border-radius: var(--prolog-radius-md); box-shadow: var(--prolog-shadow-lg); }
.bootstrap-select .dropdown-menu li a { padding: .5rem 1rem; font-size: var(--prolog-text-sm); }
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a { background: rgb(var(--prolog-primary-rgb) / .10); color: var(--prolog-primary); }
.bs-searchbox .form-control { border-radius: var(--prolog-radius-md); }

#toast-container > div {
  border-radius: var(--prolog-radius-lg) !important;
  box-shadow: var(--prolog-shadow-lg) !important;
  opacity: 1 !important;
  padding: 1rem 1rem 1rem 1.25rem !important;
  font-size: var(--prolog-text-sm);
  border-left: 4px solid transparent;
  /* toastr's default check/cross are data:image/png sprites that clash badly
     with the new tinted backgrounds. */
  background-image: none !important;
}
#toast-container > div .toast-title { font-weight: var(--prolog-fw-bold); }
.toast-success { background-color: var(--prolog-success-light) !important; color: var(--prolog-success-dark) !important; border-left-color: var(--prolog-success); }
.toast-error   { background-color: var(--prolog-error-light) !important;   color: var(--prolog-error-dark) !important;   border-left-color: var(--prolog-error); }
.toast-warning { background-color: var(--prolog-warning-light) !important; color: var(--prolog-warning-dark) !important; border-left-color: var(--prolog-warning); }
.toast-info    { background-color: var(--prolog-info-light) !important;    color: var(--prolog-info-dark) !important;    border-left-color: var(--prolog-info); }
.toast-progress { background: currentColor; opacity: .3; }

/* =============================================================================
 * Formulaires en grille (creation / edition)
 *
 * Remplace le schema Skote « une section pleine largeur par bloc, champs en
 * col-lg-6 » : chaque champ recevait ~530px quel que soit son contenu et une
 * simple creation demandait plusieurs ecrans de defilement. Ici les sections
 * sont des cartes posees cote a cote et les champs sont ranges en colonnes.
 *
 *   .prolog-form-grid            grille de cartes, 3 colonnes (2 < 1200px, 1 < 768px)
 *     .prolog-form-card          une section ; --wide = 2 colonnes, --full = toute la ligne
 *       .prolog-form-card__title  titre + pastille d'icone teintee
 *       .prolog-form-fields       champs ; --2 / --3 colonnes fixes,
 *                                 --auto pour {{ form|crispy }} (autant de
 *                                 colonnes de 15rem que la largeur le permet)
 * ========================================================================== */
.prolog-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.prolog-form-grid + .prolog-form-grid { margin-top: 1rem; }
.prolog-form-card { margin: 0; }
.prolog-form-card--wide { grid-column: span 2; }
.prolog-form-card--full { grid-column: 1 / -1; }
.prolog-form-card > .card-body { padding: 1.25rem; }

.prolog-form-card__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: var(--prolog-fw-semibold);
  color: var(--prolog-text);
}
/* meme pastille teintee que l'icone de l'en-tete de page */
.prolog-form-card__title > i {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--prolog-radius-lg);
  background: rgb(var(--prolog-primary-rgb) / .10);
  color: var(--prolog-primary);
  font-size: 1rem;
}
.prolog-form-card__hint {
  margin: -.5rem 0 1rem;
  font-size: var(--prolog-text-xs);
  color: var(--prolog-text-light);
}

/* minmax(0, 1fr) par défaut : sans lui la colonne implicite (auto) prend la
   largeur min-content du contenu, et un bootstrap-select au libellé long
   (« -- Sélectionner un entrepôt -- ») débordait de sa carte. */
.prolog-form-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem 1rem; align-content: start; }
.prolog-form-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prolog-form-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prolog-form-fields--auto { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* crispy : chaque champ est un .form-group, l'espacement vient du gap */
.prolog-form-fields > .form-group,
.prolog-form-fields > .mb-3 { margin-bottom: 0; }
/* ce qui a besoin de largeur prend toute la ligne : zones de texte, cases a
   cocher avec texte d'aide, erreurs globales du formulaire */
.prolog-form-fields--auto > :has(textarea),
.prolog-form-fields--auto > :has(input[type="checkbox"]),
.prolog-form-fields > .alert,
.prolog-form-fields > .prolog-form-fields__full { grid-column: 1 / -1; }
.prolog-form-fields .form-label,
.prolog-form-fields label { margin-bottom: .375rem; }
.prolog-form-fields .form-text { margin-top: .25rem; font-size: var(--prolog-text-xs); }
.prolog-form-fields--fill { height: 100%; }
.prolog-form-fields--fill textarea { min-height: 7.5rem; resize: vertical; }

/* champs date : curseur et icone calendrier */
.prolog-form-fields input[type="date"],
.prolog-form-fields input[type="datetime-local"] { cursor: pointer; }
.prolog-form-fields input[type="date"]::-webkit-calendar-picker-indicator,
.prolog-form-fields input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.prolog-form-fields input[type="date"]::-webkit-calendar-picker-indicator:hover,
.prolog-form-fields input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* champ en lecture seule (reference generee, etc.) */
.prolog-form-fields input[readonly] { background-color: var(--prolog-bg-app); cursor: not-allowed; }

@media (max-width: 1199.98px) {
  .prolog-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prolog-form-card--wide { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .prolog-form-grid { grid-template-columns: 1fr; }
  .prolog-form-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .prolog-form-fields--2,
  .prolog-form-fields--3 { grid-template-columns: 1fr; }
}

/* =============================================================================
 * Tuiles d'information des fiches (réception, rangement)
 *
 * Grille auto-fill plutôt que des colonnes Bootstrap fixes : la fiche réception
 * est passée de 6 à 7 tuiles (Compte), qui s'écrasaient sur une seule ligne
 * en col-lg (libellés et valeurs sur 3 lignes). Ici chaque tuile garde au moins
 * 13rem et le nombre de colonnes suit la largeur réelle du contenu, sidebar
 * dépliée ou non.
 * ========================================================================== */
.prolog-info-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.prolog-info-tiles > .info-box { height: 100%; }

/* =============================================================================
 * Accessibility
 * ========================================================================== */

/* Preserve buttons-standardization.css's WCAG 2.5.5 target size on touch
   devices only, where it does not fight the IMS button geometry. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}