/* ══════════════════════════════════════════════════════════════════════════
   vertaya-ui.css — Design system Vertaya, calqué sur shadcn/ui.

   Pourquoi ce fichier existe : le rendu « fin » de shadcn ne tient pas à
   React, il tient à trois choses — une échelle de couleurs neutres en OKLCH
   très peu saturée, des bordures 1px à faible contraste plutôt que des
   ombres, et une typographie en 14px/500. Tout cela s'écrit en CSS pur.

   Il REMPLACE Bootstrap 5 : on redéfinit les mêmes noms de classes
   (.btn, .card, .form-control, .badge, .table…) avec les recettes shadcn.
   Les 62 templates Jinja changent donc d'apparence sans être modifiés.

   Ordre de chargement : ce fichier, PUIS dashboard.css (le shell applicatif).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────
   Valeurs shadcn « default » pour les neutres. La couleur de marque Vertaya
   (orange #FF6B35) prend la place de --primary : c'est le seul écart au
   thème d'origine, et il est volontaire. */
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --background:            oklch(1 0 0);
  --foreground:            oklch(0.145 0 0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.145 0 0);
  --popover:               oklch(1 0 0);
  --popover-foreground:    oklch(0.145 0 0);
  --primary:               oklch(0.7045 0.1926 39.23);   /* #FF6B35 Vertaya */
  --primary-foreground:    oklch(1 0 0);
  --secondary:             oklch(0.97 0 0);
  --secondary-foreground:  oklch(0.205 0 0);
  --muted:                 oklch(0.97 0 0);
  --muted-foreground:      oklch(0.556 0 0);
  --accent:                oklch(0.97 0 0);
  --accent-foreground:     oklch(0.205 0 0);
  --destructive:           oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --success:               oklch(0.7227 0.1920 149.58);
  --warning:               oklch(0.7686 0.1647 70.08);
  --info:                  oklch(0.6231 0.1880 259.81);
  --border:                oklch(0.922 0 0);
  --input:                 oklch(0.922 0 0);
  --ring:                  var(--primary);

  /* Sidebar — signature de marque Vertaya, bleu marine profond. */
  --sidebar:                oklch(0.2666 0.0633 259.71); /* #122544 */
  --sidebar-foreground:     oklch(0.985 0 0);
  --sidebar-accent:         oklch(0.3462 0.0736 256.04); /* #1E3A5F */
  --sidebar-muted:          oklch(0.68 0.035 262);
  --sidebar-border:         color-mix(in oklab, white 8%, transparent);
  --sidebar-width:          230px;

  /* Ombres shadcn : quasi invisibles. C'est la bordure qui porte l'élévation. */
  --shadow-2xs: 0 1px rgb(0 0 0 / .05);
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.dark {
  --background:            oklch(0.145 0 0);
  --foreground:            oklch(0.985 0 0);
  --card:                  oklch(0.205 0 0);
  --card-foreground:       oklch(0.985 0 0);
  --popover:               oklch(0.205 0 0);
  --popover-foreground:    oklch(0.985 0 0);
  --secondary:             oklch(0.269 0 0);
  --secondary-foreground:  oklch(0.985 0 0);
  --muted:                 oklch(0.269 0 0);
  --muted-foreground:      oklch(0.708 0 0);
  --accent:                oklch(0.269 0 0);
  --accent-foreground:     oklch(0.985 0 0);
  --destructive:           oklch(0.704 0.191 22.216);
  --border:                color-mix(in oklab, white 10%, transparent);
  --input:                 color-mix(in oklab, white 15%, transparent);
}

/* ── 2. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  /* 14px : c'est la densité des dashboards shadcn, et la moitié de l'effet
     « fini » vient de là. Bootstrap était à 16px. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.4285714;
  font-feature-settings: "cv11", "ss01";
  font-variation-settings: "opsz" 32;
  -webkit-font-smoothing: antialiased;
  color: var(--foreground);
  background: var(--background);
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code, pre, .font-monospace, .mono {
  font-family: ui-monospace, "Cascadia Code", "Fira Code", SFMono-Regular, monospace;
  font-size: 0.8125rem;
}
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: none; }

/* Les chiffres alignés en colonne : détail, mais très visible en tableau. */
.num, .stat-value, .kpi-value, td, th { font-variant-numeric: tabular-nums; }

