/* Compact order warning, shared by the ordinary detail view in both themes. */
.app .detail > .note.order-overdue {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 14px 0 16px;
  padding: 14px 16px;
  border: 2px solid #c79b2a;
  border-radius: 14px;
  background: #fff4cf;
  color: #44391f;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-width: 0;
}
.app .detail > .note.order-overdue > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.35;
}
.app .detail > .note.order-overdue > strong::before {
  content: '!';
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: #efc34e;
  color: #493500;
  font-weight: 800;
}
.app .detail > .note.order-overdue > p { margin: 0; }
.app .detail > .note.order-overdue > button {
  justify-self: start;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  white-space: normal;
}
[data-theme='dark'] .app .detail > .note.order-overdue {
  border-color: #c6a246;
  background: #3c3420;
  color: #fff0bf;
}
@media (max-width: 620px) {
  .app .detail > .note.order-overdue { padding: 12px 14px; }
}

/* Pending decisions retain their yellow mark after read and during read animation.
   Same rule at all widths: actionRequired owns urgency, read_at only owns unread. */
.app .notification-groups .notification.notification-urgent,
.app .notification-groups .notification.notification-urgent.unread,
.app .notification-groups .notification.notification-urgent.notification-fading,
.app .notification-groups .notification.notification-urgent.unread.notification-fading {
  background:#fff4cf;
  border:1px solid #c89112;
  border-left-width:4px;
  box-shadow:none;
  color:var(--ink);
  padding-left:12px;
}
[data-theme="dark"] .app .notification-groups .notification.notification-urgent,
[data-theme="dark"] .app .notification-groups .notification.notification-urgent.unread,
[data-theme="dark"] .app .notification-groups .notification.notification-urgent.notification-fading,
[data-theme="dark"] .app .notification-groups .notification.notification-urgent.unread.notification-fading {
  background:#3c3420;
  border-color:#d3a530;
  color:var(--ink);
}