/* notifications.css — R287 (W7/U17-prefs) — Settings → Notificações UI.
 *
 * Extends the existing .set-card / .toggle-row primitives declared inline
 * in frontend/web/src/index.html. Token-only colours (no raw hex), respects
 * the BR-locale 24h time inputs, and ships with @media adjustments for
 * mobile (<= 720px) so the Push + Sound + DND blocks stack vertically.
 */

/* Visually-hidden helper for table <caption>s and screen-reader-only labels.
 * Standard pattern (Bootstrap / Tailwind sr-only). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Group block — visually separates Sons / DND / Push / Digest within the
 * existing Notificações card so each "subsection" reads as its own unit
 * without needing a new <section class="set-card">. */
.notif-block {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(10, 31, 94, .08);
}
.notif-block:last-child { border-bottom: none; }

.notif-block-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-block-title i { width: 14px; height: 14px; }

.notif-block-desc {
  margin: 0 0 12px;
  font-size: var(--fs-small);
  color: var(--fg-3);
}

/* "Test sound" button alignment: live next to the enable toggle on desktop,
 * stacked under it on mobile. */
.notif-sound-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Push status row — shows current Notification.permission state with a
 * tone-coloured pill (green = granted, danger = denied, neutral = default). */
.notif-push-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.notif-push-state .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  background: rgba(10, 31, 94, .05);
  color: var(--fg-2);
}
.notif-push-state .pill.tone-success {
  background: rgba(34, 165, 84, .12);
  color: var(--dnuv-success);
}
.notif-push-state .pill.tone-danger {
  background: rgba(229, 72, 77, .12);
  color: var(--dnuv-danger);
}
.notif-push-state .pill.tone-warn {
  background: rgba(214, 142, 12, .14);
  color: var(--dnuv-warn, #B57B00);
}

.notif-help {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(60, 179, 254, .06);
  border-left: 3px solid var(--dnuv-blue-dark);
  border-radius: 4px;
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.notif-help i {
  width: 13px;
  height: 13px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Digest radio group — horizontal with conditional sub-controls (time picker
 * for daily, dow picker for weekly). */
.notif-digest-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notif-digest-options .radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  cursor: pointer;
}
.notif-digest-options .radio-option input[type="radio"] {
  margin: 0;
}
.notif-digest-sub {
  margin: 6px 0 0 24px;
  display: none;
  align-items: center;
  gap: 8px;
}
.notif-digest-sub.active {
  display: flex;
  flex-wrap: wrap;
}
.notif-digest-sub label {
  font-size: var(--fs-small);
  color: var(--fg-3);
}
.notif-digest-sub input[type="time"],
.notif-digest-sub select {
  width: auto;
}

/* Mute / DND row — schedule pickers stack below the toggle on narrow screens. */
.notif-dnd-schedule {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.notif-dnd-schedule label {
  font-size: var(--fs-small);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.notif-dnd-schedule input[type="time"] {
  width: auto;
}

@media (max-width: 720px) {
  .notif-sound-actions,
  .notif-push-state,
  .notif-dnd-schedule {
    flex-direction: column;
    align-items: stretch;
  }
  .notif-dnd-schedule label { justify-content: space-between; }
  .notif-block-title { font-size: var(--fs-small); }
}