/**
 * =======================================================================================
 * custom_civicrm.css — OZK-aanpassingen op de CiviCRM back-office UI
 * =======================================================================================
 * Dit bestand wordt sitewide geladen via de CiviCRM-setting customCSSURL
 * (Beheer > Systeeminstellingen > Weergavevoorkeuren > Custom CSS URL):
 *   https://www.onvergetelijk.nl/sites/all/modules/civicrm_extensions/custom_civicrm.css
 *
 * LET OP: dit is iets anders dan custom_civicrm_email.css (nl.onvergetelijk.cssinliner),
 * dat alleen voor e-mailtemplates geldt. Dit bestand raakt uitsluitend de admin-UI.
 *
 * Na wijzigingen: browser hard verversen (Ctrl+Shift+R); CiviCRM cachet dit niet.
 * =======================================================================================
 */

/* ---------------------------------------------------------------------------------------
 * 1. mjwshared "Refund payment"-formulier: Ja/Nee-radio's naast elkaar
 * ---------------------------------------------------------------------------------------
 * De annuleer-vraag ("Wilt u deze registraties annuleren bij het terugbetalen?") rendert
 * de twee radio's standaard onder elkaar; naast elkaar leest prettiger.
 * Selectors komen uit templates/CRM/Mjwshared/Form/PaymentRefund.tpl (mjwshared).
 */
.crm-mjwshared-paymentrefund-participant-canceloption input[type="radio"],
.crm-mjwshared-paymentrefund-membership-canceloption input[type="radio"],
.crm-mjwshared-paymentrefund-participant-canceloption input[type="radio"] + label,
.crm-mjwshared-paymentrefund-membership-canceloption input[type="radio"] + label {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0 1.25em 0 0.35em;
}

/* ---------------------------------------------------------------------------------------
 * 2. "Voldaan"-pill op de Restant-kolom in Views-betalingenblokken (account-pagina's)
 * ---------------------------------------------------------------------------------------
 * Zelfde groene pill als op /civicrm/payment/dash (nl.onvergetelijk.payment,
 * templates/CRM/Payment/Page/Dash.tpl, klasse .ozk-voldaan) — hier hergebruikt
 * op de view "contributions" display "betalingen_overzicht" (saldo_1576-veld,
 * empty-tekst). Zie ook nl.onvergetelijk.civicrm_extensions/ozk_views (module
 * die de onderliggende empty()-bug van civicrm_handler_field_custom omzeilt).
 */
.ozk-voldaan {
    display: inline-block;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.4;
    padding: 5px 10px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    text-decoration: none;
    background: #4e8a3a;
    color: #fff;
}

/* ---------------------------------------------------------------------------------------
 * 3. Sectiebalken in OZK-Afforms (huisstijlkleuren, AA-contrast)
 * ---------------------------------------------------------------------------------------
 * Bedoeld voor eigen beheerschermen zoals /civicrm/regeling/behandel, waar een
 * formulier in blokken valt en de gebruiker in één oogopslag moet zien wat hij
 * LEEST en wat hij zelf INVULT. Riverlea geeft h3's een vlakke grijze balk; die
 * twee blokken zijn dan niet te onderscheiden.
 *
 * Kleur volgt de vastgestelde kleursemantiek (bron: ontwerpersmail Vincent Sendra
 * de Jongste 17-12-2015, plus het besluit van 1-8-2026):
 *   blauw #006e83 = INFORMATIE  -> .ozk-sectie          (5,90:1 op wit)
 *   roze  #c13c61 = ACTIE       -> .ozk-sectie--actie   (5,14:1 op wit)
 * Beide met witte tekst; beide halen daarmee WCAG AA voor normale tekst.
 * Voeg hier GEEN nieuwe kleuren toe zonder huisstijlbron — zie de memory
 * huisstijl_kleursemantiek_banen.
 */
