/*
 * Yollo 2a — les seules règles que Tailwind ne peut pas exprimer dans les templates.
 *
 * Le thème : le bleu du logo sur fond chaud, coins adoucis, surfaces élevées. Le point unique où le
 * système visuel se règle — les jetons ci-dessous suffisent à retourner toute l'application
 * sans toucher un seul template.
 *
 * Meteor charge tous les .css du projet ; l'ordre est alphabétique à profondeur égale, donc ce
 * fichier passe après globals.css et ses variables gagnent. Pas de @layer base ici : PostCSS
 * tourne fichier par fichier et Tailwind refuse un @layer sans @tailwind base dans le même
 * fichier. La police Archivo est déclarée dans main.css, qui est chargé en dernier et pose la
 * règle universelle.
 */

/*
 * La refonte « Yollo Redesign » : le système Modernist plat et à angles vifs devient chaud et
 * élevé. On garde la police Archivo et toute la structure ; ce qui change tient dans ces jetons —
 *
 *  - un sol chaud (--background) et une surface distincte qui s'en détache (--card / --surface) ;
 *  - un rayon non nul (--radius: 14px) — globals.css / tailwind.config.js le lisent pour
 *    rounded-lg/md/sm ; les rounded-xl et au-delà gardent leurs valeurs Tailwind ;
 *  - deux ombres douces (--shadow-card / --shadow-card-sm), exposées en utilitaires
 *    `shadow-card` / `shadow-card-sm` via tailwind.config.js ;
 *  - un filet (--divider) et un rouge de débit (--negative) pour les montants négatifs.
 *
 * Les valeurs de surface viennent de `tokens(isDark)` du prototype. `--primary` est désormais le
 * bleu du logo (#2974AE) et non plus le teal : la teinte exacte du logo (hsl(206 62% 42%)), reprise
 * telle quelle en clair — elle passe le contraste AA sans retouche (5,0:1 sur blanc, 4,6:1 sur le
 * sol chaud). En sombre elle est éclaircie, comme le teal l'était (voir .dark plus bas).
 */
:root {
  --primary: 206 62% 42%;
  --primary-foreground: 0 0% 100%;

  /* Coins adoucis. En pixels et non en rem : `html { font-size: 13px }` ramènerait toute valeur
     en rem à 81 %, et un rayon de carte doit tomber sur un vrai nombre. */
  --radius: 14px;

  /* Le sol chaud et la surface qui s'en détache. `--background` = corps de l'app (#F6F5F2),
     `--card` = ce qui est posé dessus avec une ombre (#FFFFFF). `--ground` (#EDEBE6) n'est visible
     qu'au débordement de défilement / avant le premier paint (html { background }). */
  --ground: 43 16% 92%;
  --background: 45 18% 96%;
  --card: 0 0% 100%;
  --surface: 0 0% 100%;
  --surface-alt: 45 33% 98%;
  --popover: 0 0% 100%;

  /* Encres chaudes plutôt que le gris neutre d'origine. */
  --foreground: 40 6% 10%;
  --card-foreground: 40 6% 10%;
  --popover-foreground: 40 6% 10%;

  /* `--muted` sert de fond aux panneaux et champs secondaires (recherche, filtres, "Voir plus").
     Il passe à la teinte chaude claire du prototype (surfaceAlt) : posé sur le sol #F6F5F2 il se
     lit comme un panneau plus clair. `--muted-foreground` ne bouge pas — 43,5 % de gris tient
     4,6:1 sur 96,1 % et davantage sur cette teinte plus claire encore. */
  --muted: 45 33% 98%;
  --accent: 45 16% 94%;

  /* Le filet : rgba(27,26,24,.08) sur le sol, aplati en couleur pleine pour `hsl(var(--border))`. */
  --border: 43 12% 88%;
  --input: 43 12% 88%;

  /* Rouge de débit — les montants négatifs, "vs période précédente" en hausse. */
  --negative: 3 44% 47%;

  /* Ombres douces du prototype. Consommées par `shadow-card` / `shadow-card-sm`
     (tailwind.config.js) et par la barre du bas / la feuille ci-dessous. */
  --shadow-card: 0 1px 2px rgba(20, 20, 18, 0.04), 0 10px 26px rgba(20, 20, 18, 0.09);
  --shadow-card-sm: 0 1px 3px rgba(20, 20, 18, 0.07), 0 3px 8px rgba(20, 20, 18, 0.05);
}

