@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');

/* ============================================================
   Lymevereniging — Moderne UI-laag voor CiviCRM Standalone
   Lydia, 27 oktober 2026 · geladen via instelling customCSSURL
   Reversibel: zet customCSSURL op NULL om terug te keren.
   Versie 1.0
   ============================================================ */

:root {
  --lym-green: #3d8b40;
  --lym-green-dark: #2e6b31;
  --lym-green-soft: #eaf4ea;
  --bg: #f2f4f7;
  --card: #ffffff;
  --border: #e3e8ef;
  --tekst: #24292f;
  --tekst-zacht: #59626e;
  --schaduw: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---------- Basis ---------- */
body,
#crm-container.crm-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: var(--bg) !important;
  color: var(--tekst) !important;
  font-size: 14px !important;
}

#crm-container a { color: var(--lym-green); }
#crm-container a:hover { color: var(--lym-green-dark); }

/* ---------- Topnavigatiebalk ---------- */
body > nav,
#civicrm-menu {
  background: #1f2b38 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
#civicrm-menu li a,
#civicrm-menu a,
body > nav a {
  color: #e6ebf2 !important;
  font-weight: 500 !important;
  transition: background .15s ease, color .15s ease;
}
#civicrm-menu li a:hover,
body > nav a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-radius: 6px;
}
#civicrm-menu li ul { border-radius: 8px; overflow: hidden; }

/* ---------- Paginakop ---------- */
#crm-container h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--tekst) !important;
  letter-spacing: -.01em;
}
#crm-container h2 { font-size: 17px !important; font-weight: 600 !important; }
#crm-container h3 { font-size: 15px !important; font-weight: 600 !important; }

/* ---------- Content als kaarten ---------- */
#crm-container .crm-block,
#crm-container .crm-form-block,
#crm-container .crm-content-block,
#crm-container .crm-results-block,
#crm-container form > .crm-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--schaduw);
  padding: 18px 20px !important;
  margin: 0 0 18px 0;
}

/* ---------- Formulieren ---------- */
#crm-container input[type="text"],
#crm-container input[type="email"],
#crm-container input[type="number"],
#crm-container input[type="password"],
#crm-container input[type="date"],
#crm-container input[type="search"],
#crm-container select,
#crm-container textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  background: #fff !important;
  color: var(--tekst) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#crm-container input:focus,
#crm-container select:focus,
#crm-container textarea:focus {
  border-color: var(--lym-green) !important;
  box-shadow: 0 0 0 3px rgba(61,139,64,.15) !important;
  outline: none !important;
}
#crm-container .label,
#crm-container label {
  font-weight: 500;
  color: var(--tekst-zacht);
}

/* ---------- Knoppen ---------- */
#crm-container input[type="submit"],
#crm-container button[type="submit"],
#crm-container .crm-button,
#crm-container .crm-submit-buttons .button,
#crm-container a.button {
  background: var(--lym-green) !important;
  color: #fff !important;
  border: 1px solid var(--lym-green-dark) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
#crm-container input[type="submit"]:hover,
#crm-container button[type="submit"]:hover,
#crm-container .crm-button:hover,
#crm-container a.button:hover {
  background: var(--lym-green-dark) !important;
}
#crm-container input[type="button"],
#crm-container button:not([type="submit"]),
#crm-container a.button.crm-button-cancel,
#crm-container .crm-button-cancel {
  background: #fff !important;
  color: var(--tekst) !important;
  border: 1px solid #cbd5e1 !important;
}
#crm-container input[type="button"]:hover,
#crm-container button:not([type="submit"]):hover {
  background: #f6f8fa !important;
}

/* ---------- Tabellen ---------- */
#crm-container table {
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
#crm-container table th {
  background: #f6f8fa !important;
  color: var(--tekst-zacht) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 9px 10px !important;
}
#crm-container table td {
  padding: 9px 10px !important;
  border-bottom: 1px solid #eef1f5 !important;
  color: var(--tekst);
}
#crm-container table tbody tr:hover td { background: var(--lym-green-soft); }
#crm-container table tbody tr:nth-child(even) td { background: #fafbfd; }
#crm-container table tbody tr:nth-child(even):hover td { background: var(--lym-green-soft); }