.crm-container h3.ozk-sectie,
.crm-container h3.ozk-sectie--actie,
h3.ozk-sectie,
h3.ozk-sectie--actie {
    /* !important is hier nodig, geen luiheid: de themaregel
       `#bootstrap-theme h3:not(.crm-dashlet-header h3)` (riverlea _base.css)
       gebruikt een ID-selector en wint daarmee van elke class-selector
       (gemeten 18-08-2026: de balk bleef var(--crm-heading-bg-color) grijs).
       Dat geldt voor ÁLLE declaraties die die themaregel ook zet — niet alleen
       achtergrond, kleur en padding. Zonder !important op margin, border-radius
       en font-size stonden de balken in Walbrook zonder witruimte tegen de
       velden aan en zonder afronding (gemeten 07-09-2026 op
       /civicrm/regeling/behandel via de dresscode-patroonbibliotheek). */
    background: #006e83 !important;
    color: #fff !important;
    padding: 8px 12px !important;
    margin: 1.25em 0 0.75em !important;
    border-radius: 3px !important;
    font-size: 1.05em !important;
    font-weight: 600;
}

.crm-container h3.ozk-sectie--actie,
h3.ozk-sectie--actie {
    background: #c13c61 !important;
}

/* Keuzelijsten van select2 minstens zo breed als hun vak, en breder als de langste keuze dat
   vraagt: elke keuze op één regel (Richard 28-09-2026, CHE-studie in het TALENT-venster liep
   over twee regels). select2 zet de lijst inline op de breedte van het vak; min-width: fit-content
   laat hem alleen groeien, nooit krimpen. Gemeten: vak 240px, lijst 373px, alle keuzes 21px hoog. */
.select2-drop {
    min-width: fit-content !important;
}
.select2-drop .select2-result-label {
    white-space: nowrap;
}

/* Voortgangsbalk van CiviCRM (CRM/Queue/Page/Runner.tpl: upgrades, imports,
   Postcodetabel bijwerken). Het stapvak draagt Bootstrap's .bg-primary, dus
   witte tekst, maar het thema geeft het een lichte achtergrond: wit op
   lichtgrijs, onleesbaar (gemeten 30-09-2026 op dev). Zelfde petrol als de
   sectiebalken hierboven; !important om dezelfde reden (#bootstrap-theme). */
#bootstrap-theme #crm-queue-runner-desc,
#crm-queue-runner-desc.bg-primary {
    background: #006e83 !important;
    color: #fff !important;
}

/* Alleen-lezen veld in een inline profielblok van de contactlayout (30-09-2026).
   Een profielveld op "alleen weergeven" is een bevroren QuickForm-element: kale
   tekst plus een verborgen input, zonder kader. Tussen de invoervelden (Postcode,
   Huisnummer, Suffix, Woonplaats) oogt dat als een vergeten regel, zie het blok
   ADRES op de contactpagina. Dit tekent het als een grijs, niet-bewerkbaar
   invoerveld met de RiverLea-maten van een gewoon veld. `:has()` kiest alleen
   rijen zonder zichtbaar invoerelement; rijen met een checkbox, select of
   tekstveld blijven ongemoeid. */
