/* ==========================================================================
   Fidelyxa — démo : habillage commun des pages (Clients, Transactions,
   Récompenses, Ma carte, Scanner, Employés, Paramètres).
   Reprend le style du tableau de bord (demo-dashboard.css) sans toucher au
   balisage ni au fonctionnement de ces pages : uniquement de la présentation.
   À charger après merchant-theme.css.
   ========================================================================== */
#appShell #viewContainer{--sk-deep:#052f2b;--sk-green:#0f8f83;--sk-green-ui:#0d8378;--sk-green-text:#0a6f66;--sk-mint:#e2f3ef;--sk-ink:#0f201d;--sk-soft:#44605a;--sk-line:rgba(15,32,29,.11);
  --sk-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;--sk-text:'Figtree','Segoe UI',system-ui,sans-serif;--sk-ease:cubic-bezier(.22,1,.36,1)}

/* --- Bandeau de page ---------------------------------------------------------- */
#appShell #viewContainer :is(.customers-hero,.module-hero){
  position:relative;isolation:isolate;overflow:hidden!important;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:216px;margin:0 0 20px!important;padding:clamp(26px,3vw,46px)!important;border:0!important;border-radius:36px 36px 36px 96px!important;
  color:#fff!important;box-shadow:none!important;
  background:radial-gradient(70% 130% at 100% 0%,rgba(19,168,153,.5),transparent 62%),radial-gradient(45% 80% at 0% 100%,rgba(244,183,63,.1),transparent 70%),var(--sk-deep)!important;
}
#appShell #viewContainer :is(.customers-hero,.module-hero)::after{
  content:""!important;display:block!important;position:absolute;z-index:-1;inset:auto -60px -150px auto;width:440px;height:440px;
  background:url("assets/optimized/LEF.webp") center/contain no-repeat;opacity:.13;pointer-events:none;
}
#appShell #viewContainer :is(.customers-hero,.module-hero) .dashboard-eyebrow{display:block;margin:0 0 12px;color:#9fe9dc!important;font:600 .9375rem/1 var(--sk-text)!important;letter-spacing:0;text-transform:none}
#appShell #viewContainer :is(.customers-hero,.module-hero) h1{margin:0 0 12px;color:#fff!important;font:800 clamp(2.4rem,1.5rem + 2.4vw,3.75rem)/.98 var(--sk-display)!important;letter-spacing:-.045em!important}
#appShell #viewContainer :is(.customers-hero,.module-hero) p{margin:0;max-width:34em;color:rgba(255,255,255,.78)!important;font:500 1.0625rem/1.5 var(--sk-text)!important}
#appShell #viewContainer :is(.customers-hero,.module-hero) .btn{
  flex:none;min-height:52px;padding:0 26px;border:1.5px solid transparent!important;border-radius:999px!important;background:#fff!important;color:var(--sk-deep)!important;
  box-shadow:none!important;font:700 1rem/1 var(--sk-text)!important;white-space:nowrap;transition:background-color .18s ease,transform .18s var(--sk-ease)}
#appShell #viewContainer :is(.customers-hero,.module-hero) .btn:hover{background:var(--sk-mint)!important}
#appShell #viewContainer :is(.customers-hero,.module-hero) .btn:active{transform:scale(.98)}
#appShell #viewContainer .module-hero-badge{flex:none;padding:11px 18px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font:600 .875rem/1 var(--sk-text)!important;white-space:nowrap}

/* --- Chiffres clés ------------------------------------------------------------- */
#appShell #viewContainer :is(.customer-stats,.module-stats){gap:20px;margin-bottom:20px}
#appShell #viewContainer :is(.customer-stats,.module-stats) article{
  align-items:center;gap:16px;min-height:136px;padding:22px 24px!important;border:1px solid var(--sk-line)!important;border-radius:28px!important;background:#fff;
  transition:transform .4s var(--sk-ease),box-shadow .4s ease,border-color .3s ease}
#appShell #viewContainer :is(.customer-stats,.module-stats) article:hover{transform:translateY(-4px);box-shadow:0 26px 44px -32px rgba(5,47,43,.5)!important;border-color:rgba(15,143,131,.35)!important}
#appShell #viewContainer :is(.customer-stats,.module-stats) article:first-child{background:var(--sk-mint)!important;border-color:transparent!important;border-radius:28px 28px 28px 72px!important}
#appShell #viewContainer :is(.customer-stats,.module-stats) article:first-child :is(.customer-stat-icon,i,svg.lucide){background-color:#fff!important}
#appShell #viewContainer :is(.customer-stats,.module-stats) small{font:600 .9375rem/1.2 var(--sk-text)!important;color:var(--sk-soft)!important}
#appShell #viewContainer :is(.customer-stats,.module-stats) strong{display:block;margin:6px 0 4px;font:800 clamp(2rem,1.5rem + 1.2vw,2.75rem)/1 var(--sk-display)!important;letter-spacing:-.045em!important;color:var(--sk-ink)!important;font-variant-numeric:tabular-nums}
#appShell #viewContainer :is(.customer-stats em,.module-stats div>span){font:700 .78rem/1.2 var(--sk-text)!important;font-style:normal;color:var(--sk-green-text)!important}

