/* =============================================================================
   Notification Setting Editor — supplemental surface (nst-*)
   - Used by:  Pages/Admin/NotificationSettingEdit.razor
   - Reuses the shared editor/list primitives from notification-schedule-editor.css
     (nse-* editor, nsl-* list). This file only adds the few setting-specific bits.
   - Loaded AFTER notification-schedule-editor.css in _Host.cshtml.
   - Tokens only (var(--primary-color), var(--space-*) ...). No new colors.
   ============================================================================= */

/* ---------- Inline banner (bypass / info notes inside a panel) ---------- */
.nst-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--nse-radius-sm, 10px);
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--border-color);
  background: var(--background-light, #f8fafc);
  color: var(--text-secondary);
}

.nst-banner .material-icons { flex-shrink: 0; font-size: 20px; margin-top: 1px; }
.nst-banner strong { color: var(--text-primary); }
.nst-banner code {
  background: rgba(var(--primary-rgb), 0.08);
  border-radius: 6px;
  padding: 1px 6px;
}

.nst-banner.is-warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.28);
  color: var(--warning-color);
}
.nst-banner.is-info {
  background: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.25);
  color: var(--info-color);
}
.nst-banner.is-success {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.25);
  color: var(--success-color);
}

/* ---------- Variable hints (placeholder chips) ---------- */
.nst-varhints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.nst-varhints code {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--background-secondary, #fff);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* ---------- Roles checklist (role broadcast) ---------- */
.nst-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--nse-radius-sm, 10px);
  background: var(--background-light, #f8fafc);
}

.nst-role {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nst-role:hover { background: var(--background-secondary, #fff); }
.nst-role input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }

/* ---------- Sub-channel block (role broadcast / daily reminder) ---------- */
.nst-subgroup {
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.nst-subcard {
  border: 1px solid var(--border-color);
  border-radius: var(--nse-radius, 14px);
  background: var(--background-secondary, #fff);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.nst-subcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
}

.nst-subcard-head .material-icons { font-size: 18px; color: var(--text-secondary); }

/* ---------- Schedules quick row reuse helpers ---------- */
.nst-sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* compact provider/connection chip in channel head */
.nst-conn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.nst-conn-chip.is-on  { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.nst-conn-chip.is-off { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }
.nst-conn-chip .material-icons { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .nst-role { transition: none !important; }
}