/*
  Design System UFAP UNSa Justice
  Fondation visuelle globale reutilisable.
  Ce fichier ne contient aucune logique metier.
*/

:root {
  --ufap-navy: #1C2C4D;
  --ufap-cyan: #009EE3;
  --ufap-gray: #706F6F;
  --ufap-bg: #F4F7FB;
  --ufap-card: rgba(255,255,255,.78);
  --ufap-border: rgba(28,44,77,.12);
  --ufap-radius: 24px;

  --ufap-navy-2: #243a66;
  --ufap-text: #172033;
  --ufap-muted: #667085;
  --ufap-success: #147a4f;
  --ufap-warning: #9a6408;
  --ufap-danger: #b72f2f;
  --ufap-white: #ffffff;
  --ufap-focus: rgba(0,158,227,.14);
  --ufap-shadow: 0 25px 60px rgba(28,44,77,.16);
  --ufap-shadow-soft: 0 18px 50px rgba(28,44,77,.10);
  --ufap-shadow-hover: 0 22px 54px rgba(28,44,77,.18);
  --ufap-radius-sm: 14px;
  --ufap-radius-md: 18px;
  --ufap-font: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto !important;
}

body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto !important;
}

.ufap-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ufap-text);
  font-family: var(--ufap-font);
  background:
    radial-gradient(circle at top left, rgba(0,158,227,.10), transparent 35%),
    radial-gradient(circle at bottom right, rgba(28,44,77,.08), transparent 40%),
    linear-gradient(135deg, #f4f7fb 0%, #edf3fa 40%, #ffffff 100%);
}

.ufap-container {
  width: min(100% - 32px, 1320px);
  margin-inline: auto;
}

.ufap-card,
.ufap-kpi-card,
.ufap-modal {
  background: var(--ufap-card);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--ufap-radius);
  box-shadow: var(--ufap-shadow-soft);
  backdrop-filter: blur(18px);
}

.ufap-card {
  padding: clamp(18px, 2vw, 28px);
}

.ufap-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
}

.ufap-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ufap-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ufap-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ufap-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ufap-border);
  border-radius: var(--ufap-radius-sm);
  background: rgba(255,255,255,.78);
  color: var(--ufap-navy);
  font-family: var(--ufap-font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(28,44,77,.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease;
}

.ufap-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(0,158,227,.22);
  box-shadow: var(--ufap-shadow-hover);
}

.ufap-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 5px var(--ufap-focus), var(--ufap-shadow-hover);
}

.ufap-btn:disabled,
.ufap-btn.is-disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ufap-btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ufap-navy), var(--ufap-navy-2));
  color: var(--ufap-white);
  box-shadow: 0 14px 34px rgba(28,44,77,.24);
}

.ufap-btn-primary:hover {
  filter: saturate(1.05);
  box-shadow: 0 18px 42px rgba(28,44,77,.30), 0 0 0 5px rgba(0,158,227,.08);
}

.ufap-btn-secondary {
  background: rgba(255,255,255,.86);
  color: var(--ufap-navy);
}

.ufap-input,
.ufap-select,
.ufap-textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(28,44,77,.13);
  border-radius: var(--ufap-radius-sm);
  background: rgba(255,255,255,.72);
  color: var(--ufap-text);
  font-family: var(--ufap-font);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ufap-textarea {
  min-height: 132px;
  resize: vertical;
}

.ufap-input:focus,
.ufap-select:focus,
.ufap-textarea:focus {
  outline: none;
  border-color: var(--ufap-cyan);
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 0 5px var(--ufap-focus);
}

.ufap-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ufap-border);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--ufap-navy);
  font-family: var(--ufap-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.ufap-badge--success {
  border-color: rgba(20,122,79,.18);
  background: rgba(20,122,79,.10);
  color: var(--ufap-success);
}

.ufap-badge--warning {
  border-color: rgba(245,158,11,.24);
  background: rgba(245,158,11,.12);
  color: var(--ufap-warning);
}

.ufap-badge--danger {
  border-color: rgba(183,47,47,.18);
  background: rgba(183,47,47,.10);
  color: var(--ufap-danger);
}

.ufap-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--ufap-radius);
  background: rgba(255,255,255,.72);
  box-shadow: var(--ufap-shadow-soft);
  backdrop-filter: blur(18px);
}

.ufap-table th,
.ufap-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(28,44,77,.08);
  text-align: left;
  vertical-align: top;
}

.ufap-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,.92);
  color: var(--ufap-navy);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.ufap-table tr:last-child td {
  border-bottom: 0;
}

.ufap-table tbody tr {
  transition: background .16s ease;
}

.ufap-table tbody tr:hover {
  background: rgba(0,158,227,.045);
}

.ufap-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: clamp(20px, 3vw, 32px);
  overflow: auto;
  box-shadow: var(--ufap-shadow);
}

.ufap-kpi-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.ufap-kpi-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,158,227,.12), transparent 70%);
  pointer-events: none;
}