/* ---------- Meldingen en statusblokken ---------- */
#crm-container .messages,
#crm-container .messages.status,
#crm-container .status-message,
#crm-container .help {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--schaduw);
  padding: 12px 16px !important;
}
#crm-container .messages.status { background: #fff8e6 !important; border-color: #f2d47c !important; }

/* ---------- Samenvouwbaar (details/summary) ---------- */
#crm-container summary { cursor: pointer; font-weight: 600; }
#crm-container summary:hover { color: var(--lym-green-dark); }

/* ---------- Breadcrumbs en footer ---------- */
#crm-container .breadcrumb,
.breadcrumb {
  font-size: 12.5px;
  color: var(--tekst-zacht);
}
#crm-footer, .crm-footer {
  color: var(--tekst-zacht);
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* ---------- Meldingsballonnen (rechtsboven) ---------- */
#crm-notification-container .ui-notify-message {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  border: 0 !important;
}

/* ---------- Zachte scrollbalken ---------- */
#crm-container ::-webkit-scrollbar { width: 10px; height: 10px; }
#crm-container ::-webkit-scrollbar-thumb { background: #c4ccd6; border-radius: 6px; border: 2px solid var(--bg); }

/* ============================================================
   v1.1 verfijningen — 27 oktober 2026
   ============================================================ */

/* Sorteerbare tabelkoppen: neutraal i.p.v. linkkleur */
#crm-container table th a,
#crm-container table th a:link,
#crm-container table th a:visited {
  color: var(--tekst-zacht) !important;
  text-decoration: none;
}
#crm-container table th a:hover { color: var(--lym-green-dark) !important; }

/* Actiebalk boven zoekresultaten als nette kaart */
#crm-container .crm-search-tasks,
#crm-container .crm-tasks,
#crm-container .form-layout,
#crm-container .crm-action-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--schaduw);
  padding: 12px 14px !important;
}

/* Sectiekoppen (bijv. Beheer-categorieën) */
#crm-container .crm-admin-category,
#crm-container h3.header,
#crm-container .header {
  border-radius: 8px;
}

/* Subtitel/sectietitels in groen accent */
#crm-container .crm-admin-category h3,
#crm-container .crm-content-block h3.header {
  color: var(--lym-green-dark) !important;
}

/* Tabbladen (contactoverzicht e.a.) */
#crm-container ul.tabs,
#crm-container .crm-tabbed .tab-label,
#crm-container li.tab a {
  border-radius: 8px 8px 0 0;
}

/* Selectievakjes en keuzerondjes iets ruimer */
#crm-container input[type="checkbox"],
#crm-container input[type="radio"] { accent-color: var(--lym-green); }

/* Zijbalk-items in beheerschermen */
#crm-container .menu-items a,
#crm-container .admin-panels a { text-decoration: none; }

/* Zoekveld met vergrootglas (snelzoeken in menubalk) */
#civicrm-menu input,
body > nav input {
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
#civicrm-menu input::placeholder,
body > nav input::placeholder { color: rgba(255,255,255,.55); }

/* Rapportpagina's: filters als kaart */
#crm-container .report-filters,
#crm-container fieldset {
  border-radius: 10px !important;
}

/* ============================================================
   v1.2 — Openbare formulieren (ALV, inschrijvingen, donatiepagina's)
   gecentreerd — 27 oktober 2026
   Scope: alleen .crm-public (openbare CiviCRM-pagina's);
   beheerformulieren binnen de admin blijven ongewijzigd.
   ============================================================ */

