/*
 * Effet "liquid glass" — verre depoli + mise en page a barre laterale.
 *
 * Portee volontairement limitee : tout est scope sous body.liquid-glass.
 * Tant qu'une page ne porte pas cette classe ET ne charge pas ce fichier,
 * elle est strictement inchangee. Seule dashboard.html l'utilise (prototype).
 *
 * Traitement verre uniforme : meme fond translucide blanc, meme flou, meme
 * bordure neutre froide pour tous les elements concernes. Aucune bordure
 * doree nulle part — l'or reste uniquement le fond plein du bouton principal.
 */

body.liquid-glass {
  /* Fond de page : blanc froid legerement bleute (ni creme, ni blanc pur). */
  --page-bg: #f8fafc;

  /*
   * styles.css utilise --bg (creme) pour le fond des en-tetes de tableau et
   * le survol des lignes. On l'aligne sur la palette froide, sinon ces zones
   * restent creme au milieu d'une page bleutee. Les tableaux gardent leur
   * fond OPAQUE : c'est un alignement de teinte, pas un effet de verre.
   */
  --bg: #f8fafc;

  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-hover: rgba(255, 255, 255, 0.75);
  --glass-fill-active: rgba(255, 255, 255, 0.85);

  /* Bordures neutres froides : donnent le contour sans rappel de couleur. */
  --glass-border: rgba(203, 213, 225, 0.55);
  --glass-border-fort: rgba(148, 163, 184, 0.6);

  --glass-blur: blur(14px) saturate(140%);
  --glass-blur-fort: blur(18px) saturate(150%);
  --glass-ombre: 0 2px 10px rgba(30, 41, 59, 0.05);
  --glass-ombre-hover: 0 4px 16px rgba(30, 41, 59, 0.09);
  --glass-transition: 220ms ease;

  --largeur-sidebar: 232px;
}

/*
 * --- Pages de documents legaux (devis-view, facture-view) ---
 *
 * Elles recoivent la COQUILLE seule : barre laterale + fond de page. Tout le
 * reste du systeme (boutons, champs, selecteurs, --bg) est neutralise via
 * :not(.document-view) sur les regles concernees, pour que le document lui-
 * meme — tableau de lignes, totaux, boutons d'action, badges, paiements —
 * reste rendu exactement comme avant la migration.
 *
 * --bg revient au creme d'origine : il pilote le fond des en-tetes de
 * tableau et de .totaux-box, qui doivent rester inchanges ici.
 * La geometrie de <main> reste elle aussi celle de styles.css (960px /
 * padding 24px) : l'elargir a 1000px reflowerait le tableau des lignes.
 */
body.liquid-glass.document-view {
  --bg: #faf8f4;
}

body.liquid-glass.document-view main {
  max-width: 960px;
  padding: 24px;
}

/*
 * Un backdrop-filter n'a rien a flouter sur un aplat uniforme : ces degrades
 * froids tres legers donnent de la matiere a l'effet, y compris le long de la
 * barre laterale. Scope a la page vitree.
 */
body.liquid-glass {
  background-color: var(--page-bg);
  background-image:
    radial-gradient(900px 600px at 0% 0%, rgba(120, 150, 190, 0.16), transparent 62%),
    radial-gradient(800px 520px at 100% 6%, rgba(140, 165, 195, 0.13), transparent 60%),
    radial-gradient(700px 820px at 2% 72%, rgba(130, 155, 185, 0.1), transparent 65%);
  background-attachment: fixed;
  padding-left: var(--largeur-sidebar);
}

/* --- Barre laterale de navigation --- */

body.liquid-glass .app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--largeur-sidebar);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 16px;
  overflow-y: auto;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur-fort);
  backdrop-filter: var(--glass-blur-fort);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-ombre);
}

/* Logo seul, sans libelle texte, centre en haut de la barre. */
body.liquid-glass .app-sidebar .app-home {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition);
}

body.liquid-glass .app-sidebar .app-home:hover,
body.liquid-glass .app-sidebar .app-home:focus-visible {
  background: var(--glass-fill-hover);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
}

body.liquid-glass .app-sidebar img.logo {
  display: block;
  height: 128px;
  width: auto;
}

body.liquid-glass .app-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.liquid-glass .app-sidebar nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition),
    color var(--glass-transition);
}

