/* ============================================================
   Design system Material 3 — mail-alias-ovh
   Thème : vert pastel (seed #A8D5BA), clair + sombre auto.
   Frontend rendu par le back (EJS + HTMX), sans framework JS.
   ============================================================ */

/* --- Police Roboto (Material 3) --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/* --- Thème auto (clair/sombre) : les tokens sont dans light.css / dark.css --- */
:root {
  color-scheme: light dark;
}

/* --- Typographie Material 3 (Roboto) --- */
:root {
  --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;

  /* Échelle de polices Material 3 */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: 400;

  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: 400;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: 500;

  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: 400;

  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: 500;

  /* Formes (Material 3) */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* --- Base --- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  margin: 0 0 16px;
}

p {
  margin: 0 0 16px;
}

a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- Layout : centrage des pages d'auth --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 32px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

/* --- Boutons (Material 3) --- */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  padding: 10px 24px;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

/* Bouton primaire (filled) */
button[type='submit'],
.button-primary {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

button[type='submit']:hover,
.button-primary:hover {
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}

/* Bouton secondaire (tonal) */
.button-secondary {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* Bouton texte */
.button-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding: 10px 12px;
}

/* Bouton icône (actions compactes, ex. table des alias) */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.icon-button:hover {
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}

.icon-button-danger {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* --- Champs de formulaire (Material 3) --- */
.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 4px;
}

.form-field input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  outline: none;
  transition: border-color 0.2s;
}

.form-field input:focus {
  border-color: var(--md-sys-color-primary);
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

/* Menu de sélection (exposed dropdown menu Material 3) : <details>/<summary>,
   même habillage que .menu mais avec un déclencheur en forme de champ de texte. */
.select-menu {
  position: relative;
  width: 100%;
}

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-highest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.select-trigger::-webkit-details-marker {
  display: none;
}

.select-menu[open] .select-trigger {
  border-color: var(--md-sys-color-primary);
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

.select-chevron {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform 0.2s;
}

.select-menu[open] .select-chevron {
  transform: rotate(180deg);
}

.select-content {
  position: absolute;
  left: 0;
  right: 0;
  min-width: unset;
  max-width: calc(100vw - 24px);
}

.menu-item-selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.menu-item-selected:hover {
  background-color: var(--md-sys-color-secondary-container);
}

/* --- Listes (Material 3) --- */
.list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.list li:last-child {
  border-bottom: none;
}

/* --- Navigation --- */
nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

/* --- Statut / messages --- */
.status {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 12px;
}

/* --- Code (token bootstrap) --- */
pre {
  background-color: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 16px;
  overflow-x: auto;
  font-family: ui-monospace, monospace;
  font-size: var(--md-sys-typescale-body-medium-size);
  word-break: break-all;
}

/* --- Bloc des codes de récupération --- */
pre.recovery-codes {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* --- Barre d'application (header statique) --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background-color: var(--md-sys-color-surface-container);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.app-header-title {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* Menu utilisateur : <details>/<summary>, sans JS (cohérent avec le thème CSS pur). */
.menu {
  position: relative;
}

.menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--md-sys-shape-corner-full);
  cursor: pointer;
  list-style: none;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  user-select: none;
}

.menu-trigger::-webkit-details-marker {
  display: none;
}

.menu-trigger:hover {
  background-color: var(--md-sys-color-surface-container-highest);
}

.menu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 500;
}

.menu[open] .menu-trigger {
  background-color: var(--md-sys-color-surface-container-highest);
}

.menu-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}

.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--md-sys-shape-corner-small);
  background: none;
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  text-decoration: none;
}

/* --- Page applicative (post-connexion) --- */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 24px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.alias-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Bandeau d'information (ex. avertissement lors d'une réactivation). */
.notice {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  font-size: var(--md-sys-typescale-body-medium-size);
}