/* Formulier als geheel: beperkte breedte, horizontaal gecentreerd */
.crm-public form {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* Intro- en toelichtingsblokken mee centreren */
.crm-public .crm-public-form-item,
.crm-public .messages {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Veldregels: labelkolom en invoerveld in balans binnen de 720px */
.crm-public .crm-section .label {
  width: 30% !important;
  padding-right: 14px;
  box-sizing: border-box;
}
.crm-public .crm-section .content {
  margin-left: 31% !important;
  box-sizing: border-box;
}

/* Verzendknop gecentreerd onder het formulier */
.crm-public .crm-submit-buttons {
  text-align: center;
}
.crm-public .crm-submit-buttons .crm-button {
  margin: 0 6px;
}

/* Kopjes binnen het formulier mee centreren */
.crm-public fieldset legend {
  padding-left: 0;
}


/* ============================================================
   v1.3 (hersteld) — Openbare formulieren in huisstijl
   www.lymevereniging.nl — 27 oktober 2026
   Lato, groen #3aaa35, gradiëntknoppen, witte pagina.
   Specificiteit: #crm-container.crm-public weegt even zwaar als
   de admin-regels en staat later in het bestand, dus wint hier.
   ============================================================ */

/* Typografie: Lato zoals op de website */
#crm-container.crm-public,
#crm-container.crm-public input,
#crm-container.crm-public select,
#crm-container.crm-public textarea,
#crm-container.crm-public button {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.7;
}
#crm-container.crm-public h1,
#crm-container.crm-public h2,
#crm-container.crm-public h3,
#crm-container.crm-public h4,
#crm-container.crm-public legend {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Linkkleur zoals op de website */
#crm-container.crm-public a { color: #3aaa35; }
#crm-container.crm-public a:hover { color: #2e8529; }

/* Openbare pagina: wit zoals de website, kaart-schaduw weg */
#crm-container.crm-public {
  background: #ffffff !important;
  border-top: 2px solid #dee2e6;
}
#crm-container.crm-public .crm-block,
#crm-container.crm-public .crm-content-block,
#crm-container.crm-public .crm-form-block,
#crm-container.crm-public .crm-search-tasks {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Invoervelden in website-stijl (Bootstrap-achtig) */
#crm-container.crm-public input[type="text"],
#crm-container.crm-public input[type="email"],
#crm-container.crm-public input[type="number"],
#crm-container.crm-public input[type="password"],
#crm-container.crm-public input[type="date"],
#crm-container.crm-public input[type="search"],
#crm-container.crm-public input[type="tel"],
#crm-container.crm-public select,
#crm-container.crm-public textarea {
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#crm-container.crm-public input:focus,
#crm-container.crm-public select:focus,
#crm-container.crm-public textarea:focus {
  border-color: #3aaa35 !important;
  box-shadow: 0 0 0 3px rgba(58,170,53,.15) !important;
  outline: none !important;
}

/* Knoppen: groene website-gradiënt */
#crm-container.crm-public input[type="submit"],
#crm-container.crm-public button[type="submit"],
#crm-container.crm-public .crm-button,
#crm-container.crm-public .crm-submit-buttons .button,
#crm-container.crm-public a.button {
  background-image: linear-gradient(135deg, #95c11f 0%, #3aaa35 100%) !important;
  background-color: #3aaa35 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: filter .15s ease-in-out;
}
#crm-container.crm-public input[type="submit"]:hover,
#crm-container.crm-public button[type="submit"]:hover,
#crm-container.crm-public .crm-button:hover,
#crm-container.crm-public a.button:hover {
  filter: brightness(1.08);
}
#crm-container.crm-public input[type="submit"]:active,
#crm-container.crm-public button[type="submit"]:active {
  filter: brightness(.95);
}

/* Selectievakjes / keuzerondjes in themakleur */
#crm-container.crm-public input[type="checkbox"],
#crm-container.crm-public input[type="radio"] { accent-color: #3aaa35; }

/* Meldingsblokken: zachte website-kleuren */
#crm-container.crm-public .messages { border-radius: 4px; }

/* Tabellen (bijv. prijsoverzicht) in website-stijl */
#crm-container.crm-public table th {
  background: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6 !important;
  color: #343a40 !important;
}
#crm-container.crm-public table td { border-bottom: 1px solid #dee2e6 !important; }
#crm-container.crm-public table tbody tr:hover td { background: #f2faf2; }

/* ============================================================
   v1.4 — Paginatitel van openbare formulieren mee centreren
   met het formulier (zelfde 720px-blok, zelfde lijn) — 27-10-2026
   ============================================================ */

#crm-container.crm-public .crm-page-title-wrapper {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   v1.5 — Responsive: openbare formulieren goed op mobiel
   (27 oktober 2026) — labels boven velden, volle breedte,
   geen horizontale scroll tot 320px.
   ============================================================ */