body.liquid-glass .app-sidebar nav a:hover,
body.liquid-glass .app-sidebar nav a:focus-visible {
  background: var(--glass-fill-hover);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
  color: var(--ink);
}

body.liquid-glass .app-sidebar nav a:active {
  background: var(--glass-fill-active);
}

/*
 * Page courante : meme vocabulaire que le survol (fond verre + bordure
 * neutre), fige et appuye par la graisse. Aucune couleur nouvelle.
 */
body.liquid-glass .app-sidebar nav a[aria-current='page'] {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
  color: var(--ink);
  font-weight: 600;
}

body.liquid-glass .app-sidebar nav a[aria-current='page']:hover,
body.liquid-glass .app-sidebar nav a[aria-current='page']:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-fort);
}

/* --- Zone de contenu, decalee a droite de la barre --- */

body.liquid-glass main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px;
}

/*
 * --- Tableaux de donnees : explicitement hors effet de verre ---
 *
 * Lisibilite avant esthetique. Garde defensive : meme si une regle plus
 * large etait ajoutee plus tard, les tableaux restent opaques et nets.
 */
body.liquid-glass table {
  background: var(--white);
}

body.liquid-glass table,
body.liquid-glass thead,
body.liquid-glass tbody,
body.liquid-glass tr,
body.liquid-glass th,
body.liquid-glass td {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/*
 * --- Calendrier et cartes de stats : egalement hors effet de verre ---
 *
 * Meme principe que les tableaux : ce sont des donnees a lire. Les pastilles
 * E/S/I gardent leurs couleurs pleines, la grille garde ses fonds opaques,
 * et les .stat-card de stats.html restent telles qu'elles etaient.
 */
body.liquid-glass .calendar-grid,
body.liquid-glass .calendar-day,
body.liquid-glass .calendar-day-header,
body.liquid-glass .event-dot,
body.liquid-glass .calendar-event-label,
body.liquid-glass main section .stat-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/*
 * --- Blocs d'information, saisie libre et totaux : hors effet de verre ---
 *
 * .card porte la fiche client et les blocs de devis-new ; .ligne-devis et
 * .totaux-box portent la saisie et le calcul financiers, a lire sans
 * ambiguite. Les champs de saisie libre gardent leur rendu de formulaire.
 */
body.liquid-glass .card,
body.liquid-glass .ligne-devis,
body.liquid-glass .ligne-devis input,
body.liquid-glass .ligne-devis select,
body.liquid-glass .ligne-devis textarea,
body.liquid-glass .totaux-box,
body.liquid-glass .field-group input[type='text'],
body.liquid-glass .field-group input[type='tel'],
body.liquid-glass .field-group input[type='email'],
body.liquid-glass .field-group input[type='number'],
body.liquid-glass .field-group textarea {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Boutons --- */

body.liquid-glass:not(.document-view) .btn {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition),
    transform var(--glass-transition);
}

/*
 * Bouton principal : fond or laisse OPAQUE a dessein. Le texte blanc sur cet
 * or plafonne deja a 2,87:1 (sous le seuil WCAG AA) ; le rendre translucide
 * faisait tomber le contraste a 2,68:1. Son traitement verre se limite donc a
 * la bordure, l'ombre et les transitions, sans toucher au fond.
 */
body.liquid-glass:not(.document-view) .btn:not(.secondary):not(.danger):hover {
  box-shadow: var(--glass-ombre-hover);
}

body.liquid-glass:not(.document-view) .btn.secondary {
  background: var(--glass-fill);
  color: var(--ink);
}

body.liquid-glass:not(.document-view) .btn.secondary:hover,
body.liquid-glass:not(.document-view) .btn.secondary:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-fort);
  box-shadow: var(--glass-ombre-hover);
}

body.liquid-glass:not(.document-view) .btn.danger {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(179, 57, 44, 0.55);
}

body.liquid-glass:not(.document-view) .btn.danger:hover,
body.liquid-glass:not(.document-view) .btn.danger:focus-visible {
  background: rgba(179, 57, 44, 0.92);
  border-color: rgba(179, 57, 44, 0.8);
  color: var(--white);
  box-shadow: var(--glass-ombre-hover);
}