/* --- Panneaux, tableaux, cartes ------------------------------------------------- */
#appShell #viewContainer :is(.panel,.settings-panel){border:1px solid var(--sk-line)!important;border-radius:32px!important;box-shadow:none!important}
#appShell #viewContainer :is(.customer-directory-head h2,.module-directory-head h2,.settings-panel h2,.settings-panel h3){font:700 1.5rem/1.1 var(--sk-display)!important;letter-spacing:-.03em!important;color:var(--sk-ink)}
#appShell #viewContainer .data-table thead th{background:var(--sk-mint)!important;color:var(--sk-green-text)!important;font:700 .8125rem/1.2 var(--sk-text)!important;letter-spacing:0;text-transform:none;border:0!important}
#appShell #viewContainer .data-table thead th:first-child{border-radius:14px 0 0 14px}
#appShell #viewContainer .data-table thead th:last-child{border-radius:0 14px 14px 0}
#appShell #viewContainer .data-table tbody tr{transition:background-color .2s ease}
#appShell #viewContainer .data-table tbody tr:hover{background:rgba(226,243,239,.45)}
#appShell #viewContainer .data-table td{border-color:var(--sk-line)!important}
#appShell #viewContainer .module-directory{padding:6px 16px 14px!important}
#appShell #viewContainer .module-directory .module-directory-head{padding:18px 8px 16px!important}
#appShell #viewContainer .reward-card{padding:26px!important;border:1px solid var(--sk-line)!important;border-radius:28px!important;transition:transform .4s var(--sk-ease),box-shadow .4s ease,border-color .3s ease}
#appShell #viewContainer .reward-card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -32px rgba(5,47,43,.5)!important;border-color:rgba(15,143,131,.35)!important}
#appShell #viewContainer .reward-card h2{font:700 1.5rem/1.1 var(--sk-display)!important;letter-spacing:-.03em!important}

/* --- Scanner : aux couleurs de la marque ----------------------------------------
   styles.css range ses règles dans « @layer legacy » : un !important placé dans un
   calque l'emporte sur un !important hors calque. Ces retouches vivent donc dans le
   calque « fxskin », déclaré avant « legacy » dans index.html. */
@layer fxskin{
  #appShell #viewContainer .scanner-view :is(.scanner-box,.scanner-camera-panel){border:1px solid var(--sk-line)!important;border-radius:32px!important;background:linear-gradient(160deg,#fff,var(--sk-mint))!important;box-shadow:none!important}
  #appShell #viewContainer .scanner-view .scanner-viewfinder{border:2px solid transparent!important;border-radius:28px!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#9adfd3,var(--sk-green)) border-box!important;box-shadow:0 0 0 8px rgba(15,143,131,.08),0 30px 50px -30px rgba(5,47,43,.4)!important}
  #appShell #viewContainer .scanner-view .scanner-empty-icon{border-radius:16px!important;background:var(--sk-mint)!important;color:var(--sk-green-text)!important}
  #appShell #viewContainer .scanner-view .scanner-status-dot{background:var(--sk-green)!important}
  #appShell #viewContainer .scanner-view .scanner-customer-panel{border-radius:32px!important}
  #appShell #viewContainer .scanner-view :is(.scanner-customer-panel,.scanner-empty-copy) h2{font-family:var(--sk-display)!important;letter-spacing:-.03em!important}
}

/* --- Paramètres ------------------------------------------------------------------ */
#appShell #viewContainer .settings-view{max-width:1440px!important;margin:0!important}
#appShell #viewContainer .settings-view .module-hero{align-items:center;padding:clamp(26px,3vw,46px)!important}
#appShell #viewContainer .settings-tabs{margin-bottom:20px}
#appShell #viewContainer .settings-tabs button.active{background:var(--sk-ink)!important;border-color:var(--sk-ink)!important}

/* --- Entrée : seulement quand on change de page ------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  #appShell #viewContainer.is-entering .view:not(.dx)>:not(dialog){animation:sk-in .7s var(--sk-ease) both}
  #appShell #viewContainer.is-entering .view:not(.dx)>:nth-child(2){animation-delay:.07s}
  #appShell #viewContainer.is-entering .view:not(.dx)>:nth-child(3){animation-delay:.14s}
  #appShell #viewContainer.is-entering .view:not(.dx)>:nth-child(n+4){animation-delay:.21s}
  @keyframes sk-in{from{opacity:0;transform:translateY(22px)}}
}

@media (max-width:760px){
  #appShell #viewContainer :is(.customers-hero,.module-hero){flex-direction:column;align-items:flex-start;min-height:0;border-radius:28px 28px 28px 64px!important}
  #appShell #viewContainer :is(.customers-hero,.module-hero) .btn{width:100%;justify-content:center}
  #appShell #viewContainer :is(.customer-stats,.module-stats){gap:12px}
  #appShell #viewContainer :is(.panel,.settings-panel){border-radius:24px!important}
}