/* ==========================================================================
   Shamwari Guide PWA - css/notices.css
   Notices + Notifications feature styles (inventory §3.4, §3.9, §2.5).
   Only classes used by js/features/notices.js live here - shared primitives
   (Card, Chip, ListRow, buttons, forms...) stay in css/app.css.
   ========================================================================== */

/* ---------- tinted leading icon circle (notice/notification cards) ------- */
.sg-notice-card__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-surface-variant);
  color: var(--sg-muted);
}
.sg-tone--danger { background: var(--sg-danger-container); color: var(--sg-on-danger-container); }
.sg-tone--warning { background: var(--sg-warning-container); color: var(--sg-on-warning-container); }
.sg-tone--info { background: var(--sg-info-container); color: var(--sg-on-info-container); }
.sg-tone--success { background: var(--sg-success-container); color: var(--sg-on-success-container); }
.sg-tone--neutral { background: var(--sg-surface-variant); color: var(--sg-muted); }

/* ---------- notice list card (GuideNotices) ------------------------------ */
.sg-notice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-s-md);
  width: 100%;
  padding: var(--sg-s-md) var(--sg-s-lg);
  border: 1px solid var(--sg-card-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.sg-notice-card:active { background: var(--sg-surface-variant); }
.sg-notice-card.is-read { opacity: 0.72; }

.sg-notice-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-notice-card__title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sg-notice-card__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sg-primary);
}
.sg-notice-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.sg-notice-card__preview {
  font-size: 13px;
  line-height: 18px;
  color: var(--sg-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.sg-notice-card__meta { font-size: 12px; color: var(--sg-muted); }

/* ---------- notice detail (NoticeDetail) ---------------------------------- */
.sg-notice-banner {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-md) var(--sg-s-lg);
  border-radius: var(--sg-r-md);
  font-size: 14px;
  font-weight: 600;
}
.sg-notice-banner--danger { background: var(--sg-danger-container); color: var(--sg-on-danger-container); }
.sg-notice-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.sg-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-s-sm);
  padding: 6px 0;
  border-bottom: 1px solid var(--sg-border);
  min-width: 0;
}
.sg-receipt-row:last-child { border-bottom: 0; }

/* ---------- notifications ("Updates") ------------------------------------ */
.sg-notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-s-md);
  width: 100%;
  padding: var(--sg-s-md) var(--sg-s-lg);
  border: 1px solid var(--sg-card-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.sg-notif-row:active { background: var(--sg-surface-variant); }
.sg-notif-row__title { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.sg-notif-row.is-unread .sg-notif-row__title { font-weight: 700; }

/* ---------- admin notices list -------------------------------------------- */
.sg-admin-notice { display: flex; align-items: flex-start; gap: var(--sg-s-md); padding: var(--sg-s-lg); }
.sg-receipts {
  padding: 0 var(--sg-s-lg) var(--sg-s-lg);
  border-top: 1px solid var(--sg-border);
  margin-top: var(--sg-s-sm);
  padding-top: var(--sg-s-md);
}

/* ---------- action sheet rows (Sheet body, AdminNotices overflow menu) --- */
.sg-sheet-action {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sg-s-sm);
  border: 0;
  background: transparent;
  border-radius: var(--sg-r-sm);
  font-size: 15px;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sg-sheet-action:active { background: var(--sg-surface-variant); }
.sg-sheet-action--danger { color: var(--sg-danger); }

/* ---------- MOB-009 acknowledgement block (notice detail) ---------------- */
.sg-ack-block { display: flex; flex-direction: column; gap: var(--sg-s-xs); }
.sg-ack-block.is-escalated {
  border-left: 4px solid var(--sg-danger);
  padding-left: var(--sg-s-md);
}
.sg-ack-block__due { color: var(--sg-danger); font-weight: 700; }

.sg-ack-progress {
  height: 8px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface-variant);
  overflow: hidden;
  margin: var(--sg-s-xs) 0;
}
.sg-ack-progress__fill { display: block; height: 100%; background: var(--sg-success); }

/* ---------- radio rows (BO-007 experience scope) ------------------------- */
.sg-radio-row {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  min-height: 48px;
  padding: 0 var(--sg-s-xs);
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.sg-radio-row input[type="radio"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--sg-primary);
  margin: 0;
}