/* css/reminders.css — Reminders view.
   Loaded after resources.css, so these rules take the cascade for
   anything scoped to #view-reminders / #reminderModal without
   touching the shared .resources-* / .modal-* classes used by other
   views. Goal: tighter rhythm, clearer hierarchy, and real affordance
   on anything clickable (see the design notes inline below). */

/* ── Page rhythm ──────────────────────────────────────────────── */
#view-reminders .resources-scroll {
  padding: var(--space-5) var(--space-4) var(--space-8);
}
#view-reminders .resources-generate-panel,
#view-reminders .my-resources-panel {
  max-width: 560px;
  margin-bottom: var(--space-5);
}
#view-reminders .resources-heading {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: 1px;
}
#view-reminders .resources-subheading {
  font-size: var(--text-sm);
  margin-bottom: 0;
}
#view-reminders .reminders-notif-row { gap: var(--space-3); }

/* Add-reminder button: a compact pill, not a full modal-style button
   stretching to fit its own padding. */
#remindersAddBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 8px 14px !important;
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
#remindersAddBtn:hover { background: var(--accent-hover); }
#remindersAddBtn i { font-size: 0.95em; }

/* Section that holds the reminder list gets its own top margin so it
   doesn't rely on the generic panel spacing designed for much longer
   resource-builder forms. */
#view-reminders .resources-generate-panel > .reminders-notif-row {
  margin-bottom: var(--space-3);
}

/* ── Notifications: bell + popover ──────────────────────────────
   Notification setup is a rare, one-time task, so it no longer gets a
   permanent card on the page. It lives behind a small bell in the top
   bar (shown only when there's something to do) and opens a compact
   popover. Nothing on the page moves when it appears. */
.reminders-notif-wrap { position: relative; flex-shrink: 0; }
.reminders-notif-wrap[hidden],
.reminders-notif-popover[hidden],
.reminders-bell-dot[hidden],
.reminders-ios-steps[hidden],
.reminders-notif-action[hidden],
.reminders-notif-close[hidden] { display: none; }

.reminders-bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: 18px;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.reminders-bell-btn:hover,
.reminders-bell-btn[aria-expanded="true"] { background: var(--bg-subtle); color: var(--text-1); }

/* Small dot = "there's something you can turn on". */
.reminders-bell-dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  box-sizing: content-box;
  transform: translate(25%, -25%);
}

.reminders-notif-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  width: min(300px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.reminders-notif-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 2px;
}
.reminders-notif-text {
  font-size: var(--text-sm);
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}

.reminders-ios-steps {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reminders-ios-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.reminders-ios-steps li i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--bg-subtle);
  color: var(--accent);
  font-size: 13px;
}
.reminders-ios-steps strong { color: var(--text-1); font-weight: 600; }

.reminders-notif-action,
.reminders-notif-close {
  margin-top: var(--space-3);
  width: 100%;
  padding: 9px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}
.reminders-notif-action { background: var(--accent); color: #fff; }
.reminders-notif-action:hover { background: var(--accent-hover); }
.reminders-notif-action:disabled { opacity: 0.6; cursor: default; }
.reminders-notif-close { background: var(--bg-subtle); color: var(--text-1); }
.reminders-notif-close:hover { opacity: 0.85; }

/* ── Reminder rows ────────────────────────────────────────────── */
#view-reminders .my-resource-row { padding: var(--space-3); }
#view-reminders .my-resource-title { font-size: var(--text-sm); font-weight: 600; }
#view-reminders .my-resource-meta { font-size: var(--text-xs); }

/* ── Add / edit reminder modal ───────────────────────────────────
   Scoped to #reminderModal so the shared .modal-* / .resource-field /
   .visual-type-* classes used by other modals (connectors, visuals)
   are completely untouched. */
#reminderModal .modal-box { width: min(400px, 92vw); }
#reminderModal .modal-body { padding: var(--space-4); gap: var(--space-3); }
#reminderModal .modal-header { padding: var(--space-3) var(--space-4); }
#reminderModal .resource-field { gap: 6px; }
#reminderModal .resource-field span { font-size: var(--text-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.02em; }
#reminderModal .resource-field input,
#reminderModal .resource-field textarea {
  padding: 10px var(--space-3);
  font-size: var(--text-sm);
}

/* Channel + offset pickers: chips that size to their label instead of
   flex:1 boxes stretching every option (incl. one-word ones like
   "Email") into an oversized, awkward block. */
#reminderModal .visual-type-toggle { gap: 6px; }
#reminderModal .visual-type-option {
  flex: 0 0 auto;
  min-width: 0;
  padding: 7px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
}
#reminderModal .visual-type-option i { font-size: 0.95em; }

/* Footer actions: delete becomes an icon-only ghost button so the
   primary "Save" action reads as the one clear next step, iOS-sheet
   style, instead of two equally-weighted full-width buttons. */
#reminderModal .modal-body > div:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 2px;
}
#reminderDeleteBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: 0; /* hides the "Delete" text node; the icon + aria-label still communicate it */
}
#reminderDeleteBtn i.ph { font-size: 16px; margin: 0; }
#reminderDeleteBtn:hover { background: var(--danger-subtle); border-color: var(--danger); }
#reminderSaveBtn {
  padding: 10px var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

/* ── Unsubscribed-from-email prompt (shown only when Email is ticked) ── */
#reminderModal .reminder-email-notice {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
#reminderModal .reminder-email-notice[hidden] { display: none; }
#reminderModal .reminder-email-notice-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}
#reminderModal .reminder-email-notice-btn {
  margin-top: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}
#reminderModal .reminder-email-notice-btn:hover { background: var(--accent-hover); }
#reminderModal .reminder-email-notice-btn:disabled { opacity: 0.6; cursor: default; }