/* ==========================================================================
   Notifications et appareils (étape 19, #832) — maquette Comptes et notifications
   Pas d'imbrication CSS (cible iOS 16.4).
   ========================================================================== */

.notif-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

.notif-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.notif-device { border: 2px solid var(--color-text-primary); }

.notif-device__state {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.notif-device__state--on { display: flex; align-items: center; gap: 8px; }

.notif-device__state--on::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-text-primary);
}

.notif-device .btn { align-self: flex-start; }
.notif-device .settings__link { align-self: flex-start; }

.notif-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 22px; font-size: 0.9375rem; line-height: 1.4; }

/* Tableau : une vraie table, un lecteur d'écran annonce l'événement et le canal de chaque case */
.notif-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.notif-table thead th {
  height: 40px;
  border-bottom: 1.5px solid var(--color-text-primary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.notif-table thead th:first-child { text-align: left; }
.notif-table th:nth-child(2), .notif-table th:nth-child(3), .notif-table td { width: 72px; }

.notif-table tbody th[scope='row'] { font-weight: var(--font-weight-normal); text-align: left; }

.notif-table tbody tr:not(.notif-table__group) th,
.notif-table td { min-height: 37px; padding: 2px 0; border-bottom: 1px solid var(--color-border); }

.notif-table td { text-align: center; vertical-align: middle; }

.notif-table__group th {
  padding: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}

/* En bloc sous le nom de l'événement ; la ligne tient sa hauteur grâce à la cellule */
.notif-table__sub { display: block; font-size: 0.8125rem; color: var(--color-text-muted); }

.notif-delays { display: flex; flex-direction: column; gap: 10px; }

.notif-delay { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }

.notif-delay > span { flex: 1; min-width: 0; }

/* Largeur de la maquette ; 44 px : cible tactile */
.notif-delay .input { flex: none; width: 190px; min-height: 44px; }

.notif-check { justify-content: center; min-height: 36px; }

/* ga-settings étire le dernier enfant d'une case de carte, prévu pour son texte : ici, c'est la case */
.set-card .notif-check > span:last-child { flex: none; }

.notif-check--locked { cursor: default; }

/* Grisée sans transparence : la coche reste lisible, en clair comme en sombre */
.notif-check--locked .checkbox__input:disabled ~ .checkbox__box {
  border-color: var(--color-border);
  background-color: var(--color-border);
  color: var(--color-text-primary);
  opacity: 1;
}

.notif-na { display: inline-block; width: 14px; height: 2px; border-radius: 99px; background-color: var(--color-border); vertical-align: middle; }

.notif-table__foot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.notif-lock { width: 20px; height: 20px; flex: none; border-radius: 5px; background-color: var(--color-border); }

.notif-hours { display: flex; align-items: center; gap: 10px; }
.notif-hours__field { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.notif-hours .input { width: 112px; font-variant-numeric: tabular-nums; }

/* Interrupteur : la case native reste dessous, clavier et lecteur d'écran n'y perdent rien */
.switch { position: relative; display: inline-flex; flex: none; width: 48px; height: 28px; cursor: pointer; }

.switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.switch__track {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--color-text-primary);
  border-radius: 99px;
  background-color: var(--color-surface);
  pointer-events: none;
}

.switch__track::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 50%;
  background-color: var(--color-text-primary);
}

.switch__input:checked + .switch__track { background-color: var(--color-text-primary); }

.switch__input:checked + .switch__track::after { margin-left: 22px; background-color: var(--color-surface); }

.switch__input:focus-visible + .switch__track { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }

/* Appareils */
.device-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.device-list__item { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-border); }

.device-list__row { display: flex; align-items: center; gap: 12px; }

.device-list__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.device-list__name { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }

.set-card__foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* Tablette et téléphone : une colonne, l'état de l'appareil d'abord (maquette Téléphone notifications) */
@media (max-width: 1099px) {
  .notif-layout { display: flex; flex-direction: column; }
  .notif-aside { display: contents; }
  .notif-device { order: -1; }
}

@media (max-width: 699px) {
  .notif-table th:nth-child(2), .notif-table th:nth-child(3), .notif-table td { width: 56px; }
  .settings--sub[data-sub='notifications'] .set-card--current { flex: none; }
  .settings--sub[data-sub='notifications'] .notif-layout { gap: 12px; }
  /* ga-settings masque le titre d'une carte seule, que l'en-tête répète. Ici plusieurs cartes se
     suivent : sans titre, on ne sait plus ce que règlent ces listes ni cet interrupteur. */
  .settings--sub[data-sub='notifications'] [data-card='notif-delays'] .set-card__title,
  .settings--sub[data-sub='notifications'] [data-card='notif-quiet'] .set-card__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}