/*
 * Portail Agent eTrésor — design system Delta Nation (scope /agent uniquement)
 */
@import url(/assets/agent/delta_nation_tokens-1469c9739051ded38224deb4f30dec6958c49c76d4563abcc0167e51a455639b.css);
@import url(/assets/agent/delta_nation_components-9fb6b228ec4cd3b5313befb26924a72067e9c04d187ac7d1554e472d154e4848.css);
@import url(/assets/shared/md3_dashboard-e346ae77272273d7f9954e06c337f25621b2b60c76c1c439d82c2cbc6671f90f.css);

/* Utilitaires réutilisés par les partials admin (Tailwind absent du layout agent) */
.hidden {
  display: none !important;
}

.ng-side.is-open {
  transform: translateX(0);
}

/* Toujours hors du flux, même en desktop : sinon le scrim (display:block via JS)
   devient un 3e enfant de la grille `.ng-app` et casse ses 2 colonnes fixes. */
.ng-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 22, 19, 0.45);
  z-index: 40;
}

@media (max-width: 1023px) {
  .ng-side {
    position: fixed;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease-out);
  }
}

@media (min-width: 1024px) {
  /* Le menu est toujours visible en desktop : le bouton d'ouverture du tiroir
     mobile n'a plus lieu d'être. */
  .ng-menu-btn {
    display: none;
  }
}

.agent-brand-logo {
  display: block;
  width: 92px;
  height: auto;
  flex: 0 0 auto;
}

.agent-brand-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ng-top-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.agent-top-logo {
  width: 72px;
}

.ng-menu-btn {
  width: 36px;
  height: 36px;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  background: none;
  flex-shrink: 0;
  padding: 0;
}

.ng-menu-btn:hover {
  background: var(--n-50);
}

.ng-menu-btn .lucide {
  width: 18px;
  height: 18px;
}

@media (max-width: 1023px) {
  .ng-menu-btn {
    display: inline-flex;
  }
}

.agent-flash {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}

.agent-flash.notice {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ng-green-700);
}

.agent-flash.alert {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.agent-flash-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.agent-flash-card {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--fg-4);
  box-shadow: var(--shadow-lg);
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  animation: agentFlashSlideInOut 5s cubic-bezier(.22, 1, .36, 1) forwards;
  pointer-events: auto;
}

.agent-flash-card.notice {
  border-left-color: var(--ng-green-600);
}

.agent-flash-card.alert {
  border-left-color: var(--danger);
}

@keyframes agentFlashSlideInOut {
  0% {
    opacity: 0;
    transform: translateX(120%);
  }

  10% {
    opacity: 1;
    transform: translateX(0);
  }

  86% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* Page intro (titre + sous-titre empilés) */
.ng-page-head-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ng-filters-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ng-filters-search .ng-input {
  padding: 10px 14px;
}

.ng-filters-search-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 639px) {
  .ng-filters-search-row {
    grid-template-columns: 1fr;
  }
}

.ng-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ng-filters-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.ng-filters-dates .ng-field {
  flex: 0 0 auto;
  min-width: 168px;
}

.ng-filters-dates .ng-filters-submit {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 1023px) {
  .ng-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .ng-filters-grid {
    grid-template-columns: 1fr;
  }

  .ng-filters-dates .ng-filters-submit {
    margin-left: 0;
    width: 100%;
    flex-direction: column;
  }

  .ng-filters-dates .ng-filters-submit .ng-btn {
    width: 100%;
  }
}

.ng-filter-card {
  padding: 18px;
  margin-bottom: 16px;
}

.ng-table-card {
  overflow: hidden;
}

.ng-table-card .ng-pagination {
  border-radius: 0 0 12px 12px;
}

.ng-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--ng-orange-50);
  border: 1px solid var(--ng-orange-200);
  border-radius: var(--radius-lg);
}

.ng-callout-icon {
  color: var(--ng-orange-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.ng-callout-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-1);
}

.ng-callout-text {
  font-size: 12.5px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.45;
}

/* Variante positive : étape de vérification KYC (relecture avant l'empreinte,
   pas d'action requise du client) plutôt que l'avertissement orange par défaut. */
.ng-callout-success {
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.ng-callout-success .ng-callout-icon {
  color: var(--ok);
}

.ng-alias-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: #eef7ee;
  border: 1px solid #9dcd9f;
  border-radius: var(--radius-lg);
}

.ng-client-form .ng-form-grid + .ng-alias-callout {
  margin-top: 18px;
}

.ng-alias-callout-icon {
  color: var(--brand-600, #2d7a46);
  flex-shrink: 0;
  margin-top: 2px;
}

.ng-alias-callout-body {
  flex: 1;
  min-width: 0;
}

.ng-alias-callout-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ng-alias-callout-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-700, #236338);
  margin: 0 0 4px;
}

.ng-alias-callout-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.ng-alias-callout-hint {
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 10px 0 0;
  line-height: 1.45;
}

.ng-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  gap: 6px;
}

.ng-search-card {
  padding: 22px 26px;
  max-width: 760px;
  margin-bottom: 16px;
}

.ng-empty-state {
  padding: 32px 24px;
  text-align: center;
  color: var(--fg-3);
}

.ng-empty-state .ng-empty-icon {
  color: var(--fg-4);
  margin-bottom: 8px;
}

.ng-empty-state p {
  margin: 0;
  font-size: 13px;
}

/* Client form (admin Delta Nation) */
.ng-client-form .ng-field > label,
.ng-client-form .ng-field .label label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}

.ng-client-form input[type="text"],
.ng-client-form input[type="email"],
.ng-client-form input[type="number"],
.ng-client-form input[type="tel"],
.ng-client-form input[type="password"],
.ng-client-form input[type="date"],
.ng-client-form select,
.ng-client-form .choices__inner {
  border: 1px solid var(--border-default) !important;
  border-radius: 9px !important;
  box-shadow: var(--shadow-inset) !important;
  color: var(--fg-1) !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  min-height: 40px;
}

.ng-client-form input[type="date"]:focus,
.ng-client-form input:focus,
.ng-client-form select:focus,
.ng-client-form .choices.is-focused .choices__inner {
  border-color: var(--ng-green-500) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

.ng-client-form input[readonly] {
  background: var(--n-25) !important;
  color: var(--fg-3) !important;
  cursor: not-allowed;
}

.ng-client-form .form-img-preview img {
  max-height: 120px;
  width: auto;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}

.ng-photo-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--n-25);
  max-width: 100%;
}

.ng-photo-preview {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ng-photo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ng-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ng-photo-choose {
  white-space: nowrap;
}

.ng-photo-upload input[type="file"],
.ng-id-upload input[type="file"] {
  display: none !important;
}

.ng-photo-filename {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-id-upload {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--n-25);
}

.ng-id-upload-preview {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.ng-id-upload-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ng-id-upload-doc-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.ng-id-upload-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ng-id-upload-filename {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ng-form-grid--inline-status .ng-field {
  margin: 0;
}

.ng-form-grid--inline-status .flex.items-center.space-x-6 {
  gap: 20px;
}

.ng-client-form .form-img-preview .button {
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: #fff;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
}

.ng-client-form .choices {
  margin-bottom: 0;
  position: relative;
}

.ng-client-form .choices__list--dropdown {
  z-index: 30;
}

.ng-client-form .field-with-errors input,
.ng-client-form .field-with-errors select,
.ng-client-form .field-with-errors .choices__inner {
  border-color: #dc2626 !important;
}

.ng-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .ng-detail-layout.has-aside {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }
}

/* Delta Nation · pages détail agent */
.dn-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-bottom: 16px;
}

.dn-detail-breadcrumb a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.dn-detail-breadcrumb a:hover {
  color: var(--ng-green-600);
}

.dn-detail-breadcrumb .sep {
  color: var(--n-300);
}

.dn-detail-breadcrumb .current {
  color: var(--fg-2);
  font-weight: 600;
}

.dn-detail-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .dn-detail-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.dn-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.dn-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 640px) {
  .dn-detail-title {
    font-size: 26px;
  }
}

.dn-detail-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--fg-3);
}

.dn-detail-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.dn-detail-card-head {
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 20px;
}

.dn-detail-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
}

.dn-detail-card-sub {
  font-size: 10.5px;
  color: var(--fg-3);
  margin: 2px 0 0;
}

.dn-detail-card-body {
  padding: 4px 20px 8px;
}

.dn-detail-card-body-padded {
  padding: 20px;
}

.ng-field.ro .val {
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
}

.ng-limit-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 20px 20px;
}

.ng-actions .ng-row-menu-trigger {
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

/* Client detail page (admin) */
.ng-client-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px;
  background: var(--bg-page);
}

.ng-client-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.ng-client-detail-row.is-bottom {
  align-items: start;
}

.ng-client-info-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 28px 32px;
}

.ng-client-info-card .ng-detail-grid {
  gap: 22px 40px;
}

.ng-client-info-card .ng-detail-field .v {
  font-weight: 700;
}

.ng-wallet-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 28px;
  background: linear-gradient(
    135deg,
    oklch(0.24 0.02 60) 0%,
    oklch(0.14 0.015 55) 55%,
    oklch(0.09 0.01 50) 100%
  );
  box-shadow: 0 20px 40px -12px oklch(0.2 0.02 60 / 0.45);
  min-height: 100%;
}

.ng-wallet-hero-glow-a,
.ng-wallet-hero-glow-b {
  pointer-events: none;
  position: absolute;
  border-radius: 50%;
}

.ng-wallet-hero-glow-a {
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, oklch(0.6 0.12 65 / 0.25), transparent 70%);
}

.ng-wallet-hero-glow-b {
  bottom: -80px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, oklch(0.55 0.1 60 / 0.15), transparent 70%);
}

.ng-wallet-hero-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ng-wallet-hero-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ng-wallet-hero-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: oklch(0.6 0.12 65 / 0.18);
  border: 1px solid oklch(0.7 0.1 65 / 0.35);
  color: oklch(0.85 0.06 75);
}

.ng-wallet-hero-icon .lucide {
  width: 16px;
  height: 16px;
}

.ng-wallet-hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: oklch(0.75 0.03 70);
}

.ng-wallet-hero-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

.ng-wallet-hero-badge.is-active {
  background: oklch(0.6 0.12 145 / 0.2);
  color: oklch(0.82 0.1 145);
}

.ng-wallet-hero-badge.is-locked {
  background: oklch(0.55 0.08 30 / 0.25);
  color: oklch(0.82 0.06 30);
}

.ng-wallet-hero-balance-wrap {
  position: relative;
}

.ng-wallet-hero-balance-k {
  font-size: 12px;
  font-weight: 600;
  color: oklch(0.68 0.02 70);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.ng-wallet-hero-balance-v {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ng-wallet-hero-foot {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid oklch(0.5 0.02 60 / 0.3);
}

.ng-wallet-hero-foot-k {
  font-size: 11px;
  font-weight: 600;
  color: oklch(0.62 0.02 70);
  margin-bottom: 3px;
}

.ng-wallet-hero-foot-v {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.ng-wallet-hero-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: oklch(0.6 0.12 65);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.16 0.02 55);
  text-decoration: none;
  transition: filter var(--dur-fast) var(--ease-out);
}

.ng-wallet-hero-cta:hover {
  filter: brightness(1.05);
  color: oklch(0.16 0.02 55);
}

.ng-wallet-hero--empty {
  background: linear-gradient(135deg, var(--n-600), var(--n-800));
  box-shadow: var(--shadow-md);
}

.ng-client-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px 28px;
}

.ng-client-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.ng-client-panel-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
}

.ng-client-panel-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin: 2px 0 0;
}

.ng-client-panel-link {
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.42 0.11 55);
  text-decoration: none;
  white-space: nowrap;
}

.ng-client-panel-link:hover {
  text-decoration: underline;
}

.ng-client-tx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px 12px;
  align-items: center;
}

.ng-client-tx-grid.is-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.4px;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-client-tx-grid.is-row {
  font-size: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--n-50);
}

.ng-client-tx-grid.is-row:last-child {
  border-bottom: 0;
}

.ng-client-tx-grid .col-date {
  color: var(--fg-3);
}

.ng-client-tx-grid .col-type,
.ng-client-tx-grid .col-amount {
  font-weight: 700;
  color: var(--fg-1);
}

.ng-client-tx-grid .col-ref {
  color: var(--fg-3);
  font-size: 13px;
  word-break: break-all;
}

.ng-client-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--n-50);
}

.ng-client-meta-row:last-child {
  border-bottom: 0;
}

.ng-client-meta-k {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}

.ng-client-meta-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: right;
}

.ng-client-detail .dn-detail-header {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .ng-client-detail {
    padding: 20px 16px;
  }

  .ng-client-detail-row {
    grid-template-columns: 1fr;
  }
}

.dn-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 0;
}

.dn-summary-row:last-child {
  border-bottom: 0;
}

.dn-summary-label {
  font-size: 13.5px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.dn-summary-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: right;
}

.dn-summary-extra {
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
}

.ng-detail-stack > * + * {
  margin-top: 16px;
}

.agent-top-title {
  font-size: 18px;
  margin: 0;
}

.ng-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agent-kpi-spacer {
  margin-top: 16px;
}

.ng-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.agent-list {
  display: flex;
  flex-direction: column;
}

.agent-list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  color: var(--fg-1);
  text-decoration: none;
}

.agent-list-row:first-child {
  border-top: 0;
}

.agent-list-row:hover {
  background: var(--n-25);
}

.agent-list-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.agent-list-title {
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-list-sub {
  color: var(--fg-3);
  font-size: 12px;
}

@media (max-width: 1023px) {
  .ng-split {
    grid-template-columns: 1fr;
  }
}

/* Enrôlement GOMNI — layout preview */
.ng-enrollment-layout {
  width: 100%;
}

.ng-enrollment-layout:not(.has-preview) .ng-enrollment-upload {
  width: 100%;
}

.ng-enrollment-layout.has-preview {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ng-enrollment-preview[hidden] {
  display: none !important;
}

.ng-enrollment-upload {
  position: sticky;
  top: 16px;
  min-width: 0;
}

.ng-enrollment-upload-card {
  overflow: hidden;
}

.ng-enrollment-upload-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 32px 0;
}

.ng-enrollment-step {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--ng-green-50);
  border: 1px solid var(--ng-green-200);
  color: var(--ng-green-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ng-enrollment-upload-body {
  padding: 24px 32px 32px;
}

.ng-enrollment-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas:
    "label label"
    "picker aside";
  gap: 10px 20px;
  align-items: stretch;
}

.ng-enrollment-row-label {
  grid-area: label;
  margin: 0;
}

.ng-enrollment-file-field {
  display: contents;
}

.ng-enrollment-file-field .ng-file-picker {
  grid-area: picker;
  margin-top: 0;
  min-height: 148px;
}

.ng-enrollment-upload-aside {
  grid-area: aside;
  display: flex;
  min-height: 148px;
}

.ng-enrollment-callout {
  margin: 0;
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-row {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "picker";
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-aside {
  display: none;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-head {
  padding: 22px 24px 0;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-body {
  padding: 18px 24px 24px;
}

.ng-enrollment-preview-card {
  overflow: hidden;
  min-height: 420px;
}

.ng-enrollment-preview-card .ng-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-field-hint {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 6px;
  line-height: 1.45;
}

.ng-file-drop {
  margin-top: 6px;
}

.ng-file-picker {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
  padding: 24px 28px;
  border: 1px dashed var(--ng-green-200);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ng-green-50) 0%, #fff 100%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ng-file-picker:has(.ng-file-picker-name.has-file) {
  border-color: var(--ng-green-200);
  background: linear-gradient(180deg, var(--ok-bg) 0%, #fff 100%);
  box-shadow: 0 0 0 4px rgba(18, 121, 20, 0.06);
}

.ng-file-picker-icon {
  color: var(--ng-green-500);
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ng-green-100);
}

.ng-file-picker-icon .lucide {
  width: 22px;
  height: 22px;
}

.ng-file-picker-content {
  min-width: 0;
  flex: 1;
}

.ng-file-picker-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
}

.ng-enrollment-layout.has-preview .ng-file-picker {
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.ng-enrollment-layout.has-preview .ng-file-picker-icon {
  width: 36px;
  height: 36px;
}

.ng-enrollment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.ng-enrollment-layout.has-preview .ng-enrollment-actions {
  margin-top: 16px;
}

.ng-enrollment-actions .ng-btn-accent {
  flex: 1 1 auto;
}

.ng-enrollment-actions .ng-btn-accent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ng-file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ng-file-picker-name {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-file-picker-name.has-file {
  color: var(--fg-1);
  font-weight: 600;
}

.ng-enrollment-form .ng-field-hint {
  display: none;
}

.ng-enrollment-empty {
  padding: 48px 28px;
  text-align: center;
}

.ng-enrollment-empty-icon {
  color: var(--fg-4);
  display: inline-flex;
  margin-bottom: 14px;
}

.ng-enrollment-empty-icon .lucide {
  width: 40px;
  height: 40px;
}

.ng-enrollment-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 6px;
}

.ng-enrollment-empty-text {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
}

.ng-enrollment-panel {
  margin: 16px 20px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ng-enrollment-panel--orange {
  background: var(--ng-orange-50);
  border: 1px solid var(--ng-orange-200);
}

.ng-enrollment-panel--green {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
}

.ng-enrollment-panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
}

.ng-enrollment-panel-head .lucide {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ng-enrollment-panel--orange .ng-enrollment-panel-head .lucide {
  color: var(--ng-orange-600);
}

.ng-enrollment-panel--green .ng-enrollment-panel-head .lucide {
  color: var(--ng-green-600);
}

.ng-enrollment-panel-head strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fg-1);
}

.ng-enrollment-panel-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
}

.ng-enrollment-issues {
  border-top: 1px solid var(--ng-orange-200);
  max-height: 220px;
  overflow-y: auto;
}

.ng-enrollment-issue {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ng-orange-100);
}

.ng-enrollment-issue:last-child {
  border-bottom: 0;
}

.ng-enrollment-issue-line {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ng-orange-700);
  background: #fff;
  border: 1px solid var(--ng-orange-200);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-bottom: 8px;
}

