/* ======================================
   OJA EDE
   GENERAL NOTIFICATIONS
   ====================================== */

.notifications-hero {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 16px;

  padding: 22px 24px;

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(214,168,79,.28),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #063d21,
      #0b6b3a
    );

  color: #fff;

  box-shadow:
    0 16px 40px
    rgba(6,61,33,.14);
}


.hero-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    rgba(255,255,255,.12);

  border:
    1px solid
    rgba(255,255,255,.16);

  color: #d6a84f;

  font-size: 21px;
  font-weight: 900;
}


.hero-content {
  flex: 1;
}


.hero-kicker {
  color: #d6a84f;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 1px;
}


.notifications-hero h2 {
  margin: 5px 0;

  font-size: 23px;
}


.notifications-hero p {
  max-width: 550px;

  margin: 0;

  color:
    rgba(255,255,255,.73);

  font-size: 10px;

  line-height: 1.6;
}


.hero-unread {
  min-width: 70px;

  padding: 12px;

  text-align: center;

  border-radius: 12px;

  background:
    rgba(255,255,255,.10);
}


.hero-unread span {
  display: block;

  color:
    rgba(255,255,255,.65);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .7px;
}


.hero-unread strong {
  display: block;

  margin-top: 3px;

  color: #d6a84f;

  font-size: 21px;
}


/* ======================================
   CONTROLS
   ====================================== */

.notification-controls {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 16px;
}


.notification-tabs {
  display: flex;

  gap: 4px;

  padding: 4px;

  border-radius: 11px;

  background: #edf3ef;
}


.notification-tab {
  min-height: 33px;

  padding: 0 13px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: #647169;

  font: inherit;

  font-size: 9px;
  font-weight: 850;

  cursor: pointer;
}


.notification-tab.active {
  background: #fff;

  color: #063d21;

  box-shadow:
    0 3px 10px
    rgba(6,61,33,.08);
}


.notification-actions {
  display: flex;

  align-items: center;

  gap: 7px;
}


.secondary-action,
.danger-action {
  min-height: 34px;

  padding: 0 11px;

  border-radius: 9px;

  font: inherit;

  font-size: 8px;
  font-weight: 850;

  cursor: pointer;
}


.secondary-action {
  border:
    1px solid #dce7df;

  background: #fff;

  color: #0b6b3a;
}


.danger-action {
  border:
    1px solid #f0d7d7;

  background: #fff;

  color: #a23838;
}


/* ======================================
   HEADING
   ====================================== */

.section-heading {
  margin-bottom: 10px;
}


.section-heading h2 {
  margin: 0;

  color: #063d21;

  font-size: 16px;
}


.section-heading p {
  margin: 4px 0 0;

  color: #718077;

  font-size: 9px;
}


/* ======================================
   LIST
   ====================================== */

.notifications-list {
  display: grid;

  gap: 8px;
}


/* ======================================
   CARD
   ====================================== */

.notification-card {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 14px;

  border:
    1px solid #e3ebe5;

  border-radius: 14px;

  background: #fff;

  box-shadow:
    0 6px 20px
    rgba(6,61,33,.04);

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


.notification-card:hover {
  transform:
    translateY(-1px);

  border-color:
    #cddbd2;

  box-shadow:
    0 10px 25px
    rgba(6,61,33,.07);
}


.notification-card.unread {
  border-left:
    3px solid #0b6b3a;

  background:
    #fbfefc;
}


.notification-card.priority-high {
  border-left-color:
    #d6a84f;
}


/* ======================================
   ICON
   ====================================== */

.notification-icon {
  width: 41px;
  height: 41px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: #edf5ef;

  color: #0b6b3a;

  font-size: 15px;
  font-weight: 900;
}


.notification-card.priority-high
.notification-icon {
  background: #fbf3df;

  color: #a17821;
}


/* ======================================
   CONTENT
   ====================================== */

.notification-content {
  flex: 1;

  min-width: 0;
}


.notification-top {
  display: flex;

  align-items: center;

  gap: 6px;
}


.notification-top h3 {
  margin: 0;

  color: #063d21;

  font-size: 11px;
  font-weight: 900;
}


.notification-content > p {
  margin: 5px 0;

  color: #526158;

  font-size: 9px;

  line-height: 1.55;
}


.notification-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  color: #8a968e;

  font-size: 8px;
}


.unread-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #0b6b3a;
}


.priority-label {
  padding: 3px 7px;

  border-radius: 999px;

  background: #fbf2d9;

  color: #85631c;

  font-size: 7px;
  font-weight: 900;
}


/* ======================================
   ACTIONS
   ====================================== */

.notification-card-actions {
  display: flex;

  align-items: center;

  gap: 4px;
}


.notification-action {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid #dce7df;

  border-radius: 8px;

  background: #fff;

  color: #607068;

  font: inherit;

  font-size: 10px;
  font-weight: 900;

  cursor: pointer;
}


.notification-action:hover {
  border-color:
    #0b6b3a;

  color: #0b6b3a;
}


.delete-notification:hover {
  border-color:
    #d68a8a;

  color: #a23838;
}


/* ======================================
   EMPTY / ERROR
   ====================================== */

.notification-empty {
  padding: 50px 20px;

  text-align: center;

  border:
    1px solid #e3ebe5;

  border-radius: 17px;

  background: #fff;
}


.empty-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin:
    0 auto 12px;

  border-radius: 50%;

  background: #edf5ef;

  color: #0b6b3a;

  font-size: 19px;
  font-weight: 900;
}


.empty-icon.error {
  background: #fae9e9;

  color: #a23838;
}


.notification-empty h2 {
  margin: 0;

  color: #063d21;

  font-size: 17px;
}


.notification-empty p {
  max-width: 390px;

  margin:
    7px auto 17px;

  color: #718077;

  font-size: 10px;

  line-height: 1.6;
}


.primary-action {
  min-height: 38px;

  padding: 0 15px;

  border: 0;
  border-radius: 10px;

  background: #0b6b3a;

  color: #fff;

  font: inherit;

  font-size: 10px;
  font-weight: 850;

  cursor: pointer;
}


/* ======================================
   PAGINATION
   ====================================== */

.notification-pagination {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 18px;
}


.notification-pagination button {
  min-height: 35px;

  padding: 0 11px;

  border:
    1px solid #dce7df;

  border-radius: 9px;

  background: #fff;

  color: #0b6b3a;

  font: inherit;

  font-size: 9px;
  font-weight: 850;

  cursor: pointer;
}


.notification-pagination button:disabled {
  opacity: .4;

  cursor: not-allowed;
}


.notification-pagination span {
  color: #526158;

  font-size: 9px;
  font-weight: 800;
}


/* ======================================
   SIDEBAR BADGE
   ====================================== */

.sidebar-badge {
  min-width: 18px;
  height: 18px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-left: auto;

  padding: 0 4px;

  border-radius: 999px;

  background: #d6a84f;

  color: #063d21;

  font-size: 7px;
  font-weight: 900;
}


/* ======================================
   HEADER COUNT
   ====================================== */

.notification-indicator {
  position: absolute;

  min-width: 15px;
  height: 15px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin:
    -24px 0 0 23px;

  padding: 0 3px;

  border-radius: 999px;

  background: #d6a84f;

  color: #063d21;

  font-size: 7px;
  font-weight: 900;
}


/* ======================================
   MOBILE
   ====================================== */

@media (max-width: 750px) {

  .notifications-hero {
    align-items: flex-start;
  }


  .hero-unread {
    margin-left: auto;
  }


  .notification-controls {
    align-items: stretch;

    flex-direction: column;
  }


  .notification-tabs {
    width: 100%;
  }


  .notification-tab {
    flex: 1;
  }


  .notification-actions {
    justify-content: flex-end;
  }

}


@media (max-width: 560px) {

  .notifications-hero {
    padding: 18px;

    flex-wrap: wrap;
  }


  .hero-icon {
    width: 44px;
    height: 44px;
  }


  .notifications-hero h2 {
    font-size: 20px;
  }


  .hero-unread {
    width: 100%;

    margin-left: 0;

    text-align: left;
  }


  .hero-unread strong {
    display: inline;

    margin-left: 6px;

    font-size: 16px;
  }


  .notification-actions {
    width: 100%;
  }


  .secondary-action,
  .danger-action {
    flex: 1;
  }


  .notification-card {
    padding: 12px;

    gap: 9px;
  }


  .notification-icon {
    width: 36px;
    height: 36px;

    font-size: 13px;
  }


  .notification-card-actions {
    flex-direction: column;
  }


  .notification-action {
    width: 27px;
    height: 27px;
  }

}


@media (max-width: 400px) {

  .notification-card {
    display: grid;

    grid-template-columns:
      auto 1fr auto;
  }


  .notification-content > p {
    font-size: 8px;
  }

}