/* Reminders (js/reminders.js) + "written task corrected" button (js/task-corrected.js) */
.rem-overlay {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.rem-overlay.open { display: flex; }
.rem-modal {
  width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
  background: #161b22; border: 1px solid #30363d; border-radius: 14px;
  padding: 18px 20px 20px; color: #e6edf3;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}
.rem-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rem-head h3 { font-size: 1.1rem; font-weight: 700; color: #e6edf3; }
.rem-x { background: none; border: none; color: #adbac7; font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rem-x:hover { color: #fff; background: #1c2128; }

.rem-new {
  width: 100%; background: rgba(251, 191, 36, .1); border: 1px dashed rgba(251, 191, 36, .55); color: #fcd34d;
  font-size: .95rem; font-weight: 600; padding: 11px; border-radius: 10px; cursor: pointer; margin-bottom: 12px;
}
.rem-new:hover { background: rgba(251, 191, 36, .18); }
.rem-sec { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #adbac7; margin: 14px 2px 6px; font-weight: 700; }
.rem-empty { color: #adbac7; font-size: .9rem; padding: 10px 2px; }
.rem-item, .rem-sugg-item {
  display: flex; align-items: center; gap: 12px;
  background: #1c2128; border: 1px solid #30363d; border-radius: 10px; padding: 10px 12px; margin-bottom: 6px;
}
.rem-past .rem-item { opacity: .7; }
.rem-item-icon { font-size: 1.2rem; flex-shrink: 0; }
.rem-item-body { flex: 1; min-width: 0; }
.rem-item-title { font-size: .95rem; font-weight: 600; color: #e6edf3; overflow-wrap: anywhere; }
.rem-item-meta { font-size: .8rem; color: #adbac7; margin-top: 2px; }
.rem-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.rem-item-actions button {
  background: none; border: 1px solid #30363d; color: #adbac7; border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: .85rem;
}
.rem-item-actions button:hover { color: #fff; border-color: #fcd34d; }

/* form */
.rem-help { font-size: .82rem; color: #adbac7; margin: 4px 2px 12px; line-height: 1.45; }
.rem-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; flex: 1; min-width: 0; }
.rem-field > span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #adbac7; font-weight: 600; }
.rem-field input, .rem-field select, .rem-field textarea {
  width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
  color: #e6edf3; padding: 8px 10px; font-size: .92rem; font-family: inherit; outline: none; color-scheme: dark;
}
.rem-field textarea { resize: vertical; line-height: 1.45; }
.rem-field input:focus, .rem-field select:focus, .rem-field textarea:focus { border-color: #fcd34d; }
.rem-field select:disabled { opacity: .5; }
.rem-row { display: flex; gap: 10px; }
.rem-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.rem-seg button {
  background: #0d1117; border: 1px solid #30363d; color: #adbac7; border-radius: 8px;
  padding: 7px 12px; font-size: .85rem; cursor: pointer;
}
.rem-seg button.on { color: #fcd34d; border-color: #fcd34d; background: rgba(251, 191, 36, .08); }
.rem-error {
  color: #fca5a5; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35);
  border-radius: 8px; padding: 8px 10px; font-size: .85rem; margin-top: 8px;
}
.rem-actions { display: flex; gap: 8px; margin-top: 14px; }
.rem-actions button {
  flex: 1; padding: 10px; border-radius: 9px; font-weight: 700; font-size: .92rem; cursor: pointer;
  background: none; border: 1px solid #30363d; color: #adbac7;
}
.rem-actions button:hover { color: #fff; }
.rem-actions button.primary { background: #fbbf24; border-color: #fbbf24; color: #1c1917; }
.rem-actions button.primary:disabled { opacity: .6; }
.rem-modal [hidden] { display: none !important; }

/* toast */
#remToasts { position: fixed; right: 18px; bottom: 18px; z-index: 9600; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.rem-toast {
  display: flex; gap: 12px; background: #1c2128; border: 1px solid #fbbf24; border-radius: 12px;
  padding: 14px 14px 12px; color: #e6edf3; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  animation: rem-in .25s ease;
}
@keyframes rem-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rem-toast-icon { font-size: 1.4rem; }
.rem-toast-body { flex: 1; min-width: 0; }
.rem-toast-title { font-weight: 700; font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.rem-toast-meta { font-size: .82rem; color: #adbac7; margin-top: 4px; line-height: 1.4; }
.rem-toast-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.rem-toast-actions button {
  background: none; border: 1px solid #30363d; color: #adbac7; border-radius: 7px; padding: 5px 10px; font-size: .8rem; cursor: pointer;
}
.rem-toast-actions button.primary { background: #fbbf24; border-color: #fbbf24; color: #1c1917; font-weight: 700; }

/* ⏰ in the notifications panel header */
.ep-notif-rem-btn {
  background: none; border: 1px solid rgba(251, 191, 36, .45); color: #fcd34d;
  border-radius: 6px; padding: 3px 8px; font-size: .75rem; cursor: pointer; margin-left: auto; margin-right: 8px;
}
.ep-notif-rem-btn:hover { background: rgba(251, 191, 36, .12); }

/* written task corrected button (toolbar) */
#taskCorrectedBtn.done { color: #86efac; border-color: rgba(134, 239, 172, .5); }

@media (max-width: 560px) {
    .rem-row { flex-direction: column; gap: 0; }
}

/* 💡 Suggestions */
.rem-sugg-item .rem-item-meta b { color: #86efac; font-weight: 600; }
.rem-item-actions button.rem-sugg-add { width: auto; padding: 0 12px; font-weight: 700; color: #fcd34d; border-color: rgba(252, 211, 77, .45); white-space: nowrap; }
.rem-item-actions button.rem-sugg-add:hover { background: rgba(252, 211, 77, .12); }