.ng-enrollment-issue-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ng-enrollment-issue-list li {
  font-size: 12.5px;
  color: var(--ng-orange-800);
  line-height: 1.45;
  padding: 3px 0;
}

.ng-enrollment-issue-field {
  font-weight: 700;
}

.ng-enrollment-preview-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.ng-enrollment-tbl tbody tr.is-invalid {
  background: var(--ng-orange-50);
}

.ng-enrollment-tbl tbody tr.is-invalid td {
  border-bottom-color: var(--ng-orange-100);
}

.ng-enrollment-confirm {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--n-25);
}

.ng-enrollment-confirm--disabled {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-subtle);
}

.ng-enrollment-confirm--disabled .ng-btn {
  opacity: 0.45;
  cursor: not-allowed;
}

.ng-btn-block {
  width: 100%;
  justify-content: center;
}

.ng-enrollment-confirm-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.45;
}

/* Import detail · stepper (façon "Preuve de virement") */
.ng-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ng-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 88px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ng-step-bar {
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  z-index: 0;
  height: 2px;
  background: var(--border-default);
}

.ng-step:first-child .ng-step-bar {
  display: none;
}

.ng-step.is-done .ng-step-bar,
.ng-step.is-current .ng-step-bar {
  background: var(--ng-green-500);
}

.ng-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-4);
}

.ng-step-node .lucide {
  width: 17px;
  height: 17px;
}

.ng-step.is-done .ng-step-node {
  border-color: var(--ng-green-600);
  background: var(--ng-green-500);
  color: #fff;
}

.ng-step.is-current .ng-step-node {
  border-color: var(--ng-orange-500);
  background: #fff;
  color: var(--ng-orange-600);
  box-shadow: 0 0 0 4px var(--ng-orange-50);
}

.ng-step.is-danger .ng-step-node {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.ng-step-label {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.ng-step.is-todo .ng-step-label {
  color: var(--fg-4);
}

.ng-step-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-3);
}

/* Import detail · journal (timeline verticale) */
.ng-tl-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}

.ng-tl-item:last-child {
  padding-bottom: 0;
}

.ng-tl-line {
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}

.ng-tl-item:last-child .ng-tl-line {
  display: none;
}

.ng-tl-ic {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid;
}

.ng-tl-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-tl-ic.ok {
  border-color: var(--ng-green-200);
  background: var(--ng-green-50);
  color: var(--ng-green-600);
}

.ng-tl-ic.pending {
  border-color: var(--ng-orange-200);
  background: var(--ng-orange-50);
  color: var(--ng-orange-600);
}

.ng-tl-ic.danger {
  border-color: #e8bcad;
  background: #f8e7e1;
  color: var(--danger);
}

.ng-tl-ic.neutral {
  border-color: var(--border-default);
  background: var(--bg-sunken);
  color: var(--fg-4);
}

.ng-tl-body {
  flex: 1;
  min-width: 0;
}

.ng-tl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ng-tl-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.ng-tl-actor {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--fg-3);
}

.ng-tl-actor strong {
  color: var(--ng-green-700);
  font-weight: 600;
}

.ng-tl-time {
  font-size: 11.5px;
  color: var(--fg-4);
  white-space: nowrap;
}

.ng-tl-note {
  margin-top: 8px;
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg-2);
}

.ng-tl-note.danger {
  border-left-color: var(--danger);
  background: #f8e7e1;
  color: var(--danger);
}

.ng-tl-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}

.ng-tl-empty .lucide {
  width: 36px;
  height: 36px;
  color: var(--n-300);
  margin-bottom: 8px;
}

/* Import detail · summary panel */
.ng-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .ng-summary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

.ng-summary-list {
  display: flex;
  flex-direction: column;
}

.ng-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-summary-row:last-child {
  border-bottom: none;
}

.ng-summary-row-label {
  font-size: 13px;
  color: var(--fg-3);
}

.ng-summary-row-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: right;
}

@media (max-width: 1023px) {
  .ng-enrollment-layout,
  .ng-enrollment-layout.has-preview {
    grid-template-columns: 1fr;
  }

  .ng-enrollment-upload-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "picker"
      "aside";
  }

  .ng-enrollment-layout.has-preview .ng-enrollment-upload-aside {
    display: none;
  }

  .ng-enrollment-upload {
    position: static;
  }
}

/* Biométrie agent — QR + attente */
.ng-biometric-card {
  overflow: hidden;
}

.ng-biometric {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 36px;
  padding: 28px 32px 32px;
  min-height: 380px;
}

.ng-biometric-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ng-biometric-qr-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ng-orange-700);
  margin-bottom: 14px;
}

.ng-biometric-qr-frame {
  position: relative;
  display: inline-flex;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: opacity var(--dur-base) var(--ease-out);
}

.ng-biometric-qr-frame svg {
  width: 200px;
  height: 200px;
  display: block;
}

.ng-biometric-qr-frame.is-inactive {
  opacity: 0.25;
}

.ng-biometric-qr-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
}

.ng-biometric-steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
}

.ng-biometric-step-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
}

.ng-biometric-step-num {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--n-50);
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ng-biometric-info-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ng-biometric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.ng-biometric-countdown {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.ng-biometric-countdown strong {
  color: var(--fg-2);
  font-weight: 700;
}

.ng-biometric-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

/* Sans ceci, "display: flex" ci-dessus l'emporte sur le [hidden] natif du
   navigateur (même spécificité, feuille de style auteur prioritaire) et les
   4 états s'affichent tous en même temps. */
.ng-biometric-state[hidden] {
  display: none;
}

.ng-biometric-spinner-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
}

.ng-biometric-spinner-wrap .lucide {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  color: var(--ng-orange-600);
}

.ng-biometric-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--fg-1);
  margin-top: 14px;
}

.ng-biometric-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 8px;
  line-height: 1.45;
}

.ng-biometric-check,
.ng-biometric-error-icon,
.ng-biometric-expired-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ng-biometric-check {
  background: var(--ok-bg);
  color: var(--ng-green-600);
  border: 1px solid var(--ok-border);
}

.ng-biometric-error-icon {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.ng-biometric-expired-icon {
  background: var(--n-50);
  color: var(--fg-4);
  border: 1px solid var(--border-subtle);
}

.ng-biometric-success .ng-biometric-title {
  color: var(--ng-green-700);
}

.ng-biometric-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ng-biometric-actions .ng-btn[hidden],
.ng-biometric-mantra-actions .ng-btn[hidden] {
  display: none !important;
}

/* Écran "doublon détecté" : liste des identités déjà enrôlées correspondant
   à l'empreinte capturée, affichées comme des fiches lisibles plutôt qu'une
   simple liste à puces (cf. mantra_biometric_controller.js#renderDuplicateIdentities). */
.ng-biometric-duplicate-intro {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-2);
  text-align: left;
}

.ng-biometric-duplicate-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  width: 100%;
}

.ng-biometric-duplicate-card {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  border-radius: 12px;
  padding: 12px 14px;
}

.ng-biometric-duplicate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ng-biometric-duplicate-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-1);
}

.ng-biometric-duplicate-score {
  flex-shrink: 0;
}

.ng-biometric-duplicate-details {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}

.ng-biometric-duplicate-details dt {
  font-size: 12px;
  color: var(--fg-4);
  font-weight: 600;
}

.ng-biometric-duplicate-details dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 600;
}

.ng-biometric-actions .ng-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ng-btn-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ng-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
}

.ng-btn-icon .lucide {
  width: 18px;
  height: 18px;
}

.ng-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  flex: none;
  align-items: center;
  justify-content: center;
}

.ng-btn.is-loading {
  pointer-events: none;
}

.ng-btn.is-loading .ng-btn-icon {
  display: none;
}

.ng-btn.is-loading .ng-btn-spinner {
  display: inline-flex;
}

/* CircularProgressIndicator (style Flutter / Material) */
.ng-circular-progress {
  display: inline-flex;
  width: var(--ng-cp-size, 18px);
  height: var(--ng-cp-size, 18px);
  color: currentColor;
  flex: none;
}

.ng-circular-progress__svg {
  width: 100%;
  height: 100%;
  animation: ng-cp-rotate 1.333s linear infinite;
}

.ng-circular-progress__track {
  stroke: currentColor;
  opacity: 0.24;
}

.ng-circular-progress__indicator {
  stroke: currentColor;
  stroke-dasharray: 15.7 47.13;
}

@keyframes ng-cp-rotate {
  to {
    transform: rotate(360deg);
  }
}

.ng-circular-progress--splash {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  color: var(--ng-orange-600);
}

.ng-circular-progress--inline {
  --ng-cp-size: 16px;
  color: var(--ng-orange-600);
}

.ng-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ng-orange-100);
  border-top-color: var(--ng-orange-500);
  border-radius: 50%;
  animation: ng-spin 0.8s linear infinite;
  margin: 0 auto;
}

.ng-spinner-lg {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

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

@media (max-width: 1023px) {
  .ng-biometric {
    grid-template-columns: 1fr;
  }
}

.ng-biometric-method-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--n-100);
  margin-bottom: 0;
}

.ng-biometric-method-tabs .ng-btn.is-active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* Étape "Vérification" de l'enrôlement KYC : champs à gauche, média (photo /
   scan) à droite dans une vignette compacte — jamais en pleine largeur. */
.ng-verify-split {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.ng-verify-split .ng-detail-grid {
  flex: 1 1 auto;
  min-width: 0;
}

.ng-verify-media {
  flex: 0 0 440px;
  width: 440px;
}

.ng-verify-media-frame {
  width: 440px;
  height: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng-verify-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ng-verify-media-frame.is-empty {
  color: var(--fg-4);
}

.ng-verify-media-frame.is-empty .lucide {
  width: 88px;
  height: 88px;
}

.ng-verify-media-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
  justify-content: center;
}

.ng-verify-media-cap .lucide {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ng-verify-doc-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ng-verify-doc-thumb {
  flex: 0 0 240px;
  width: 240px;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
}

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

.ng-verify-doc-thumb .lucide {
  width: 72px;
  height: 72px;
}

.ng-verify-doc-info .k {
  color: var(--fg-3);
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
}

.ng-verify-doc-info .v {
  color: var(--fg-1);
  font-size: 14.5px;
  font-weight: 600;
}

.ng-verify-doc-info .v a {
  color: var(--ng-green-600);
}

/* Aperçu PDF dans les cartes de vérification (pièce d'identité, attestation
   d'assiduité) : les vignettes carrées prévues pour des images sont trop
   petites pour un visualiseur PDF utilisable, donc on les agrandit. */
.ng-verify-media-frame.is-pdf {
  height: 560px;
}

.ng-verify-media-frame.is-pdf iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ng-verify-doc-row.is-pdf {
  flex-direction: column;
  align-items: stretch;
}

.ng-verify-doc-row.is-pdf .ng-verify-doc-thumb {
  width: 100%;
  height: 520px;
}

.ng-verify-doc-thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .ng-verify-split {
    flex-direction: column;
  }

  .ng-verify-media {
    width: 100%;
    max-width: 440px;
  }
}

.ng-biometric-mantra {
  display: block;
  grid-template-columns: none;
  padding: 0;
  min-height: 420px;
}

.ng-biometric-mantra-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 420px;
}

.ng-biometric-mantra.is-ready .ng-biometric-mantra-inner {
  min-height: auto;
}

.ng-biometric-mantra-stage {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px 56px;
}

.ng-biometric-mantra.is-ready .ng-biometric-mantra-stage {
  display: none;
}

.ng-biometric-mantra-splash {
  max-width: 440px;
  padding: 8px 12px;
}

.ng-biometric-mantra-icon-ring {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.ng-biometric-mantra-icon-ring .lucide {
  width: 28px;
  height: 28px;
}

.ng-biometric-mantra-icon-ring.is-loading {
  color: var(--ng-orange-600);
  background: linear-gradient(180deg, #fff 0%, var(--ng-orange-50) 100%);
  border-color: var(--ng-orange-100);
}

.ng-biometric-mantra-icon-ring-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ng-biometric-mantra-icon-ring-icon .lucide {
  width: 28px;
  height: 28px;
  color: var(--ng-orange-600);
}

.ng-biometric-mantra-icon-ring.is-warning {
  color: var(--ng-orange-700);
  background: var(--ng-orange-50);
  border-color: var(--ng-orange-100);
}

.ng-biometric-mantra-icon-ring.is-success {
  color: var(--ng-green-600);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.ng-biometric-mantra-icon-ring.is-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.ng-biometric-mantra-wait-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
}

.ng-biometric-mantra-capture {
  width: 100%;
  padding: 24px 28px 28px;
}

.ng-biometric-mantra-status-bar {
  margin-bottom: 18px;
}

.ng-biometric-mantra-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.ng-biometric-mantra-status[hidden] {
  display: none !important;
}

.ng-biometric-mantra-status.is-waiting {
  border-left: 4px solid var(--ng-orange-500);
  background: linear-gradient(90deg, var(--ng-orange-50) 0%, #fff 28%);
}

.ng-biometric-mantra-status.is-preview {
  border-left: 4px solid var(--ng-green-500);
  background: linear-gradient(90deg, var(--ok-bg) 0%, #fff 28%);
}

.ng-biometric-mantra-status-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-subtle);
  color: var(--ng-orange-600);
}

.ng-biometric-mantra-status.is-preview .ng-biometric-mantra-status-icon {
  color: var(--ng-green-600);
}

.ng-biometric-mantra-status-icon .lucide {
  width: 18px;
  height: 18px;
}

.ng-biometric-mantra-status-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--fg-1);
  line-height: 1.3;
}

.ng-biometric-mantra-status-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.45;
}

.ng-biometric-mantra-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  width: 100%;
  align-items: start;
}

.ng-biometric-mantra-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  padding: 20px 22px 22px;
}

.ng-biometric-mantra-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-biometric-mantra-panel-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ng-orange-700);
}

.ng-biometric-mantra-panel-title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--fg-1);
}

.ng-biometric-mantra-device-badge {
  flex: none;
}

.ng-biometric-mantra-main {
  text-align: left;
}

.ng-biometric-mantra-steps {
  margin: 0 0 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.ng-biometric-mantra[data-mantra-step="1"] [data-mantra-step="1"] .ng-biometric-step-num,
.ng-biometric-mantra[data-mantra-step="2"] [data-mantra-step="2"] .ng-biometric-step-num,
.ng-biometric-mantra[data-mantra-step="3"] [data-mantra-step="3"] .ng-biometric-step-num,
.ng-biometric-mantra.is-captured [data-mantra-step="2"] .ng-biometric-step-num {
  background: var(--ng-orange-50);
  color: var(--ng-orange-700);
  border-color: var(--ng-orange-200);
}

.ng-biometric-mantra[data-mantra-step="1"] [data-mantra-step="1"],
.ng-biometric-mantra.is-captured [data-mantra-step="2"] {
  color: var(--fg-1);
  font-weight: 600;
}

.ng-biometric-mantra-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.ng-biometric-mantra:not(.is-captured) [data-mantra-biometric-target="recaptureBtn"],
.ng-biometric-mantra:not(.is-captured) [data-mantra-biometric-target="enrollBtn"] {
  display: none !important;
}

.ng-biometric-mantra.is-captured [data-mantra-biometric-target="captureBtn"] {
  display: none !important;
}

.ng-biometric-mantra-aside {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 16px;
}

.ng-biometric-mantra-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--n-200);
  background: linear-gradient(180deg, var(--n-50) 0%, #fff 100%);
}

.ng-biometric-mantra-aside .ng-biometric-mantra-preview {
  width: auto;
  max-width: 100%;
  height: 118px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.ng-biometric-mantra-thumb-list {
  display: grid;
  gap: 16px;
}

.ng-biometric-mantra-thumb-card {
  min-width: 0;
}

.ng-biometric-mantra-thumb-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-1);
}

.ng-biometric-mantra-thumb-placeholder {
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
}