body.liquid-glass:not(.document-view) .btn:active {
  transform: scale(0.985);
  box-shadow: var(--glass-ombre);
}

/* --- Champs de recherche et de filtre --- */

/*
 * Regle de partage : les champs de CHOIX (recherche, liste deroulante, date)
 * passent en verre ; les champs de SAISIE LIBRE (texte, tel, email, nombre,
 * zone de texte) restent des champs de formulaire classiques et opaques.
 * Ne pas revenir a un `.field-group input` global : cela vitrerait la saisie
 * de raison sociale / SIRET / adresse de client-form.html.
 */
body.liquid-glass:not(.document-view) .toolbar input[type='search'],
body.liquid-glass:not(.document-view) .toolbar select,
body.liquid-glass:not(.document-view) #intervention-flow input[type='search'],
body.liquid-glass:not(.document-view) .field-group input[type='search'],
body.liquid-glass:not(.document-view) .field-group input[type='date'],
body.liquid-glass:not(.document-view) .field-group select {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
  color: var(--ink);
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition);
}

body.liquid-glass:not(.document-view) .toolbar input[type='search']:hover,
body.liquid-glass:not(.document-view) .toolbar select:hover,
body.liquid-glass:not(.document-view) #intervention-flow input[type='search']:hover,
body.liquid-glass:not(.document-view) .field-group input[type='search']:hover,
body.liquid-glass:not(.document-view) .field-group input[type='date']:hover,
body.liquid-glass:not(.document-view) .field-group select:hover {
  background: var(--glass-fill-hover);
}

body.liquid-glass:not(.document-view) .toolbar input[type='search']:focus,
body.liquid-glass:not(.document-view) .toolbar select:focus,
body.liquid-glass:not(.document-view) #intervention-flow input[type='search']:focus,
body.liquid-glass:not(.document-view) .field-group input[type='search']:focus,
body.liquid-glass:not(.document-view) .field-group input[type='date']:focus,
body.liquid-glass:not(.document-view) .field-group select:focus {
  outline: none;
  background: var(--glass-fill-active);
  border-color: var(--glass-border-fort);
  box-shadow: var(--glass-ombre-hover);
}

/*
 * --- Selecteurs a options (periode sur stats, type pro/particulier sur
 *     client-form) ---
 *
 * Ce ne sont pas des .btn mais des <button> nus styles a part dans
 * styles.css. Meme vocabulaire verre que les autres controles ; l'option
 * active reprend exactement le traitement du lien de nav aria-current
 * (fond verre fige + bordure neutre + graisse), a la place de l'ancien
 * couple bordure doree / fond creme.
 */
body.liquid-glass .periode-selector button,
body.liquid-glass .type-toggle button {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  color: var(--ink);
  box-shadow: var(--glass-ombre);
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition);
}

body.liquid-glass .periode-selector button:hover,
body.liquid-glass .periode-selector button:focus-visible,
body.liquid-glass .type-toggle button:hover,
body.liquid-glass .type-toggle button:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-fort);
  box-shadow: var(--glass-ombre-hover);
}

body.liquid-glass .periode-selector button.active,
body.liquid-glass .type-toggle button.active {
  background: var(--glass-fill-active);
  border-color: var(--glass-border-fort);
  font-weight: 600;
}

/* --- Tuiles du tableau de bord --- */

/*
 * Meme traitement verre pour les 7 tuiles, cliquables ou non : une tuile
 * statique laissee en blanc opaque ressortait plus fort qu'une tuile
 * cliquable en verre, ce qui inversait la hierarchie visuelle.
 *
 * Scope IMPERATIF sur #dashboard-content : la classe .stat-card est partagee
 * avec stats.html, ou les cartes de metriques doivent rester opaques. Ne pas
 * elargir ce selecteur.
 */
body.liquid-glass #dashboard-content .stat-card {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-ombre);
}

/* Seules les tuiles cliquables reagissent au pointeur. */
body.liquid-glass a.stat-card.dashboard-tuile {
  transition:
    background var(--glass-transition),
    border-color var(--glass-transition),
    box-shadow var(--glass-transition),
    transform var(--glass-transition);
}

/* Survol neutre : meme traitement que la nav, sans bordure doree. */
body.liquid-glass a.stat-card.dashboard-tuile:hover,
body.liquid-glass a.stat-card.dashboard-tuile:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-fort);
  box-shadow: var(--glass-ombre-hover);
}

