/* ── Module Notifications push ──────────────────────────────────────────── */

.notif-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.notif-compose-card,
.notif-table-card {
  background: #fff;
  border: 1px solid rgba(56,79,89,.1);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}

.notif-compose-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #384f59;
}

.notif-compose-intro {
  margin: 0 0 1rem;
  font-size: .84rem;
  color: #666;
  line-height: 1.45;
}

.notif-table-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  /* reset bouton */
  width: 100%;
  background: none;
  border: none;
  padding: .35rem .25rem;
  margin: -.35rem -.25rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
}
.notif-table-card__header:hover {
  background: rgba(56,79,89,.05);
}
.notif-table-card__header[aria-expanded="true"] {
  margin-bottom: .75rem;
}

.notif-collapse-icon {
  margin-left: auto;
  font-size: .85rem;
  color: #aaa;
  flex-shrink: 0;
  transition: transform .2s ease;
  display: inline-block;
}
.notif-table-card__header[aria-expanded="false"] .notif-collapse-icon {
  transform: rotate(-90deg);
}

.notif-section-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #384f59;
}

.notif-table-count {
  font-size: .8rem;
  color: #888;
  font-weight: 500;
}

.notif-table-hint {
  font-size: .78rem;
  color: #aaa;
  font-style: italic;
}

.notif-device-count {
  margin-bottom: .9rem;
  font-size: .82rem;
  color: #666;
}
.notif-device-count #notif-device-count {
  font-weight: 700;
  color: #384f59;
}

/* ── Abonnement personnel ────────────────────────────────────────────────── */
.notif-subscribe-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .85rem;
  font-size: .9rem;
  color: #444;
}

.notif-sub-status {
  font-size: .85rem;
  color: #555;
}

.notif-subscribe-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.notif-btn--subscribed {
  background: #c0392b;
}
.notif-btn--subscribed:hover { filter: brightness(1.1); }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.notif-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.notif-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.notif-field > span {
  font-size: .82rem;
  font-weight: 600;
  color: #384f59;
}
.notif-required {
  color: #e20714;
  font-style: normal;
}
.notif-hint {
  font-size: .75rem;
  color: #888;
  margin: 0;
}

.notif-field input,
.notif-field textarea {
  padding: .62rem .85rem;
  border: 1px solid rgba(56,79,89,.2);
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
  color: #222;
  outline: none;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.notif-field input:focus,
.notif-field textarea:focus,
.notif-field select:focus {
  border-color: #384f59;
  box-shadow: 0 0 0 3px rgba(56,79,89,.1);
}

.notif-field select {
  padding: .62rem .85rem;
  border: 1px solid rgba(56,79,89,.2);
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
  color: #222;
  outline: none;
  background: #fff;
}

.notif-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}

.notif-fieldset {
  margin: 0;
  padding: .75rem .85rem;
  border: 1px solid rgba(56,79,89,.15);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.notif-fieldset legend {
  padding: 0 .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: #384f59;
}

.notif-lists-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .65rem;
}

.notif-users-select {
  width: 100%;
  min-height: 9rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(56,79,89,.2);
  border-radius: 8px;
  font-size: .88rem;
  font-family: inherit;
  color: #222;
}

.notif-page .is-hidden {
  display: none !important;
}

/* ── Profils ────────────────────────────────────────────────────────────── */
.notif-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .65rem;
  margin-top: .15rem;
}
.notif-profile-opt {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  color: #333;
  cursor: pointer;
  user-select: none;
}
.notif-profile-opt input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #384f59;
  cursor: pointer;
}

/* ── Actions ────────────────────────────────────────────────────────────── */
.notif-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
}

.notif-btn {
  padding: .55rem 1.2rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter .15s;
}
.notif-btn--primary {
  background: #384f59;
  color: #fff;
}
.notif-btn--primary:hover { filter: brightness(1.12); }
.notif-btn--primary:disabled { opacity: .55; cursor: default; }