.ufap-kpi-card__label {
  margin: 0;
  color: var(--ufap-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ufap-kpi-card__value {
  margin: 6px 0 0;
  color: var(--ufap-navy);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

.ufap-kpi-card__meta {
  margin: 8px 0 0;
  color: var(--ufap-muted);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .ufap-container {
    width: min(100% - 28px, 920px);
  }

  .ufap-grid--4,
  .ufap-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ufap-container {
    width: min(100% - 20px, 100%);
  }

  .ufap-grid,
  .ufap-grid--2,
  .ufap-grid--3,
  .ufap-grid--4 {
    grid-template-columns: 1fr;
  }

  .ufap-card,
  .ufap-kpi-card {
    border-radius: 20px;
    padding: 16px;
  }

  .ufap-btn,
  .ufap-input,
  .ufap-select,
  .ufap-textarea {
    min-height: 50px;
  }

  .ufap-table,
  .ufap-table thead,
  .ufap-table tbody,
  .ufap-table th,
  .ufap-table td,
  .ufap-table tr {
    display: block;
    width: 100%;
  }

  .ufap-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .ufap-table tbody {
    display: grid;
    gap: 14px;
  }

  .ufap-table tr {
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--ufap-shadow-soft);
    padding: 12px;
  }

  .ufap-table td {
    display: grid;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr);
    gap: 10px;
    border: 0;
    padding: 8px 4px;
  }

  .ufap-table td::before {
    content: attr(data-label);
    color: var(--ufap-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .ufap-modal {
    width: 100vw;
    max-height: calc(100dvh - 12px);
    border-radius: 28px 28px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Header global UFAP */
body .top-nav {
  position: static !important;
  top: auto !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 24px 60px rgba(28,44,77,.14) !important;
  backdrop-filter: blur(18px) !important;
}

body .workflow-header {
  position: sticky !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 24px 60px rgba(28,44,77,.14) !important;
  backdrop-filter: blur(18px) !important;
}

body .nav-brand,
body .brand {
  min-width: 0 !important;
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 5px 10px !important;
  border-radius: 18px !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

body .nav-brand img,
body .brand img {
  width: auto !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 20px rgba(28,44,77,.12)) !important;
}

body .nav-brand span,
body .brand span {
  min-width: 0 !important;
}

body .nav-links,
body .ufap-header-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body .nav-links a,
body .ufap-header-links a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 15px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

body .nav-links a:hover,
body .ufap-header-links a:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0,158,227,.20) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 28px rgba(28,44,77,.10) !important;
}

body .nav-links a[aria-current="page"],
body .ufap-header-links a[aria-current="page"] {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--ufap-navy), var(--ufap-navy-2)) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(28,44,77,.24) !important;
}

body .nav-links a.logout,
body .ufap-header-links a.logout {
  border-color: rgba(183,47,47,.16) !important;
  background: rgba(183,47,47,.10) !important;
  color: #a32727 !important;
}

body .nav-links a.logout:hover,
body .ufap-header-links a.logout:hover {
  border-color: transparent !important;
  background: linear-gradient(135deg, #b72f2f, #d24a4a) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(183,47,47,.24) !important;
}

body .ufap-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  color: var(--ufap-navy);
  box-shadow: var(--ufap-shadow-soft);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

body .ufap-nav-toggle span,
body .ufap-nav-toggle::before,
body .ufap-nav-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

body.ufap-nav-open .ufap-nav-toggle span {
  opacity: 0;
}

body.ufap-nav-open .ufap-nav-toggle::before {
  transform: translateY(7px) rotate(45deg);
}

body.ufap-nav-open .ufap-nav-toggle::after {
  transform: translateY(-7px) rotate(-45deg);
}

body .ufap-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15,23,42,.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  backdrop-filter: blur(4px);
}

body.ufap-nav-open .ufap-nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 900px) {
  body .top-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 70px !important;
    border-radius: 22px !important;
  }

  body .nav-brand {
    width: auto !important;
    justify-content: flex-start !important;
  }

  body .nav-brand span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .ufap-nav-toggle {
    display: inline-flex !important;
  }

  body .nav-links,
  body .ufap-header-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    width: min(88vw, 380px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: calc(18px + env(safe-area-inset-top)) 16px 18px !important;
    border-left: 1px solid rgba(255,255,255,.52) !important;
    background:
      radial-gradient(circle at top left, rgba(0,158,227,.12), transparent 38%),
      rgba(255,255,255,.96) !important;
    box-shadow: -22px 0 58px rgba(28,44,77,.22) !important;
    backdrop-filter: blur(20px) !important;
    transform: translateX(104%) !important;
    transition: transform .24s ease !important;
  }

  body.ufap-nav-open .nav-links,
  body.ufap-nav-open .ufap-header-links {
    transform: translateX(0) !important;
  }

  body .nav-links a,
  body .ufap-header-links a {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: flex-start !important;
    padding: 14px !important;
    font-size: 14px !important;
  }

  body .nav-links a.logout,
  body .ufap-header-links a.logout {
    margin-top: auto !important;
  }
}

/* Formulaires et actions globales UFAP */
body label,
body .field label,
body .search-row label,
body .filter-toggle label {
  display: block;
  margin-bottom: 7px;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.25;
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body select,
body textarea,
body .ufap-input,
body .ufap-select,
body .ufap-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(28,44,77,.13) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.76) !important;
  color: var(--ufap-text) !important;
  font-family: var(--ufap-font) !important;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease;
}

body textarea,
body .ufap-textarea {
  min-height: 120px;
  resize: vertical;
}

body select,
body .ufap-select {
  cursor: pointer;
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body select:focus,
body textarea:focus,
body .ufap-input:focus,
body .ufap-select:focus,
body .ufap-textarea:focus {
  outline: none !important;
  border-color: var(--ufap-cyan) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 0 0 5px var(--ufap-focus), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body input::placeholder,
body textarea::placeholder {
  color: rgba(102,112,133,.72);
}

body input:disabled,
body select:disabled,
body textarea:disabled {
  opacity: .62;
  cursor: not-allowed;
  background: rgba(244,247,251,.72) !important;
  box-shadow: none;
}

body input[type="checkbox"],
body input[type="radio"] {
  accent-color: var(--ufap-cyan);
}

body .ui-icon,
body .icon,
body .emoji,
body .search-icon,
body .name-icon,
body .diff-arrow,
body .equivalence-arrow,
body .success-step-icon,
body .homonymes-status-icon,
body .btn .icon,
body .btn .emoji,
body .btn .ui-icon,
body .ufap-btn .icon,
body .ufap-btn .emoji,
body .ufap-btn .ui-icon,
body .pill .icon,
body .badge .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  text-align: center;
}

body .ui-icon-box,
body .upload-icon,
body .dropzone-icon,
body .import-drop-icon,
body .drop-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  text-align: center;
}

body .upload-icon,
body .dropzone-icon,
body .import-drop-icon,
body .drop-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  font-size: 32px;
  font-weight: 900;
}