body.liquid-glass a.stat-card.dashboard-tuile:active {
  transform: scale(0.99);
  background: var(--glass-fill-active);
}

/* --- Ecrans etroits : la barre repasse en bandeau horizontal --- */

@media (max-width: 900px) {
  body.liquid-glass {
    padding-left: 0;
  }

  body.liquid-glass .app-sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }

  body.liquid-glass .app-sidebar img.logo {
    height: 48px;
  }

  body.liquid-glass .app-sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  body.liquid-glass main {
    padding: 24px 16px;
  }
}

/*
 * --- Correctifs mobiles (ajoutes apres mesure reelle a 375/390/428px) ---
 *
 * Tout est confine aux media queries : aucune regle desktop n'est modifiee.
 * Les seuils sont choisis d'apres les mesures : les tableaux ne debordent
 * qu'en dessous d'environ 505px, mais le conteneur de defilement ne
 * s'active que s'il y a reellement debordement, donc il est pose des 900px
 * sans effet visible au-dessus du seuil de debordement.
 */

@media (max-width: 900px) {
  /* Cibles tactiles : 44px minimum sur les liens de navigation. */
  body.liquid-glass .app-sidebar nav a {
    padding: 12px 14px;
  }

  /*
   * Tableaux denses : defilement horizontal maitrise dans leur conteneur,
   * au lieu d'un debordement qui pousse toute la page (mesure : +232px sur
   * devis-factures, +114px sur clients, +71px sur la fiche client).
   */
  body.liquid-glass #clients-table-wrapper,
  body.liquid-glass #table-wrapper,
  body.liquid-glass #content,
  body.liquid-glass .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Le tableau garde sa largeur naturelle et defile dans son conteneur. */
  body.liquid-glass table {
    width: auto;
    min-width: 100%;
  }
}