.notif-feedback {
  min-height: 1.1rem;
  font-size: .82rem;
  color: #555;
  margin: 0;
}
.notif-feedback--success { color: #27ae60; font-weight: 600; }
.notif-feedback--error   { color: #e20714; font-weight: 600; }
.notif-feedback--warn    { color: #e67e22; font-weight: 600; }

/* ── Tableau Excel ──────────────────────────────────────────────────────── */
.notif-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(56,79,89,.12);
}

.notif-table-empty {
  margin: 0;
  font-size: .85rem;
  color: #888;
  padding: .75rem .5rem;
}

.notif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
  color: #333;
}

.notif-table thead tr {
  background: #f0f3f5;
}

.notif-table th {
  padding: .6rem .85rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  color: #384f59;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border-bottom: 2px solid rgba(56,79,89,.15);
  position: sticky;
  top: 0;
  background: #f0f3f5;
}

.notif-table td {
  padding: .55rem .85rem;
  border-bottom: 1px solid rgba(56,79,89,.07);
  vertical-align: middle;
  white-space: nowrap;
}

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

.notif-table tbody tr:hover {
  background: rgba(56,79,89,.03);
}

.notif-table--clickable tbody tr {
  cursor: pointer;
  transition: background .1s;
}
.notif-table--clickable tbody tr:hover {
  background: rgba(56,79,89,.06);
}
.notif-table--clickable tbody tr:focus {
  outline: 2px solid #384f59;
  outline-offset: -2px;
  background: rgba(56,79,89,.05);
}

/* colonnes spéciales */
.ntbl-num    { width: 44px; text-align: center; color: #aaa; font-size: .75rem; }
.ntbl-center { text-align: center; }
.ntbl-date   { color: #666; font-variant-numeric: tabular-nums; }
.ntbl-title  { font-weight: 600; color: #222; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ntbl-sender { color: #555; }
.ntbl-ua     { color: #888; }
.ntbl-name   { font-weight: 600; }
.ntbl-zero   { color: #ccc; }

/* badge rôle */
.notif-role-badge {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(56,79,89,.1);
  color: #384f59;
  white-space: nowrap;
}
.notif-role-badge--bureau        { background: rgba(56,79,89,.15); color: #384f59; }
.notif-role-badge--elu           { background: rgba(52,152,219,.12); color: #2472a4; }
.notif-role-badge--expert        { background: rgba(142,68,173,.12); color: #7d3c98; }
.notif-role-badge--rpx           { background: rgba(230,126,34,.12); color: #b9770e; }
.notif-role-badge--federation    { background: rgba(39,174,96,.12); color: #1e8449; }
.notif-role-badge--agent_hexafret{ background: rgba(26,188,156,.12); color: #117a65; }
.notif-role-badge--visiteur      { background: rgba(149,165,166,.15); color: #626567; }
.notif-role-badge--admin         { background: rgba(231,76,60,.12); color: #c0392b; }

/* ── Nom cliquable abonné ──────────────────────────────────────────────── */
.notif-subs-name-cell {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.notif-subs-name-cell:hover { color: #384f59; text-decoration: underline; }
.notif-subs-chevron {
  display: inline-block;
  font-size: .65rem;
  color: #aaa;
  margin-right: .35rem;
  transition: transform .15s;
  vertical-align: middle;
}
.notif-subs-chevron.is-open { color: #384f59; }

/* ── Sous-ligne appareils ─────────────────────────────────────────────── */
.notif-devices-row > td { padding: 0; background: #f4f7f9; }
.notif-devices-cell { padding: .5rem .75rem .75rem 2.2rem !important; }
.notif-devices-empty { color: #aaa; font-size: .82rem; margin: .4rem 0; }

.notif-devices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.notif-devices-table th {
  text-align: left;
  padding: .3rem .5rem;
  font-size: .72rem;
  font-weight: 600;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid #dde3e8;
}
.notif-devices-table td {
  padding: .35rem .5rem;
  border-bottom: 1px solid #eef1f4;
  vertical-align: middle;
}
.notif-devices-table .notif-device-item:last-child td { border-bottom: none; }
.notif-devices-table .ntbl-center { text-align: center; }

.notif-device-del-btn {
  background: none;
  border: 1px solid rgba(226,7,20,.2);
  border-radius: 5px;
  color: #c0392b;
  font-size: .78rem;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .12s, border-color .12s;
}
.notif-device-del-btn:hover { background: rgba(226,7,20,.08); border-color: rgba(226,7,20,.5); }
.notif-device-del-btn:disabled { opacity: .4; cursor: default; }

/* bouton supprimer abonné */
.notif-del-btn {
  background: none;
  border: 1px solid rgba(226,7,20,.25);
  border-radius: 6px;
  color: #c0392b;
  font-size: .85rem;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  padding: 0;
}
.notif-del-btn:hover  { background: rgba(226,7,20,.08); border-color: rgba(226,7,20,.5); }
.notif-del-btn:disabled { opacity: .4; cursor: default; }

/* badge compteur envoi */
.notif-count-badge {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.notif-count-badge--sent { background: rgba(39,174,96,.12); color: #1e8449; }
.notif-count-badge--fail { background: rgba(226,7,20,.1);   color: #c0392b; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.notif-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
}
.notif-page-btn {
  padding: .35rem .8rem;
  border: 1px solid rgba(56,79,89,.2);
  border-radius: 7px;
  background: #fff;
  color: #384f59;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.notif-page-btn:hover { background: #f0f3f5; }
.notif-page-info {
  font-size: .82rem;
  color: #888;
}

/* ── Modal popup ────────────────────────────────────────────────────────── */
.notif-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
  animation: notifFadeIn .15s ease;
}
.notif-modal-overlay[hidden] { display: none; }

@keyframes notifFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.notif-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  animation: notifSlideUp .18s ease;
  overflow: hidden;
}

@keyframes notifSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.notif-modal__header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.1rem 1.25rem .85rem;
  border-bottom: 1px solid rgba(56,79,89,.1);
}

.notif-modal__title {
  margin: 0;
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: #384f59;
  line-height: 1.35;
}

.notif-modal__close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  padding: 0 .1rem;
  margin-top: -.1rem;
  transition: color .12s;
}
.notif-modal__close:hover { color: #384f59; }

.notif-modal__body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.notif-modal__message {
  background: #f7f9fa;
  border-left: 3px solid #384f59;
  border-radius: 0 8px 8px 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  color: #333;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.notif-modal__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  row-gap: .35rem;
  margin: 0;
  font-size: .82rem;
}
.notif-modal__meta dt {
  color: #888;
  font-weight: 600;
  white-space: nowrap;
}
.notif-modal__meta dd {
  margin: 0;
  color: #333;
  word-break: break-word;
}

.notif-fail-label { color: #c0392b !important; }
.notif-fail-list  { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.notif-fail-user  {
  display: inline-block;
  background: #fdecea;
  color: #c0392b;
  border: 1px solid #f5c6c2;
  border-radius: 3px;
  padding: .1rem .45rem;
  font-size: .78rem;
  white-space: nowrap;
}

body.notif-modal-open { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .notif-page { padding: .85rem .65rem 1.5rem; }
  .notif-compose-card,
  .notif-table-card { padding: 1rem .95rem; }
  .ntbl-ua, .ntbl-sender { display: none; }
  .notif-modal { max-width: 100%; }
}