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

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

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

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

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

/* ── 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 {
  border-color: #384f59;
  box-shadow: 0 0 0 3px rgba(56,79,89,.1);
}

/* ── 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; }

/* ── Historique ─────────────────────────────────────────────────────────── */
.notif-history-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.notif-history-empty {
  margin: 0;
  font-size: .85rem;
  color: #888;
  padding: .5rem 0;
}

.notif-history-item {
  border: 1px solid rgba(56,79,89,.1);
  border-radius: 10px;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.notif-history-item__header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.notif-history-item__title {
  font-size: .9rem;
  color: #384f59;
  flex: 1 1 auto;
}
.notif-history-item__date {
  font-size: .75rem;
  color: #aaa;
  white-space: nowrap;
}
.notif-history-item__body {
  margin: 0;
  font-size: .83rem;
  color: #555;
  line-height: 1.45;
}
.notif-history-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .1rem;
}

.notif-meta-badge {
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 20px;
  font-weight: 600;
  background: rgba(56,79,89,.08);
  color: #384f59;
}
.notif-meta-badge--sent   { background: rgba(39,174,96,.1);  color: #27ae60; }
.notif-meta-badge--fail   { background: rgba(226,7,20,.1);   color: #c0392b; }
.notif-meta-badge--sender { background: rgba(52,152,219,.1); color: #2980b9; }

/* ── 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;
}

@media (max-width: 560px) {
  .notif-page { padding: .85rem .65rem 1.5rem; }
  .notif-compose-card,
  .notif-history-card { padding: 1rem .95rem; }
}