/* ── 3. Boutons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; white-space: nowrap;
  height: 2.25rem; padding: 0 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  cursor: pointer; user-select: none;
  background: var(--secondary); color: var(--secondary-foreground);
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { color: var(--secondary-foreground); }
.btn:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.btn:disabled, .btn.disabled { pointer-events: none; opacity: .5; }
.btn i, .btn svg { font-size: 1em; flex-shrink: 0; }

.btn-sm, .btn-group-sm > .btn { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; font-size: 0.8125rem; }
.btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.btn-mini { height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; border-radius: var(--radius-sm); }

.btn-primary   { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover   { background: color-mix(in oklab, var(--primary) 90%, black); color: var(--primary-foreground); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, black); }
.btn-danger    { background: var(--destructive); color: #fff; box-shadow: var(--shadow-xs); }
.btn-danger:hover    { background: color-mix(in oklab, var(--destructive) 90%, black); color: #fff; }
.btn-success   { background: var(--success); color: #fff; box-shadow: var(--shadow-xs); }
.btn-success:hover   { background: color-mix(in oklab, var(--success) 90%, black); color: #fff; }
.btn-dark      { background: oklch(0.205 0 0); color: oklch(0.985 0 0); box-shadow: var(--shadow-xs); }
.btn-dark:hover      { background: oklch(0.28 0 0); color: oklch(0.985 0 0); }
.btn-light, .btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover, .btn-light:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-link { background: transparent; color: var(--primary); height: auto; padding: 0; }
.btn-link:hover { text-decoration: underline; }

/* Variantes outline : bordure fine + fond au survol. */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-success, .btn-outline-dark, .btn-outline-info, .btn-outline-warning {
  background: var(--background); border-color: var(--border);
  color: var(--foreground); box-shadow: var(--shadow-xs);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover,
.btn-outline-info:hover, .btn-outline-warning:hover {
  background: var(--accent); color: var(--accent-foreground);
}
.btn-outline-primary { color: var(--primary); }
.btn-outline-danger  { color: var(--destructive); }
.btn-outline-danger:hover  { background: color-mix(in oklab, var(--destructive) 8%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
.btn-outline-success { color: var(--success); }
.btn-outline-success:hover { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); }

.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group > .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.btn-group > .btn:only-child  { border-radius: var(--radius-md); }

.btn-close {
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); background: transparent;
  opacity: .6; transition: opacity .15s, background-color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-close::before { content: "×"; font-size: 1.25rem; line-height: 1; color: currentColor; }
.btn-close:hover { opacity: 1; background: var(--accent); }

/* ── 4. Champs de formulaire ──────────────────────────────────────────── */
/* Deux règles distinctes, et c'est important : Bootstrap ne posait
   `display:block; width:100%` que sur .form-control/.form-select, jamais sur
   un <input> nu. Les 144 champs nus des templates vivent dans des barres
   d'outils en flex — leur imposer 100% les empile les uns sous les autres. */
.form-control, .form-select {
  display: block; width: 100%;
}
.form-control, .form-select, .input-group-text, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="url"], input[type="search"], textarea, select {
  min-height: 2.25rem; padding: 0.375rem 0.75rem;
  font-family: inherit; font-size: 0.875rem; line-height: 1.4285714;
  color: var(--foreground); background: transparent;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 4.5rem; resize: vertical; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.form-control::placeholder, textarea::placeholder { color: var(--muted-foreground); }
.form-control:disabled, .form-select:disabled, input:disabled, textarea:disabled, select:disabled {
  cursor: not-allowed; opacity: .5; background: var(--muted);
}
.form-control-sm, .form-select-sm { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.form-control-color { padding: 0.25rem; min-height: 2.25rem; cursor: pointer; }

/* Chevron du select : icône lucide `chevron-down` en data-URI, au gris
   --muted-foreground. Un style en ligne sur le <select> (padding-right) le
   fait chevaucher le texte — c'est le cas de #page-size dans prospects. */
.form-select, select:not([multiple]):not([size]) {
  appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.625rem center;
}

.form-label, .field-label, .lbl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  margin-bottom: 0.5rem; color: var(--foreground); user-select: none;
}
.form-text, .form-hint { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.375rem; }

.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check-input {
  width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0;
  flex-shrink: 0; cursor: pointer; accent-color: var(--primary);
  border: 1px solid var(--input); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-label { font-size: 0.875rem; cursor: pointer; margin: 0; }

.input-group { display: flex; align-items: stretch; }
.input-group > .form-control, .input-group > .form-select { border-radius: 0; margin-left: -1px; }
.input-group > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.input-group > :last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group-text {
  display: inline-flex; align-items: center; width: auto; white-space: nowrap;
  background: var(--muted); color: var(--muted-foreground); box-shadow: none;
}

/* ── 5. Cartes ────────────────────────────────────────────────────────── */
.card {
  display: flex; flex-direction: column;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  background: transparent; font-weight: 600;
}
.card-body { padding: 1.25rem; }
.card-title { font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.card-subtitle, .card-description { font-size: 0.875rem; color: var(--muted-foreground); }
.card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* ── 6. Badges ────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  width: fit-content; white-space: nowrap; flex-shrink: 0;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.75rem; font-weight: 500; line-height: 1.25;
  background: var(--secondary); color: var(--secondary-foreground);
}
.badge.bg-primary   { background: var(--primary) !important; color: var(--primary-foreground); }
.badge.bg-secondary { background: var(--secondary) !important; color: var(--secondary-foreground); }
.badge.bg-success   { background: color-mix(in oklab, var(--success) 15%, transparent) !important; color: color-mix(in oklab, var(--success) 75%, black); }
.badge.bg-danger    { background: color-mix(in oklab, var(--destructive) 12%, transparent) !important; color: var(--destructive); }
.badge.bg-warning   { background: color-mix(in oklab, var(--warning) 18%, transparent) !important; color: color-mix(in oklab, var(--warning) 70%, black); }
.badge.bg-info      { background: color-mix(in oklab, var(--info) 12%, transparent) !important; color: var(--info); }
.badge.bg-light     { background: var(--muted) !important; color: var(--muted-foreground); }
.badge.bg-white     { background: var(--background) !important; color: var(--foreground); border-color: var(--border); }

/* ── 7. Tableaux ──────────────────────────────────────────────────────── */
.table-responsive { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; caption-side: bottom; }
.table > thead > tr > th, .table th {
  height: 2.5rem; padding: 0 0.5rem; text-align: left; vertical-align: middle;
  font-weight: 500; color: var(--foreground); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table > tbody > tr > td, .table td {
  padding: 0.5rem; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover, .table tbody tr:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.table-sm > thead > tr > th, .table-sm th { height: 2.25rem; }
.table-sm > tbody > tr > td, .table-sm td { padding: 0.375rem 0.5rem; }
.table-light, thead.table-light > tr > th { background: color-mix(in oklab, var(--muted) 60%, transparent); }
.table caption { padding-top: 0.5rem; color: var(--muted-foreground); }

/* ── 8. Alertes ───────────────────────────────────────────────────────── */
.alert {
  position: relative; width: 100%;
  padding: 0.75rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card); color: var(--card-foreground);
  font-size: 0.875rem;
}
.alert-danger  { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 25%, transparent); background: color-mix(in oklab, var(--destructive) 5%, var(--card)); }
.alert-success { color: color-mix(in oklab, var(--success) 75%, black); border-color: color-mix(in oklab, var(--success) 25%, transparent); background: color-mix(in oklab, var(--success) 6%, var(--card)); }
.alert-warning { color: color-mix(in oklab, var(--warning) 70%, black); border-color: color-mix(in oklab, var(--warning) 30%, transparent); background: color-mix(in oklab, var(--warning) 8%, var(--card)); }
.alert-info    { color: var(--info); border-color: color-mix(in oklab, var(--info) 25%, transparent); background: color-mix(in oklab, var(--info) 5%, var(--card)); }
.alert-dismissible { padding-right: 2.75rem; }
.alert-dismissible .btn-close { position: absolute; top: 0.5rem; right: 0.5rem; }

/* ── 9. Listes, progression, spinner, nav ─────────────────────────────── */
.list-group { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list-group-item { padding: 0.75rem 1rem; background: var(--card); border-bottom: 1px solid var(--border); }
.list-group-item:last-child { border-bottom: 0; }
.list-group-flush { border: 0; border-radius: 0; }
.list-group-flush .list-group-item { padding-left: 0; padding-right: 0; }

.progress { height: 0.5rem; overflow: hidden; background: var(--muted); border-radius: 9999px; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 9999px; transition: width .3s ease; }

.spinner-border {
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: vt-spin .6s linear infinite;
}
.spinner-border-sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; }
@keyframes vt-spin { to { transform: rotate(360deg); } }

.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; }
.nav-item { display: block; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground);
  transition: background-color .15s, color .15s;
}
.nav-link:hover { background: var(--accent); color: var(--accent-foreground); }
.nav-link.active { background: var(--secondary); color: var(--foreground); }

/* ── 10. Modales ──────────────────────────────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 1050;
  overflow-y: auto; background: color-mix(in oklab, black 50%, transparent);
  backdrop-filter: blur(2px);
}
.modal.show { display: block; }
.modal-dialog { max-width: 32rem; margin: 4rem auto; padding: 0 1rem; }
.modal-lg { max-width: 48rem; }
.modal-content {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: 1.5rem;
  animation: vt-modal-in .15s ease-out;
}
@keyframes vt-modal-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.modal-body { font-size: 0.875rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── 11. Grille (sous-ensemble Bootstrap réellement utilisé) ──────────── */
.container-fluid { width: 100%; padding: 0 1rem; }
.row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; }
.row > * { padding: 0 0.75rem; width: 100%; }
.g-0 { margin: 0; } .g-0 > * { padding: 0; }
.g-1 { margin: -0.125rem; } .g-1 > * { padding: 0.125rem; }
.g-2 { margin: -0.25rem; }  .g-2 > * { padding: 0.25rem; }
.g-3 { margin: -0.5rem; }   .g-3 > * { padding: 0.5rem; }
.g-4 { margin: -0.75rem; }  .g-4 > * { padding: 0.75rem; }
.col { flex: 1 0 0%; width: auto; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}
.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}
.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}
@media (min-width: 768px) {
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}
  .col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}
  .col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
}
@media (min-width: 992px) {
  .col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-6{width:50%}.col-lg-8{width:66.6667%}.col-lg-12{width:100%}
}