body .upload-icon > *,
body .dropzone-icon > *,
body .import-drop-icon > *,
body .drop-icon > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body button,
body .btn,
body .ufap-btn,
body .tool-btn,
body .table-action,
body .sticky-btn,
body .label-btn,
body .tool-link,
body input[type="file"]::file-selector-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid rgba(28,44,77,.12) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-size: 14px;
  font-weight: 850 !important;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(28,44,77,.08) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease;
}

body .table-action-btn,
body .action-icon-btn,
body .table-icon-btn,
body .btn-icon,
body .icon-button,
body .icon-btn,
body .action-icon,
body .icon-link {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 38px;
  text-align: center;
}

body .table-action-btn > *,
body .action-icon-btn > *,
body .table-icon-btn > *,
body .btn-icon > *,
body .icon-button > *,
body .icon-btn > *,
body .action-icon > *,
body .icon-link > *,
body .quality-filter-btn > *,
body .speciality-filter-badge > *,
body .ufap-modal-close-icon > *,
body .ufap-modal-close > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body .quality-filter-btn,
body .speciality-filter-badge,
body .page-hero__icon,
body .ufap-modal-close-icon,
body .ufap-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body button:hover,
body .btn:hover,
body .ufap-btn:hover,
body .tool-btn:hover,
body .table-action:hover,
body .sticky-btn:hover,
body .label-btn:hover,
body .tool-link:hover,
body input[type="file"]::file-selector-button:hover {
  transform: translateY(-2px);
  border-color: rgba(0,158,227,.22) !important;
  box-shadow: var(--ufap-shadow-hover) !important;
}

body button:focus-visible,
body .btn:focus-visible,
body .ufap-btn:focus-visible,
body .tool-btn:focus-visible,
body .table-action:focus-visible,
body .sticky-btn:focus-visible,
body .label-btn:focus-visible,
body .tool-link:focus-visible {
  outline: none !important;
  border-color: var(--ufap-cyan) !important;
  box-shadow: 0 0 0 5px var(--ufap-focus), var(--ufap-shadow-hover) !important;
}

body .btn.primary,
body .ufap-btn-primary,
body button.secondary,
body button.success,
body .tool-btn.primary,
body .edit-btn,
body .sticky-btn.secondary,
body #exportExcel {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--ufap-navy), var(--ufap-navy-2)) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(28,44,77,.24) !important;
}

body .btn.primary:hover,
body .ufap-btn-primary:hover,
body button.secondary:hover,
body button.success:hover,
body .tool-btn.primary:hover,
body .edit-btn:hover,
body .sticky-btn.secondary:hover,
body #exportExcel:hover {
  filter: saturate(1.05);
  box-shadow: 0 18px 42px rgba(28,44,77,.30), 0 0 0 5px rgba(0,158,227,.08) !important;
}

body .danger,
body .btn.danger,
body button.danger,
body .btn--danger {
  border-color: transparent !important;
  background: linear-gradient(135deg, #b72f2f, #d24a4a) !important;
  color: #fff !important;
}

body button:disabled,
body .btn:disabled,
body .ufap-btn:disabled,
body .tool-btn:disabled,
body .table-action:disabled,
body .sticky-btn:disabled,
body button.is-disabled,
body .btn.is-disabled,
body .ufap-btn.is-disabled,
body [aria-disabled="true"] {
  opacity: .56 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(.08);
}

body button.is-loading,
body .btn.is-loading,
body .ufap-btn.is-loading,
body button.loading,
body .btn.loading,
body [aria-busy="true"] {
  position: relative;
  cursor: wait !important;
  color: transparent !important;
  pointer-events: none;
}

body button.is-loading::after,
body .btn.is-loading::after,
body .ufap-btn.is-loading::after,
body button.loading::after,
body .btn.loading::after,
body [aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  color: #fff;
  animation: ufapButtonSpin .75s linear infinite;
}

@keyframes ufapButtonSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  body label,
  body .field label,
  body .search-row label,
  body .filter-toggle label {
    font-size: 13px !important;
  }

  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body select,
  body textarea,
  body button,
  body .btn,
  body .ufap-btn,
  body .tool-btn,
  body .table-action,
  body .sticky-btn,
  body .label-btn,
  body .tool-link {
    min-height: 50px;
  }
}

/* Cartes globales UFAP */
body .ufap-card,
body .panel,
body .card,
body .hero-panel,
body .stats-panel,
body .hub-panel,
body .hub-card,
body .hub-nav-card,
body .tile-card,
body .stat,
body .stat-card,
body .summary-card,
body .preview-box,
body .preview-card,
body .info-card,
body .variables-box,
body .chart-card,
body .visit-card,
body .agenda-item,
body .mini-card,
body .decision-card,
body .candidate,
body .workflow-card,
body .hero-card,
body .upload-card,
body .mapping-row,
body .contact-card,
body .contact-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.72)),
    rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: var(--ufap-radius) !important;
  box-shadow: var(--ufap-shadow-soft) !important;
  backdrop-filter: blur(18px);
}

body .ufap-card,
body .panel,
body .card,
body .hub-card,
body .hub-nav-card,
body .tile-card,
body .stat-card,
body .summary-card,
body .preview-box,
body .preview-card,
body .info-card,
body .variables-box,
body .chart-card,
body .visit-card,
body .agenda-item,
body .mini-card,
body .workflow-card,
body .hero-card,
body .upload-card {
  padding: clamp(18px, 2vw, 28px) !important;
}

body .decision-card,
body .contact-card {
  overflow: hidden;
}

body .ufap-card h1,
body .ufap-card h2,
body .ufap-card h3,
body .panel h1,
body .panel h2,
body .panel h3,
body .card h1,
body .card h2,
body .card h3,
body .hub-nav-card__title,
body .tile-card h3,
body .stat-card h3,
body .chart-card h3,
body .visit-card h3,
body .decision-card h1,
body .contact-card-title {
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.12;
}

body .ufap-card p,
body .panel p,
body .card p,
body .hub-nav-card__desc,
body .tile-card p,
body .visit-card p,
body .summary-card strong,
body .contact-card-subtitle {
  color: var(--ufap-muted) !important;
  line-height: 1.58;
}