@media (max-width: 640px) {
  /*
   * Barre de navigation compacte : mesuree a 178px de haut avec le logo
   * flottant a cote d'un bloc de liens replie sur 3 rangees. On reduit le
   * logo et on resserre les liens pour regagner de la hauteur utile, sans
   * masquer aucun lien derriere un defilement.
   */
  body.liquid-glass .app-sidebar {
    gap: 10px;
    padding: 10px 12px;
  }

  body.liquid-glass .app-sidebar img.logo {
    height: 40px;
  }

  body.liquid-glass .app-sidebar .app-home {
    padding: 4px;
    flex: 0 0 auto;
  }

  body.liquid-glass .app-sidebar nav {
    flex: 1;
    gap: 4px;
  }

  body.liquid-glass .app-sidebar nav a {
    padding: 11px 10px;
    font-size: 13px;
    /* 44px garantis : le calcul padding + interligne retombait a 43,5px. */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /*
   * Calendrier : styles.css impose overflow:hidden et des colonnes 1fr dont
   * la taille minimale est le contenu. Resultat mesure a 375px : 2 colonnes
   * sur 7 (samedi, dimanche) etaient purement invisibles, sans defilement
   * possible. On force des colonnes reductibles et on autorise le
   * defilement horizontal plutot que la troncature.
   */
  body.liquid-glass .calendar-grid {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    overflow-x: auto;
  }

  body.liquid-glass .calendar-day,
  body.liquid-glass .calendar-day-header {
    min-width: 0;
    overflow: hidden;
  }

  body.liquid-glass .calendar-day {
    min-height: 62px;
    padding: 4px 3px;
    font-size: 12px;
  }

  body.liquid-glass .calendar-day-events {
    min-width: 0;
  }

  body.liquid-glass .calendar-event-label {
    font-size: 10px;
    min-width: 0;
  }

  body.liquid-glass .calendar-toolbar h2 {
    min-width: 0;
    flex: 1;
    font-size: 15px;
  }

  /* Champs cote a cote : empiles (mesure : 2x144px sur client-form,
   * 3x53px sur le formulaire de paiement de facture-view). */
  body.liquid-glass .field-row {
    flex-direction: column;
    gap: 0;
  }

  /*
   * Saisie : 16px minimum evite le zoom automatique d'iOS a la mise au
   * point, et 44px de hauteur rend les champs atteignables au doigt.
   */
  body.liquid-glass input,
  body.liquid-glass select,
  body.liquid-glass textarea {
    font-size: 16px;
  }

  /*
   * Regle globale plutot qu'enumeration de selecteurs : le champ de
   * recherche du flux d'ajout d'intervention (mesure a 174x24px) n'etait
   * ni dans .toolbar ni dans .field-group et passait entre les mailles.
   */
  body.liquid-glass input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  body.liquid-glass select,
  body.liquid-glass textarea {
    min-height: 44px;
  }

  /* Le champ de recherche du flux d'intervention n'a pas de largeur propre
   * dans styles.css : 174px mesures, il tenait moins de la moitie de la
   * carte. */
  body.liquid-glass #intervention-flow input[type='search'] {
    width: 100%;
  }

  body.liquid-glass .btn,
  body.liquid-glass .type-toggle button,
  body.liquid-glass .periode-selector button {
    min-height: 44px;
    padding: 11px 16px;
  }

  /* Le selecteur de periode passe en colonne : 3 libelles longs sur une
   * ligne de 375px donnaient des boutons de 109px tronques. */
  body.liquid-glass .periode-selector {
    flex-direction: column;
    max-width: none;
  }

  /*
   * Lignes de devis : la grille a 6 colonnes donnait des champs de 31px,
   * impossibles a remplir. On repasse en 3 colonnes + description pleine
   * largeur, avec les intitules de colonnes reportes sur chaque champ
   * puisque la ligne d'en-tete n'a plus de sens empilee.
   */
  body.liquid-glass #lignes-header {
    display: none !important;
  }

  body.liquid-glass .ligne-devis {
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 10px 8px;
    padding: 14px 0;
  }

  body.liquid-glass .ligne-devis > div:nth-child(1) {
    grid-column: 1 / -1;
  }

  body.liquid-glass .ligne-devis > div:nth-child(2)::before,
  body.liquid-glass .ligne-devis > div:nth-child(3)::before,
  body.liquid-glass .ligne-devis > div:nth-child(4)::before {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
  }

  body.liquid-glass .ligne-devis > div:nth-child(2)::before {
    content: 'Quantite';
  }

  body.liquid-glass .ligne-devis > div:nth-child(3)::before {
    content: 'Unite';
  }

  body.liquid-glass .ligne-devis > div:nth-child(4)::before {
    content: 'Prix unit.';
  }

  body.liquid-glass .ligne-devis .montant-cell {
    grid-column: 1 / 4;
    text-align: left;
    padding-top: 4px;
  }

  body.liquid-glass .ligne-devis .remove-ligne {
    align-self: center;
    min-width: 40px;
    min-height: 40px;
  }

  /*
   * Liens de numero dans les tableaux (#12, #3...) : 17x17px mesures,
   * intouchables au doigt. La marge negative etend la zone tactile sans
   * modifier la hauteur de ligne.
   */
  body.liquid-glass td a {
    display: inline-block;
    padding: 14px 10px;
    margin: -14px -10px;
  }

  /* Boutons d'action en pile plutot qu'en ligne debordante. */
  body.liquid-glass .actions-row .btn,
  body.liquid-glass .form-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* --- Repli si backdrop-filter n'est pas supporte : fonds plus opaques --- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.liquid-glass {
    --glass-fill: rgba(255, 255, 255, 0.88);
    --glass-fill-hover: rgba(255, 255, 255, 0.95);
    --glass-fill-active: rgba(255, 255, 255, 0.98);
  }
}

/* --- Aucune transition si l'utilisateur a demande moins d'animation --- */

@media (prefers-reduced-motion: reduce) {
  body.liquid-glass .app-sidebar .app-home,
  body.liquid-glass .app-sidebar nav a,
  body.liquid-glass .btn,
  body.liquid-glass:not(.document-view) .toolbar input[type='search'],
  body.liquid-glass:not(.document-view) .toolbar select,
  body.liquid-glass .field-group input,
  body.liquid-glass:not(.document-view) .field-group select,
  body.liquid-glass .field-group textarea,
  body.liquid-glass a.stat-card.dashboard-tuile {
    transition: none;
  }

  body.liquid-glass .btn:active,
  body.liquid-glass a.stat-card.dashboard-tuile:active {
    transform: none;
  }
}