.notice-warning {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.notice-info {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.notice-error {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.card-title {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 16px;
}

/* Ligne titre de carte + action (ex. bouton de synchronisation). */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

.card-header .card-title {
  margin: 0;
}

/* Formulaire en ligne : champ qui grandit + bouton aligné sur sa hauteur. */
.form-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.form-row .form-field {
  margin-bottom: 0;
  flex: 1 1 auto;
}

.form-row button {
  flex: 0 0 auto;
  /* Même hauteur que l'input (padding 12px*2 + bordure 1px*2 + line-height 24px)
     pour que le bouton s'aligne pile sur le champ, pas sur le bloc label+champ. */
  height: 50px;
}

.toolbar {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.toolbar .form-field {
  margin-bottom: 0;
}

.toolbar .form-field-grow {
  flex: 1 1 auto;
}

.toolbar .form-field-status {
  flex: 0 0 160px;
}

/* --- Tableau des alias --- */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  text-align: left;
  padding: 0 16px 12px;
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-large-size);
  /* Centré : les boutons d'action (40px) sont plus hauts que le texte des
     autres colonnes ; un <dialog> fermé n'a pas de rendu (display:none via
     l'UA) donc ne peut plus faire grandir une ligne comme le faisait l'ancienne
     édition inline. */
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background-color: var(--md-sys-color-surface-container-high);
}

.table .empty-row td {
  text-align: center;
  padding: 32px 16px;
  color: var(--md-sys-color-on-surface-variant);
}

.alias-address {
  font-family: ui-monospace, monospace;
  font-size: var(--md-sys-typescale-body-medium-size);
  white-space: nowrap;
}

/* Contenu inline (pas de flex) pour garder la même hauteur de ligne que
   les autres colonnes ; l'icône est juste alignée sur le texte. */
.alias-address-text {
  vertical-align: middle;
}

.alias-address .icon-button {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  color: var(--md-sys-color-on-surface-variant);
}

.alias-address .icon-button:hover {
  background-color: var(--md-sys-color-surface-container-high);
  box-shadow: none;
}

.alias-address .icon-button svg {
  width: 16px;
  height: 16px;
}

.alias-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

/* --- Boîte de dialogue de renommage (<dialog> natif) : rendue dans le "top
   layer" par showModal(), donc indifférente à la mise en page du tableau. --- */
.dialog {
  padding: 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.4);
  width: min(360px, 90vw);
}

.dialog::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

.dialog-title {
  margin: 0 0 16px;
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Chip de statut --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  text-transform: capitalize;
}

.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background-color: currentColor;
}

.chip-active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.chip-pending {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.chip-error {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.chip-disabled {
  background-color: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}

/* ============================================================
   Responsive (mobile / tablette, ~320px à ~640px)
   ============================================================ */
@media (max-width: 640px) {
  .auth-page {
    padding: 16px;
  }

  .auth-card {
    padding: 20px;
  }

  .app-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .app-header-title {
    font-size: var(--md-sys-typescale-title-medium-size);
    line-height: var(--md-sys-typescale-title-medium-line-height);
  }

  /* Masque le libellé du menu utilisateur, ne garde que l'avatar (gain de place). */
  .menu-trigger-label {
    display: none;
  }

  .page {
    padding: 16px 12px 48px;
    gap: 16px;
  }

  .card {
    padding: 16px;
  }

  .toolbar,
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar .form-field-status {
    flex: 1 1 auto;
  }

  .form-row button {
    width: 100%;
  }

  /* Tableau : chaque ligne devient une carte empilée (plus de défilement
     horizontal). Le <thead> est masqué ; l'étiquette de colonne est recréée
     via data-label + ::before sur chaque cellule. */
  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr {
    display: block;
    width: 100%;
  }

  .table tbody tr {
    margin-bottom: 12px;
    padding: 4px 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background-color: var(--md-sys-color-surface-container-highest);
  }

  .table tbody tr:last-child {
    margin-bottom: 0;
  }

  .table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  .table td:last-child {
    border-bottom: none;
  }

  .table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: var(--md-sys-typescale-label-medium-weight);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
  }

  /* Boutons d'action : pas d'étiquette (déjà explicites via title/aria-label),
     regroupés à droite comme en desktop. */
  .table td.alias-actions {
    justify-content: flex-end;
    gap: 8px;
  }

  .table .empty-row td {
    display: block;
    text-align: center;
  }
}