/* ──────────────────────────────────────────────────────────────────────────────
   Module Notifications - CoursMarketing
   Cloche dashboard + panneau notifications + filtres + recherche
   /var/www/cm-platform/frontend/modules/notifications/notifications.css
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationsShell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cm-bell {
  position: relative;
}

.cm-bell.has-unread {
  box-shadow: 0 10px 24px rgba(32, 74, 157, .14);
}

.cm-bellBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  border: 2px solid #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(239, 68, 68, .28);
}

.cm-bell.has-unread .cm-bellBadge {
  display: inline-flex;
}

.cm-notificationsPanel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 440px;
  max-width: calc(100vw - 28px);
  background: #ffffff;
  border: 1px solid #dbe6f2;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(17, 38, 66, .18);
  overflow: hidden;
  z-index: 9999;
  display: none;
}

.cm-notificationsPanel.is-open {
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────────────
   En-tête du panneau
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationsHead {
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e7eef7;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cm-notificationsTitle {
  margin: 0;
  color: #082f63;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.02em;
}

.cm-notificationsSub {
  margin-top: 4px;
  color: #6a7d97;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.cm-notificationsMarkAll {
  appearance: none;
  border: 1px solid #dbe6f2;
  background: #ffffff;
  color: #204a9d;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.cm-notificationsMarkAll:hover {
  background: #f1f6ff;
  border-color: #bdd3f4;
}

.cm-notificationsMarkAll:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Outils : recherche + filtres rapides
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationsTools {
  padding: 12px 12px 10px;
  border-bottom: 1px solid #e7eef7;
  background: #ffffff;
}

.cm-notificationsSearch {
  min-height: 40px;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  background: #f8fbff;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

.cm-notificationsSearch span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7f93ad;
  font-size: 13px;
}

.cm-notificationsSearch input {
  width: 100%;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: #102f57;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  padding: 0 12px 0 0;
}

.cm-notificationsSearch input::placeholder {
  color: #93a4ba;
  font-weight: 700;
}

.cm-notificationsFilters {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.cm-notificationsFilters::-webkit-scrollbar {
  height: 5px;
}

.cm-notificationsFilters::-webkit-scrollbar-track {
  background: transparent;
}

.cm-notificationsFilters::-webkit-scrollbar-thumb {
  background: #d8e3f0;
  border-radius: 999px;
}

.cm-notificationsFilter {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid #dbe6f2;
  background: #ffffff;
  color: #526a85;
  border-radius: 999px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.cm-notificationsFilter:hover {
  background: #f2f7ff;
  color: #204a9d;
  border-color: #bdd3f4;
}

.cm-notificationsFilter.is-active {
  background: #204a9d;
  color: #ffffff;
  border-color: #204a9d;
  box-shadow: 0 8px 18px rgba(32, 74, 157, .18);
}

/* ──────────────────────────────────────────────────────────────────────────────
   Liste
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationsList {
  max-height: 430px;
  overflow-y: auto;
  padding: 8px;
}

.cm-notificationsList::-webkit-scrollbar {
  width: 7px;
}

.cm-notificationsList::-webkit-scrollbar-track {
  background: transparent;
}

.cm-notificationsList::-webkit-scrollbar-thumb {
  background: #d8e3f0;
  border-radius: 999px;
}

.cm-notificationsLoading,
.cm-notificationsEmpty,
.cm-notificationsError {
  padding: 22px 18px;
  color: #6a7d97;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}

.cm-notificationsError {
  color: #b91c1c;
}

.cm-notificationItem {
  width: 100%;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
}

.cm-notificationItem:hover {
  background: #f6f9fd;
  border-color: #e2ebf7;
}

.cm-notificationItem.is-unread {
  background: #f2f7ff;
  border-color: #d7e6fb;
}

.cm-notificationIcon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf2ff;
  color: #204a9d;
  font-size: 17px;
  flex: 0 0 auto;
}

.cm-notificationMain {
  min-width: 0;
}

.cm-notificationTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cm-notificationTitle {
  margin: 0;
  color: #102f57;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 950;
}

.cm-notificationDate {
  color: #8797ad;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
  margin-top: 2px;
}

.cm-notificationMessage {
  margin: 5px 0 0;
  color: #536982;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 650;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cm-notificationMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cm-notificationPill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef4fb;
  color: #526a85;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.cm-notificationPill--soft {
  background: #f6f8fb;
  color: #7a8da5;
}

.cm-notificationUnreadDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f5fe2;
  display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationsFooter {
  padding: 10px;
  border-top: 1px solid #e7eef7;
  background: #fbfdff;
}

.cm-notificationsSettings {
  width: 100%;
  appearance: none;
  border: 1px solid #dbe6f2;
  background: #ffffff;
  color: #204a9d;
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.cm-notificationsSettings:hover {
  background: #f2f7ff;
}

.cm-notificationsSettings:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Détail notification - Modale
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(8, 22, 44, .42);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.cm-notificationModal {
  width: min(620px, 100%);
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid #dbe6f2;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(8, 22, 44, .26);
  display: flex;
  flex-direction: column;
}

.cm-notificationModalHead {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid #e7eef7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.cm-notificationModalIcon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  background: #eaf2ff;
  color: #204a9d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.cm-notificationModalTitleBlock {
  min-width: 0;
}

.cm-notificationModalEyebrow {
  color: #204a9d;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.cm-notificationModalTitleBlock h2 {
  margin: 0;
  color: #082f63;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -.025em;
}

.cm-notificationModalTitleBlock p {
  margin: 6px 0 0;
  color: #70849d;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

.cm-notificationModalClose {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe6f2;
  border-radius: 14px;
  background: #ffffff;
  color: #536982;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.cm-notificationModalClose:hover {
  background: #f2f7ff;
  color: #204a9d;
}

.cm-notificationModalBody {
  padding: 20px;
  overflow-y: auto;
}

.cm-notificationModalMessage {
  padding: 16px;
  border: 1px solid #dbe6f2;
  border-radius: 18px;
  background: #fbfdff;
  color: #233c5f;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 650;
}

.cm-notificationModalMessage--empty {
  color: #7a8da5;
}

.cm-notificationModalMeta {
  margin-top: 14px;
  border: 1px solid #e2ebf7;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.cm-notificationModalMetaRow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef3f9;
}

.cm-notificationModalMetaRow:last-child {
  border-bottom: 0;
}

.cm-notificationModalMetaRow span {
  color: #70849d;
  font-size: 12px;
  font-weight: 900;
}

.cm-notificationModalMetaRow strong {
  color: #102f57;
  font-size: 12px;
  font-weight: 900;
  word-break: break-word;
}

.cm-notificationModalActions {
  padding: 14px;
  border-top: 1px solid #e7eef7;
  background: #fbfdff;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cm-notificationModalSecondary,
.cm-notificationModalPrimary {
  min-height: 42px;
  border-radius: 14px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.cm-notificationModalSecondary {
  border: 1px solid #dbe6f2;
  background: #ffffff;
  color: #173b6a;
}

.cm-notificationModalSecondary:hover {
  background: #f2f7ff;
}

.cm-notificationModalPrimary {
  border: 1px solid #204a9d;
  background: #204a9d;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(32, 74, 157, .18);
}

.cm-notificationModalPrimary:hover {
  background: #173f86;
}

/* ──────────────────────────────────────────────────────────────────────────────
   Notifications Forum / Questions publiques
   ────────────────────────────────────────────────────────────────────────────── */