body .hub-nav-card,
body .tile-card,
body .visit-card,
body .agenda-item,
body .candidate,
body .summary-card,
body .stat,
body .stat-card,
body .mini-card {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

body .hub-nav-card:hover,
body .tile-card:hover,
body .visit-card:hover,
body .agenda-item:hover,
body .candidate:hover,
body .summary-card:hover,
body .stat:hover,
body .stat-card:hover,
body .mini-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,158,227,.22) !important;
  box-shadow: var(--ufap-shadow-hover) !important;
}

body .stat,
body .stat-card,
body .summary-card,
body .ufap-kpi-card {
  position: relative;
  overflow: hidden;
}

body .stat::after,
body .stat-card::after,
body .summary-card::after,
body .ufap-kpi-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,158,227,.12), transparent 70%);
  pointer-events: none;
}

@media (max-width: 640px) {
  body .ufap-card,
  body .panel,
  body .card,
  body .hub-card,
  body .hub-nav-card,
  body .tile-card,
  body .stat-card,
  body .summary-card,
  body .preview-box,
  body .preview-card,
  body .info-card,
  body .variables-box,
  body .chart-card,
  body .visit-card,
  body .agenda-item,
  body .mini-card,
  body .workflow-card,
  body .hero-card,
  body .upload-card {
    border-radius: 20px !important;
    padding: 16px !important;
  }
}

/* Tableaux responsive UFAP */
body .table-container,
body .table-wrap,
body .password-table-wrap,
body .mapping-table,
body .merge-assist-table {
  overflow: auto;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: var(--ufap-radius) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: var(--ufap-shadow-soft) !important;
  backdrop-filter: blur(18px);
}

body table,
body .ufap-table,
body .ufap-responsive-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body .ufap-responsive-table th,
body .ufap-responsive-table td,
body .ufap-table th,
body .ufap-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(28,44,77,.08) !important;
  vertical-align: middle;
  text-align: left;
}

body .ufap-responsive-table th,
body .ufap-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(255,255,255,.94) !important;
  color: var(--ufap-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(28,44,77,.08);
}

body .ufap-responsive-table tbody tr,
body .ufap-table tbody tr {
  transition:
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

body .ufap-responsive-table tbody tr:hover,
body .ufap-table tbody tr:hover {
  background: rgba(0,158,227,.045) !important;
}

body .ufap-responsive-table tr:last-child td,
body .ufap-table tr:last-child td {
  border-bottom: 0 !important;
}

@media (max-width: 1024px) {
  body .ufap-responsive-table th:nth-child(n+7),
  body .ufap-responsive-table td:nth-child(n+7) {
    display: none;
  }

  body .ufap-responsive-table th.ufap-keep,
  body .ufap-responsive-table td.ufap-keep,
  body .ufap-responsive-table th.select-col,
  body .ufap-responsive-table td.select-col,
  body .ufap-responsive-table th.view-col,
  body .ufap-responsive-table td.view-col {
    display: table-cell;
  }
}

@media (max-width: 640px) {
  body .table-container,
  body .table-wrap,
  body .password-table-wrap,
  body .mapping-table,
  body .merge-assist-table {
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }

  body .ufap-responsive-table,
  body .ufap-responsive-table thead,
  body .ufap-responsive-table tbody,
  body .ufap-responsive-table th,
  body .ufap-responsive-table td,
  body .ufap-responsive-table tr {
    display: block !important;
    width: 100% !important;
  }

  body .ufap-responsive-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  body .ufap-responsive-table tbody {
    display: grid !important;
    gap: 14px !important;
  }

  body .ufap-responsive-table tbody tr {
    display: grid !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.48) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.76)),
      rgba(255,255,255,.82) !important;
    box-shadow: var(--ufap-shadow-soft) !important;
    backdrop-filter: blur(18px);
  }

  body .ufap-responsive-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: var(--ufap-shadow-hover) !important;
  }

  body .ufap-responsive-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(104px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 7px 2px !important;
    border: 0 !important;
    text-align: left !important;
    word-break: break-word;
  }

  body .ufap-responsive-table tbody td::before {
    content: attr(data-label);
    color: var(--ufap-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body .ufap-responsive-table tbody td:empty {
    display: none !important;
  }

  body .ufap-responsive-table .ufap-cell-name,
  body .ufap-responsive-table .ufap-cell-firstname {
    display: block !important;
    padding-bottom: 0 !important;
    color: var(--ufap-navy);
    font-size: 18px;
    font-weight: 900;
  }

  body .ufap-responsive-table .ufap-cell-name::before,
  body .ufap-responsive-table .ufap-cell-firstname::before {
    display: none;
  }

  body .ufap-responsive-table .ufap-cell-status {
    align-items: center !important;
  }

  body .ufap-responsive-table .ufap-cell-summary {
    grid-template-columns: 1fr !important;
    color: var(--ufap-muted);
    line-height: 1.5;
  }

  body .ufap-responsive-table .ufap-cell-summary::before {
    content: attr(data-label);
  }

  body .ufap-responsive-table .ufap-cell-actions,
  body .ufap-responsive-table td:last-child {
    grid-template-columns: 1fr !important;
    padding-top: 10px !important;
  }

  body .ufap-responsive-table .ufap-cell-actions::before,
  body .ufap-responsive-table td:last-child::before {
    display: none;
  }

  body .ufap-responsive-table .ufap-cell-actions .btn,
  body .ufap-responsive-table td:last-child .btn,
  body .ufap-responsive-table .ufap-cell-actions button,
  body .ufap-responsive-table td:last-child button,
  body .ufap-responsive-table .ufap-cell-actions a,
  body .ufap-responsive-table td:last-child a {
    width: 100%;
    min-height: 44px;
  }
}

/* Modales premium UFAP */
html.ufap-modal-open,
body.ufap-modal-open,
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

body .ufap-modal-backdrop.is-open,
body .modal-backdrop.is-open,
body .modal-backdrop[style*="display: flex"],
body .modal-backdrop[style*="display:flex"],
body .modal.is-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3000 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at top left, rgba(0,158,227,.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(28,44,77,.18), transparent 38%),
    rgba(12, 23, 43, .46) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
}

