/* ─── ReturnRisk — Global UI Enhancements ─────────────────────────────────── */

/* Rendu texte plus net */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll fluide */
html {
  scroll-behavior: smooth;
}

/* ─── Animations d'entrée de page ───────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.Polaris-Page {
  animation: fadeInUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Cards — hover lift ─────────────────────────────────────────────────── */
.Polaris-ShadowBevel,
.Polaris-Card {
  transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}

.Polaris-ShadowBevel:hover,
.Polaris-Card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09) !important;
  transform: translateY(-2px);
}

/* ─── Lignes de tableau — hover fluide ───────────────────────────────────── */
.Polaris-IndexTable__TableRow {
  transition: background-color 0.15s ease !important;
  cursor: pointer;
}

.Polaris-IndexTable__TableRow:hover td {
  background-color: #F9FAFB !important;
}

/* ─── Boutons — transitions ──────────────────────────────────────────────── */
.Polaris-Button {
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    border-color 0.15s ease !important;
}

.Polaris-Button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}

.Polaris-Button:active:not(:disabled) {
  transform: translateY(0px) scale(0.98);
}

/* ─── Badges — transitions douces ───────────────────────────────────────── */
.Polaris-Badge {
  transition: all 0.18s ease;
}

/* ─── Avatars ────────────────────────────────────────────────────────────── */
.Polaris-Avatar {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Polaris-Avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ─── Navigation — items hover ───────────────────────────────────────────── */
.Polaris-Navigation__Item {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.Polaris-Tabs__Tab {
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* ─── Toasts / Banners ───────────────────────────────────────────────────── */
.Polaris-Frame-Toast {
  animation: scaleIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.Polaris-Banner {
  animation: fadeIn 0.25s ease;
}

/* ─── Modals ─────────────────────────────────────────────────────────────── */
.Polaris-Modal-Dialog__Modal {
  animation: scaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Score bars — animation fluide au chargement ────────────────────────── */
@keyframes growWidth {
  from { width: 0 !important; }
  to   { width: var(--score-width); }
}

/* ─── Inputs / TextFields ────────────────────────────────────────────────── */
.Polaris-TextField__Input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.Polaris-TextField__Backdrop {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ─── Checkboxes ─────────────────────────────────────────────────────────── */
.Polaris-Checkbox__Input:checked ~ .Polaris-Checkbox__Backdrop {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* ─── Select dropdowns ───────────────────────────────────────────────────── */
.Polaris-Select__Content {
  transition: border-color 0.15s ease;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
.Polaris-Link {
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* ─── Skeleton / Loading states ─────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.rr-skeleton {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite ease-in-out;
  border-radius: 6px;
}

/* ─── Stat cards (dashboard KPI) ─────────────────────────────────────────── */
.rr-stat-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.rr-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

/* ─── Risk score gauge animation ─────────────────────────────────────────── */
@keyframes drawCircle {
  from { stroke-dasharray: 0 100; }
}

.rr-gauge-circle {
  animation: drawCircle 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ─── Focus visible accessible ───────────────────────────────────────────── */
:focus-visible:not(body):not(html) {
  outline: 2px solid #008060;
  outline-offset: 2px;
  border-radius: 4px;
}
body, html { outline: none !important; }

/* ─── Responsive — Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Two-column grid → single column */
  .rr-two-col-grid {
    grid-template-columns: 1fr !important;
  }

  /* On mobile cards stack, height auto is better than 100% */
  .rr-two-col-grid > div {
    height: auto !important;
  }

  /* Reduce page-level padding */
  .Polaris-Page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tighten card padding */
  .Polaris-Box {
    padding: 12px !important;
  }

  /* Tables scroll horizontally instead of overflowing */
  .Polaris-IndexTable-ScrollContainer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent hover lift on touch devices (no hover state anyway) */
  .Polaris-ShadowBevel:hover,
  .Polaris-Card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .Polaris-Button:hover:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Stat cards — full width, no lift animation on mobile */
  .rr-stat-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Modal — full width on small screens */
  .Polaris-Modal-Dialog__Modal {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Polaris Page header actions — stack vertically */
  .Polaris-Page-Header__RightAlign {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .Polaris-Page-Header__Actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Reduce font size for very large headings */
  .Polaris-Text--headingXl {
    font-size: 1.25rem !important;
  }

  /* IndexTable cells — allow wrapping */
  .Polaris-IndexTable__TableCell {
    white-space: normal !important;
    word-break: break-word;
  }
}