/* ── 12. Utilitaires ──────────────────────────────────────────────────── */
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}
.d-inline-block{display:inline-block}.d-none{display:none}.d-grid{display:grid}
.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-fill{flex:1 1 auto}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}
.align-items-end{align-items:flex-end}.align-items-baseline{align-items:baseline}
.align-self-center{align-self:center}.align-middle{vertical-align:middle}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}.justify-content-start{justify-content:flex-start}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}

.m-0{margin:0}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}.me-auto{margin-right:auto}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}.ms-auto{margin-left:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:1rem;padding-right:1rem}
.px-4{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:1rem;padding-bottom:1rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.py-5{padding-top:3rem;padding-bottom:3rem}
.ps-3{padding-left:1rem}.pe-3{padding-right:1rem}

.text-center{text-align:center}.text-end{text-align:right}.text-start{text-align:left}
.text-nowrap{white-space:nowrap}.text-decoration-none{text-decoration:none}
.text-uppercase{text-transform:uppercase}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-muted,.muted{color:var(--muted-foreground)}
.text-primary{color:var(--primary)}.text-danger{color:var(--destructive)}
.text-success{color:color-mix(in oklab,var(--success) 80%,black)}
.text-warning{color:color-mix(in oklab,var(--warning) 75%,black)}
.text-info{color:var(--info)}.text-dark{color:var(--foreground)}.text-white{color:#fff}
.small,small{font-size:.8125rem}
.fs-1{font-size:1.875rem}.fs-2{font-size:1.5rem}.fs-3{font-size:1.25rem}
.fs-4{font-size:1.125rem}.fs-5{font-size:1rem}.fs-6{font-size:.875rem}
.fw-bold{font-weight:600}.fw-semibold{font-weight:500}.fw-normal{font-weight:400}

.bg-white{background:var(--background)}.bg-light{background:var(--muted)}
.bg-primary{background:var(--primary);color:var(--primary-foreground)}
.bg-secondary{background:var(--secondary);color:var(--secondary-foreground)}
.bg-success{background:var(--success);color:#fff}
.bg-danger{background:var(--destructive);color:#fff}
.bg-warning{background:var(--warning);color:oklch(0.2 0 0)}
.bg-info{background:var(--info);color:#fff}
.border{border:1px solid var(--border)}.border-0{border:0}
.border-top{border-top:1px solid var(--border)}.border-bottom{border-bottom:1px solid var(--border)}
.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}
.rounded-circle{border-radius:50%}.rounded-pill{border-radius:9999px}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}
.w-100{width:100%}.h-100{height:100%}.fade{transition:opacity .15s}