body .ufap-modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

body .modal-backdrop:not(.is-open):not([style*="display: flex"]):not([style*="display:flex"]) {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body .ufap-modal-backdrop.is-open,
body .modal-backdrop.is-open,
body .modal-backdrop[style*="display: flex"],
body .modal-backdrop[style*="display:flex"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body .ufap-modal-dialog,
body .modal-content,
body .modal-card {
  width: min(760px, 100%) !important;
  max-height: min(88vh, 940px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.80)),
    rgba(255,255,255,.86) !important;
  color: var(--ufap-text) !important;
  box-shadow:
    0 36px 100px rgba(28,44,77,.30),
    0 1px 0 rgba(255,255,255,.72) inset !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  transform: translateY(10px) scale(.985);
  transition:
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

body .ufap-modal-backdrop.is-open .ufap-modal-dialog {
  transform: translateY(0) scale(1);
}

body .modal.view-modal,
body .contact-modal {
  width: min(1120px, 100%) !important;
}

body .ufap-modal-dialog.is-danger,
body .modal.is-danger,
body .modal-card.is-danger {
  border-color: rgba(220,38,38,.28) !important;
}

body .ufap-modal-header,
body .modal-header,
body .modal h2:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid rgba(28,44,77,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)) !important;
  color: var(--ufap-navy) !important;
  backdrop-filter: blur(18px) !important;
}

body .ufap-modal-header h2,
body .modal-header h3,
body .modal h2:first-child {
  margin: 0 !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

body .ufap-modal-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--ufap-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body .ufap-modal-body,
body .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 22px 24px !important;
}

body .ufap-modal-body p,
body .modal-body p,
body .modal p {
  color: var(--ufap-text) !important;
  line-height: 1.65 !important;
}

body .ufap-modal-footer,
body .modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  border-top: 1px solid rgba(28,44,77,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96)) !important;
  backdrop-filter: blur(18px) !important;
}

body .ufap-modal-close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(28,44,77,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  color: var(--ufap-navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

body .ufap-modal-close:hover {
  transform: translateY(-1px);
  border-color: rgba(0,158,227,.28);
  background: rgba(255,255,255,.96);
}

body .ufap-modal-field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--ufap-navy);
  font-weight: 800;
}

body .ufap-modal-error {
  color: #b91c1c;
  font-weight: 800;
}

body .ufap-btn-danger,
body .btn-danger,
body .danger {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  border-color: rgba(185,28,28,.25) !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(185,28,28,.20) !important;
}

body .ufap-btn-danger:hover,
body .btn-danger:hover,
body .danger:hover {
  box-shadow: 0 18px 42px rgba(185,28,28,.26) !important;
}

@media (max-width: 1024px) {
  body .ufap-modal-backdrop,
  body .modal-backdrop,
  body .modal.is-open {
    padding: 14px !important;
  }

  body .ufap-modal-dialog,
  body .modal-content,
  body .modal-card {
    width: min(900px, 100%) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
  }
}

@media (max-width: 640px) {
  body .ufap-modal-backdrop,
  body .modal-backdrop,
  body .modal.is-open {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  body .ufap-modal-dialog,
  body .modal-content,
  body .modal-card {
    width: 100% !important;
    max-height: 94dvh !important;
    min-height: min(360px, 74dvh) !important;
    border-radius: 26px 26px 0 0 !important;
    transform: translateY(22px);
  }

  body .ufap-modal-header,
  body .modal-header,
  body .modal h2:first-child {
    padding: 18px 18px 14px !important;
  }

  body .ufap-modal-body,
  body .modal-body {
    padding: 18px !important;
  }

  body .ufap-modal-footer,
  body .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom)) !important;
  }

  body .ufap-modal-footer .ufap-btn,
  body .modal-actions .btn,
  body .modal-actions button,
  body .modal-actions a {
    width: 100% !important;
    min-height: 50px !important;
  }
}

/* Harmonisation finale globale
   Cette couche aligne les anciennes classes locales sur le design system sans changer la logique applicative. */
:root {
  --blue-dark: var(--ufap-navy);
  --blue-mid: var(--ufap-cyan);
  --blue: var(--ufap-cyan);
  --bg: var(--ufap-bg);
  --card: var(--ufap-card);
  --border: var(--ufap-border);
  --line: var(--ufap-border);
  --text: var(--ufap-text);
  --muted: var(--ufap-muted);
  --success: var(--ufap-success);
  --warn: var(--ufap-warning);
  --danger: var(--ufap-danger);
  --radius: var(--ufap-radius);
  --shadow: var(--ufap-shadow);
  --shadow-soft: var(--ufap-shadow-soft);
  --font: var(--ufap-font);
  --font-display: var(--ufap-font);
}

html {
  color-scheme: light;
  font-family: var(--ufap-font);
  text-rendering: optimizeLegibility;
}

body {
  color: var(--ufap-text);
  font-family: var(--ufap-font) !important;
  letter-spacing: 0;
}

body:not(.login-page) {
  background-color: var(--ufap-bg);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--ufap-navy);
  font-family: var(--ufap-font) !important;
  font-weight: 900;
  letter-spacing: 0 !important;
}

body p,
body li,
body td,
body th,
body input,
body select,
body textarea,
body button {
  font-family: var(--ufap-font) !important;
}

body a {
  color: var(--ufap-navy);
  text-underline-offset: 3px;
}

body a:hover {
  color: var(--ufap-cyan);
}

body .shell,
body .container,
body main {
  max-width: min(1380px, calc(100vw - 24px));
}

body .section-kicker,
body .eyebrow,
body .kicker {
  color: var(--ufap-cyan) !important;
  font-family: var(--ufap-font) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body .badge,
body .pill,
body .status-pill,
body .tag,
body .chip,
body .history-chip,
body .contact-badge,
body .password-pill,
body .activity-card__badge,
body .activity-overview__chip,
body .log-stage__flag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(28,44,77,.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.70) !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-size: 12px;
  font-weight: 850 !important;
  line-height: 1.1;
}

