/* ════════════════════════════════════════════════════════════════════════
   « LE REGISTRE » — refonte du tableau de bord (gestion locative)
   Identité encre-sur-papier-de-relevé. Les chiffres sont les héros.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --reg-ink:       #16263F;  /* encre : titres et texte */
  --reg-ink-soft:  #5A6B7C;  /* encre diluée : secondaire */
  --reg-paper:     #E7E9E2;  /* papier de relevé (sage-grège froid) */
  --reg-folio:     #FBFBF7;  /* surface folio (cartes) */
  --reg-seal:      #9E3B33;  /* sceau / cinabre : accent rare */
  --reg-vert:      #3C6B58;  /* sémantique « encaissé » */
  --reg-rule:      #C9CCC2;  /* filets fins */
  --reg-rule-ink:  #16263F;  /* filet d en-tête de registre */
}

/* ════════════════════════════════════════════════════════════════════════
   IDENTITÉ GLOBALE — appliquée à toutes les pages
   Remappe les tokens Material vers la palette encre/papier : tous les
   composants md3-* héritent instantanément de la nouvelle identité.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --md-primary: #16263F;            --md-on-primary: #FBFBF7;
  --md-primary-container: #DBE0E7;  --md-on-primary-container: #16263F;
  --md-secondary: #5A6B7C;          --md-on-secondary: #FFFFFF;
  --md-secondary-container: #E2E4DB; --md-on-secondary-container: #2A3A30;
  --md-tertiary: #9E3B33;           --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #F1E0DD; --md-on-tertiary-container: #57201B;
  --md-error: #9E3B33;              --md-on-error: #FFFFFF;
  --md-error-container: #F1E0DD;    --md-on-error-container: #57201B;
  --md-background: #E7E9E2;         --md-on-background: #16263F;
  --md-surface: #E7E9E2;            --md-on-surface: #16263F;
  --md-surface-variant: #DBDDD4;    --md-on-surface-variant: #5A6B7C;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #FBFBF7;
  --md-surface-container: #EDEEE8;
  --md-surface-container-high: #E8EAE2;
  --md-surface-container-highest: #E3E5DD;
  --md-outline: #9CA39A;            --md-outline-variant: #C9CCC2;
  --md-shadow-1: none;
  --md-shadow-2: 0 1px 3px rgba(22, 38, 63, .12);
  --md-shadow-3: 0 8px 28px rgba(22, 38, 63, .18);
}

/* Typographie globale */
body { font-family: 'Public Sans', system-ui, -apple-system, sans-serif; }
::selection { background: var(--reg-seal); color: #fff; }

/* Boutons : pilules MD3 → rectangles à coins légers */
.md3-btn, .md3-btn-sm { border-radius: 3px; }
.md3-btn { font-family: 'Public Sans', sans-serif; }
.md3-btn:focus-visible { outline: 2px solid var(--reg-seal); outline-offset: 2px; }

/* Cartes : plates, filet + petit radius, sans ombre */
.md3-card { border-radius: 3px; border: 1px solid var(--md-outline-variant); box-shadow: none; }

/* Tables : registre à filets, chiffres mono tabulaires */
.md3-table thead tr { background: transparent; }
.md3-table thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem; letter-spacing: .14em; font-weight: 600;
  border-bottom: 1.5px solid var(--md-primary); padding-bottom: 11px;
}
.md3-table tbody tr:hover { background-color: rgba(22, 38, 63, .025); }
.md3-table .td-mono,
.md3-table .td-amount { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.md3-table .td-amount { color: var(--md-on-surface); font-variant-numeric: tabular-nums; }

/* Titres de page en display */
.md3-page-title { font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif; letter-spacing: -.02em; }

/* Chips / badges : carrés, mono */
.md3-chip, .md3-badge { border-radius: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Champs de formulaire */
.md3-input, .md3-select { border-radius: 3px; font-family: 'Public Sans', sans-serif; }

/* Sections, alertes, dialogues, login : rayons MD3 → mesurés */
.md3-section, .md3-alert-error { border-radius: 3px; }
.md3-dialog, .md3-login-card, .md3-login-icon { border-radius: 6px; }
.md3-login-card { box-shadow: var(--md-shadow-2); }
.md3-empty-icon { opacity: .3; }

/* Barre latérale : wordmark mono, items carrés (désormais global) */
.md3-sidebar { background: #ECEEE7; border-right: 1px solid var(--md-outline-variant); }
.md3-sidebar-logo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .16em; font-size: 1rem; font-weight: 600;
}
.md3-sidebar-item { border-radius: 3px; font-family: 'Public Sans', sans-serif; }
.md3-sidebar-user { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.reg-page {
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--reg-ink);
  -webkit-font-smoothing: antialiased;
}
.reg-page ::selection { background: var(--reg-seal); color: #fff; }

/* En-tête : eyebrow + titre + folio daté */
.reg-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1.5px solid var(--reg-rule-ink);
}
.reg-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.24em; color: var(--reg-ink-soft);
}
.reg-title {
  font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.02em; margin: 8px 0 0;
  color: var(--reg-ink);
}
.reg-folio {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--reg-ink-soft);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.reg-folio .reg-seal-mark {
  width: 9px; height: 9px; background: var(--reg-seal); flex-shrink: 0;
  transform: rotate(45deg);
}

/* Bandeau-registre : 4 chiffres surdimensionnés à filets verticaux */
.reg-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--reg-folio);
  border: 1px solid var(--reg-rule);
  border-top: 2px solid var(--reg-rule-ink);
  border-radius: 3px; overflow: hidden;
  margin-bottom: 28px;
}
.reg-cell {
  padding: 22px 24px 20px;
  border-left: 1px solid var(--reg-rule);
  display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: inherit;
  transition: background-color .18s ease;
}
.reg-cell:first-child { border-left: none; }
a.reg-cell:hover { background: rgba(22, 38, 63, 0.035); }
a.reg-cell:focus-visible { outline: 2px solid var(--reg-seal); outline-offset: -2px; }
.reg-cell-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--reg-ink-soft); margin-bottom: 10px;
}
.reg-cell-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.7rem); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--reg-ink);
}
a.reg-cell:hover .reg-cell-value { color: var(--reg-seal); }
.reg-cell-foot {
  margin-top: 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; color: var(--reg-ink-soft);
}
.reg-cell-foot a { color: var(--reg-ink); text-decoration: none; font-weight: 600; }
.reg-cell-foot a:hover { color: var(--reg-seal); }