.crm-container .crm-inline-edit-form .crm-summary-row .crm-content:not(:has(input:not([type=hidden]), select, textarea, button, a, .select2-container)) {
    display: inline-block;
    box-sizing: border-box;
    min-width: var(--crm-input-width, 15em);
    max-width: 100%;
    min-height: var(--crm-input-height, 2.25em);
    padding: var(--crm-input-padding, 4px 8px);
    border: var(--crm-input-border, 1px solid #ccc);
    border-radius: var(--crm-input-border-radius, 3px);
    background: var(--crm-c-gray-050, #eaeaea);
    color: var(--crm-c-gray-700, #555);
    font-size: var(--crm-input-font-size, inherit);
    line-height: 1.4;
    cursor: not-allowed;
}

/* Toevoeging (street_unit) even breed als Postcode en Huisnummer (Richard, 30-09-2026).
   Core geeft het veld de klasse `twelve` (12em) waar postcode en nummer `six` (6em)
   krijgen; drie invoervakken van ongelijke breedte boven elkaar oogt rommelig. Geldt
   voor het core-adresblok (address[N][street_unit]) en profielen (street_unit-Primary).
   !important omdat RiverLea `.crm-container .twelve` zelf met !important zet
   (riverlea/core/css/_form.css); zonder bleef het veld 12em (gemeten op dev). */
.crm-container input.crm-form-text[name^="street_unit"],
.crm-container input.crm-form-text[name$="[street_unit]"] {
    width: 6em !important;
}

/* Huisnummer korter dan postcode (Richard, 30-09-2026): hooguit vijf cijfers.
   Zelfde !important-reden als bij street_unit hierboven (RiverLea zet .six met !important). */
.crm-container input.crm-form-text[name^="street_number"],
.crm-container input.crm-form-text[name$="[street_number]"] {
    width: 4.5em !important;
}

/* Postcode, Huisnummer en Toevoeging op één regel in het profielblok van de
   contactlayout (Richard, 30-09-2026): postcode links, nummer in het midden,
   toevoeging rechts, en de rechterkant van de toevoeging lijnt uit met de
   rechterkant van Woonplaats en de alleen-lezen adresregel. Daarvoor krijgt het
   blok één vaste breedte (--ozk-adresrij, in rem zodat label- en veldmaten niet
   uiteenlopen) waar de drie kolommen plus twee tussenruimtes precies bij optellen.
   De drie zijn gewone opeenvolgende rijen tussen de andere; daarom wordt het hele
   blok een grid met drie vaste kolommen en een vierde vrije, waarin elke rij alles
   spant behalve deze drie. `:has()` beperkt dat tot blokken met een toevoegingsveld.
   Bewerkmodus: rijen editrow_<veld>-<loctype>-section; kijkmodus:
   profile-block-<veld>-<loctype> (dus altijd [class*=...]). */
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]),
.crm-container .crm-inline-block-content:has(.crm-summary-row[class*="profile-block-street_unit"]) {
    --ozk-adresrij: 16.5rem;
    --ozk-adresrij-gat: 0.5rem;
    display: grid;
    grid-template-columns: 5.5rem 4.5rem 5.5rem 1fr; /* 5.5 + 0.5 + 4.5 + 0.5 + 5.5 = 16.5rem; 4.5rem zodat het vette label "Nummer" past */
    column-gap: var(--ozk-adresrij-gat);
}
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) > *,
.crm-container .crm-inline-block-content:has(.crm-summary-row[class*="profile-block-street_unit"]) > * {
    grid-column: 1 / -1;
}
.crm-container .crm-inline-edit-form > .crm-summary-row[class*="editrow_postal_code-"],
.crm-container .crm-inline-block-content > .crm-summary-row[class*="profile-block-postal_code"] {
    grid-column: 1;
}
.crm-container .crm-inline-edit-form > .crm-summary-row[class*="editrow_street_number-"],
.crm-container .crm-inline-block-content > .crm-summary-row[class*="profile-block-street_number"] {
    grid-column: 2;
}
.crm-container .crm-inline-edit-form > .crm-summary-row[class*="editrow_street_unit-"],
.crm-container .crm-inline-block-content > .crm-summary-row[class*="profile-block-street_unit"] {
    grid-column: 3;
}
.crm-container .crm-summary-row[class*="editrow_postal_code-"] > *,
.crm-container .crm-summary-row[class*="editrow_street_number-"] > *,
.crm-container .crm-summary-row[class*="editrow_street_unit-"] > *,
.crm-container .crm-summary-row[class*="profile-block-postal_code"] > *,
.crm-container .crm-summary-row[class*="profile-block-street_number"] > *,
.crm-container .crm-summary-row[class*="profile-block-street_unit"] > * {
    /* Het thema geeft .crm-label en .crm-content een vaste kolombreedte;
       in een smalle gridcel moet dat automatisch worden. */
    width: auto;
    min-width: 0;
    display: block;
    float: none;
}
/* De drie invoervakken vullen hun gridcel (de em-breedtes hierboven gelden voor
   het core-adresblok; hier telt de celbreedte). */