body .badge.ok,
body .badge.good,
body .status-pill.ok,
body .contact-badge.good,
body .history-chip.data,
body .activity-card__badge.success {
  border-color: rgba(20,122,79,.18) !important;
  background: rgba(20,122,79,.10) !important;
  color: var(--ufap-success) !important;
}

body .badge.medium,
body .badge.warn,
body .status-pill.warning,
body .contact-badge.warn,
body .history-chip.security {
  border-color: rgba(245,158,11,.24) !important;
  background: rgba(245,158,11,.12) !important;
  color: var(--ufap-warning) !important;
}

body .badge.high,
body .badge.danger,
body .activity-card__badge.accent {
  border-color: rgba(183,47,47,.20) !important;
  background: rgba(183,47,47,.10) !important;
  color: var(--ufap-danger) !important;
}

body .table,
body table.ufap-responsive-table,
body .password-table-wrap table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: var(--ufap-shadow-soft) !important;
}

body .table th,
body .table td,
body table.ufap-responsive-table th,
body table.ufap-responsive-table td,
body .password-table-wrap th,
body .password-table-wrap td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(28,44,77,.08) !important;
  color: var(--ufap-text);
  text-align: left;
  vertical-align: top;
}

body .table th,
body table.ufap-responsive-table th,
body .password-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(244,247,251,.94) !important;
  color: var(--ufap-navy) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(12px);
}

body .table tbody tr,
body table.ufap-responsive-table tbody tr,
body .password-table-wrap tbody tr {
  transition: background .16s ease, transform .16s ease;
}

body .table tbody tr:hover,
body table.ufap-responsive-table tbody tr:hover,
body .password-table-wrap tbody tr:hover {
  background: rgba(0,158,227,.045) !important;
}

body .table tr:last-child td,
body table.ufap-responsive-table tr:last-child td,
body .password-table-wrap tr:last-child td {
  border-bottom: 0 !important;
}

body .table-wrap,
body .table-container,
body .password-table-wrap,
body .merge-assist-table {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: var(--ufap-shadow-soft) !important;
}

body .notice,
body .log-notice,
body .status-box,
body .form-status,
body .password-message {
  border-radius: 16px !important;
  border: 1px solid rgba(0,158,227,.16) !important;
  background: rgba(238,247,255,.80) !important;
  color: var(--ufap-navy) !important;
  font-family: var(--ufap-font) !important;
  font-weight: 800;
}

body .notice.error,
body .status-box.error,
body .password-message.error,
body .form-status.error {
  border-color: rgba(183,47,47,.20) !important;
  background: rgba(183,47,47,.08) !important;
  color: var(--ufap-danger) !important;
}

body .notice.success,
body .status-box.success,
body .password-message.success,
body .form-status.success {
  border-color: rgba(20,122,79,.20) !important;
  background: rgba(20,122,79,.09) !important;
  color: var(--ufap-success) !important;
}

body .notice.warn,
body .status-box.warn,
body .form-status.warn {
  border-color: rgba(245,158,11,.24) !important;
  background: rgba(245,158,11,.12) !important;
  color: var(--ufap-warning) !important;
}

body .panel,
body .card,
body .hub-panel,
body .tile-card,
body .stat-card,
body .summary-card,
body .preview-box,
body .visit-card,
body .activity-card,
body .history-item__card {
  isolation: isolate;
}

body .panel::before,
body .hub-panel::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 4px !important;
  min-height: 4px !important;
  display: block !important;
  border-radius: inherit !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: linear-gradient(90deg, var(--ufap-cyan), var(--ufap-navy)) !important;
  opacity: .95 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body .panel,
body .hub-panel {
  position: relative !important;
}

body .sticky-actions,
body .workflow-footer,
body .visit-sticky-actions,
body .mobile-sticky-actions {
  border-top: 1px solid rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 -18px 48px rgba(28,44,77,.10) !important;
  backdrop-filter: blur(18px) !important;
}