/* Révélation orchestrée du bandeau au chargement (une seule, discrète). */
@media (prefers-reduced-motion: no-preference) {
  .reg-band .reg-cell { opacity: 0; animation: reg-rise .5s ease forwards; }
  .reg-band .reg-cell:nth-child(1) { animation-delay: .04s; }
  .reg-band .reg-cell:nth-child(2) { animation-delay: .10s; }
  .reg-band .reg-cell:nth-child(3) { animation-delay: .16s; }
  .reg-band .reg-cell:nth-child(4) { animation-delay: .22s; }
}
@keyframes reg-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Folio : carte à en-tête labellisé (graphe, registre…) */
.reg-folio-card {
  background: var(--reg-folio); border: 1px solid var(--reg-rule);
  border-radius: 3px; margin-bottom: 28px;
}
.reg-folio-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--reg-rule);
}
.reg-folio-ref {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--reg-ink-soft);
}
.reg-folio-body { padding: 20px; }

/* Registre des quittances */
.reg-ledger { width: 100%; border-collapse: collapse; }
.reg-ledger thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--reg-ink-soft); text-align: left;
  padding: 0 14px 11px; border-bottom: 1.5px solid var(--reg-rule-ink);
}
.reg-ledger thead th.reg-right { text-align: right; }
.reg-ledger tbody td {
  padding: 13px 14px; border-bottom: 1px solid var(--reg-rule);
  font-size: 0.875rem; vertical-align: middle;
}
.reg-ledger tbody tr:last-child td { border-bottom: none; }
.reg-ledger tbody tr { transition: background-color .15s ease; }
.reg-ledger tbody tr:hover { background: rgba(22, 38, 63, 0.025); }
.reg-tenant { font-weight: 600; color: var(--reg-ink); }
.reg-ref {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.72rem;
  padding: 2px 7px; border: 1px solid var(--reg-rule); border-radius: 2px;
  color: var(--reg-ink-soft); margin-right: 8px; white-space: nowrap;
}
.reg-addr { color: var(--reg-ink-soft); font-size: 0.82rem; }
.reg-period {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.8rem;
  color: var(--reg-ink-soft); white-space: nowrap;
}
.reg-period .reg-arrow { color: var(--reg-seal); margin: 0 5px; }
.reg-amount {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--reg-ink);
  white-space: nowrap;
}
.reg-paid {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.76rem;
  color: var(--reg-ink-soft);
}
.reg-paid::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--reg-vert);
}
.reg-x {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--reg-ink-soft); cursor: pointer; font-size: 0.85rem;
  width: 26px; height: 26px; border-radius: 3px; line-height: 1;
  transition: all .15s ease;
}
.reg-x:hover { color: var(--reg-seal); border-color: var(--reg-rule); background: rgba(158, 59, 51, 0.06); }
.reg-x:focus-visible { outline: 2px solid var(--reg-seal); outline-offset: 1px; }

/* Boutons « registre » */
.reg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Public Sans', sans-serif; font-size: 0.8125rem; font-weight: 600;
  padding: 9px 16px; border-radius: 3px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .16s ease;
}
.reg-btn .material-icons { font-size: 1.05rem; }
.reg-btn-ink { background: var(--reg-ink); color: var(--reg-folio); }
.reg-btn-ink:hover { background: #20354f; }
.reg-btn-ghost { border-color: var(--reg-rule); color: var(--reg-ink); background: var(--reg-folio); }
.reg-btn-ghost:hover { border-color: var(--reg-ink); }
.reg-btn:focus-visible { outline: 2px solid var(--reg-seal); outline-offset: 2px; }
.reg-btn-sm { padding: 7px 12px; font-size: 0.78rem; }

/* État vide */
.reg-empty { text-align: center; padding: 56px 20px; }
.reg-empty-icon {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--reg-ink-soft);
}
.reg-empty-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem;
  font-weight: 700; color: var(--reg-ink); margin: 10px 0 4px;
}
.reg-empty-desc { color: var(--reg-ink-soft); font-size: 0.875rem; margin-bottom: 20px; }

/* Responsive */
@media (max-width: 860px) {
  .reg-band { grid-template-columns: repeat(2, 1fr); }
  .reg-cell:nth-child(3) { border-left: none; }
  .reg-cell:nth-child(3), .reg-cell:nth-child(4) { border-top: 1px solid var(--reg-rule); }
}
@media (max-width: 560px) {
  .reg-band { grid-template-columns: 1fr; }
  .reg-cell { border-left: none; border-top: 1px solid var(--reg-rule); }
  .reg-cell:first-child { border-top: none; }
  .reg-folio-body { overflow-x: auto; }
}