@media (max-width: 600px) {

  /* Containers: volledige schermbreedte benutten */
  #crm-container.crm-public {
    padding: 12px !important;
  }
  #crm-container.crm-public .crm-page-title-wrapper,
  #crm-container.crm-public form,
  #crm-container.crm-public .crm-public-form-item,
  #crm-container.crm-public .messages {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Titel iets compacter op klein scherm */
  #crm-container.crm-public h1 { font-size: 24px !important; line-height: 1.3 !important; }
  #crm-container.crm-public legend { font-size: 17px !important; }

  /* Labels boven de velden i.p.v. ernaast */
  #crm-container.crm-public .crm-section .label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 0 4px 0 !important;
    margin: 0 0 2px 0 !important;
  }
  #crm-container.crm-public .crm-section .content {
    display: block;
    float: none;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    overflow-x: auto;
  }

  /* Invoervelden: volle breedte, nooit uitsteken */
  #crm-container.crm-public .crm-section .content input[type="text"],
  #crm-container.crm-public .crm-section .content input[type="email"],
  #crm-container.crm-public .crm-section .content input[type="number"],
  #crm-container.crm-public .crm-section .content input[type="password"],
  #crm-container.crm-public .crm-section .content input[type="date"],
  #crm-container.crm-public .crm-section .content input[type="tel"],
  #crm-container.crm-public .crm-section .content input[type="search"],
  #crm-container.crm-public .crm-section .content select,
  #crm-container.crm-public .crm-section .content textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Verzendknop: volle breedte, makkelijk aan te tikken */
  #crm-container.crm-public .crm-submit-buttons .button,
  #crm-container.crm-public input[type="submit"],
  #crm-container.crm-public button[type="submit"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 22px !important;
  }

  /* Prijstabellen (bijdragepagina's) netjes schuifbaar indien breed */
  #crm-container.crm-public table {
    width: 100% !important;
    font-size: 14px;
  }
}

/* ============================================================
   v1.6 — Titel begrensd met automatische terugloop +
   invoervelden 30% hoger — 27 oktober 2026
   ============================================================ */

/* Paginatitel: nooit buiten beeld, altijd terugloop */
#crm-container.crm-public .crm-page-title {
  white-space: normal !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
}
#crm-container.crm-public .crm-page-title-wrapper {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-wrap: anywhere;
}

/* Invoervelden 30% hoger: van 45px naar ca. 58px */
#crm-container.crm-public input[type="text"],
#crm-container.crm-public input[type="email"],
#crm-container.crm-public input[type="number"],
#crm-container.crm-public input[type="password"],
#crm-container.crm-public input[type="date"],
#crm-container.crm-public input[type="search"],
#crm-container.crm-public input[type="tel"],
#crm-container.crm-public select {
  min-height: 58px !important;
  box-sizing: border-box;
  padding: 14px 12px !important;
}
/* Textarea: wat hoger uitgangsniveau, mag nog verder groeien */
#crm-container.crm-public textarea {
  min-height: 120px !important;
  box-sizing: border-box;
}

/* Ook binnen de mobiele media query dezelfde hogere velden */
@media (max-width: 600px) {
  #crm-container.crm-public .crm-section .content input[type="text"],
  #crm-container.crm-public .crm-section .content input[type="email"],
  #crm-container.crm-public .crm-section .content input[type="number"],
  #crm-container.crm-public .crm-section .content input[type="password"],
  #crm-container.crm-public .crm-section .content input[type="date"],
  #crm-container.crm-public .crm-section .content input[type="tel"],
  #crm-container.crm-public .crm-section .content input[type="search"],
  #crm-container.crm-public .crm-section .content select {
    min-height: 58px !important;
    padding: 14px 12px !important;
  }
}

/* ============================================================
   v1.7 — Exacte linkslijning: de 20px binnenrand van het
   formulierblok (crm-block) weg, zodat titel, tekst, kaders
   en velden allemaal op dezelfde lijn starten — 27-10-2026
   ============================================================ */

#crm-container.crm-public .crm-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* v1.7a — verzendknop op mobiel: marges weg (waren 12px uitsteek) */
@media (max-width: 600px) {
  #crm-container.crm-public .crm-submit-buttons .button,
  #crm-container.crm-public input[type="submit"],
  #crm-container.crm-public button[type="submit"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #crm-container.crm-public .crm-submit-buttons {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}