@media (max-width: 760px) {
  body .shell,
  body .container,
  body main {
    max-width: calc(100vw - 20px);
  }

  body .table,
  body table.ufap-responsive-table,
  body .password-table-wrap table {
    display: block;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .table thead,
  body table.ufap-responsive-table thead,
  body .password-table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  body .table tbody,
  body table.ufap-responsive-table tbody,
  body .password-table-wrap tbody {
    display: grid;
    gap: 14px;
  }

  body .table tr,
  body table.ufap-responsive-table tr,
  body .password-table-wrap tr {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.48) !important;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    box-shadow: var(--ufap-shadow-soft);
  }

  body .table th,
  body .table td,
  body table.ufap-responsive-table th,
  body table.ufap-responsive-table td,
  body .password-table-wrap th,
  body .password-table-wrap td {
    display: grid;
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 6px 0 !important;
    border: 0 !important;
    word-break: break-word;
  }

  body .table td::before,
  body table.ufap-responsive-table td::before,
  body .password-table-wrap td::before {
    content: attr(data-label);
    color: var(--ufap-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

/* Responsive final safety layer
   This section only normalizes layout behavior. It does not change page logic. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

body main,
body .shell,
body .container,
body .ufap-container,
body .page-container,
body .content,
body .page-content,
body .main-content,
body .dashboard,
body .dashboard-layout,
body .app-container,
body .layout,
body .app,
body .workflow-page,
body .workflow-shell,
body .assistant-shell,
body .verification-workspace,
body .assistant-layout,
body .queue-panel,
body .queue-list {
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

body .table-wrapper,
body .table-container,
body .table-wrap,
body .contacts-table-container,
body .filiere-table-wrapper,
body .preview-table-wrapper,
body .merge-assist-table,
body .ufap-responsive-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}

body .modal,
body .modal-card,
body .modal-content,
body .modal-body,
body .ufap-modal,
body .ufap-modal-body,
body .contact-modal-body,
body .workflow-modal,
body .workflow-modal-body,
body .filters-drawer-body {
  overflow-y: auto;
}

body .ufap-card,
body .card,
body .panel,
body .hub-panel,
body .tile-card,
body .stat-card,
body .summary-card,
body .workflow-card,
body .validation-card,
body .mapping-card,
body .activity-card,
body .visit-card,
body .contact-card,
body .modal-card,
body .modal-content,
body .ufap-modal-dialog {
  max-width: 100%;
  min-width: 0;
}

body .ufap-grid,
body .dashboard-grid,
body .tools-grid,
body .cards-grid,
body .stats-grid,
body .kpi-grid,
body .mapping-grid,
body .validation-grid,
body .workflow-grid,
body .candidate-grid,
body .assistant-layout,
body .split-layout,
body .form-grid,
body .filters-grid,
body .summary-grid {
  min-width: 0;
}

body .ufap-card *,
body .card *,
body .panel *,
body .table *,
body .ufap-responsive-table *,
body .modal *,
body .ufap-modal *,
body .badge,
body .ufap-badge,
body .btn,
body .ufap-btn {
  overflow-wrap: anywhere;
}

body button,
body .btn,
body .ufap-btn,
body .button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"],
body a.btn,
body a.ufap-btn {
  min-height: 48px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
}

body input,
body select,
body textarea,
body .ufap-input,
body .ufap-select,
body .ufap-textarea,
body .form-control,
body .form-select {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
}

body textarea,
body .ufap-textarea {
  min-height: 120px;
  resize: vertical;
}

body .actions,
body .form-actions,
body .button-row,
body .btn-row,
body .toolbar,
body .filters,
body .filter-bar,
body .modal-actions,
body .ufap-modal-footer,
body .sticky-actions,
body .workflow-footer,
body .visit-sticky-actions,
body .mobile-sticky-actions,
body .card-actions,
body .table-actions,
body .review-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

body .table-container,
body .table-wrap,
body .password-table-wrap,
body .mapping-table,
body .merge-assist-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body table,
body .table,
body .ufap-table,
body .ufap-responsive-table {
  max-width: 100%;
}

body th,
body td {
  min-width: 0;
}

body .ufap-modal-backdrop,
body .modal-backdrop,
body .modal.is-open {
  overscroll-behavior: contain;
}

body .ufap-modal-dialog,
body .modal-content,
body .modal-card,
body .contact-modal {
  overflow: hidden;
}

body .ufap-modal-body,
body .modal-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1025px) {
  body .ufap-container,
  body .shell,
  body .page-container,
  body .workflow-shell,
  body .assistant-shell {
    width: min(100% - 48px, 1320px);
    margin-inline: auto;
  }

  body .ufap-modal-dialog,
  body .modal-content,
  body .modal-card {
    max-height: min(88vh, 880px);
  }
}

@media (max-width: 1024px) {
  body .ufap-container,
  body .shell,
  body .page-container,
  body .workflow-shell,
  body .assistant-shell,
  body main {
    width: min(100% - 32px, 100%);
    margin-inline: auto;
  }

  body .ufap-grid,
  body .dashboard-grid,
  body .tools-grid,
  body .cards-grid,
  body .stats-grid,
  body .kpi-grid,
  body .mapping-grid,
  body .validation-grid,
  body .workflow-grid,
  body .candidate-grid,
  body .assistant-layout,
  body .split-layout,
  body .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .form-grid,
  body .filters-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .ufap-modal-dialog,
  body .modal-content,
  body .modal-card,
  body .contact-modal {
    width: min(96vw, 920px) !important;
    max-width: 96vw !important;
    max-height: 92dvh !important;
  }
}

@media (max-width: 760px) {
  body {
    min-width: 0;
  }

  body .ufap-container,
  body .shell,
  body .container,
  body .page-container,
  body .workflow-shell,
  body .assistant-shell,
  body main {
    width: min(100% - 24px, 100%);
    max-width: calc(100vw - 24px);
    margin-inline: auto;
  }

  body .ufap-grid,
  body .dashboard-grid,
  body .tools-grid,
  body .cards-grid,
  body .stats-grid,
  body .kpi-grid,
  body .mapping-grid,
  body .validation-grid,
  body .workflow-grid,
  body .candidate-grid,
  body .assistant-layout,
  body .split-layout,
  body .summary-grid,
  body .form-grid,
  body .filters-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .top-nav {
    max-width: 100vw;
  }

  body .top-nav__brand,
  body .brand,
  body .navbar-brand {
    min-width: 0;
  }

  body .top-nav__brand span,
  body .brand span,
  body .navbar-brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .top-nav__drawer,
  body .mobile-drawer,
  body .nav-drawer {
    width: min(88vw, 380px);
    max-width: calc(100vw - 24px);
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body .top-nav a,
  body .top-nav button,
  body .mobile-drawer a,
  body .mobile-drawer button,
  body .nav-drawer a,
  body .nav-drawer button {
    min-height: 48px;
  }

  body input,
  body select,
  body textarea,
  body .ufap-input,
  body .ufap-select,
  body .ufap-textarea,
  body .form-control,
  body .form-select {
    font-size: 16px;
  }

  body .actions,
  body .form-actions,
  body .button-row,
  body .btn-row,
  body .toolbar,
  body .filters,
  body .filter-bar,
  body .modal-actions,
  body .ufap-modal-footer,
  body .sticky-actions,
  body .workflow-footer,
  body .visit-sticky-actions,
  body .mobile-sticky-actions,
  body .card-actions,
  body .table-actions,
  body .review-footer {
    align-items: stretch;
  }

  body .actions > *,
  body .form-actions > *,
  body .button-row > *,
  body .btn-row > *,
  body .modal-actions > *,
  body .ufap-modal-footer > *,
  body .sticky-actions > *,
  body .workflow-footer > *,
  body .visit-sticky-actions > *,
  body .mobile-sticky-actions > *,
  body .card-actions > *,
  body .table-actions > *,
  body .review-footer > * {
    flex: 1 1 100%;
  }

  body .toolbar > *,
  body .filters > *,
  body .filter-bar > * {
    flex: 1 1 auto;
  }

  body .ufap-responsive-table tbody td,
  body .table td,
  body table.ufap-responsive-table td,
  body .password-table-wrap td {
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) !important;
  }

  body .ufap-responsive-table .ufap-cell-actions,
  body .ufap-responsive-table td:last-child,
  body .table td:last-child,
  body table.ufap-responsive-table td:last-child {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  body .ufap-responsive-table .ufap-cell-actions .btn,
  body .ufap-responsive-table td:last-child .btn,
  body .ufap-responsive-table .ufap-cell-actions button,
  body .ufap-responsive-table td:last-child button,
  body .ufap-responsive-table .ufap-cell-actions a,
  body .ufap-responsive-table td:last-child a {
    min-height: 44px;
    flex: 1 1 140px;
  }

  body .sticky-actions,
  body .workflow-footer,
  body .visit-sticky-actions,
  body .mobile-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-inline: -12px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 640px) {
  body .ufap-page {
    padding-inline: 0;
  }

  body .ufap-container,
  body .shell,
  body .container,
  body .page-container,
  body .workflow-shell,
  body .assistant-shell,
  body main {
    width: min(100% - 20px, 100%);
    max-width: calc(100vw - 20px);
  }

  body .ufap-card,
  body .card,
  body .panel,
  body .hub-panel,
  body .tile-card,
  body .stat-card,
  body .summary-card,
  body .workflow-card,
  body .validation-card,
  body .mapping-card,
  body .activity-card,
  body .visit-card,
  body .contact-card {
    border-radius: 20px !important;
    padding: clamp(16px, 4vw, 22px) !important;
  }

  body h1 {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.08;
  }

  body h2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.14;
  }

  body h3 {
    font-size: clamp(17px, 5vw, 22px);
    line-height: 1.2;
  }

  body button,
  body .btn,
  body .ufap-btn,
  body .button,
  body input[type="button"],
  body input[type="submit"],
  body input[type="reset"],
  body a.btn,
  body a.ufap-btn {
    width: 100%;
    min-height: 48px;
    padding-inline: 14px;
  }

  body .icon-btn,
  body .btn-icon,
  body .ufap-modal-close,
  body .nav-toggle,
  body .burger,
  body .menu-toggle {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding-inline: 0;
  }

  body .ufap-responsive-table tbody td,
  body .table td,
  body table.ufap-responsive-table td,
  body .password-table-wrap td {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px;
  }

  body .ufap-responsive-table tbody td::before,
  body .table td::before,
  body table.ufap-responsive-table td::before,
  body .password-table-wrap td::before {
    margin-bottom: 2px;
  }

  body .ufap-modal-backdrop,
  body .modal-backdrop,
  body .modal.is-open {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  body .ufap-modal-dialog,
  body .modal-content,
  body .modal-card,
  body .contact-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94dvh !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    display: flex;
    flex-direction: column;
  }

  body .ufap-modal-header,
  body .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
  }

  body .ufap-modal-body,
  body .modal-body {
    flex: 1 1 auto;
    max-height: none !important;
    padding-inline: 18px !important;
  }

  body .ufap-modal-footer,
  body .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
  }

  body .workflow-stepper,
  body .stepper,
  body .tabs,
  body .pills,
  body .filter-pills {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body .workflow-stepper::-webkit-scrollbar,
  body .stepper::-webkit-scrollbar,
  body .tabs::-webkit-scrollbar,
  body .pills::-webkit-scrollbar,
  body .filter-pills::-webkit-scrollbar {
    display: none;
  }

  body footer,
  body .footer,
  body .site-footer {
    text-align: center;
    padding-inline: 12px;
  }
}

@media (max-width: 1024px) {
  body::after,
  body .hero-card::before,
  body .login-hero::before,
  body .login-hero::after {
    max-width: 70vw;
    max-height: 70vw;
  }

  body .grid.two,
  body .two-col,
  body .columns.two,
  body .admin-two-column,
  body .communication-layout,
  body .visit-layout,
  body .dashboard-layout,
  body .directory-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .workflow-progress,
  body .stepper,
  body .progress-steps {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  body::after {
    width: min(420px, 82vw) !important;
    height: min(420px, 82vw) !important;
    right: -44vw !important;
    bottom: -44vw !important;
  }

  body .hero-card::before,
  body .login-hero::before,
  body .login-hero::after {
    width: min(320px, 78vw) !important;
    height: min(320px, 78vw) !important;
  }

  body .workflow-progress a,
  body .stepper a,
  body .progress-steps a,
  body .tabs a,
  body .pills a,
  body .filter-pills a,
  body .badge,
  body .ufap-badge {
    max-width: min(280px, 76vw);
  }

  body .workflow-progress a,
  body .stepper a,
  body .progress-steps a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body .mapping-row,
  body .mapping-head,
  body .candidate-card,
  body .candidate-row,
  body .diff-row,
  body .difference-line,
  body .decision-row,
  body .apply-row,
  body .summary-row,
  body .log-row {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
  }

  body .mapping-preview,
  body .preview-values,
  body pre,
  body code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  body .toast,
  body .ufap-toast,
  body .notification {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  body .page-title,
  body .hero-title,
  body .section-title,
  body .card-title {
    max-width: 100%;
    hyphens: auto;
  }
}

/* Final global scroll discipline.
   Pages use the browser scrollbar; only modals/drawers keep internal vertical scroll. */
html,
body {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body main,
body .app,
body .layout,
body .app-container,
body .shell,
body .container,
body .ufap-container,
body .page-container,
body .content,
body .page-content,
body .main-content,
body .dashboard,
body .dashboard-layout,
body .workflow-page,
body .workflow-shell,
body .assistant-shell,
body .verification-workspace,
body .assistant-layout,
body .queue-panel,
body .queue-list,
body .panel,
body .hub-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

body .table-wrapper,
body .table-container,
body .table-wrap,
body .contacts-table-container,
body .filiere-table-wrapper,
body .preview-table-wrapper,
body .merge-assist-table,
body .ufap-responsive-table-wrap {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body .modal,
body .modal-card,
body .modal-content,
body .modal-body,
body .ufap-modal,
body .ufap-modal-body,
body .contact-modal-body,
body .workflow-modal,
body .workflow-modal-body,
body .filters-drawer-body {
  overflow-y: auto !important;
}