/* ── Reminders module styles ─────────────────────────────────
   Isolated: only applies to #view-reminders and its children.
   Uses the same design tokens as styles.css — no overrides.     */

/* ── Page layout ─────────────────────────────────────────────*/
#view-reminders .rem-tabs {
  display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap;
}
#view-reminders .rem-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; border: 1.5px solid var(--border-strong);
  background: var(--surface-container); color: var(--text2);
  transition: all .15s;
}
#view-reminders .rem-tab .nav-icon { font-size: 16px; }
#view-reminders .rem-tab:hover { background: var(--surface-high); color: var(--text); }
#view-reminders .rem-tab.active {
  background: var(--primary); color: #fff;
  border-color: var(--primary); box-shadow: 0 0 12px var(--primary-glow);
}

/* ── Stat cards row ───────────────────────────────────────────*/
#view-reminders .rem-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px;
}
@media (max-width: 860px) { #view-reminders .rem-stats { grid-template-columns: repeat(2,1fr); } }

/* ── Two-column content grid ──────────────────────────────────*/
#view-reminders .rem-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
@media (max-width: 920px) { #view-reminders .rem-grid { grid-template-columns: 1fr; } }

/* ── Alert rows ───────────────────────────────────────────────*/
@keyframes rem-pulse-crit {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,68,68,0); border-color: rgba(255,68,68,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(255,68,68,.1); border-color: rgba(255,68,68,.85); }
}
@keyframes rem-pulse-warn {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); border-color: rgba(245,158,11,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(245,158,11,.1); border-color: rgba(245,158,11,.8); }
}
.rem-alert {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: 10px; padding: 13px 15px; margin-bottom: 9px;
  cursor: pointer; transition: transform .12s;
  border-width: 1.5px; border-style: solid;
}
.rem-alert:hover { transform: translateX(2px); }
.rem-alert:last-child { margin-bottom: 0; }
.rem-alert.crit {
  background: var(--danger-bg); border-color: rgba(255,68,68,.4);
  border-left: 5px solid var(--danger);
  animation: rem-pulse-crit 2s ease-in-out infinite;
}
.rem-alert.warn {
  background: var(--warning-bg); border-color: rgba(245,158,11,.35);
  border-left: 5px solid var(--warning);
  animation: rem-pulse-warn 2.5s ease-in-out infinite;
}
.rem-alert-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rem-alert.crit .rem-alert-icon { background: var(--danger-bg); }
.rem-alert.warn .rem-alert-icon { background: var(--warning-bg); }
.rem-alert-icon .nav-icon { font-size: 18px; }
.rem-alert.crit .rem-alert-icon .nav-icon { color: var(--danger); }
.rem-alert.warn .rem-alert-icon .nav-icon { color: var(--warning); }
.rem-alert-meta { flex: 1; min-width: 0; }
.rem-alert-truck { font-family: 'Manrope',sans-serif; font-weight: 800; font-size: 14px; }
.rem-alert-sub   { font-size: 12px; color: var(--text2); margin-top: 2px; }
.rem-alert-note  { font-size: 11px; color: var(--text3); margin-top: 4px; }
.rem-days {
  font-family: 'Manrope',sans-serif; font-size: 13px; font-weight: 800;
  padding: 4px 10px; border-radius: 8px; flex-shrink: 0; white-space: nowrap;
}
.rem-days.crit { background: var(--danger); color: #fff; }
.rem-days.warn { background: var(--warning); color: #1a1a1a; }

/* ── SMS activity feed ────────────────────────────────────────*/
.rem-sms-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rem-sms-row:last-child { border-bottom: none; }
.rem-sms-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #ff8a65);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.rem-sms-body  { flex: 1; min-width: 0; }
.rem-sms-name  { font-weight: 700; font-size: 13px; }
.rem-sms-msg   { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rem-sms-time  { font-size: 11px; color: var(--text3); flex-shrink: 0; }

/* ── Live dot ─────────────────────────────────────────────────*/
@keyframes rem-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.rem-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px var(--success);
  animation: rem-blink 1.8s ease-in-out infinite;
}

/* ── Reply bubbles ────────────────────────────────────────────*/
.rem-reply {
  display: flex; align-items: center; gap: 10px;
  background: var(--success-bg); border: 1px solid rgba(120,220,119,.2);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.rem-reply.warn-reply {
  background: var(--warning-bg); border-color: rgba(245,158,11,.2);
}
.rem-reply:last-child { margin-bottom: 0; }
.rem-reply-from  { font-weight: 700; font-size: 13px; color: var(--success); min-width: 100px; flex-shrink: 0; }
.rem-reply.warn-reply .rem-reply-from { color: var(--warning); }
.rem-reply-text  { flex: 1; font-size: 12px; color: var(--text2); }
.rem-reply-ack   { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--success); flex-shrink: 0; }
.rem-reply-ack .nav-icon { font-size: 14px; }
.rem-reply-time  { font-size: 11px; color: var(--text3); flex-shrink: 0; }

/* ── Escalation cards ─────────────────────────────────────────*/
.rem-escalation {
  background: var(--danger-bg); border: 1px solid rgba(255,68,68,.2);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.rem-escalation:last-child { margin-bottom: 0; }
.rem-escalation-title  { font-weight: 800; font-size: 13px; color: var(--danger); margin-bottom: 4px; }
.rem-escalation-detail { font-size: 12px; color: var(--text2); }
.rem-escalation-meta   { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* ── Schedule config table ────────────────────────────────────*/
.rem-sched-table { width: 100%; border-collapse: collapse; }
.rem-sched-table input[type=number] { width: 62px; text-align: center; }
.rem-type-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rem-type-icon .nav-icon { font-size: 17px; }

/* ── SMS history table ────────────────────────────────────────*/
.rem-history-filter {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.rem-history-filter select { width: 150px; }

/* ── Phone list ───────────────────────────────────────────────*/
.rem-phone-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.rem-phone-row:last-child { border-bottom: none; }
.rem-phone-name  { font-weight: 600; font-size: 13px; }
.rem-phone-truck { font-size: 11px; color: var(--text3); margin-top: 1px; }
.rem-phone-num   { font-size: 12px; font-family: monospace; color: var(--text2); }
.rem-phone-missing { font-size: 12px; color: var(--text3); font-style: italic; }

/* ── Section heading inside cards ────────────────────────────*/
.rem-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3);
  margin: 14px 0 8px; display: flex; align-items: center; gap: 5px;
}
.rem-section-label .nav-icon { font-size: 14px; }

/* ── Trigger result box ───────────────────────────────────────*/
.rem-trigger-result {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 15px; margin-top: 12px; font-size: 12px;
}

/* ── Per-vehicle override row ─────────────────────────────────*/
.rem-override-row {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 16px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
}
.rem-override-row:last-of-type { margin-bottom: 0; }