.cm-notificationItem[data-notification-type="question_public"] {
  border-color: #dbeafe;
  background: #f8fbff;
}

.cm-notificationItem[data-notification-type="question_public"]:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.cm-notificationItem[data-notification-type="question_public"].is-unread {
  background: #eef5ff;
  border-color: #bdd7ff;
}

.cm-notificationItem[data-notification-type="question_public"] .cm-notificationIcon {
  background: #e0f2fe;
  color: #0369a1;
}

.cm-notificationItem[data-notification-type="question_public"] .cm-notificationPill {
  background: #e0f2fe;
  color: #0369a1;
}

.cm-notificationItem[data-notification-type="question_public"] .cm-notificationPill--soft {
  background: #f0f9ff;
  color: #25637e;
}

.cm-notificationItem[data-notification-type="question_public"] .cm-notificationUnreadDot {
  background: #0284c7;
}

.cm-notificationModal[data-notification-type="question_public"] .cm-notificationModalIcon {
  background: #e0f2fe;
  color: #0369a1;
}

.cm-notificationModal[data-notification-type="question_public"] .cm-notificationModalEyebrow {
  color: #0369a1;
}

.cm-notificationModal[data-notification-type="question_public"] .cm-notificationModalPrimary {
  border-color: #0369a1;
  background: #0369a1;
  box-shadow: 0 12px 24px rgba(3, 105, 161, .18);
}

.cm-notificationModal[data-notification-type="question_public"] .cm-notificationModalPrimary:hover {
  background: #075985;
}