/* =============================================================================
   Compléments applicatifs — tout ce qui est propre à cette application et n'a
   pas sa place dans le système de design générique.
   Chargé APRÈS design-system.css : il peut donc ajuster sans !important.
   ========================================================================== */

/* --- 1. Cartes ------------------------------------------------------------ */
/* Le système de design laisse `.card` sans marge intérieure (le remplissage est
   porté par .card--pad ou par .card__body). Toutes les cartes de cette
   application reçoivent leur contenu en direct : on pose donc le padding ici,
   une fois pour toutes. */
.card {
  padding: var(--space-6);
  gap: var(--space-2);
}
/* Une carte qui contient déjà ses propres bandeaux gère son remplissage seule. */
.card:has(> .card__head),
.card:has(> .card__body) {
  padding: 0;
  gap: 0;
}

/* `.card` est une colonne : combiné à `.row`, c'est la colonne qui l'emportait
   (règle plus tardive dans la feuille) et tout se retrouvait empilé et centré. */
.card.row,
.list-row.row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
.card.row--top { align-items: flex-start; }

/* Cartes cliquables : beaucoup de « cartes » sont en réalité des <button> ou
   des <a>. On neutralise l'apparence native du contrôle. */
button.card,
a.card,
button.list-row,
a.list-row,
button.calendar-day {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
a.card,
a.list-row,
a.nav-item,
a.tabbar-item,
a.section-head__meta,
a.auth__link {
  text-decoration: none;
}

/* --- 2. Tuiles de compte (accueil) ---------------------------------------- */
.account-tile {
  min-height: 92px;
  justify-content: space-between;
  padding-top: calc(var(--space-6) + 2px);
}
.account-tile__name {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.account-tile .money { font-size: 1.0625rem; }

/* --- 2 bis. Séparateur au-dessus d'un bloc -------------------------------- */
/* À ne pas confondre avec `.u-rule` du système de design, qui est un ÉLÉMENT
   séparateur de 1 px de haut : posée comme classe sur un bloc, elle écrase sa
   hauteur et son contenu se fait rogner par la carte. */
.divider-top {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-5);
}

/* --- 3. Anneau et légende de graphique ------------------------------------ */
/* Les secteurs de l'anneau sont des surfaces PLEINES : ils ne doivent surtout
   pas porter `.chart__path`, réservée aux courbes (`fill: none`). */
.donut__seg {
  cursor: pointer;
  transition: opacity 140ms var(--ease-out);
}
/* Une ligne = pastille · nom · budget · montant, sur UNE seule ligne, avec les
   montants alignés à droite les uns sous les autres. */
.legend { width: 100%; min-width: 0; }
.legend__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: 5px;
}
.legend__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend__budget {
  grid-column: 3;
  justify-self: end;
  font-size: 0.6875rem;
  color: var(--text-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.legend__value {
  grid-column: 3;
  justify-self: end;
  min-width: 5.5rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Avec un budget affiché, montant et budget se partagent la colonne de droite. */
.legend__item--budget { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.legend__item--budget .legend__budget { grid-column: 3; }
.legend__item--budget .legend__value { grid-column: 4; }

/* Bloc « anneau + légende » : centré verticalement, empilé sur petit écran. */
.chart-split {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  justify-content: center;
}
.chart-split > .legend { flex: 1 1 240px; }

/* --- 4. Liste des transactions -------------------------------------------- */
/* `.list-day` est un BANDEAU de date collant, posé au-dessus de la liste du
   jour — pas un conteneur. Les deux sont donc des frères dans `.day-group`. */
.day-group {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inset-top);
  overflow: clip;
}
.day-group + .day-group { margin-top: var(--space-5); }
.day-group .list-day { border-radius: 0; }
.day-group .list--card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* --- 5. Calendrier -------------------------------------------------------- */

/* Jour déjà passé (ou aujourd'hui) portant une échéance récurrente non confirmée.
   Teinte ambrée + panonceau en haut à gauche — l'angle haut-droit est déjà occupé
   par la pastille « aujourd'hui » du système de design. */
.calendar-day--pending {
  background: rgb(var(--rgb-amber) / 0.13);
  border-color: rgb(var(--rgb-amber) / 0.55);
  color: var(--amber-200);
}
.calendar-day--pending .calendar-day__num { font-weight: 680; }
.calendar-day__flag {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: var(--warn);
  color: var(--bg);
}
.calendar-day__flag svg { width: 10px; height: 10px; stroke-width: 2.6; }

@media (hover: hover) and (pointer: fine) {
  .calendar-day--pending:hover { background: rgb(var(--rgb-amber) / 0.2); }
}

/* Carte d'avertissement (pendant de `.card--danger`, absent du système de design). */
.card--warn {
  border-color: rgb(var(--rgb-amber) / 0.45);
  background-image: linear-gradient(180deg, rgb(250 204 21 / 0.08), rgb(15 23 42 / 0.62) 60%);
}
a.card--warn:hover { border-color: rgb(var(--rgb-amber) / 0.7); }

/* --- 6. Saisie rapide : champ marchand ------------------------------------ */
.merchant-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}
.merchant-field > input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  height: auto;
  font: inherit;
  color: var(--text-1);
  outline: none;
}
.popover .popover__item .avatar { flex: none; }

/* --- 7. Sélecteur compact (filtres, choix de compte du graphique) ---------- */
.select--sm {
  height: 36px;
  padding-block: 0;
  padding-inline: var(--space-4) var(--space-8);
  font-size: 0.8125rem;
  border-radius: var(--r-md);
  max-width: 15rem;
}

/* --- 8. Petites utilités manquantes --------------------------------------- */
.u-ml-2 { margin-left: 6px; }
.u-mt-1 { margin-top: 4px; }
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 0;
  cursor: pointer;
  transition: box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.color-swatch:active { transform: scale(0.92); }

/* --- 9. En-tête collant : ne doit pas coller au premier bloc --------------- */
.app-main > [data-page] > .container { padding-top: var(--space-5); }

/* --- 10. Très petits écrans ----------------------------------------------- */
@media (max-width: 359px) {
  .kpi__value { font-size: 1.0625rem; }
  .tabbar-item__label { font-size: 0.5625rem; }
  .card { padding: var(--space-5); }
}

/* --- 11. Impression -------------------------------------------------------- */
@media print {
  .tabbar, .fab, .sidebar, .app-header__actions { display: none !important; }
}