.ng-biometric-mantra-aside .ng-biometric-mantra-metrics {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-2);
  text-align: center;
}

.ng-biometric-mantra-field {
  margin-bottom: 18px;
}

.ng-biometric-mantra-field .ng-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-2);
}

.ng-biometric-mantra-field .ng-input {
  max-width: 280px;
}

@media (max-width: 768px) {
  .ng-biometric-mantra-stage {
    padding: 32px 20px 40px;
  }

  .ng-biometric-mantra-capture {
    padding: 18px 16px 20px;
  }

  .ng-biometric-mantra-workspace {
    grid-template-columns: 1fr;
  }

  .ng-biometric-mantra-aside {
    position: static;
    order: -1;
  }

  .ng-biometric-mantra-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ng-biometric-mantra-field .ng-input {
    max-width: none;
  }
}

@media (max-width: 1023px) {
  .ng-biometric-mantra-stage {
    padding: 32px 20px 40px;
  }
}

/* Toasts agent (notifications glissantes) */
.ng-toast-stack {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(480px, calc(100vw - 2rem));
  pointer-events: none;
}

.ng-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: auto;
}

.ng-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

.ng-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.ng-toast-icon .lucide {
  width: 20px;
  height: 20px;
}

.ng-toast-body {
  flex: 1;
  min-width: 0;
}

.ng-toast-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
}

.ng-toast-desc {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--fg-3);
  line-height: 1.45;
}

.ng-toast-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--fg-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.ng-toast-close:hover {
  background: var(--n-100);
  color: var(--fg-1);
}

.ng-toast--success {
  border-color: #bbf7d0;
}

.ng-toast--success .ng-toast-icon {
  background: #dcfce7;
  color: #16a34a;
}

.ng-toast--info {
  border-color: #bfdbfe;
}

.ng-toast--info .ng-toast-icon {
  background: #dbeafe;
  color: #2563eb;
}

.ng-toast--error {
  border-color: #fecaca;
}

.ng-toast--error .ng-toast-icon {
  background: #fee2e2;
  color: #dc2626;
}

/* Row action menu (3-dot vertical trigger + fixed dropdown) */
.ng-row-menu {
  position: relative;
  display: inline-flex;
}

.ng-row-menu-trigger {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  background: var(--n-50);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.ng-row-menu-trigger:hover {
  background: var(--n-100);
  color: var(--fg-1);
}

.ng-row-menu-trigger .lucide {
  width: 16px;
  height: 16px;
}

.ng-row-menu-cell {
  text-align: right;
}

/* Collapsible filter panel toggle chevron */
.ng-filter-chevron {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-out);
}

.ng-filter-chevron.is-open {
  transform: rotate(180deg);
}

.ng-table-toolbar {
  margin-bottom: 16px;
}

/* —— eTresor-guide (turbo_tour) —— */
.etresor-guide-highlight,
[data-turbo-tour-active="true"] {
  position: relative;
  z-index: 10050 !important;
  box-shadow: 0 0 0 3px rgba(178, 58, 36, 0.55), 0 12px 32px rgba(18, 22, 19, 0.18) !important;
  border-radius: 12px;
}

.turbo-tour-tooltip.etresor-guide-tooltip {
  position: fixed;
  z-index: 10060;
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 22, 19, 0.18);
  padding: 16px;
  outline: none;
}

.etresor-guide-tooltip__brand {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b23a24;
}

.turbo-tour-tooltip__progress {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.turbo-tour-tooltip__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #121613;
  line-height: 1.3;
}

.turbo-tour-tooltip__body {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}

.turbo-tour-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.turbo-tour-tooltip__actions {
  display: flex;
  gap: 8px;
}

.turbo-tour-tooltip__button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.turbo-tour-tooltip__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.turbo-tour-tooltip__button--primary {
  background: #b23a24;
  color: #fff;
}

.turbo-tour-tooltip__button--primary:hover:not(:disabled) {
  background: #961e0f;
}

.turbo-tour-tooltip__button--secondary {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.turbo-tour-tooltip__button--secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

.turbo-tour-tooltip__button--ghost {
  background: transparent;
  color: #6b7280;
  padding-left: 4px;
  padding-right: 4px;
}

.turbo-tour-tooltip__button--ghost:hover:not(:disabled) {
  color: #111827;
}

/* —— User profile (edit + preview) —— */
.ng-user-profile-form-card {
  overflow: hidden;
}

.ng-user-profile-form-body {
  padding: 22px 24px 26px;
}

.ng-user-profile-section-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
  margin: 22px 0 12px;
}

.ng-user-profile-section-label:first-child {
  margin-top: 0;
}

