/* Telire — jetons de la refonte « Registre »
   CSS écrit main, zéro build. À charger APRÈS Bootstrap 5.3.
   Le thème sombre suit data-bs-theme="dark", posé par Bootstrap. */

:root,
[data-bs-theme="light"] {
  --tl-bg: #F6F3EC;
  --tl-surface: #FFFFFF;
  --tl-band: #EDE8DE;
  --tl-field: #FBFAF7;

  --tl-ink: #15191C;
  --tl-muted-strong: #575349;
  --tl-muted: #6E6A61;
  --tl-disabled: #B6B0A4;

  --tl-rule: #E4DFD4;
  --tl-rule-soft: #F0EBE1;
  --tl-rule-strong: #D3CCBD;
  --tl-track: #EFEAE0;

  --tl-accent: #0B4A52;
  --tl-accent-soft: #E3EDEE;
  --tl-accent-line: #B9D2D5;
  --tl-on-accent: #FFFFFF;

  --tl-in: #1B6B4A;
  --tl-out: #A3272F;
  --tl-out-band: #FBF0F0;
  --tl-out-line: #EBC9CB;

  --tl-warn: #8A5A0B;
  --tl-warn-line: #DCC79A;

  --tl-scrim: rgba(21, 25, 28, 0.45);
}

[data-bs-theme="dark"] {
  --tl-bg: #101314;
  --tl-surface: #171B1D;
  --tl-band: #1E2426;
  --tl-field: #1D2225;

  --tl-ink: #ECEEEF;
  --tl-muted-strong: #C4C9CB;
  --tl-muted: #9BA1A3;
  --tl-disabled: #5A6165;

  --tl-rule: #2B3134;
  --tl-rule-soft: #22272A;
  --tl-rule-strong: #3A4145;
  --tl-track: #262C2F;

  --tl-accent: #4DD4E8;
  --tl-accent-soft: #14313A;
  --tl-accent-line: #2E5A63;
  --tl-on-accent: #08222A;

  --tl-in: #4ADE80;
  --tl-out: #F87171;
  --tl-out-band: #2A1B1D;
  --tl-out-line: #4A2C30;

  --tl-warn: #E3B341;
  --tl-warn-line: #5A4718;

  --tl-scrim: rgba(0, 0, 0, 0.62);
}

/* Ponts vers Bootstrap : les composants natifs héritent des jetons
   sans qu'on ait à réécrire leurs classes. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-bg: var(--tl-bg);
  --bs-body-color: var(--tl-ink);
  --bs-secondary-color: var(--tl-muted);
  --bs-border-color: var(--tl-rule);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-link-color: var(--tl-accent);
  --bs-link-hover-color: var(--tl-accent);
  --bs-emphasis-color: var(--tl-ink);
  --bs-success: var(--tl-in);
  --bs-danger: var(--tl-out);
  --bs-focus-ring-color: var(--tl-accent);
}

/* Registre travaille à angles vifs : la hiérarchie tient au fond
   crème contre le blanc des surfaces, pas au rayon. */
.card,
.btn,
.form-control,
.form-select,
.modal-content {
  border-radius: 0;
}

.card {
  background-color: var(--tl-surface);
  border-color: var(--tl-rule);
}

.btn-accent {
  background-color: var(--tl-accent);
  border-color: var(--tl-accent);
  color: var(--tl-on-accent);
  font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--tl-accent);
  border-color: var(--tl-accent);
  color: var(--tl-on-accent);
  filter: brightness(1.08);
}

.form-control,
.form-select {
  background-color: var(--tl-field);
  border-color: var(--tl-rule);
  color: var(--tl-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tl-accent);
  box-shadow: 0 0 0 2px var(--tl-accent-soft);
}

/* Montants : toujours tabulaires, jamais coupés. */
.txn__amount,
.stat-tile__value,
.chart-bar__value,
.month-nav__label {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.txn__amount--in,
.stat-tile__value--in { color: var(--tl-in); }

.txn__amount--out,
.stat-tile__value--out { color: var(--tl-out); }

/* Bandeau de jour : porte le net du jour, en capitales étroites. */
.day-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  background: var(--tl-band);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tl-muted-strong);
}

/* Le repère secondaire du §6.6 : lisible, pas décoratif. */
.txn__meta,
.chart-row__note,
.empty-state {
  color: var(--tl-muted);
}

.txn__tag {
  padding: 1px 7px;
  border: 1px solid var(--tl-rule);
  font-size: 12px;
  color: var(--tl-muted-strong);
  white-space: nowrap;
}

.txn__tag--warn {
  border-color: var(--tl-warn-line);
  color: var(--tl-warn);
}

.txn__tag--share {
  border-color: var(--tl-accent-line);
  color: var(--tl-accent);
}

/* Flèche hors bornes : désactivée, jamais masquée. */
.month-nav__arrow.disabled,
.month-nav__arrow:disabled {
  color: var(--tl-disabled);
  border-color: var(--tl-rule);
  opacity: 1;
}

/* Accessibilité : le focus reste visible partout. */
:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: 2px;
}