.crm-container .crm-inline-edit-form .crm-summary-row[class*="editrow_postal_code-"] input,
.crm-container .crm-inline-edit-form .crm-summary-row[class*="editrow_street_number-"] input,
.crm-container .crm-inline-edit-form .crm-summary-row[class*="editrow_street_unit-"] input {
    width: 100% !important;
    box-sizing: border-box;
}
/* Woonplaats, gemeente en de alleen-lezen kaders even breed als de adresrij. */
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) input.crm-form-text[name^="city-"],
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) input.crm-form-text[name^="custom_530"],
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) .crm-summary-row .crm-content:not(:has(input:not([type=hidden]), select, textarea, button, a, .select2-container)) {
    width: var(--ozk-adresrij) !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* "Toevoeging nodig" (nl.onvergetelijk.geo, js/geo.postcode.js, 30-09-2026): het ingevulde
   huisnummer bestaat volgens de Pro6PP-suggest alleen mét toevoeging. Zelfde accent als
   de webforms (ozk_postcode) en de actiebalken. */
.crm-container input.geo-toevoeging-nodig {
    border-color: #c13c61 !important;
    box-shadow: 0 0 0 2px rgba(193, 60, 97, 0.2);
}
.crm-container input.geo-toevoeging-nodig::placeholder {
    color: #c13c61;
}

/* Profielblok ADRES op een breed scherm (Richard, 01-10-2026): RiverLea zet daar label en
   veld naast elkaar (.crm-summary-row als flex, label 240px). In de smalle gridcellen van
   postcode/nummer/toevoeging werd het invoervak dan een streepje, en de drie stonden niet
   meer onder de adresregel. Voor dit blok dwingen we overal "label boven veld" af, zoals
   op mobiel: dan lijnt alles vanaf de linkerrand uit en klopt de 16rem-breedte. */
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) .crm-summary-row,
.crm-container .crm-inline-block-content:has(.crm-summary-row[class*="profile-block-street_unit"]) .crm-summary-row {
    display: block !important;
}
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) .crm-summary-row > .crm-label,
.crm-container .crm-inline-edit-form:has(.crm-summary-row[class*="editrow_street_unit-"]) .crm-summary-row > .crm-content,
.crm-container .crm-inline-block-content:has(.crm-summary-row[class*="profile-block-street_unit"]) .crm-summary-row > .crm-label,
.crm-container .crm-inline-block-content:has(.crm-summary-row[class*="profile-block-street_unit"]) .crm-summary-row > .crm-content {
    display: block !important;
    width: auto;
    min-width: 0;
    float: none;
    text-align: left;
}

/* Eigen keuzelijst onder postcode, nummer en toevoeging (nl.onvergetelijk.geo,
   js/geo.postcode.js, 01-10-2026). Zelfde opmaak als in de webforms (ozk_postcode):
   wit vlak, zachte rand, petrol voor de actieve regel, roze bij "toevoeging nodig".
   Een <datalist> tekent de browser zelf en is niet te stylen. */
.ozk-keuzelijst {
    position: absolute;
    z-index: 1000;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    max-height: 16rem;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
}
.ozk-keuzelijst li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}
.ozk-keuzelijst-label {
    color: #6b7280;
    font-size: 0.85em;
}
.ozk-keuzelijst-nodig .ozk-keuzelijst-label {
    color: #c13c61;
}
.ozk-keuzelijst li.is-actief {
    background: #006e83;
    color: #fff;
}
.ozk-keuzelijst li.is-actief .ozk-keuzelijst-label {
    color: rgba(255, 255, 255, 0.85);
}

/* Ongeldige of onbekende postcode (nl.onvergetelijk.geo, js/geo.postcode.js, 03-10-2026):
   rood veld met uitleg eronder, zelfde kleur en tekst als in de webforms. */
.crm-container input.geo-postcode-fout,
.crm-container input.geo-postcode-fout:focus {
    border-color: #d03b3b !important;
    outline-color: #d03b3b !important;
    box-shadow: 0 0 0 2px rgba(208, 59, 59, 0.25) !important;
}
.crm-container .geo-postcode-fout-melding {
    color: #d03b3b;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    white-space: normal;
    max-width: 16rem;
}
/* Herkende postcode en gevonden adres: groene rand tot het veld weer verandert (03-10-2026). */
.crm-container input.geo-postcode-ok,
.crm-container input.geo-postcode-ok:focus {
    border-color: #0ca30c !important;
    outline-color: #0ca30c !important;
    box-shadow: 0 0 0 2px rgba(12, 163, 12, 0.2) !important;
}