/* =========================================================
   Agenda Sync Pro — Frontend Styles
   - Formuliervelden (leesbaar)
   - Meldingen & kaarten
   - Subscribe-UI (Apple/Google/Outlook + .ics + copy)
   - Manage/Unsubscribe pagina
   - Toegankelijkheid, dark mode & responsive
   ========================================================= */

/* ---------- Basis helpers ---------- */
.asp-wrap, .asp-result, .asp-manage { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.asp-hidden { display: none !important; }

/* ---------- Meldingen ---------- */
.asp-msg {
  padding: .75rem 1rem;
  border-radius: 10px;
  margin: 0 0 12px 0;
  border: 1px solid #e5e7eb;
  background: #fafafa;
}
.asp-ok {
  background: #ecfdf5;
  border-color: #10b98126;
}
.asp-error {
  background: #fef2f2;
  border-color: #ef444426;
}
.asp-tip { color: #555; }

/* ---------- Kaarten / containers ---------- */
.asp-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  max-width: 720px;
}
.asp-result { max-width: 780px; }
.asp-manage { max-width: 780px; margin: 1.25rem 0; }

/* ---------- Buttons ---------- */
.asp-btn {
  display: inline-block;
  padding: .5rem .85rem;
  border: 1px solid #d1d5db;
  border-radius: .55rem;
  text-decoration: none;
  color: #111827;
  background: #fff;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .02s ease-in-out, background-color .2s, border-color .2s, color .2s;
}
.asp-btn:hover { background: #f9fafb; border-color: #cbd5e1; }
.asp-btn:active { transform: translateY(1px); }
.asp-btn[disabled] { opacity: .6; pointer-events: none; }

.asp-btn-danger {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}
.asp-btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* ---------- Actieblokken ---------- */
.asp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1rem 0;
}
.asp-copy {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ---------- Copy veld ---------- */
.asp-copy input {
  width: 100%;
  max-width: 520px;
  padding: .45rem .6rem;
  border: 1px solid #d1d5db;
  border-radius: .45rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .95rem;
  color: #111;
  background: #fff;
}
.asp-copy input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.asp-copy .asp-copy-btn { }

/* ---------- Form fields (frontend) ---------- */
.asp-form input[type="text"],
.asp-form input[type="email"],
.asp-form input[type="tel"],
.asp-form input[type="url"],
.asp-form input[type="search"],
.asp-form select,
.asp-form textarea {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: .45rem;
  padding: .5rem .65rem;
}
.asp-form ::placeholder { color: #666 !important; opacity: 1; }
.asp-form input:focus,
.asp-form select:focus,
.asp-form textarea:focus {
  outline: none;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Labels en checkboxen */
.asp-form label { cursor: pointer; }
.asp-form input[type="checkbox"] {
  width: 1rem; height: 1rem; vertical-align: middle; margin-right: .35rem;
}

/* ---------- Manage/Unsubscribe pagina ---------- */
.asp-manage h2, .asp-manage h1 { margin: 0 0 .5rem 0; }
.asp-manage p { margin: .35rem 0; }

/* ---------- Tabelletjes (optioneel) ---------- */
.asp-table { width: 100%; border-collapse: collapse; }
.asp-table th, .asp-table td { padding: .5rem .6rem; border-bottom: 1px solid #eee; text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .asp-actions { gap: .45rem; }
  .asp-btn { width: 100%; text-align: center; }
  .asp-card, .asp-result, .asp-manage { padding: 14px; }
  .asp-copy input { max-width: 100%; }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .asp-card, .asp-result, .asp-manage { color: #e5e7eb; }
  .asp-card { background: #0b0f14; border-color: #1f2937; }
  .asp-msg { background: #0b0f14; border-color: #1f2937; color: #e5e7eb; }
  .asp-ok { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.45); }
  .asp-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); }
  .asp-tip { color: #9ca3af; }
  .asp-btn { background: #0b0f14; color: #e5e7eb; border-color: #374151; }
  .asp-btn:hover { background: #111827; border-color: #4b5563; }
  .asp-btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
  .asp-copy input { background: #0b0f14; color: #e5e7eb; border-color: #374151; }
  .asp-form input[type="text"],
  .asp-form input[type="email"],
  .asp-form input[type="tel"],
  .asp-form input[type="url"],
  .asp-form input[type="search"],
  .asp-form select,
  .asp-form textarea {
    background: #0b0f14 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
  }
  .asp-form ::placeholder { color: #9ca3af !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .asp-btn { transition: none; }
}

/* ---------- Print (alleen nuttige info) ---------- */
@media print {
  .asp-actions, .asp-btn, .asp-copy .asp-copy-btn { display: none !important; }
  .asp-copy input { border: 1px solid #000; }
}

/* ---------- Klein detail spacing ---------- */
.asp-result p { margin: .4rem 0; }
.asp-actions .asp-btn + .asp-btn { /* spacing handled by gap */ }