/* ──────────────────────────────────────────────────────────────────────────────
   Module Notifications - Responsive
   Fichier : frontend/modules/notifications/css/notifications-responsive.css
   Rôle : regrouper les adaptations tablette/mobile du module Notifications
   ────────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────────
   Responsive - Panneau notifications + modale
   ────────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .cm-notificationsPanel {
    position: fixed;
    top: 78px;
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
  }

  .cm-notificationsHead {
    padding: 16px 15px 12px;
  }

  .cm-notificationsTools {
    padding: 10px;
  }

  .cm-notificationsList {
    max-height: calc(100vh - 250px);
  }
}

@media (max-width: 680px) {
  .cm-notificationModalBackdrop {
    align-items: flex-start;
    padding: 14px;
  }

  .cm-notificationModalHead {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    padding: 16px;
  }

  .cm-notificationModalIcon {
    width: 42px;
    height: 42px;
  }

  .cm-notificationModalTitleBlock h2 {
    font-size: 18px;
  }

  .cm-notificationModalMetaRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cm-notificationModalActions {
    flex-direction: column-reverse;
  }

  .cm-notificationModalSecondary,
  .cm-notificationModalPrimary {
    width: 100%;
  }
}


/* ──────────────────────────────────────────────────────────────────────────────
   Responsive - Préférences notifications
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .cm-notifPrefsHero {
    display: block;
  }

  .cm-notifPrefsLegend {
    margin-top: 14px;
    min-width: 0;
  }

  .cm-notifPrefsTableHead {
    display: none;
  }

  .cm-notifPrefsRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cm-notifPrefsEvent {
    padding-right: 0;
  }

  .cm-notifPrefsSwitchCell {
    justify-content: space-between;
  }

  .cm-notifPrefsSwitchCell::before {
    color: #60758f;
    font-size: 12px;
    font-weight: 900;
  }

  .cm-notifPrefsSwitchCell:nth-child(2)::before {
    content: "Cloche / dashboard";
  }

  .cm-notifPrefsSwitchCell:nth-child(3)::before {
    content: "Email";
  }

  .cm-notifPrefsActions {
    align-items: stretch;
    flex-direction: column;
  }

  .cm-notifPrefsSave {
    width: 100%;
  }
}