/*
 * Sur fond sombre le bleu du logo descend sous le seuil de lisibilité : on l'éclaircit (même hue
 * 206°, saturation et lumière remontées), et le texte posé dessus devient sombre — mesuré 5,1:1 du
 * bleu sur le fond sombre, 5,6:1 du texte sombre sur le bleu. Même geste que pour le teal d'avant.
 *
 * Les surfaces sombres viennent aussi de `tokens(true)` : un fond bleuté très sombre (#15171A),
 * une surface qui s'en détache (#1E2023), un filet clair (rgba(255,255,255,.09)).
 */
.dark {
  --primary: 206 55% 52%;
  --primary-foreground: 0 0% 3.9%;

  --ground: 210 8% 5%;
  --background: 216 11% 9%;
  --card: 216 8% 13%;
  --surface: 216 8% 13%;
  --surface-alt: 216 7% 15%;
  --popover: 216 8% 13%;

  --foreground: 48 16% 94%;
  --card-foreground: 48 16% 94%;
  --popover-foreground: 48 16% 94%;

  --muted: 216 7% 15%;
  --accent: 216 7% 15%;

  --border: 216 6% 20%;
  --input: 216 6% 20%;

  --negative: 5 65% 66%;

  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Le sol, visible seulement au débordement de défilement et avant le premier paint. */
html {
  background: hsl(var(--ground));
}

/*
 * Les pastilles de la feuille de classement — catégories (`js-category-pick`) et tags
 * (`js-tag-add` / `js-tag-remove` / `js-tag-create`) — forment un nuage dense et défilable, pas
 * des boutons d'action isolés. Elles sont exemptées du plancher de 44 px que globals.css garantit
 * sur tout <button> en tactile (`@media (pointer: coarse)`) : sans ça, sur iPhone chaque pastille
 * `h-[26px]` était poussée à 44 px et le `rounded-full` en faisait des cercles/ovales. La cible
 * tactile réelle reste large (le libellé + son padding horizontal) et les pastilles sont espacées.
 * Spécificité de classe > le sélecteur `button` de la règle média : pas besoin de `!important`.
 *
 * Même nuage, même exemption pour la feuille de budget : ses pastilles de catégories/tags
 * (`js-budget-category-toggle` / `js-budget-tag-toggle`) suivent exactement le même patron visuel
 * — repéré en testant la feuille sur mobile, où elles se retrouvaient poussées à 44 px comme les
 * autres avant cette règle. La grille d'icônes (`js-budget-icon-pick`) est ajoutée pour la même
 * raison géométrique : `aspect-square` la dimensionne sur la largeur de sa colonne (calculée par
 * `auto-fill`/`minmax(40px,1fr)`), et un plancher de hauteur à 44 px casserait le carré dès qu'une
 * colonne calcule moins que ça.
 */
.js-category-pick,
.js-tag-add,
.js-tag-remove,
.js-tag-create,
.js-budget-category-toggle,
.js-budget-tag-toggle,
.js-budget-icon-pick {
  min-height: 0;
}

/*
 * Même plancher de 44 px, même mécanisme — cette fois sur des barres d'outils compactes plutôt
 * qu'un nuage de pastilles : le contrôle segmenté « Tout / À classer » du Pointage
 * (`js-point-filter`), son bouton « Tout pointer » (`js-point-all`, un `uk-btn-sm` — l'exemption
 * l'emporte ici sur la règle générale qui garde les `uk-btn` à 44 px pour les actions isolées,
 * parce que celui-ci vit collé au contrôle segmenté et doit suivre son rythme), le bouton
 * « Classer » de la même position sur Opérations (`js-bulk-categorize`), les puces de filtre actif
 * et leur croix (`js-an-filter-clear`, `js-filter-clear`), le sélecteur de période d'Analyse et ses
 * flèches (`js-period-scale`, `js-period-prev`, `js-period-next`), le contrôle segmenté de
 * Contreparties (`js-counterparty-kind-filter`) et son bouton de purge (`js-counterparty-purge-
 * orphans`), le choix de mode de la feuille de budget (`js-budget-mode-pick`), le lien
 * « Réessayer » du tiroir hors ligne (`js-offline-retry`, layout.hbs.html — un lien texte souligné
 * posé en ligne dans une rangée `items-center`, pas un bouton indépendant : à 44 px il débordait du
 * tiroir et poussait sa hauteur bien au-delà du texte qu'il accompagne), et le contrôle segmenté
 * « Apparence » de Compte › Utilisateur (`js-theme-pick`, users.hbs.html — repéré séparément : son
 * design avait été corrigé pour suivre le même motif que `js-point-filter`, mais l'exemption elle-
 * même avait été oubliée, donc le bug restait entier sur iPhone malgré des classes désormais
 * correctes). Repéré sur iPhone Safari : chacun de ces boutons naît avec une hauteur de 26 à 32 px
 * selon son gabarit, et le plancher les poussait tous à 44 px — le texte restant à sa taille
 * naturelle, centré dans une boîte bien plus haute que prévu, ce qui se lisait comme un espacement
 * excessif au-dessus et en dessous.
 *
 * `js-notif-toggle` (users.hbs.html, les deux bascules email/téléphone de la liste Notifications)
 * est le même bug sous une forme encore plus visible : un bouton `rounded-full` de 32×32 px devient
 * une pilule ovale de 32×44 dès que le plancher s'applique, alors qu'il doit rester un cercle.
 */
.js-point-filter,
.js-point-all,
.js-bulk-categorize,
.js-theme-pick,
.js-an-filter-clear,
.js-filter-clear,
.js-period-scale,
.js-period-prev,
.js-period-next,
.js-counterparty-kind-filter,
.js-counterparty-purge-orphans,
.js-offline-retry,
.js-budget-mode-pick,
.js-notif-toggle,
.js-group-mode,
.js-group-scope,
.js-unusual-jump,
.js-recurring-drill,
.js-assistant-copy,
.js-assistant-retry {
  min-height: 0;
}

/* The row an "inhabituel" note points at: a tint that fades, so the eye finds it after the scroll. */
@keyframes unusual-flash {
  from { background-color: hsl(var(--negative) / 0.22); }
  to { background-color: transparent; }
}

.unusual-flash {
  animation: unusual-flash 1.8s ease-out;
}

/*
 * Les contrôles FrankenUI reprennent le rayon du système. `--radius` (14px) est un peu généreux
 * pour un bouton dense : `.uk-btn` / `.uk-input` / `.uk-select` prennent 10px, la puce garde sa
 * forme pilule.
 */
.uk-btn,
.uk-input,
.uk-select {
  border-radius: 10px;
}

.uk-badge {
  border-radius: 999px;
}

/*
 * La barre de connexion de sakod (`sk.hbs.html` l'inclut dans le corps de page, hors du layout de
 * l'application) est masquée : yollo affiche la sienne, qui dit en français ce qu'il advient des
 * modifications faites hors ligne et combien en attendent — ce que « Disconnected (retry in 3s) »
 * ne dit pas. Deux bandeaux pour le même fait, l'un en anglais, se contredisaient à l'écran.
 */
.sk-connection-status {
  display: none;
}

/*
 * `sk.toast` (packages/sakod-core/toasts.client.js) opens top-center: this app's bottom nav sits at
 * every width, so a bottom toast always landed right on top of it. Pushed below the notch.
 *
 * `html` prefix, not the bare class: verified live, UIkit's own rule (same single-class
 * specificity) was still winning — this file loading after globals.css doesn't guarantee it loads
 * after UIkit's own stylesheet, wherever that one is actually injected.
 */
html .uk-notification-top-center {
  top: calc(12px + env(safe-area-inset-top, 0px));
}