/* Résumé: Thème runtime (variables CSS) personnalisable par tenant sans rebuild; peut surcharger des variables Bootstrap CSS. */

:root {
  --app-primary: #0d6efd;
  --app-surface: #ffffff;
  --app-bg: #f8f9fa;
  --app-text: #212529;
  --app-radius: 12px;

  --app-on-primary: #ffffff;

  --app-primary-50: color-mix(in srgb, var(--app-primary) 6%, white);
  --app-primary-100: color-mix(in srgb, var(--app-primary) 12%, white);
  --app-primary-200: color-mix(in srgb, var(--app-primary) 20%, white);
  --app-primary-300: color-mix(in srgb, var(--app-primary) 32%, white);
  --app-primary-400: color-mix(in srgb, var(--app-primary) 55%, white);
  --app-primary-600: color-mix(in srgb, var(--app-primary) 88%, black);
  --app-primary-700: color-mix(in srgb, var(--app-primary) 78%, black);
  --app-primary-800: color-mix(in srgb, var(--app-primary) 66%, black);

  --app-border: color-mix(in srgb, var(--app-primary) 12%, #cfd8e3);
  --app-border-strong: color-mix(in srgb, var(--app-primary) 18%, #a8b3c2);

  --app-primary-a10: color-mix(in srgb, var(--app-primary) 10%, transparent);
  --app-primary-a18: color-mix(in srgb, var(--app-primary) 18%, transparent);
  --app-primary-a26: color-mix(in srgb, var(--app-primary) 26%, transparent);

  --app-shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.06);
  --app-shadow-md: 0 14px 40px rgba(15, 23, 42, 0.10);

  --app-gradient-primary: linear-gradient(135deg, var(--app-primary-400) 0%, var(--app-primary) 45%, var(--app-primary-700) 100%);
  --app-gradient-surface: linear-gradient(180deg, color-mix(in srgb, var(--app-surface) 92%, var(--app-primary-50)) 0%, var(--app-surface) 100%);
  --app-gradient-bg: radial-gradient(1200px 700px at 20% -10%, var(--app-primary-a18) 0%, transparent 60%), linear-gradient(180deg, var(--app-bg) 0%, color-mix(in srgb, var(--app-bg) 92%, var(--app-primary-50)) 100%);

  /* Pont minimal vers Bootstrap (CSS vars) */
  --bs-primary: var(--app-primary);
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: color-mix(in srgb, var(--app-border) 62%, transparent);
  --bs-border-radius: var(--app-radius);

  --bs-primary-text-emphasis: var(--app-primary-800);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface));
  --bs-primary-border-subtle: color-mix(in srgb, var(--app-primary) 26%, var(--app-border));
}

.text-primary,
.link-primary {
  color: var(--app-primary) !important;
}

.border-primary {
  border-color: var(--app-primary) !important;
}

html,
body {
  background: var(--app-bg);
}

body.app-body {
  color: var(--app-text);
}

.app-topbar.bg-white,
.app-sidenav.bg-white,
.app-bottomnav.bg-white {
  background: var(--app-gradient-surface) !important;
}

.app-topbar.border-bottom,
.app-bottomnav.border-top,
.app-sidenav.border-end {
  border-color: var(--app-border) !important;
}

.app-main {
  background: transparent;
}

.card {
  border-color: var(--app-border) !important;
  border-radius: var(--app-radius);
  background: var(--app-gradient-surface);
  box-shadow: var(--app-shadow-sm);
}

.card .card-header {
  background: transparent;
  border-color: var(--app-border) !important;
}

.card .card-footer {
  border-color: var(--app-border) !important;
}

.card .card-footer.bg-white {
  background: transparent !important;
}

.card .list-group-item {
  background: transparent;
  border-color: var(--app-border) !important;
}

.card .list-group-item:hover {
  background-color: var(--app-primary-a10);
}

a.text-decoration-none {
  color: var(--app-primary);
}

a.text-decoration-none:hover {
  color: var(--app-primary-700);
  text-decoration: underline !important;
}

.badge.text-bg-light {
  color: var(--app-text) !important;
  background-color: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)) !important;
  border: 1px solid var(--app-border) !important;
}

.btn {
  border-radius: calc(var(--app-radius) - 2px);
}

.btn-primary {
  color: var(--app-on-primary) !important;
  background-image: var(--app-gradient-primary) !important;
  border-color: color-mix(in srgb, var(--app-primary) 86%, black) !important;
  box-shadow: 0 10px 24px var(--app-primary-a18);
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--app-primary) 86%, black);
  --bs-btn-hover-bg: var(--app-primary-700);
  --bs-btn-hover-border-color: var(--app-primary-800);
  --bs-btn-active-bg: var(--app-primary-800);
  --bs-btn-active-border-color: var(--app-primary-800);
}

.btn-outline-primary {
  border-color: var(--app-primary) !important;
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-700);
  --bs-btn-active-border-color: var(--app-primary-800);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: var(--app-on-primary) !important;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 0.25rem var(--app-primary-a26) !important;
}

.form-control,
.form-select {
  border-color: var(--app-border) !important;
  border-radius: calc(var(--app-radius) - 2px);
  background-color: var(--app-surface);
}

.form-check-input:checked {
  background-color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.table {
  --bs-table-border-color: var(--app-border);
}

.table thead th {
  border-color: var(--app-border) !important;
}

.table tbody tr:hover {
  background-color: var(--app-primary-a10);
}

.bg-primary {
  background-color: var(--app-primary) !important;
}

.text-bg-primary {
  color: var(--app-on-primary) !important;
  background-color: var(--app-primary) !important;
}

.badge.bg-primary {
  background-image: var(--app-gradient-primary) !important;
}

.alert {
  border-radius: var(--app-radius);
  border-color: var(--app-border) !important;
}

.alert-primary {
  color: color-mix(in srgb, var(--app-text) 72%, black);
  background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface));
  border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border));
}

.dropdown-menu,
.modal-content,
.offcanvas {
  border-color: var(--app-border) !important;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-md);
}

.dropdown-item.active,
.dropdown-item:active {
  background-image: var(--app-gradient-primary) !important;
  color: var(--app-on-primary) !important;
}

.nav-pills .nav-link {
  border-radius: calc(var(--app-radius) - 4px);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-image: var(--app-gradient-primary) !important;
  box-shadow: 0 10px 24px var(--app-primary-a18);
}

.pagination {
  --bs-pagination-border-color: var(--app-border);
  --bs-pagination-hover-border-color: var(--app-border-strong);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--app-primary-a26);
}

.page-link {
  border-color: var(--app-border) !important;
}

.page-item.active .page-link {
  background-image: var(--app-gradient-primary) !important;
  border-color: color-mix(in srgb, var(--app-primary) 86%, black) !important;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.app-tache-toggle[aria-expanded="true"] .app-tache-titre-ferme {
  visibility: hidden;
}

.app-tache-chevron {
  transition: transform 0.15s ease-in-out;
}

.app-tache-toggle[aria-expanded="true"] .app-tache-chevron {
  transform: rotate(180deg);
}

.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}