.ng-user-profile-photo-field {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ng-user-profile-photo-preview {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  background: var(--n-50);
  color: var(--fg-2);
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ng-user-profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ng-user-profile-photo-actions {
  flex: 1;
  min-width: 0;
}

.ng-user-profile-photo-actions .ng-input {
  padding: 8px 10px;
  font-weight: 500;
}

.ng-user-profile-preview {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: start;
}

.ng-user-profile-preview-cover {
  height: 110px;
  background:
    radial-gradient(ellipse 80% 120% at 20% 0%, rgba(46, 146, 51, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 100% at 90% 20%, rgba(18, 121, 20, 0.35), transparent 50%),
    linear-gradient(135deg, #0a4f0c 0%, #127914 45%, #2e9233 100%);
}

.ng-user-profile-preview-body {
  position: relative;
  padding: 0 22px 28px;
  text-align: center;
}

.ng-user-profile-preview-avatar {
  width: 120px;
  height: 120px;
  margin: -60px auto 18px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--n-50);
  color: var(--fg-1);
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.ng-user-profile-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ng-user-profile-preview-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ng-user-profile-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.ng-user-profile-preview-stats strong {
  display: block;
  color: var(--fg-1);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.ng-user-profile-preview-stats span {
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ng-user-profile-preview-identity h2 {
  margin: 0 0 6px;
  color: var(--fg-1);
  font-size: 20px;
  font-weight: 800;
}

.ng-user-profile-preview-identity .role {
  margin: 0 0 10px;
  color: var(--ng-green-700);
  font-size: 13px;
  font-weight: 700;
}

.ng-user-profile-preview-identity .meta {
  margin: 0 0 4px;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 500;
}

.ng-input.is-readonly,
.ng-input:disabled {
  background: var(--n-50);
  color: var(--fg-3);
  cursor: not-allowed;
  box-shadow: none;
}

/* —— Auth shell (password reset / OTP / new password) —— */
.ng-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg-page);
  font-family: "Open Sans", system-ui, sans-serif;
}

.ng-auth-card {
  width: 100%;
  max-width: 1080px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.ng-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.ng-auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(18, 121, 20, 0.06), transparent 55%),
    #fff;
}

.ng-auth-form-inner {
  width: 100%;
  max-width: 420px;
}

.ng-auth-logo {
  display: inline-flex;
  margin-bottom: 28px;
}

.ng-auth-logo img {
  height: 72px;
  width: auto;
}

.ng-auth-title {
  margin: 0 0 8px;
  color: var(--fg-1);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ng-auth-sub {
  margin: 0 0 28px;
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.ng-auth-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ng-auth-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ng-auth-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: #fff;
  color: var(--fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ng-auth-channel .lucide {
  width: 16px;
  height: 16px;
}

.ng-auth-channel:hover {
  background: var(--n-50);
  border-color: var(--border-strong);
}

.ng-auth-channel.is-active.is-email,
.ng-auth-channel.is-active.is-sms {
  background: var(--ng-green-500);
  border-color: var(--ng-green-600);
  color: #fff;
}

.ng-auth-channel.is-active.is-whatsapp {
  background: var(--ng-green-600);
  border-color: var(--ng-green-700);
  color: #fff;
}

.ng-auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ng-auth-form .ng-field.hidden,
.ng-auth-body .ng-field.hidden {
  display: none !important;
}

.ng-auth-links {
  display: flex;
  justify-content: flex-end;
}

.ng-auth-actions {
  margin-top: 4px;
  flex-wrap: wrap;
}

.ng-auth-submit {
  flex: 1;
  min-width: 160px;
  justify-content: center;
}

.ng-auth-otp {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 20px;
  font-weight: 700;
}

.ng-auth-visual {
  position: relative;
  overflow: hidden;
  background: var(--ng-green-700);
  padding: 0;
}

.ng-auth-visual-bg {
  display: none;
}

.ng-auth-visual-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
  z-index: 2;
}

.ng-auth-visual-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(7, 57, 8, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
}

.ng-auth-visual-caption strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ng-auth-visual-caption span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .ng-auth-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ng-auth-visual {
    min-height: 220px;
    order: -1;
  }

  .ng-auth-form-pane {
    padding: 28px 20px 36px;
  }

  .ng-auth-title {
    font-size: 22px;
  }
}

.su-wrap {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(17, 24, 21, 0.45);
}
.su-wrap[hidden] { display: none; }
.su-modal {
  width: 100%; max-width: 420px;
  background: #fff; border: 1px solid #e4ebe6; border-radius: 18px;
  padding: 26px 28px 22px; color: #1c241f;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  font-family: "Open Sans", system-ui, sans-serif;
}
.su-illus { position: relative; width: 244px; height: 168px; margin: 6px auto 20px; }
.su-corner { position: absolute; width: 26px; height: 26px; border: 2px solid #2e9233; opacity: .9; }
.su-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.su-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.su-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.su-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.su-laptop { position: absolute; inset: 0; width: 100%; height: 100%; }
.su-screen { fill: #0e1412; stroke: #3a4a40; stroke-width: 2; }
.su-fill { fill: rgba(46,146,51,.20); transition: y .6s ease, height .6s ease; }
.su-base { fill: #131a17; stroke: #3a4a40; stroke-width: 2; }
.su-notch { fill: #26312c; }
.su-fp {
  position: absolute; left: 50%; top: 40%; width: 36px; height: 36px;
  transform: translate(-50%, -50%);
  color: #2e9233; filter: drop-shadow(0 0 8px rgba(46,146,51,.45));
  pointer-events: none;
}
.su-fp svg { width: 36px; height: 36px; }
.su-scan {
  position: absolute; left: 34px; right: 34px; top: 16%; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #46c24d, transparent);
  box-shadow: 0 0 16px 2px rgba(70,194,77,.5);
}
.su-illus.is-scanning .su-scan { opacity: 1; animation: su-sweep 1.5s ease-in-out infinite alternate; }
.su-illus.is-scanning .su-fill { y: 40px; height: 74px; }
@keyframes su-sweep { from { top: 14%; } to { top: 60%; } }
.su-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; text-align: center; color: #1c241f; }
.su-sub { margin: 0; font-size: .82rem; line-height: 1.55; color: #5c6b64; text-align: center; }

.ng-app {
  background: var(--bg-page);
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  display: grid;
}

.ng-side {
  background: var(--n-0);
  border-right: 1px solid var(--border-subtle);
  flex-direction: column;
  height: 100vh;
  padding: 0;
  display: flex;
  position: sticky;
  top: 0;
}

.ng-brand {
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: 11px;
  height: 60px;
  padding: 0 18px;
  display: flex;
}

.ng-brand--centered {
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.ng-brand--centered .ng-brand-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
}

.ng-brand--centered .ng-brand-logo-img {
  display: block;
  width: 92px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

.ng-brand-txt {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.ng-brand-app {
  color: var(--fg-1);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 800;
}

.ng-brand-gov {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
}

.ng-nav {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  padding: 12px;
  display: flex;
  overflow-y: auto;
}

.ng-nav-group {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-4);
  padding: 14px 10px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.ng-nav-item {
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.ng-nav-item:hover {
  background: var(--n-50);
  color: var(--fg-1);
}

.ng-nav-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.ng-nav-item.is-disabled:hover {
  background: none;
  color: var(--fg-2);
}

.ng-nav-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-4);
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.ng-nav-item.active {
  background: var(--ng-green-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  font-weight: 700;
}

.ng-nav-item.active:hover {
  background: var(--ng-green-600);
}

.ng-nav-item.active .lucide {
  color: #fff;
}

.ng-nav-item .lucide {
  width: 17px;
  height: 17px;
  color: var(--fg-4);
  flex-shrink: 0;
}

.ng-nav-item .count {
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
}

.ng-nav-item.active .count {
  color: #ffffffd9;
}

.ng-nav-item .chev-x {
  width: 15px;
  height: 15px;
  color: var(--fg-4);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-left: auto;
}

.ng-nav-item.open .chev-x {
  transform: rotate(180deg);
}

.ng-nav-sub {
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
  display: flex;
}

.ng-nav-item.child {
  padding-left: 36px;
  font-size: 13px;
}

.ng-nav-item.child .lucide {
  width: 15px;
  height: 15px;
}

.ng-side-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 12px 14px;
  position: relative;
}

.ng-user-btn {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  font-family: inherit;
  display: flex;
}

.ng-user-btn:hover {
  background: var(--n-50);
}

.ng-user-btn .chev {
  color: var(--fg-4);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.ng-user-menu {
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  position: absolute;
  bottom: calc(100% - 4px);
  left: 14px;
  right: 14px;
  display: none;
}

.ng-user-menu.is-open {
  display: block;
}

.ng-user-menu form {
  margin: 0;
  width: 100%;
}

.ng-user-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.ng-user-item:hover {
  background: var(--n-50);
}

.ng-user-item .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.ng-user-item.danger, .ng-user-item.danger .lucide {
  color: var(--danger);
}

.ng-user-menu hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 5px 4px;
}

.ng-main {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ng-top {
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  z-index: 20;
  background: #ffffffa8;
  border-bottom: 1px solid #d8dcd999;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 26px;
  display: flex;
  position: sticky;
  top: 0;
}

.ng-proj {
  border: 1px solid var(--border-default);
  color: var(--fg-1);
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.ng-proj .lucide {
  width: 15px;
  height: 15px;
  color: var(--fg-4);
}

.ng-search {
  flex: 1;
  max-width: 380px;
  position: relative;
}

.ng-search input {
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  background: var(--n-25);
  width: 100%;
  box-shadow: var(--shadow-inset);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  font-family: inherit;
  font-size: 13px;
}

.ng-search input:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus), var(--shadow-inset);
  outline: none;
}

.ng-search .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-4);
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.ng-top-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.ng-iconbtn {
  width: 36px;
  height: 36px;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

.ng-iconbtn:hover {
  background: var(--n-50);
}

.ng-iconbtn .lucide {
  width: 18px;
  height: 18px;
}

.ng-iconbtn-guide {
  color: var(--ng-gold-500);
  background: transparent;
  border-color: transparent;
}

.ng-iconbtn-guide:hover {
  color: #a67a12;
  background: var(--ng-gold-50);
  border-color: #e6d08a;
}

.ng-iconbtn-guide .lucide,
.ng-iconbtn-guide .ng-guide-star {
  width: 20px;
  height: 20px;
  color: var(--ng-gold-500);
  fill: none;
  stroke: var(--ng-gold-500);
  stroke-width: 2.25;
}

.ng-iconbtn .ping {
  background: var(--ng-orange-500);
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 8px;
  right: 9px;
}

.ng-avatar {
  background: var(--ng-green-100);
  width: 34px;
  height: 34px;
  color: var(--ng-green-700);
  border: 1px solid var(--ng-green-200);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.ng-avatar.orange {
  background: var(--ng-orange-100);
  color: var(--ng-orange-700);
  border-color: var(--ng-orange-200);
}

.ng-avatar.neutral {
  background: var(--n-100);
  color: var(--n-600);
  border-color: var(--n-200);
}

.ng-avatar.sm {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
}

.ng-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}

.ng-page-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.ng-page-head > div:first-child {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ng-page-head .ng-page-head-intro {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ng-page-head > div:last-child {
  flex-shrink: 0;
}

.ng-page-title {
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-size: 27px;
  font-weight: 800;
}

.ng-page-sub {
  color: var(--fg-3);
  margin-top: 0;
  font-size: 14px;
}

.ng-empty {
  text-align: center;
  min-height: 440px;
  color: var(--fg-3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ng-empty .ic {
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  width: 56px;
  height: 56px;
  color: var(--fg-4);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-empty .ic .lucide {
  width: 26px;
  height: 26px;
}

.ng-empty h3 {
  color: var(--fg-1);
  font-size: 18px;
  font-weight: 700;
}

.ng-empty p {
  max-width: 360px;
  margin: 0;
  font-size: 13.5px;
}

.ng-btn {
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.ng-btn .lucide {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ng-btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Vert = action primaire / validation */
.ng-btn-primary,
.ng-btn-green {
  background: var(--ng-green-500);
  color: #fff;
  border-color: var(--ng-green-600);
  box-shadow: inset 0 1px 0 #ffffff29, var(--shadow-xs);
}

.ng-btn-primary:hover,
.ng-btn-green:hover {
  background: var(--ng-green-600);
}

.ng-btn-primary:active,
.ng-btn-green:active {
  background: var(--ng-green-700);
  transform: translateY(1px);
}

/* Orange = accent secondaire */
.ng-btn-accent {
  background: var(--ng-orange-500);
  color: var(--fg-on-orange);
  border-color: var(--ng-orange-600);
  box-shadow: inset 0 1px 0 #ffffff4d, var(--shadow-xs);
}

.ng-btn-accent:hover {
  background: var(--ng-orange-600);
}

.ng-btn-accent:active {
  background: var(--ng-orange-700);
  transform: translateY(1px);
}

/* Neutre */
.ng-btn-secondary {
  color: var(--fg-1);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
  background: #fff;
}

.ng-btn-secondary:hover {
  background: var(--n-25);
  border-color: var(--border-strong);
}

/* Ghost */
.ng-btn-ghost {
  color: var(--fg-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ng-btn-ghost:hover {
  background: var(--n-50);
  color: var(--fg-1);
}

/* Brique = rejet */
.ng-btn-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.ng-btn-danger:hover {
  background: var(--danger-bg);
}

.ng-btn-danger:active {
  background: #f0d5cc;
  transform: translateY(1px);
}

.ng-btn-sm {
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
}

.ng-btn-sm .lucide {
  width: 14px;
  height: 14px;
}

.ng-badge {
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  display: inline-flex;
}

.ng-badge .dot {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.ng-badge.ok {
  background: var(--ng-green-50);
  color: var(--ng-green-700);
  border-color: var(--ng-green-200);
}

.ng-badge.ok .dot {
  background: var(--ng-green-500);
}

.ng-badge.pending {
  background: var(--ng-orange-50);
  color: var(--ng-orange-700);
  border-color: var(--ng-orange-200);
}

.ng-badge.pending .dot {
  background: var(--ng-orange-500);
}

.ng-badge.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.ng-badge.danger .dot {
  background: var(--danger);
}

.ng-badge.neutral {
  background: var(--n-50);
  color: var(--n-600);
  border-color: var(--n-200);
}

.ng-badge.neutral .dot {
  background: var(--n-400);
}

.ng-badge.info {
  color: var(--fg-2);
  border-color: var(--border-default);
  background: #fff;
}

.ng-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
}

.ng-card-head {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.ng-card-title {
  color: var(--fg-1);
  font-size: 15.5px;
  font-weight: 700;
}

.ng-card-sub {
  color: var(--fg-3);
  margin-top: 2px;
  font-size: 12px;
}

.ng-link {
  color: var(--ng-green-600);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.ng-link:hover {
  color: var(--ng-green-700);
}

.ng-link .lucide {
  width: 14px;
  height: 14px;
}

.ng-hero-card {
  background: var(--ng-green-600);
  border-radius: var(--radius-xl);
  color: #fff;
  margin-bottom: 16px;
  padding: 28px 34px 30px;
}

.ng-hero-card .eyebrow {
  color: #ffffffb8;
}

.ng-hero-val {
  color: #fff;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.ng-hero-val .cur {
  color: #fff;
  font-weight: 800;
}

.ng-hero-badge {
  color: #fff;
  border-radius: var(--radius-pill);
  background: #ffffff29;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
}

.ng-hero-badge .lucide {
  width: 16px;
  height: 16px;
}

.ng-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

/* Cartes KPI sobres (dashboard agent) — layout type stat-tile, fond blanc */
.ng-kpi-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 18px;
  color: var(--fg-1);
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}

a.ng-kpi-card:hover {
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(16, 24, 40, .08));
  transform: translateY(-1px);
}

.ng-kpi-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ng-kpi-card-label {
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ng-kpi-card-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--n-50);
  color: var(--n-600);
}

.ng-kpi-card-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-kpi-card.tone-teal .ng-kpi-card-ic {
  background: var(--ng-teal-50);
  color: var(--ng-teal-500);
}

.ng-kpi-card.tone-danger .ng-kpi-card-ic {
  background: var(--danger-bg);
  color: var(--danger);
}

.ng-kpi-card.tone-green .ng-kpi-card-ic {
  background: var(--ng-green-50);
  color: var(--ng-green-600);
}

.ng-kpi-card.tone-orange .ng-kpi-card-ic {
  background: var(--ng-orange-50);
  color: var(--ng-orange-600);
}

.ng-kpi-card-val {
  margin-top: 14px;
  color: var(--fg-1);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ng-kpi-card.tone-danger .ng-kpi-card-val {
  color: var(--danger);
}

.ng-kpi-card-sub {
  margin-top: 8px;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
}

.ng-kpi-card.is-soon {
  background: linear-gradient(to bottom right, var(--n-50), #fff, var(--n-100));
  border-color: var(--n-200);
}

.ng-kpi-card.is-soon .ng-kpi-card-body {
  filter: grayscale(1);
  opacity: 0.55;
}

.ng-kpi-card.is-soon .ng-kpi-card-ic {
  background: var(--n-100);
  color: var(--n-500);
}

.ng-kpi-card-soon-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pending-border);
  background: var(--pending-bg);
  color: var(--pending);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ng-stat-tile {
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow-xs);
  padding: 18px;
}

.ng-stat-tile.green {
  background: var(--ng-green-500);
}

.ng-stat-tile.orange {
  background: var(--ng-orange-500);
}

.ng-stat-tile.teal {
  background: var(--ng-teal-500);
}

.ng-stat-tile.gold {
  background: var(--ng-gold-500);
}

.ng-stat-tile.danger {
  background: var(--danger);
}

/* Variante sobre : fonds teintés légers, texte foncé */
.ng-stat-tile.soft {
  color: var(--fg-1);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.ng-stat-tile.soft.green {
  background: var(--ng-green-50);
}

.ng-stat-tile.soft.orange {
  background: var(--ng-orange-50);
}

.ng-stat-tile.soft.teal {
  background: var(--ng-teal-50);
}

.ng-stat-tile.soft.gold {
  background: var(--ng-gold-50);
}

.ng-stat-tile.soft.danger {
  background: var(--danger-bg);
}

.ng-stat-tile.soft.neutral {
  background: var(--n-50);
}

.ng-stat-tile.soft.soon {
  position: relative;
  background: linear-gradient(to bottom right, var(--n-50), #fff, var(--n-100));
  border-color: var(--border-subtle);
}

.ng-stat-tile.soft.soon .ng-stat-tile-inner {
  filter: grayscale(1);
  opacity: 0.6;
}

.ng-stat-tile.soft.soon .ng-stat-soon-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  border-radius: var(--radius-pill);
  border: 1px solid var(--pending-border);
  background: var(--pending-bg);
  color: var(--pending);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ng-stat-tile.soft .ng-stat-tile-label {
  color: var(--fg-2);
}

.ng-stat-tile.soft .ng-stat-tile-val {
  color: var(--fg-1);
}

.ng-stat-tile.soft.danger .ng-stat-tile-val {
  color: var(--danger);
}

.ng-stat-tile.soft .ng-stat-tile-sub {
  color: var(--fg-3);
}

.ng-stat-tile.soft .ng-stat-tile-ic {
  color: var(--fg-2);
  background: #ffffffa8;
}

.ng-stat-tile.soft.green .ng-stat-tile-ic {
  color: var(--ng-green-600);
}

.ng-stat-tile.soft.orange .ng-stat-tile-ic {
  color: var(--ng-orange-600);
}

.ng-stat-tile.soft.teal .ng-stat-tile-ic {
  color: var(--ng-teal-500);
}

.ng-stat-tile.soft.gold .ng-stat-tile-ic {
  color: var(--ng-gold-500);
}

.ng-stat-tile.soft.danger .ng-stat-tile-ic {
  color: var(--danger);
}

.ng-stat-tile.soft.neutral .ng-stat-tile-ic {
  color: var(--n-600);
}

.ng-stat-tile-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.ng-stat-tile-label {
  color: #ffffffeb;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.ng-stat-tile-ic {
  color: #fff;
  background: #ffffff2e;
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.ng-stat-tile-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-stat-tile-val {
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ng-stat-tile-sub {
  color: #ffffffd1;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.ng-dot-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
  padding: 18px 20px;
}

.ng-dot-card-head {
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  display: flex;
}

.ng-dot-card-head .dot {
  border-radius: 50%;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
}

.ng-dot-card.green .dot {
  background: var(--ng-green-500);
}

.ng-dot-card.orange .dot {
  background: var(--ng-orange-500);
}

.ng-dot-card.danger .dot {
  background: var(--danger);
}

.ng-dot-card.neutral .dot {
  background: var(--n-400);
}

.ng-dot-card-head .lbl {
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 700;
}

.ng-dot-card-val {
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ng-dot-card.danger .ng-dot-card-val {
  color: var(--danger);
}

.ng-dot-card-sub {
  color: var(--fg-3);
  margin-top: 6px;
  font-size: 12.5px;
}

.ng-kpi {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  padding: 16px;
  position: relative;
}

.ng-kpi-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ng-kpi-label {
  color: var(--fg-3);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.ng-kpi-label:before {
  content: "";
  background: var(--n-300);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.ng-kpi.green .ng-kpi-label:before {
  background: var(--ng-green-500);
}

.ng-kpi.orange .ng-kpi-label:before {
  background: var(--ng-orange-500);
}

.ng-kpi.danger .ng-kpi-label:before {
  background: var(--danger);
}

.ng-kpi-ic {
  background: var(--n-50);
  width: 30px;
  height: 30px;
  color: var(--fg-4);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-kpi-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-kpi-val {
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ng-kpi-meta {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
  font-size: 12px;
}

.ng-kpi-meta strong {
  color: var(--fg-2);
  font-weight: 700;
}

.ng-counters {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  display: grid;
}

.ng-counter {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  display: flex;
}

.ng-counter .c-label {
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
}

.ng-counter .c-val {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.ng-counter .c-ic {
  background: var(--n-50);
  width: 40px;
  height: 40px;
  color: var(--fg-4);
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-counter .c-ic.green {
  background: var(--ng-green-50);
  color: var(--ng-green-600);
}

.ng-counter .c-ic.orange {
  background: var(--ng-orange-50);
  color: var(--ng-orange-600);
}

.ng-counter .c-ic.teal {
  background: var(--ng-teal-50);
  color: var(--ng-teal-500);
}

.ng-counter .c-ic.blue {
  background: var(--ng-blue-50);
  color: var(--ng-blue-500);
}

.ng-counter .c-ic.gold {
  background: var(--ng-gold-50);
  color: var(--ng-gold-500);
}

.ng-counter .c-ic .lucide {
  width: 19px;
  height: 19px;
}

.ng-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13.5px;
}

.ng-tbl thead th {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  background: var(--n-25);
  border-bottom: 1px solid var(--border-subtle);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
}

.ng-tbl thead th.num {
  text-align: right;
}

.ng-tbl tbody td {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1);
  padding: 12px 18px;
}

.ng-tbl tbody tr:last-child td {
  border-bottom: 0;
}

.ng-tbl tbody tr:hover td {
  background: var(--n-25);
}

.ng-tbl tbody tr.clickable {
  cursor: pointer;
}

.ng-tbl td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ng-tbl td .sub {
  color: var(--fg-3);
  font-size: 12px;
}

.ng-tbl td.date {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
}

.ng-tbl .ref {
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 12.5px;
}

.ng-row-name {
  align-items: center;
  gap: 11px;
  display: flex;
}

.ng-alert-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  overflow: hidden;
}

.ng-alert-card .ng-card-head {
  background: var(--ng-orange-50);
}

.ng-alert-row {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  display: flex;
}

.ng-alert-row:last-child {
  border-bottom: 0;
}

.ng-alert-row:hover {
  background: var(--ng-orange-50);
}

.ng-alert-name {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-alert-loc {
  color: var(--fg-3);
  margin-top: 1px;
  font-size: 12.5px;
}

.ng-alert-qty {
  text-align: right;
}

.ng-alert-qty .q {
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 800;
}

.ng-alert-qty .s {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.ng-stepper {
  align-items: flex-start;
  gap: 0;
  display: flex;
}

.ng-step {
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  display: flex;
  position: relative;
}

.ng-step .bar {
  background: var(--n-200);
  z-index: 0;
  height: 2px;
  position: absolute;
  top: 17px;
  left: -50%;
  right: 50%;
}

.ng-step:first-child .bar {
  display: none;
}

.ng-step.done .bar, .ng-step.current .bar {
  background: var(--ng-green-500);
}

.ng-step .node {
  border: 2px solid var(--n-200);
  z-index: 1;
  width: 36px;
  height: 36px;
  color: var(--fg-4);
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  position: relative;
}

.ng-step .node .lucide {
  width: 17px;
  height: 17px;
}

.ng-step.done .node {
  background: var(--ng-green-500);
  border-color: var(--ng-green-600);
  color: #fff;
}

.ng-step.current .node {
  border-color: var(--ng-orange-500);
  color: var(--ng-orange-600);
  box-shadow: 0 0 0 4px var(--ng-orange-50);
  background: #fff;
}

.ng-step .s-label {
  color: var(--fg-1);
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.ng-step.todo .s-label {
  color: var(--fg-4);
}

.ng-step .s-meta {
  color: var(--fg-3);
  margin-top: 2px;
  font-size: 11.5px;
}

.ng-tl {
  flex-direction: column;
  display: flex;
}

.ng-tl-item {
  gap: 14px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.ng-tl-item:last-child {
  padding-bottom: 0;
}

.ng-tl-line {
  background: var(--border-default);
  width: 2px;
  position: absolute;
  top: 34px;
  bottom: -2px;
  left: 16px;
}

.ng-tl-item:last-child .ng-tl-line {
  display: none;
}

.ng-tl-ic {
  z-index: 1;
  border: 2px solid;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
}

.ng-tl-ic .lucide {
  width: 15px;
  height: 15px;
}

.ng-tl-ic.ok {
  background: var(--ng-green-50);
  border-color: var(--ng-green-200);
  color: var(--ng-green-600);
}

.ng-tl-ic.pending {
  background: var(--ng-orange-50);
  border-color: var(--ng-orange-200);
  color: var(--ng-orange-600);
}

.ng-tl-ic.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.ng-tl-ic.neutral {
  background: var(--n-50);
  border-color: var(--n-200);
  color: var(--fg-4);
}

.ng-tl-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.ng-tl-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.ng-tl-title {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-tl-actor {
  margin-top: 1px;
  font-size: 12.5px;
}

.ng-tl-actor .by {
  color: var(--ng-orange-700);
  font-weight: 600;
}

.ng-tl-time {
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11.5px;
}

.ng-tl-note {
  color: var(--fg-2);
  margin-top: 4px;
  font-size: 13px;
}

.ng-tl-quote {
  color: var(--fg-2);
  background: var(--n-25);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  margin-top: 8px;
  padding: 9px 13px;
  font-size: 13px;
  font-style: italic;
}

.ng-kv {
  border-bottom: 1px dashed var(--border-subtle);
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 13px;
  display: flex;
}

.ng-kv:last-child {
  border-bottom: 0;
}

.ng-kv .k {
  color: var(--fg-3);
}

.ng-kv .v {
  color: var(--fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ng-kv .v.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.ng-validator {
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  display: flex;
}

.ng-validator:last-child {
  border-bottom: 0;
}

.ng-validator .vn {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-validator .vr {
  color: var(--fg-3);
  font-size: 12px;
}

.ng-chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 16px;
  display: flex;
}

.ng-chip {
  border: 1px solid var(--border-default);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  text-decoration: none;
}

.ng-chip:hover {
  background: var(--n-25);
  border-color: var(--border-strong);
}

.ng-chip.active {
  background: var(--ng-green-500);
  border-color: var(--ng-green-600);
  color: #fff;
}

.ng-chip.active:hover {
  background: var(--ng-green-600);
  border-color: var(--ng-green-700);
}

.ng-chip .n {
  font-variant-numeric: tabular-nums;
  color: var(--fg-4);
  font-weight: 700;
  font-size: 11.5px;
}

.ng-chip.active .n {
  color: var(--ng-green-100);
}

.ng-kpi.danger .ng-kpi-val {
  color: var(--danger);
}

.ng-filters {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  display: grid;
}

.ng-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.ng-field > label {
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}

.ng-select {
  position: relative;
}

.ng-select select {
  appearance: none;
  border: 1px solid var(--border-default);
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  box-shadow: var(--shadow-inset);
  background: #fff;
  border-radius: 9px;
  padding: 9px 34px 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
}

.ng-select select:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.ng-select .chev {
  pointer-events: none;
  color: var(--fg-4);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
}

.ng-hbars {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.ng-hbar {
  grid-template-columns: 92px 1fr 86px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.ng-hbar .lbl {
  color: var(--fg-2);
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.ng-hbar .track {
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  height: 18px;
  overflow: hidden;
}

.ng-hbar .fill {
  height: 100%;
  transition: width var(--dur-base) var(--ease-out);
  border-radius: 6px 0 0 6px;
  display: block;
}

.ng-hbar .val {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
}

.ng-legend {
  align-items: center;
  gap: 16px;
  display: flex;
}

.ng-legend .item {
  color: var(--fg-2);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.ng-legend .sw {
  border-radius: 3px;
  width: 12px;
  height: 12px;
}

.ng-input {
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  width: 100%;
  color: var(--fg-1);
  box-shadow: var(--shadow-inset);
  background: #fff;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.ng-input::placeholder {
  color: var(--fg-4);
}

.ng-input:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.ng-input.with-ic {
  padding-left: 36px;
}

.ng-input-wrap {
  position: relative;
}

.ng-input-wrap > .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-4);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.ng-proj-wrap {
  position: relative;
}

.ng-proj-menu {
  border: 1px solid var(--border-default);
  min-width: 248px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
}

.ng-proj-group {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-4);
  padding: 9px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
}

.ng-proj-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.ng-proj-item:hover {
  background: var(--n-50);
}

.ng-proj-item .pdot {
  background: var(--n-300);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.ng-proj-item.sel .pdot {
  background: var(--ng-green-500);
}

.ng-proj-item .chk {
  color: var(--ng-green-600);
  width: 15px;
  height: 15px;
  margin-left: auto;
}

.ng-crumb {
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  display: flex;
}

.ng-crumb .crumb-link {
  font-family: inherit;
  font-size: inherit;
  color: var(--fg-3);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
}

.ng-crumb .crumb-link:hover {
  color: var(--ng-green-700);
}

.ng-crumb .crumb-cur {
  color: var(--fg-1);
  font-weight: 700;
}

.ng-crumb .sep {
  width: 13px;
  height: 13px;
  color: var(--fg-4);
  flex-shrink: 0;
}

.ng-filterpanel {
  overflow: hidden;
  margin-bottom: 16px;
}

.ng-filter-head {
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  font-family: inherit;
  display: flex;
}

.ng-filter-head:hover {
  background: var(--n-25);
}

.ng-filter-title {
  color: var(--fg-1);
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.ng-filter-title .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}

.ng-filter-toggle {
  color: var(--ng-green-600);
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.ng-filter-toggle .lucide {
  width: 15px;
  height: 15px;
}

.ng-filter-body {
  border-top: 1px solid var(--border-subtle);
  padding: 16px 18px 18px;
}

.ng-rowmenu {
  border: 1px solid var(--border-default);
  min-width: 178px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-family: var(--font-sans);
  background: #fff;
  border-radius: 11px;
  padding: 5px;
  position: fixed;
}

.ng-rowmenu-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.ng-rowmenu-item:hover {
  background: var(--n-50);
}

.ng-rowmenu-item .lucide {
  width: 15px;
  height: 15px;
  color: var(--fg-3);
}

.ng-rowmenu-item.danger, .ng-rowmenu-item.danger .lucide {
  color: var(--danger);
}

.ng-rowmenu form.button_to {
  width: 100%;
  margin: 0;
}

.ng-rowmenu hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 4px 2px;
}

.ng-pagination {
  border-top: 1px solid var(--border-subtle);
  background: var(--n-25);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  display: flex;
}

.ng-pagination .pp {
  color: var(--fg-3);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.ng-pagination .ng-select.sm select {
  box-shadow: var(--shadow-xs);
  padding: 6px 30px 6px 10px;
  font-size: 12.5px;
}

.ng-pagination .ng-select.sm .chev {
  width: 14px;
  height: 14px;
  right: 9px;
}

.ng-pagination .nav {
  align-items: center;
  gap: 12px;
  display: flex;
}

.ng-pagination .rng {
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
}

.pg-btn {
  border: 1px solid var(--border-default);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--fg-2);
  background: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.pg-btn:hover:not(:disabled) {
  background: var(--n-50);
}

.pg-btn:disabled {
  opacity: .4;
  cursor: default;
}

.pg-btn .lucide {
  width: 16px;
  height: 16px;
}

.ng-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.ng-form-grid .col-2 {
  grid-column: span 2;
}

.ng-hint {
  color: var(--fg-4);
  margin-top: 5px;
  font-size: 12px;
}

textarea.ng-input {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

.ng-form-actions {
  gap: 10px;
  margin-top: 24px;
  display: flex;
}

.ng-detail-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px 36px;
  display: grid;
}

.ng-detail-field .k {
  color: var(--fg-3);
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
}

.ng-detail-field .v {
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
}

.ng-detail-field .vsub {
  color: var(--fg-4);
  margin-top: 2px;
  font-size: 12px;
}

.ng-section-title {
  color: var(--fg-1);
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.ng-limit-row {
  background: var(--n-25);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 13.5px;
  display: flex;
}

.ng-limit-row .ln {
  color: var(--fg-1);
  font-weight: 700;
}

.ng-limit-row .lv {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ng-sw {
  border: 1px solid #1216131a;
  border-radius: 10px;
  align-items: flex-end;
  height: 64px;
  padding: 7px 9px;
  display: flex;
}

.ng-sw .hex {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}

.ng-notice-stack {
  z-index: 1000;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.ng-notice {
  border: 1px solid var(--border-default);
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ng-notice-in var(--dur-base) var(--ease-out);
  background: #fff;
  border-radius: 12px;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px 12px 14px;
  display: flex;
}

.ng-notice.is-leaving {
  animation: ng-notice-out .22s var(--ease-out) forwards;
}

.ng-notice-ic {
  background: var(--n-50);
  width: 30px;
  height: 30px;
  color: var(--fg-4);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-notice-ic .lucide {
  width: 17px;
  height: 17px;
}

.ng-notice-body {
  flex: 1;
  min-width: 0;
}

.ng-notice-title {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ng-notice-msg {
  color: var(--fg-3);
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.4;
}

.ng-notice-close {
  width: 24px;
  height: 24px;
  color: var(--fg-4);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-notice-close:hover {
  background: var(--n-50);
  color: var(--fg-2);
}

.ng-notice-close .lucide {
  width: 15px;
  height: 15px;
}

.ng-notice.success {
  border-color: var(--ng-green-200);
}

.ng-notice.success .ng-notice-ic {
  background: var(--ng-green-50);
  color: var(--ng-green-600);
}

.ng-notice.info {
  border-color: var(--info-border);
}

.ng-notice.info .ng-notice-ic {
  background: var(--ng-blue-50);
  color: var(--ng-blue-500);
}

.ng-notice.error {
  border-color: var(--danger-border);
}

.ng-notice.error .ng-notice-ic {
  background: var(--danger-bg);
  color: var(--danger);
}

@keyframes ng-notice-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ng-notice-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* Delta Nation · tokens officiels (charte i-futur) */
:root {
  --ng-green-50: #e8f3e8;
  --ng-green-100: #cde6ce;
  --ng-green-200: #9dcd9f;
  --ng-green-300: #5faf62;
  --ng-green-400: #2e9233;
  --ng-green-500: #127914;
  --ng-green-600: #0e6510;
  --ng-green-700: #0a4f0c;
  --ng-green-800: #073908;
  --ng-green: var(--ng-green-500);
  --ng-orange-50: #fff4e5;
  --ng-orange-100: #ffe4c2;
  --ng-orange-200: #ffcd8f;
  --ng-orange-300: #ffb152;
  --ng-orange-400: #ff9d27;
  --ng-orange-500: #ff8c00;
  --ng-orange-600: #e07700;
  --ng-orange-700: #b35e00;
  --ng-orange-800: #8a4700;
  --ng-orange: var(--ng-orange-500);
  --n-0: #fff;
  --n-25: #f7f8f8;
  --n-50: #f1f3f2;
  --n-100: #e7eae8;
  --n-200: #d8dcd9;
  --n-300: #c0c6c2;
  --n-400: #949b97;
  --n-500: #6b726e;
  --n-600: #4d534f;
  --n-700: #343935;
  --n-800: #20231f;
  --n-900: #121613;
  --ink: #121613;
  --ink-2: #20231f;
  --ng-teal-500: #2d8c86;
  --ng-teal-50: #e4f1ef;
  --ng-blue-500: #2c6db5;
  --ng-blue-50: #e5eff9;
  --ng-gold-500: #be8a1f;
  --ng-gold-50: #faf1d8;
  --ok: var(--ng-green-600);
  --ok-bg: var(--ng-green-50);
  --ok-border: var(--ng-green-200);
  --pending: var(--ng-orange-600);
  --pending-bg: var(--ng-orange-50);
  --pending-border: var(--ng-orange-200);
  --danger: #b23a24;
  --danger-bg: #f8e7e1;
  --danger-border: #e8bcad;
  --fg-1: var(--n-900);
  --fg-2: var(--n-700);
  --fg-3: var(--n-500);
  --fg-4: var(--n-400);
  --fg-on-orange: var(--ink);
  --fg-on-green: #fff;
  --fg-on-dark: #eef1ef;
  --bg-page: #fafbfa;
  --bg-surface: var(--n-0);
  --bg-sunken: var(--n-50);
  --bg-inverse: var(--ink);
  --border-subtle: var(--n-100);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-xs: 0 1px 1px #1216130a;
  --shadow-sm: 0 1px 2px #1216130f, 0 1px 1px #1216130a;
  --shadow-md: 0 4px 12px #1216130f, 0 1px 2px #1216130a;
  --shadow-lg: 0 12px 28px #1216131a, 0 2px 4px #1216130a;
  --shadow-inset: inset 0 1px 2px #1216130f;
  --shadow-focus: 0 0 0 3px #12791442;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: var(--font-sans);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .12s;
  --dur-base: .2s;
  --num-tabular: "tnum" 1, "lnum" 1;
}

.ng, .ng * {
  box-sizing: border-box;
}

.ng {
  font-family: var(--font-sans);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pnum" 1, "lnum" 1;
  font-size: 15px;
  line-height: 1.55;
}

.ng h1, .ng h2, .ng h3, .ng h4 {
  color: var(--fg-1);
  margin: 0;
}

.ng .tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
}

.ng .eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}

.ng .mono {
  font-family: var(--font-mono);
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url(/assets/shared/md3_dashboard-e346ae77272273d7f9954e06c337f25621b2b60c76c1c439d82c2cbc6671f90f.css);

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   Delta Nation design tokens — charte officielle (i-futur)
   Vert #127914 = primaire · Orange #FF8C00 = accent
   ========================================================================== */
:root {
  --ng-green-50: #e8f3e8;
  --ng-green-100: #cde6ce;
  --ng-green-200: #9dcd9f;
  --ng-green-300: #5faf62;
  --ng-green-400: #2e9233;
  --ng-green-500: #127914;
  --ng-green-600: #0e6510;
  --ng-green-700: #0a4f0c;
  --ng-green-800: #073908;
  --ng-orange-50: #fff4e5;
  --ng-orange-100: #ffe4c2;
  --ng-orange-200: #ffcd8f;
  --ng-orange-300: #ffb152;
  --ng-orange-400: #ff9d27;
  --ng-orange-500: #ff8c00;
  --ng-orange-600: #e07700;
  --ng-orange-700: #b35e00;
  --ng-orange-800: #8a4700;
  --n-0: #ffffff;
  --n-25: #f7f8f8;
  --n-50: #f1f3f2;
  --n-100: #e7eae8;
  --n-200: #d8dcd9;
  --n-300: #c0c6c2;
  --n-400: #949b97;
  --n-500: #6b726e;
  --n-600: #4d534f;
  --n-700: #343935;
  --n-800: #20231f;
  --n-900: #121613;
  --ink: #121613;
  --brand: var(--ng-green-500);
  --brand-strong: var(--ng-green-600);
  --brand-soft: var(--ng-green-50);
  --accent: var(--ng-orange-500);
  --accent-strong: var(--ng-orange-600);
  --accent-soft: var(--ng-orange-50);
  --bg-page: #fafbfa;
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --ng-teal-500: #2d8c86;
  --ng-teal-50: #e4f1ef;
  --ng-blue-500: #2c6db5;
  --ng-blue-50: #e5eff9;
  --ng-gold-500: #be8a1f;
  --ng-gold-50: #faf1d8;
  --ok: var(--ng-green-600);
  --ok-bg: var(--ng-green-50);
  --ok-border: var(--ng-green-200);
  --pending: var(--ng-orange-600);
  --pending-bg: var(--ng-orange-50);
  --pending-border: var(--ng-orange-200);
  --danger: #b23a24;
  --danger-bg: #f8e7e1;
  --danger-border: #e8bcad;
  --fg-1: var(--n-900);
  --fg-2: var(--n-700);
  --fg-3: var(--n-500);
  --fg-4: var(--n-400);
  --border-subtle: var(--n-100);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --shadow-xs: 0 1px 1px rgba(18, 22, 19, 0.04);
  --shadow-sm: 0 1px 2px rgba(18, 22, 19, 0.06), 0 1px 1px rgba(18, 22, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 22, 19, 0.06), 0 1px 2px rgba(18, 22, 19, 0.04);
  --shadow-lg: 0 12px 28px rgba(18, 22, 19, 0.10), 0 2px 4px rgba(18, 22, 19, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(18, 22, 19, 0.06);
  --shadow-focus: 0 0 0 3px rgba(18, 121, 20, 0.26);
  --radius-control: 9px;
  --radius-card: 13px;
  --radius-modal: 18px;
  --radius-nav: 10px;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --dur-fast: 120ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pnum" 1, "lnum" 1, "tnum" 1;
}

/* Tabular numerals for money, dates, counts, references */
.tabular-nums,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

@layer components {
  .cards {
    @apply rounded-card border border-n-100 bg-white p-6 shadow-xs transition-shadow duration-fast ease-dn hover:shadow-md sm:p-8 w-[25rem];
  }

  .card-head {
    @apply rounded-control bg-brand-500 p-2 text-white flex space-x-5 items-center;
  }

  .rejet-card {
    @apply border border-[#e8bcad] bg-[#f8e7e1];
  }

  .valid-card {
    @apply border border-[#9dcd9f] bg-[#e8f3e8];
  }

  .tag {
    @apply px-2.5 py-1 border border-transparent text-dn-xs font-semibold rounded-full text-white;
  }

  .is-primary {
    @apply inline-flex items-center justify-center gap-2 bg-brand-500 hover:bg-brand-600 active:bg-brand-700 focus:outline-none text-white border border-brand-600 focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .is-warning,
  .is-accent {
    @apply inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 active:bg-accent-700 focus:outline-none text-white border border-accent-600 focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .is-danger {
    @apply inline-flex items-center justify-center gap-2 text-brick bg-white border border-[#e8bcad] hover:bg-[#f8e7e1] active:bg-[#f0d5cc] focus:outline-none focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-danger-solid {
    @apply inline-flex items-center justify-center gap-2 bg-brick hover:bg-[#9a3020] active:bg-[#7a2619] focus:outline-none text-white border border-[#9a3020] focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-primary {
    @apply bg-brand-50 text-brand-700 hover:bg-brand-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .bank-card {
    @apply relative overflow-hidden grid grid-cols-3 gap-8 rounded-lg shadow-md p-8 bg-green-900 bg-[url(/../images/bg-card.png)] bg-no-repeat bg-contain bg-right-bottom min-w-[300px] max-w-[400px] w-full h-[200px];
  }

  .bank-card:before,
  .bank-card:after {
    @apply content-[''] w-[400px] h-[400px] rounded-full bg-black/[0.1] backdrop-blur-[1px] block absolute z-0;
  }

  .bank-card:before {
    @apply bottom-[-300px] left-[-200px];
  }

  .bank-card:after {
    @apply top-[-300px] right-[-150px];
  }

  .is-light-info {
    @apply bg-blue-50 text-blue-500 hover:bg-blue-50/80 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-warning {
    @apply bg-accent-50 text-accent-700 hover:bg-accent-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-danger {
    @apply bg-[#f8e7e1] text-brick hover:bg-[#f0d5cc] focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-success {
    @apply bg-[#e8f3e8] text-brand-700 hover:bg-brand-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light {
    @apply bg-n-50 text-n-600 hover:bg-n-100 hover:text-n-700 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-outlined,
  .is-secondary {
    @apply inline-flex items-center justify-center gap-2 text-n-900 bg-white border border-n-200 hover:bg-n-25 hover:border-n-300 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control shadow-xs;
  }

  .is-ghost {
    @apply inline-flex items-center justify-center gap-2 text-n-600 bg-transparent border border-transparent shadow-none hover:bg-n-50 hover:text-n-800 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-success {
    @apply bg-brand-500 hover:bg-brand-600 active:bg-brand-700 focus:outline-none text-white focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .label {
    @apply font-semibold inline-block mb-2 text-n-700 text-dn-sm;
  }

  .button-step {
    @apply py-2 w-full flex justify-center items-center pl-[1.3rem] h-[63px] relative bg-brand-300 hover:bg-brand-400;
  }

  .button-step-active {
    @apply border-transparent font-medium text-white cursor-pointer bg-brand-600 hover:bg-brand-700;
  }

  .button-step-disabled {
    @apply pointer-events-none text-gray-400 hover:bg-brand-200;
  }

  .card {
    @apply relative flex min-w-0 flex-col rounded-card shadow-xs break-words bg-white bg-clip-border border border-n-100 p-6 transition-shadow duration-fast ease-dn hover:shadow-sm;
  }

  .card-title {
    @apply my-6 text-2xl font-extrabold tracking-tight transition-colors duration-fast text-n-900 text-center;
  }

  .textarea {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full py-[9px] px-3 mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm text-n-900;
  }

  .select {
    @apply mt-1 block w-full py-[9px] px-3 border border-n-200 bg-white rounded-control shadow-inset focus:outline-none focus:border-brand-500 focus:shadow-focus transition-all duration-fast ease-dn text-dn-sm text-n-900;
  }

  .input {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full py-[9px] px-3 mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm text-n-900 placeholder:text-n-400;
  }

  .country-select select {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm;
  }

  .button {
    @apply inline-flex items-center justify-center gap-2 py-2.5 px-[15px] border border-transparent font-bold rounded-control cursor-pointer transition-all duration-fast ease-dn shadow-xs text-dn-sm leading-none;
  }

  .button-sm,
  .button.is-small {
    @apply py-[7px] px-[11px] text-[12.5px] rounded-[8px];
  }

  .button .material-symbols-outlined,
  .button .lucide {
    @apply text-[15px] leading-none;
    width: 15px;
    height: 15px;
  }

  .button-sm .material-symbols-outlined,
  .button-sm .lucide,
  .button.is-small .material-symbols-outlined,
  .button.is-small .lucide {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }

  .upload-btn {
    @apply py-2 px-4 border border-indigo-500 bg-indigo-50 hover:bg-indigo-600 focus:ring-indigo-500 focus:ring-offset-indigo-500 text-indigo-700 hover:text-indigo-100 transition-all duration-300 transform hover:-translate-y-0.5 text-center text-base font-semibold shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg;
  }

  .btn-login {
    @apply cursor-pointer inline-flex items-center justify-center gap-2 px-[15px] py-2.5 text-dn-sm bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white border border-brand-600 shadow-xs transition-all duration-fast ease-dn rounded-control font-bold;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .btn-logout {
    @apply cursor-pointer inline-flex items-center justify-center gap-2 px-[15px] py-2.5 border border-[#e8bcad] text-brick hover:bg-[#f8e7e1] shadow-xs transition-all duration-fast ease-dn rounded-control font-bold text-dn-sm;
  }

  .links {
    @apply px-3 py-1.5 rounded-control inline-flex items-center w-full text-dn-sm font-bold transition-all duration-fast ease-dn text-brand-600 hover:text-brand-700;
  }

  .nav-group-label {
    @apply px-3 pt-3.5 pb-1.5 text-dn-label font-bold uppercase text-n-400;
  }

  .nav-item {
    @apply flex items-center gap-[11px] px-2.5 py-2 rounded-control text-dn-sm font-medium text-n-700 transition-all duration-fast ease-dn hover:bg-n-50 hover:text-n-900 min-h-[40px];
  }

  .nav-item-active {
    @apply bg-brand-500 text-white hover:bg-brand-500 hover:text-white active:bg-brand-600 shadow-sm rounded-nav font-bold;
  }

  .dn-badge {
    @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-dn-xs font-bold border;
  }

  .dn-badge-ok {
    @apply dn-badge bg-[#e8f3e8] text-brand-700 border-[#9dcd9f];
  }

  .dn-badge-pending {
    @apply dn-badge bg-accent-50 text-accent-700 border-accent-200;
  }

  .dn-badge-danger {
    @apply dn-badge bg-[#f8e7e1] text-brick border-[#e8bcad];
  }

  .dn-hero-card {
    @apply rounded-modal text-white mb-4 px-[34px] py-7 shadow-sm;
  }

  .dn-stat-tile {
    @apply rounded-card text-white shadow-xs p-[18px];
  }

  .dn-stat-tile-green { @apply dn-stat-tile bg-brand-500; }
  .dn-stat-tile-orange { @apply dn-stat-tile bg-accent-500; }
  .dn-stat-tile-teal { @apply dn-stat-tile bg-teal-500; }
  .dn-stat-tile-gold { @apply dn-stat-tile bg-gold-500; }

  .dn-table {
    @apply w-full border-separate border-spacing-0 text-dn-sm;
  }

  .dn-table thead th {
    @apply text-n-500 uppercase tracking-[0.07em] text-left bg-n-25 border-b border-n-100 py-[11px] px-[18px] text-dn-xs font-bold;
  }

  .dn-table tbody td {
    @apply border-b border-n-100 py-3 px-[18px] text-n-700;
  }

  .dn-table tbody tr:hover td {
    @apply bg-n-25;
  }

  .dn-page-title {
    @apply text-dn-page font-extrabold text-n-900 tracking-tight;
  }

  .dn-page-sub {
    @apply text-dn-sm text-n-500;
  }

  /* ── Delta Nation · pages détail (approvisionnement, virements…) ── */
  .dn-detail-breadcrumb {
    @apply flex flex-wrap items-center gap-1.5 text-dn-xs text-n-500 mb-4;
  }
  .dn-detail-breadcrumb a {
    @apply text-n-500 hover:text-brand-600 transition-colors;
  }
  .dn-detail-breadcrumb .sep {
    @apply text-n-300;
  }
  .dn-detail-breadcrumb .current {
    @apply text-n-700 font-semibold;
  }
  .dn-detail-header {
    @apply flex flex-col gap-4 mb-6 sm:flex-row sm:items-start sm:justify-between;
  }
  .dn-detail-title-row {
    @apply flex flex-wrap items-center gap-3;
  }
  .dn-detail-title {
    @apply text-[22px] font-extrabold text-n-900 tracking-tight leading-tight sm:text-[26px];
  }
  .dn-detail-badge {
    @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-dn-xs font-bold;
  }
  .dn-detail-badge-ok {
    @apply bg-[#e8f3e8] text-brand-700 border-[#9dcd9f];
  }
  .dn-detail-badge-pending {
    @apply bg-accent-50 text-accent-700 border-accent-200;
  }
  .dn-detail-subtitle {
    @apply mt-1 text-dn-sm text-n-500;
  }
  .dn-detail-card {
    @apply rounded-card border border-n-100 bg-white shadow-xs overflow-hidden;
  }
  .dn-detail-card-head {
    @apply border-b border-n-100 px-5 py-4;
  }
  .dn-detail-card-title {
    @apply text-[15px] font-extrabold text-n-900;
  }
  .dn-detail-card-sub {
    @apply text-dn-xs text-n-500 mt-0.5;
  }
  .dn-stepper {
    @apply flex items-start gap-0 mb-6 overflow-x-auto pb-1;
  }
  .dn-step {
    @apply relative flex flex-1 min-w-[88px] flex-col items-center text-center;
  }
  .dn-step-bar {
    @apply absolute top-[17px] right-1/2 left-[-50%] z-0 h-0.5 bg-n-200;
  }
  .dn-step:first-child .dn-step-bar {
    @apply hidden;
  }
  .dn-step.is-done .dn-step-bar,
  .dn-step.is-current .dn-step-bar {
    @apply bg-brand-500;
  }
  .dn-step-node {
    @apply relative z-[1] inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-n-200 bg-white text-[13px] font-extrabold text-n-400;
  }
  .dn-step.is-done .dn-step-node {
    @apply border-brand-600 bg-brand-500 text-white;
  }
  .dn-step.is-current .dn-step-node {
    @apply border-accent-500 bg-white text-accent-600;
    box-shadow: 0 0 0 4px #fff4e5;
  }
  .dn-step-label {
    @apply mt-2.5 text-[12.5px] font-bold text-n-900;
  }
  .dn-step.is-todo .dn-step-label {
    @apply text-n-400;
  }
  .dn-step-meta {
    @apply mt-0.5 text-[11.5px] text-n-500;
  }
  .dn-summary-row {
    @apply flex items-baseline justify-between gap-4 border-b border-n-100 py-3.5 last:border-0;
  }
  .dn-summary-label {
    @apply text-dn-sm text-n-500 shrink-0;
  }
  .dn-summary-value {
    @apply text-dn-sm font-bold text-n-900 text-right;
  }
  .dn-tl-item {
    @apply relative flex gap-3.5 pb-5 last:pb-0;
  }
  .dn-tl-line {
    @apply absolute left-4 top-[34px] bottom-0 w-0.5 bg-n-200;
  }
  .dn-tl-item:last-child .dn-tl-line {
    @apply hidden;
  }
  .dn-tl-ic {
    @apply relative z-[1] inline-flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-full border-2;
  }
  .dn-tl-ic.ok {
    @apply border-[#9dcd9f] bg-[#e8f3e8] text-brand-600;
  }
  .dn-tl-ic.pending {
    @apply border-accent-200 bg-accent-50 text-accent-600;
  }
  .dn-tl-ic.neutral {
    @apply border-n-200 bg-n-50 text-n-400;
  }
  .dn-tl-title {
    @apply text-dn-sm font-bold text-n-900;
  }
  .dn-tl-actor {
    @apply text-[12.5px] text-n-500 mt-0.5;
  }
  .dn-tl-actor strong {
    @apply text-accent-700 font-semibold;
  }
  .dn-tl-note {
    @apply mt-2 rounded-control border-l-[3px] border-n-200 bg-n-25 px-3 py-2 text-dn-xs text-n-600 italic;
  }
  .dn-tl-time {
    @apply text-dn-xs text-n-400 whitespace-nowrap;
  }
  .dn-detail-success {
    @apply rounded-card border border-brand-200 bg-brand-50 p-6 text-center;
  }

  /* ── Delta Nation · graphiques dashboard ── */
  .dn-chart-card {
    @apply rounded-card border border-n-100 bg-white shadow-xs overflow-hidden;
  }
  .dn-chart-card-head {
    @apply flex flex-col gap-3 border-b border-n-100 px-5 py-4 sm:flex-row sm:items-start sm:justify-between;
  }
  .dn-chart-card-title {
    @apply text-[15px] font-extrabold text-n-900;
  }
  .dn-chart-card-sub {
    @apply text-dn-xs text-n-500 mt-0.5;
  }
  .dn-chart-card-body {
    @apply p-5 pt-4;
  }
  .dn-chart-legend {
    @apply flex flex-wrap items-center gap-4 shrink-0;
  }
  .dn-chart-legend-item {
    @apply inline-flex items-center gap-1.5 text-dn-xs font-semibold text-n-600;
  }
  .dn-chart-legend-swatch {
    @apply inline-block h-2.5 w-2.5 rounded-[2px];
  }
  .dn-chart-legend-swatch.is-orange {
    @apply bg-accent-500;
  }
  .dn-chart-legend-swatch.is-green {
    @apply bg-[#c8e6c9];
  }
  .dn-region-bars {
    @apply space-y-4;
  }
  .dn-region-row {
    @apply grid grid-cols-[minmax(4.5rem,5.5rem)_1fr_minmax(4.5rem,5rem)] items-center gap-3;
  }
  .dn-region-label {
    @apply text-dn-sm font-semibold text-n-800 truncate;
  }
  .dn-region-track {
    @apply h-2.5 w-full overflow-hidden rounded-full bg-n-100;
  }
  .dn-region-fill {
    @apply h-full rounded-full bg-brand-600 transition-all duration-500;
  }
  .dn-region-value {
    @apply text-dn-xs font-bold text-n-700 text-right whitespace-nowrap;
  }

  .deposed-btn {
    @apply cursor-pointer rounded-full bg-[#127914] hover:bg-[#0f6511] px-8 py-3 h-12 text-sm font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#127914] shadow-xs transition-colors duration-150;
  }

  .undeposed-btn {
    @apply cursor-pointer rounded-full bg-orange-500 hover:bg-orange-600 px-8 py-3 h-12 text-sm font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 shadow-xs transition-colors duration-150;
  }

  .file-btn {
    @apply cursor-pointer bg-slate-700 hover:bg-slate-800 px-6 py-3 text-white rounded-control text-lg shadow-xs transition-colors duration-150 font-semibold;
  }

  .link-download {
    @apply cursor-pointer rounded-control bg-brand-600 hover:bg-brand-700 px-8 py-3 h-12 font-semibold text-white text-xs sm:text-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 shadow-xs transition-colors duration-150;
  }

  .img-lg .client-photo {
    @apply max-w-[1500px] max-h-[150px] rounded-lg mb-2;
  }
}

/* Tableau de bord · Material 3 — voir app/assets/stylesheets/shared/md3_dashboard.css
   (importé plus haut ; partagé avec le layout agent qui ne charge pas Tailwind). */

.button-step::before {
  border-left: 20px solid #fff;
  left: 0;
  top: 0;
  bottom: 0;
}

.button-step::after {
  border-left: 18px solid #7cc07f;
  right: -18px;
  top: 0px;
  bottom: 0;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.button-step-active.button-step::after {
  border-left-color: #0f6511;
}

.button-step::before,
.button-step::after {
  content: "";
  position: absolute;
  border-bottom: 40px solid transparent;
}

@media (min-width: 1024px) {

  .button-step::before,
  .button-step::after {
    border-bottom: 64px solid transparent;
  }
}

.button-step-active.button-step:hover::after {
  border-left-color: #0c520e;
}

.button-step:hover::after {
  border-left-color: #3f9e43;
}

.active-border .border {
  @apply border-brand-500;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.zoom-animation {
  transition: transform 0.7s ease-in-out;
  /* Définissez la durée et la fonction de transition selon vos préférences */
  transform-origin: center center;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.float-animation {
  animation: floating 9s ease-in-out infinite;
  /* Définissez la durée et la fonction de transition selon vos préférences */
}

.payment-notification {
  text-align: center;
}

.payment-notification .is-svg-container {
  margin: 0 auto;
}

.payment-notification.is-danger .is-svg-container svg {
  width: 50px;
  height: 50px;
  color: #dc2626;
  /* replace $danger with the actual color value */
}

.payment-notification.is-success .is-svg-container svg {
  width: 50px;
  height: 50px;
  color: #16a34a;
  /* replace $success with the actual color value */
}

.payment-notification.is-pending .is-svg-container {
  width: 50px;
  height: 50px;
}

.payment-notification.is-pending .is-svg-container svg {
  fill: #1d4ed8;
  /* replace $primary with the actual color value */
}

.notification .close {
  right: 0.5rem;
  position: absolute;
  top: 0.5rem;
}

/* Disabled button styles */
button:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

button:disabled:hover {
  transform: none !important;
}
/* Payment Page Styles */
.payment-header {
  background: var(--brand);
  animation: fadeInDown 0.5s ease-out;
}

.payment-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-modal);
  animation: slideUp 0.4s ease-out;
}

.button-text {
  transition: all 0.2s ease;
}

.is-loading .button-text {
  opacity: 0;
}

.is-loading .loading-spinner {
  display: block !important;
}

/* Animation pour les champs de saisie */
.payment-form input:focus {
  transform: translateY(-1px);
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: var(--shadow-focus);
}

/* Animation pour le bouton */
.payment-form button:not(:disabled):hover {
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.04);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design pour pages de paiement */
@media (max-width: 768px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 95% !important;
    margin: 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 65% !important;
  }
}

@media (min-width: 1025px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 41.666667% !important;
    /* w-5/12 = 41.666667% */
    max-width: 48rem;
    /* max-w-3xl */
  }
}

/* —— eTresor-guide (turbo_tour) —— */
.etresor-guide-highlight,
[data-turbo-tour-active="true"] {
  position: relative;
  z-index: 10050 !important;
  box-shadow: 0 0 0 3px rgba(178, 58, 36, 0.55), 0 12px 32px rgba(18, 22, 19, 0.18) !important;
  border-radius: 12px;
}

.turbo-tour-tooltip.etresor-guide-tooltip {
  position: fixed;
  z-index: 10060;
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(18, 22, 19, 0.18);
  padding: 16px;
  outline: none;
}

.etresor-guide-tooltip__brand {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b23a24;
}

.turbo-tour-tooltip__progress {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.turbo-tour-tooltip__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #121613;
  line-height: 1.3;
}

.turbo-tour-tooltip__body {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5563;
}

.turbo-tour-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.turbo-tour-tooltip__actions {
  display: flex;
  gap: 8px;
}

.turbo-tour-tooltip__button {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.turbo-tour-tooltip__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.turbo-tour-tooltip__button--primary {
  background: #b23a24;
  color: #fff;
}

.turbo-tour-tooltip__button--primary:hover:not(:disabled) {
  background: #961e0f;
}

.turbo-tour-tooltip__button--secondary {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.turbo-tour-tooltip__button--secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

.turbo-tour-tooltip__button--ghost {
  background: transparent;
  color: #6b7280;
  padding-left: 4px;
  padding-right: 4px;
}

.turbo-tour-tooltip__button--ghost:hover:not(:disabled) {
  color: #111827;
}
/* Auth shell Delta Nation — password reset / OTP / nouveau mot de passe */
@import url(/assets/agent/delta_nation_tokens-1469c9739051ded38224deb4f30dec6958c49c76d4563abcc0167e51a455639b.css);

.ng-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg-page);
  font-family: "Open Sans", system-ui, sans-serif;
}

.ng-auth-card {
  width: 100%;
  max-width: 1080px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle, #e7eae8);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(18, 22, 19, 0.06));
  overflow: hidden;
  animation: ng-auth-fade-up 420ms ease-out;
}

.ng-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.ng-auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 36px;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(18, 121, 20, 0.06), transparent 55%),
    #fff;
}

.ng-auth-form-inner {
  width: 100%;
  max-width: 420px;
}

.ng-auth-logo {
  display: inline-flex;
  margin-bottom: 28px;
}

.ng-auth-logo img {
  height: 72px;
  width: auto;
}

.ng-auth-title {
  margin: 0 0 8px;
  color: var(--fg-1, #121613);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ng-auth-sub {
  margin: 0 0 28px;
  color: var(--fg-3, #6b726e);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.ng-auth-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ng-auth-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ng-auth-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-default, #d8dcd9);
  border-radius: 10px;
  background: #fff;
  color: var(--fg-2, #4d534f);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ng-auth-channel .lucide {
  width: 16px;
  height: 16px;
}

.ng-auth-channel:hover {
  background: var(--n-50, #f1f3f2);
  border-color: var(--border-strong, #c0c6c2);
}

.ng-auth-channel.is-active.is-email,
.ng-auth-channel.is-active.is-sms {
  background: var(--ng-green-500);
  border-color: var(--ng-green-600);
  color: #fff;
}

.ng-auth-channel.is-active.is-whatsapp {
  background: var(--ng-green-600);
  border-color: var(--ng-green-700);
  color: #fff;
}

.ng-auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ng-auth-form .ng-field.hidden,
.ng-auth-body .ng-field.hidden {
  display: none !important;
}

.ng-auth-links {
  display: flex;
  justify-content: flex-end;
}

.ng-auth-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ng-auth-submit {
  flex: 1;
  min-width: 160px;
  justify-content: center;
}

.ng-auth-otp {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 20px;
  font-weight: 700;
}

.ng-auth-visual {
  position: relative;
  overflow: hidden;
  background: var(--ng-green-700);
  padding: 0;
}

.ng-auth-visual-bg {
  display: none;
}

.ng-auth-visual-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
  z-index: 2;
  animation: ng-auth-fade-in 560ms ease-out;
}

.ng-auth-visual-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(7, 57, 8, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
}

.ng-auth-visual-caption strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ng-auth-visual-caption span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
  line-height: 1.4;
}

.ng-auth-channel:active {
  transform: scale(0.98);
}

.ng-auth-security {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ng-green-200, #9dcd9f);
  border-radius: 10px;
  background: var(--ng-green-50, #e8f3e8);
  color: var(--ng-green-700, #0a4f0c);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.ng-auth-security .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ng-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ng-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2, #4d534f);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ng-auth-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--ng-green-500);
}

.ng-auth-password {
  position: relative;
}

.ng-auth-password .ng-input {
  padding-right: 44px;
}

.ng-auth-eye {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-3, #6b726e);
  cursor: pointer;
}

.ng-auth-eye:hover {
  color: var(--fg-1, #121613);
  background: var(--n-50, #f1f3f2);
}

.ng-auth-strength {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ng-auth-strength-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--n-100, #e7eae8);
  overflow: hidden;
}

.ng-auth-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 180ms ease, background 180ms ease;
}

.ng-auth-strength-bar span.is-weak { background: #b23a24; }
.ng-auth-strength-bar span.is-fair { background: var(--ng-orange-500, #ff8c00); }
.ng-auth-strength-bar span.is-good { background: var(--ng-green-400, #2e9233); }
.ng-auth-strength-bar span.is-strong { background: var(--ng-green-600, #0e6510); }

.ng-auth-strength-label {
  margin: 0;
  color: var(--fg-2, #4d534f);
  font-size: 12px;
  font-weight: 700;
}

.ng-auth-strength-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.ng-auth-strength-rules li {
  position: relative;
  padding-left: 16px;
  color: var(--fg-3, #6b726e);
  font-size: 12px;
  font-weight: 500;
}

.ng-auth-strength-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-300, #c0c6c2);
}

.ng-auth-strength-rules li.is-met {
  color: var(--ng-green-700, #0a4f0c);
}

.ng-auth-strength-rules li.is-met::before {
  background: var(--ng-green-500);
}

.ng-auth-resend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.ng-auth-resend-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.ng-auth-resend-btn:disabled,
.ng-auth-resend-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ng-auth-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ng-auth-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ng-green-50, #e8f3e8);
  color: var(--ng-green-600, #0e6510);
}

.ng-auth-success-icon .lucide {
  width: 28px;
  height: 28px;
}

.ng-auth-recaptcha {
  min-height: 0;
}

.ng-auth-page .ng-input:focus-visible,
.ng-auth-page .ng-btn:focus-visible,
.ng-auth-page .ng-link:focus-visible,
.ng-auth-page .ng-auth-channel:focus-visible,
.ng-auth-page .ng-auth-eye:focus-visible,
.ng-auth-page .ng-auth-check input:focus-visible {
  outline: 2px solid var(--ng-green-500);
  outline-offset: 2px;
}

@keyframes ng-auth-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ng-auth-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .ng-auth-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ng-auth-visual {
    min-height: 220px;
    order: -1;
  }

  .ng-auth-form-pane {
    padding: 28px 20px 36px;
  }

  .ng-auth-title {
    font-size: 22px;
  }
}
.choices {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  font-size: 16px
}

.choices:focus {
  outline: 0
}

.choices:last-child {
  margin-bottom: 0
}

.choices.is-open {
  overflow: initial
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none
}

.choices.is-disabled .choices__item {
  cursor: not-allowed
}

.choices [hidden] {
  display: none !important
}

.choices[data-type*=select-one] {
  cursor: pointer
}

.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 7.5px
}

.choices[data-type*=select-one] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0
}

.choices[data-type*=select-one] .choices__button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: .25
}

.choices[data-type*=select-one] .choices__button:focus,
.choices[data-type*=select-one] .choices__button:hover {
  opacity: 1
}

.choices[data-type*=select-one] .choices__button:focus {
  box-shadow: 0 0 0 2px #0346f2
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  display: none
}

.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none
}

.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #333;
  margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
  cursor: text
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  position: relative;
  display: inline-block;
  margin: 0 -4px 0 8px;
  padding-left: 16px;
  border-left: 1px solid #0544e6;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: .75;
  border-radius: 0
}

.choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=select-multiple] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover {
  opacity: 1
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #ffffff;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
  border-radius: 6px;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: #b7b7b7
}

.choices.is-invalid .choices__inner {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.field-with-errors .choices__inner {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0
}

.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none
}

.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%
}

[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px
}

.choices__list--single .choices__item {
  width: 100%
}

.choices__list--multiple {
  display: inline
}

.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #0346f2;
  border: 1px solid #0238c2;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box
}

.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px
}

[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #0238c2;
  border: 1px solid #0544e6
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaa;
  border: 1px solid #919191
}


@media screen and (min-width: 550px),
print {
  .country-select .choices__list--dropdown {
    min-width: 252px;
  }
}

.country-select .choices__inner {
  padding: 2px !important;
  min-height: 32px;
  font-size: 13px;
}

.country-select .choices__list.choices__list--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  /* padding: 2px; */
}

.choices__list--dropdown {
  visibility: hidden;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
  will-change: visibility
}

.choices__list--dropdown.is-active {
  visibility: visible
}

.is-open .choices__list--dropdown {
  border-color: #b7b7b7
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: .25rem .25rem 0 0
}

.choices__list--dropdown .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position
}

.choices__list--dropdown .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px
}

[dir=rtl] .choices__list--dropdown .choices__item {
  text-align: right
}

@media (min-width:640px) {
  .choices__list--dropdown .choices__item--selectable {
    padding-right: 100px
  }

  .choices__list--dropdown .choices__item--selectable::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
  }

  [dir=rtl] .choices__list--dropdown .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px
  }

  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
    right: auto;
    left: 10px
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f2f2f2
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
  opacity: .5
}

.choices__item {
  cursor: default
}

.choices__item--selectable {
  cursor: pointer
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
  opacity: .5
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer
}

.choices__button:focus,
.choices__input:focus {
  outline: 0
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px
}

[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0
}

.choices__placeholder {
  opacity: .5
}

/* select country-select */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
          box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #0346f2;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #0346f2;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #0346f2;
          box-shadow: -10px 0 0 #0346f2;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #0346f2, 5px 0 0 #0346f2;
          box-shadow: -5px 0 0 #0346f2, 5px 0 0 #0346f2;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.flash-notification-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

.flash-notification {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #6b7280;
  border-radius: .5rem;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .18);
  animation: notificationSlideInOut 5s cubic-bezier(.22, 1, .36, 1) forwards;
  pointer-events: auto;
}

.flash-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .125rem;
}

.flash-notification-icon svg {
  margin-right: 0;
}

.flash-notification-content {
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}

.flash-notification--success {
  border-left-color: #16a34a;
}

.flash-notification--error {
  border-left-color: #dc2626;
}

.flash-notification--warning {
  border-left-color: #d97706;
}

.flash-notification--info {
  border-left-color: #2563eb;
}

@keyframes notificationSlideInOut {
  0% {
    opacity: 0;
    transform: translateX(120%);
  }

  10% {
    opacity: 1;
    transform: translateX(0);
  }

  86% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@media (max-width: 640px) {
  .flash-notification-stack {
    top: .75rem;
    right: .75rem;
    width: calc(100vw - 1.5rem);
  }
}
.pagy {
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #6b7280;
  align-items: center;
  gap: 0.5rem;
}

.pagy> :not([hidden])~ :not([hidden]) {
  --space-reverse: 0;
  margin-right: calc(0.25rem * var(--space-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
}

.pagy a:not(.gap) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 9px;
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  color: #374151;
  font-weight: 600;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e5e3;
}

.pagy a:not(.gap):hover {
  background-color: #f7f8f8;
  color: #121613;
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  cursor: default;
  background-color: #f9fafb;
  color: #9ca3af;
  opacity: 0.6;
}

.pagy a:not(.gap).current {
  background: #127914;
  color: white;
  font-weight: 700;
  border-color: #127914;
  box-shadow: 0 1px 2px rgba(18, 22, 19, 0.04);
}

.pagy a:not(.gap).current:hover {
  background: #0f6511;
  border-color: #0f6511;
}

.pagy label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #f3f4f6;
  padding: 0.5rem 0.75rem;
  color: #374151;
  font-weight: 500;
  font-family: 'Open Sans', sans-serif;
}

.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
}

.pagy label input:focus {
  outline: none;
  border-color: #127914;
  box-shadow: 0 0 0 3px rgba(18, 121, 20, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .pagy {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
  
  .pagy a:not(.gap) {
    min-width: 2rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}
/* Material 3 — page « Paramètres du système » (settings#edit).
   Tout est préfixé .m3-settings pour ne rien laisser fuir dans le reste de l'app.
   Palette dérivée des tokens de marque e-tresor (vert brand-600). */

.m3-settings {
  --m3-primary: #0e6510;
  --m3-primary-hover: #0a4f0c;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #cde6ce;
  --m3-on-primary-container: #052806;
  --m3-surface: #fafbfa;
  --m3-surface-container: #f1f3f2;
  --m3-card: #ffffff;
  --m3-on-surface: #121613;
  --m3-on-surface-variant: #4d534f;
  --m3-outline: #6b726e;
  --m3-outline-variant: #e7eae8;
  --m3-error: #b23a24;
  --m3-elev1: 0 1px 2px rgba(18, 22, 19, .06), 0 1px 3px 1px rgba(18, 22, 19, .04);
  --m3-elev2: 0 2px 6px 2px rgba(18, 22, 19, .10), 0 1px 2px rgba(18, 22, 19, .16);

  font-family: "Roboto", "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--m3-on-surface);
  display: block;
}

/* La page occupe toute la largeur utile : on neutralise le cadre de .ng-page
   (max-width + padding) pour que le bandeau colle à la sidebar et au bord droit.
   Repli propre si :has() n'est pas supporté : la page reste dans le cadre. */
.ng-page:has(> .m3-settings) {
  max-width: none;
  padding: 0;
}

/* ---------- App bar ---------- */
.m3-settings .m3-appbar {
  position: sticky;
  top: 60px; /* juste sous .ng-top (navbar globale, 60px) */
  z-index: 5;
  background: var(--m3-surface-container);
  border-bottom: 1px solid var(--m3-outline-variant);
  padding: 0 clamp(16px, 4vw, 32px);
}

.m3-settings .m3-appbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  min-height: 54px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.m3-settings .m3-appbar__titles { flex: 1 1 200px; min-width: 0; }
.m3-settings .m3-appbar__title { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.2; }
.m3-settings .m3-appbar__sub { margin: 2px 0 0; font-size: 12px; color: var(--m3-on-surface-variant); }

.m3-settings .m3-icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--m3-on-surface-variant);
  text-decoration: none;
}
.m3-settings .m3-icon-btn:hover { background: rgba(77, 83, 79, .10); }
.m3-settings .m3-icon-btn .material-symbols-outlined { font-size: 22px; }

/* ---------- Boutons ---------- */
.m3-settings .m3-btn {
  font: 500 14px/1 "Roboto", "Open Sans", sans-serif;
  letter-spacing: .01em;
  height: 40px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.m3-settings .m3-btn:focus-visible { outline: 3px solid rgba(14, 101, 16, .35); outline-offset: 2px; }

.m3-settings .m3-btn--text {
  padding: 0 12px;
  background: none;
  color: var(--m3-primary);
  text-decoration: none;
}
.m3-settings .m3-btn--text:hover { background: rgba(14, 101, 16, .08); }

.m3-settings .m3-btn--filled {
  padding: 0 24px;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  box-shadow: var(--m3-elev1);
}
.m3-settings .m3-btn--filled:hover { background: var(--m3-primary-hover); }

/* ---------- Layout ---------- */
.m3-settings .m3-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 32px) 148px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.m3-settings .m3-nav {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m3-settings .m3-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  border-radius: 26px;
  font: 500 14px/1 "Roboto", "Open Sans", sans-serif;
  color: var(--m3-on-surface-variant);
  text-decoration: none;
}
.m3-settings .m3-nav__item .material-symbols-outlined { font-size: 20px; }
.m3-settings .m3-nav__item:hover { background: rgba(77, 83, 79, .08); }
.m3-settings .m3-nav__item.is-active {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}

.m3-settings .m3-nav__meta {
  margin: 14px 16px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--m3-on-surface-variant);
}
.m3-settings .m3-nav__meta-user { display: block; font-weight: 500; color: var(--m3-on-surface); }

.m3-settings .m3-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ---------- Cartes ---------- */
.m3-settings .m3-card {
  background: var(--m3-card);
  border: 1px solid var(--m3-outline-variant);
  border-radius: 16px;
  box-shadow: var(--m3-elev1);
  scroll-margin-top: 132px;
}
.m3-settings .m3-card__head { padding: 20px 24px 4px; }
.m3-settings .m3-card__head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.m3-settings .m3-card__head p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--m3-on-surface-variant);
}

/* ---------- Liste de switches ---------- */
.m3-settings .m3-list { list-style: none; margin: 0; padding: 8px 0 12px; }
.m3-settings .m3-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 10px 24px;
}
.m3-settings .m3-list__row + .m3-list__row { border-top: 1px solid var(--m3-outline-variant); }
.m3-settings .m3-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m3-settings .m3-list__title { font-size: 15px; font-weight: 500; }
.m3-settings .m3-list__hint { font-size: 13px; line-height: 1.45; color: var(--m3-on-surface-variant); }

/* ---------- Switch M3 (pur CSS, fonctionne sans JS) ---------- */
.m3-settings .m3-switch { flex: none; display: inline-flex; cursor: pointer; }
.m3-settings .m3-switch__input { position: absolute; width: 0; height: 0; opacity: 0; }
.m3-settings .m3-switch__track {
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background: var(--m3-surface-container);
  border: 2px solid var(--m3-outline);
  display: flex;
  align-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.m3-settings .m3-switch__thumb {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  background-color: var(--m3-outline);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: width .15s ease, height .15s ease, margin-left .15s ease, background-color .15s ease;
}
.m3-settings .m3-switch__input:checked + .m3-switch__track {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
}
.m3-settings .m3-switch__input:checked + .m3-switch__track .m3-switch__thumb {
  width: 24px;
  height: 24px;
  margin-left: 22px;
  background-color: #fff;
  /* petit check vert à l'intérieur du pouce quand le switch est activé */
  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='%230e6510' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.m3-settings .m3-switch__input:focus-visible + .m3-switch__track {
  outline: 3px solid rgba(14, 101, 16, .35);
  outline-offset: 2px;
}

/* ---------- Champ montant (outlined text field) ---------- */
.m3-settings .m3-grid {
  padding: 20px 24px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px 20px;
}
.m3-settings .m3-field-wrap { min-width: 0; }
.m3-settings .m3-field { position: relative; display: block; }
.m3-settings .m3-field__label {
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 4px;
  background: var(--m3-card);
  font: 400 12px/1 "Roboto", "Open Sans", sans-serif;
  color: var(--m3-on-surface-variant);
}
.m3-settings .m3-field__input {
  width: 100%;
  height: 56px;
  padding: 0 64px 0 16px;
  border: 1px solid var(--m3-outline);
  border-radius: 8px;
  background: transparent;
  font: 500 16px/1 "Roboto Mono", "Open Sans", monospace;
  color: var(--m3-on-surface);
  -webkit-appearance: none;
  appearance: none;
}
.m3-settings .m3-field__input:focus {
  outline: none;
  box-shadow: none;
  border: 2px solid var(--m3-primary);
  padding-left: 15px;
  padding-right: 63px;
}
.m3-settings .m3-field--error .m3-field__input { border-color: var(--m3-error); }
.m3-settings .m3-field--error .m3-field__label { color: var(--m3-error); }
.m3-settings .m3-field__suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--m3-on-surface-variant);
  pointer-events: none;
}
.m3-settings .m3-field__msg {
  margin: 6px 0 0;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--m3-on-surface-variant);
}
.m3-settings .m3-field__msg--error { color: var(--m3-error); }

/* ---------- Bannière d'erreur ---------- */
.m3-settings .m3-banner {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f7e7e3;
  color: #5b1a10;
}
.m3-settings .m3-banner .material-symbols-outlined { color: var(--m3-error); flex: none; }
.m3-settings .m3-banner__title { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.m3-settings .m3-banner ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

/* ---------- Snackbar « modifications non enregistrées » ---------- */
.m3-settings .m3-snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  width: min(640px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 8px 8px 16px;
  background: #20231f;
  color: #f1f3f2;
  border-radius: 8px;
  box-shadow: var(--m3-elev2);
}
.m3-settings .m3-snackbar[hidden] { display: none; }
.m3-settings .m3-snackbar > span { font-size: 14px; }
.m3-settings .m3-snackbar__actions { flex: none; display: flex; align-items: center; gap: 4px; }

.m3-settings .m3-btn--snack {
  height: 36px;
  padding: 0 16px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
.m3-settings .m3-btn--snack:hover { background: #bcdcbd; }
.m3-settings .m3-btn--snack-text {
  height: 36px;
  padding: 0 12px;
  background: none;
  color: #9dcd9f;
  text-decoration: none;
}
.m3-settings .m3-btn--snack-text:hover { background: rgba(157, 205, 159, .12); }

/* ========== Vue de synthèse (settings#index) ========== */

.m3-settings .m3-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
  font: 500 13px/1 "Roboto", "Open Sans", sans-serif;
  color: var(--m3-on-surface-variant);
  white-space: nowrap;
}

/* Menu ⋮ de l'app bar (réutilise le contrôleur Stimulus row-menu) */
.m3-settings .m3-menu { flex: none; }
.m3-settings .m3-menu__list {
  position: fixed;
  z-index: 40;
  min-width: 232px;
  padding: 8px 0;
  background: var(--m3-card);
  border: 1px solid var(--m3-outline-variant);
  border-radius: 12px;
  box-shadow: var(--m3-elev2);
}
.m3-settings .m3-menu__list[hidden] { display: none; }
.m3-settings .m3-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font: 400 14px/1.2 "Roboto", "Open Sans", sans-serif;
  color: var(--m3-on-surface);
  text-decoration: none;
}
.m3-settings .m3-menu__item .material-symbols-outlined { font-size: 20px; color: var(--m3-on-surface-variant); }
.m3-settings .m3-menu__item:hover { background: rgba(77, 83, 79, .08); }

.m3-settings .m3-layout--single { display: block; }

.m3-settings .m3-card--round { border-radius: 28px; border-color: transparent; }
.m3-settings .m3-card--round .m3-card__head { padding: 24px 28px 0; }
.m3-settings .m3-card__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 28px 0;
}
.m3-settings .m3-card__head-row .m3-card__head { padding: 0; }
.m3-settings .m3-card__meta {
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--m3-on-surface-variant);
  white-space: nowrap;
}

/* Pastilles de canal */
.m3-settings .m3-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px 28px 28px;
}
.m3-settings .m3-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
}
.m3-settings .m3-chip.is-on { background: var(--m3-primary-container); }
.m3-settings .m3-chip.is-off { background: var(--m3-surface-container); }
.m3-settings .m3-chip__circle {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.m3-settings .m3-chip__circle .material-symbols-outlined { font-size: 24px; }
.m3-settings .m3-chip.is-on .m3-chip__circle { background: var(--m3-primary); color: #fff; }
.m3-settings .m3-chip.is-off .m3-chip__circle { border: 2px solid var(--m3-outline); }
.m3-settings .m3-chip__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m3-settings .m3-chip__label { font-size: 15px; font-weight: 500; }
.m3-settings .m3-chip__state { font-size: 12.5px; }
.m3-settings .m3-chip.is-on .m3-chip__label { color: var(--m3-on-primary-container); }
.m3-settings .m3-chip.is-on .m3-chip__state { color: #2b5e3c; }
.m3-settings .m3-chip.is-off .m3-chip__state { color: var(--m3-on-surface-variant); }

/* Cercles de seuil */
.m3-settings .m3-dials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  padding: 20px 28px 28px;
}
.m3-settings .m3-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.m3-settings .m3-dial__circle {
  width: 124px;
  height: 124px;
  border-radius: 999px;
  background: var(--m3-primary-container);
  border: 3px solid var(--m3-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.m3-settings .m3-dial__amount {
  font: 500 19px/1 "Roboto Mono", "Open Sans", monospace;
  color: var(--m3-on-primary-container);
}
.m3-settings .m3-dial__unit { font-size: 10.5px; letter-spacing: .06em; color: #2b5e3c; }
.m3-settings .m3-dial__label { font: 500 14px/1 "Roboto", "Open Sans", sans-serif; }
.m3-settings .m3-dial.is-muted .m3-dial__circle {
  background: var(--m3-surface-container);
  border-color: var(--m3-outline-variant);
}
.m3-settings .m3-dial.is-muted .m3-dial__amount,
.m3-settings .m3-dial.is-muted .m3-dial__unit { color: var(--m3-on-surface-variant); }

/* Pied de synthèse */
.m3-settings .m3-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--m3-on-surface-variant);
}
.m3-settings .m3-footer__group { display: flex; align-items: center; gap: 10px; }
.m3-settings .m3-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--m3-outline);
  border-radius: 999px;
}
.m3-settings .m3-select select {
  appearance: none;
  -webkit-appearance: none;
  height: 100%;
  margin: 0;
  padding: 0 34px 0 16px;
  border: 0;
  background: transparent;
  font: 500 14px/1 "Roboto", "Open Sans", sans-serif;
  color: var(--m3-on-surface);
  cursor: pointer;
}
.m3-settings .m3-select select:focus { outline: none; }
.m3-settings .m3-select__caret {
  position: absolute;
  right: 8px;
  pointer-events: none;
  font-size: 20px;
  color: var(--m3-on-surface-variant);
}
.m3-settings .m3-page-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(77, 72, 63, .06);
  color: var(--m3-outline);
}
.m3-settings .m3-page-btn:not(:disabled) { color: var(--m3-on-surface-variant); cursor: pointer; }
.m3-settings .m3-page-btn:not(:disabled):hover { background: rgba(77, 72, 63, .12); }
.m3-settings .m3-page-btn .material-symbols-outlined { font-size: 20px; }

/* FAB étendu */
.m3-settings .m3-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  font: 500 14px/1 "Roboto", "Open Sans", sans-serif;
  text-decoration: none;
  box-shadow: var(--m3-elev2);
}
.m3-settings .m3-fab:hover { background: #bcdcbd; color: var(--m3-on-primary-container); }
.m3-settings .m3-fab__icon { font-size: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .m3-settings .m3-layout { grid-template-columns: 1fr; }
  .m3-settings .m3-nav { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .m3-settings .m3-nav__item { height: 44px; }
  .m3-settings .m3-nav__meta { width: 100%; margin: 4px 0 0; }
  .m3-settings .m3-nav__meta-user { display: inline; }
  .m3-settings .m3-card { scroll-margin-top: 96px; }
}

@media (max-width: 560px) {
  .m3-settings .m3-appbar { position: static; }
  .m3-settings .m3-nav { top: 0; }
  .m3-settings .m3-list__row { gap: 12px; }
  .m3-settings .m3-snackbar { flex-wrap: wrap; justify-content: flex-end; }
  .m3-settings .m3-snackbar > span { flex: 1 1 100%; }

  .m3-settings .m3-card--round .m3-card__head,
  .m3-settings .m3-card__head-row { padding-left: 20px; padding-right: 20px; }
  .m3-settings .m3-chips,
  .m3-settings .m3-dials { padding: 16px 20px 24px; }

  .m3-settings .m3-fab { right: 16px; bottom: 16px; padding: 0 16px; }
  .m3-settings .m3-fab span:not(.m3-fab__icon) { display: none; }
}
/* ==========================================================================
   Tableau de bord · Material 3 (docs/design/Material 3 design fou)
   Palette et géométrie figées par le handoff : ne pas réutiliser les
   tokens `brand`/`accent` du thème global sur cette page.
   ========================================================================== */
.md3-dashboard {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: #191D19;
  background: #F7FBF5;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.md3-mono {
  font-family: "Roboto Mono", monospace;
}

.md3-tabular {
  font-variant-numeric: tabular-nums;
}

/* Grilles des 4 blocs */
.md3-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.md3-ring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.md3-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 16px;
  align-items: start;
}

.md3-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .md3-chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Bloc 1 — cartes de solde */
.md3-balance-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md3-balance-card.is-filled {
  background: #1F6B45;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 32, 22, .18), 0 4px 8px -2px rgba(16, 32, 22, .12);
}

.md3-balance-card.is-tonal {
  background: #B4F1CB;
  color: #00522F;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .10);
}

.md3-balance-card.is-soon {
  background: #F7FBF5;
  border: 1px solid #C2C9C0;
}

/* Variante "alerte" (hors handoff admin) : mêmes tokens error-container que
   la puce "En attente" du bloc listes, pour les métriques qui appellent une
   action (ex. pièces d'identité manquantes côté agent). */
.md3-balance-card.is-alert {
  background: #FFDAD5;
  color: #8C1D18;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .10);
}

.md3-balance-card.is-alert .md3-icon-square {
  background: rgba(140, 29, 24, .10);
}

.md3-balance-card.is-alert .md3-btn-tonal {
  background: rgba(140, 29, 24, .10);
}

.md3-balance-card.is-alert .md3-btn-tonal:hover {
  background: rgba(140, 29, 24, .18);
}

/* Variante "en attente" (hors handoff admin) : même ton ambre que la puce
   ".md3-chip-soon", pour les métriques qui signalent une file d'attente
   (ex. demandes de modification client en attente d'approbation). */
.md3-balance-card.is-pending {
  background: #FFDEA8;
  color: #4B2800;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .10);
}

.md3-balance-card.is-pending .md3-icon-square {
  background: rgba(75, 40, 0, .10);
}

.md3-balance-card.is-pending .md3-btn-tonal {
  background: rgba(75, 40, 0, .10);
}

.md3-balance-card.is-pending .md3-btn-tonal:hover {
  background: rgba(75, 40, 0, .18);
}

/* Variante "neutre" (hors handoff admin) : mêmes tokens que ".is-soon"
   (cartes "Bientôt"), mais pour des métriques réelles déjà disponibles —
   pas de valeur masquée ni de puce "Bientôt". */
.md3-balance-card.is-neutral {
  background: #F7FBF5;
  border: 1px solid #C2C9C0;
  color: #191D19;
}

.md3-balance-card.is-neutral .md3-icon-square {
  background: #E4EAE1;
  color: #767E75;
}

.md3-balance-card.is-neutral .md3-btn-tonal {
  background: rgba(25, 29, 25, .06);
  color: #414942;
}

.md3-balance-card.is-neutral .md3-btn-tonal:hover {
  background: rgba(25, 29, 25, .12);
}

.md3-balance-decoration-1 {
  position: absolute;
  right: -48px;
  top: -64px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}

.md3-balance-decoration-2 {
  position: absolute;
  right: 26px;
  bottom: -92px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
}

.md3-icon-square {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.md3-btn-tonal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .15s ease;
}

.md3-balance-card.is-filled .md3-icon-square,
.md3-balance-card.is-filled .md3-btn-tonal {
  background: rgba(255, 255, 255, .16);
}

.md3-balance-card.is-filled .md3-btn-tonal:hover {
  background: rgba(255, 255, 255, .28);
}

.md3-balance-card.is-tonal .md3-icon-square {
  background: rgba(0, 82, 47, .12);
}

.md3-balance-card.is-tonal .md3-btn-tonal {
  background: rgba(0, 82, 47, .10);
}

.md3-balance-card.is-tonal .md3-btn-tonal:hover {
  background: rgba(0, 82, 47, .18);
}

.md3-balance-title {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}

.md3-balance-amount {
  position: relative;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.md3-balance-amount .unit {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .9;
}

.md3-chip-soon {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #FFDEA8;
  color: #4B2800;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
}

.md3-masked-label {
  font-size: 14px;
  font-weight: 500;
  color: #767E75;
  letter-spacing: .02em;
}

.md3-masked-value {
  margin-top: 4px;
  font-family: "Roboto Mono", monospace;
  font-size: 26px;
  font-weight: 500;
  color: #B3BAB2;
  letter-spacing: .04em;
}

.md3-masked-value .unit {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  margin-left: 8px;
}

/* Bloc 2 — anneaux KPI */
.md3-ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .08), 0 1px 3px 1px rgba(16, 32, 22, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.md3-ring-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(16, 32, 22, .14);
}

.md3-ring-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #191D19;
  text-align: center;
  text-wrap: pretty;
}

.md3-ring-sub {
  margin-top: 4px;
  font-size: 12px;
  color: #767E75;
  text-align: center;
}

/* Bloc 3 — listes */
.md3-list-card {
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .08), 0 1px 3px 1px rgba(16, 32, 22, .06);
  overflow: hidden;
}

.md3-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 12px;
}

.md3-list-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .01em;
}

.md3-list-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #1F6B45;
  transition: background .15s ease;
}

.md3-list-link:hover {
  background: #E4F3E9;
}

.md3-list-cols {
  display: grid;
  gap: 16px;
  padding: 8px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  color: #767E75;
}

.md3-list-row {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid #E1E7E0;
  font-size: 15px;
  transition: background .1s ease;
}

.md3-list-row:hover {
  background: #F2F7F1;
}

.md3-list-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: #767E75;
}

.md3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.md3-chip .material-symbols-outlined {
  font-size: 18px;
}

.md3-chip-success {
  background: #B4F1CB;
  color: #00522F;
}

.md3-chip-pending {
  background: #FFDAD5;
  color: #8C1D18;
}

.md3-chip-warning {
  background: #FFDEA8;
  color: #4B2800;
}

.md3-chip-neutral {
  background: #E4EAE1;
  color: #414942;
}

.md3-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E8F5EC;
  color: #1F6B45;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Bloc 4 — graphiques */
.md3-chart-card {
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 32, 22, .08), 0 1px 3px 1px rgba(16, 32, 22, .06);
  padding: 22px 24px 18px;
}

.md3-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.md3-chart-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .01em;
}

.md3-chart-sub {
  margin-top: 2px;
  font-size: 13px;
  color: #767E75;
}

.md3-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #414942;
}

.md3-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.md3-chart-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.md3-chart-body {
  margin-top: 14px;
}

.md3-chart-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 13px;
  color: #767E75;
}

.md3-region-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md3-region-row {
  display: grid;
  grid-template-columns: 96px 1fr 28px;
  gap: 14px;
  align-items: center;
}

.md3-region-label {
  font-size: 15px;
  color: #191D19;
}

.md3-region-track {
  height: 10px;
  border-radius: 5px;
  background: #E4EAE1;
  overflow: hidden;
}

.md3-region-fill {
  height: 100%;
  border-radius: 5px;
  background: #1F6B45;
}

.md3-region-value {
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}

/* ==========================================================================
   Utilitaires de mise en page utilisés par les vues/partiels md3-* (rings,
   cartes de solde) qui tournent aussi bien sous le layout admin (Tailwind)
   que sous le layout agent (pas de Tailwind, voir agent.css). Mêmes noms et
   mêmes valeurs que les utilitaires Tailwind équivalents, pour rester sans
   effet quand Tailwind est déjà présent.
   ========================================================================== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

.inset-2 {
  inset: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.text-right {
  text-align: right;
}
html {
  position: relative;
  font-size: 16px;
}

body {
  letter-spacing: 0.5px;
  font-family: "Open Sans", sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  color: #282828;
  font-weight: 700;
  margin: 10px 0
}

p {
  font-weight: 500;
  line-height: 1.7;
}

* {
  outline: 0 !important
}

a {
  transition: all 0.3s ease-in-out;
}

.loader-v1 {
  border: 6px solid #f8f6f1;
  border-top: 6px solid #f05152;
  border-bottom: 6px solid #f05152;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-img-preview {
  max-width: 500px;
}

.form-img-preview img {
  max-width: 100px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */