/* ============ Notifications page ============ */
.pg-notifications .nf-card { padding: 6px 6px; }

.pg-notifications .notif-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 14px; border-bottom: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
}
.pg-notifications #nf-list > .notif-row:last-child { border-bottom: 0; }
.pg-notifications .notif-row:hover { background: var(--fill); }
.pg-notifications .notif-row:focus-visible { outline: 2px solid var(--indigo-3); outline-offset: -2px; }
.pg-notifications .notif-row.unread { background: var(--brand-50); }
.pg-notifications .notif-row.unread:hover { background: var(--accent-tint); }

.pg-notifications .notif-main { flex: 1; min-width: 0; }
.pg-notifications .notif-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.pg-notifications .notif-row.unread .notif-title { font-weight: 800; color: var(--indigo); }
.pg-notifications .notif-body {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-notifications .notif-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 5px;
}
.pg-notifications .notif-time svg { width: 12px; height: 12px; }

/* ---- type icon in a tinted circle ---- */
.pg-notifications .notif-ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-top: 1px;
}
.pg-notifications .notif-ic svg { width: 19px; height: 19px; }
.pg-notifications .notif-ic-assignment  { background: var(--accent-tint); color: var(--indigo-3); }  /* clipboard — indigo */
.pg-notifications .notif-ic-grade       { background: var(--g-100); color: var(--g-700); }   /* check — green */
.pg-notifications .notif-ic-announcement{ background: var(--warning-tint); color: var(--warning); }   /* megaphone — gold */
.pg-notifications .notif-ic-event       { background: var(--info-tint); color: var(--info); }      /* grid — blue */
.pg-notifications .notif-ic-material    { background: var(--accent-tint); color: var(--accent); }          /* book — purple */
.pg-notifications .notif-ic-ticket      { background: var(--fill-2); color: var(--text-2); }          /* help — teal */
.pg-notifications .notif-ic-attendance  { background: var(--danger-tint); color: var(--danger); }    /* checkSquare — red */
.pg-notifications .notif-ic-info        { background: var(--fill-2); color: var(--text-2); }     /* bell — grey */

/* ---- right side: unread dot + delete ---- */
.pg-notifications .notif-side { display: flex; align-items: center; gap: 6px; flex: none; margin-top: 6px; }
.pg-notifications .notif-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 202, 80, .22); margin-right: 4px;
}
.pg-notifications .notif-x {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; padding: 0;
}
.pg-notifications .notif-x svg { width: 15px; height: 15px; }
.pg-notifications .notif-x:hover { background: var(--danger-tint); color: var(--danger); }
.pg-notifications .notif-x[disabled] { opacity: .5; pointer-events: none; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  .pg-notifications .notif-row { padding: 12px 10px; gap: 11px; }
  .pg-notifications .notif-ic { width: 36px; height: 36px; }
  .pg-notifications .notif-ic svg { width: 17px; height: 17px; }
}