` die dezelfde tekst bevat met
problematische passages als `
` — de textarea heeft een
transparante achtergrond zodat de wavy underlines doorschemeren.
Padding/font/line-height moeten exact matchen anders staan de
marks niet onder de juiste woorden. */
.lt-textarea-wrap {
position: relative;
}
.lt-textarea-wrap > textarea {
/* Semi-transparante background zodat de marks eronder leesbaar
blijven, terwijl de gebruiker nog steeds de cursor + selectie
ziet. `position: relative` + `z-index: 1` om te tronen op de
overlay-div. */
position: relative;
z-index: 1;
background: transparent;
}
.lt-highlights {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
color: transparent;
background: var(--panel);
/* `white-space: pre-wrap` matcht de textarea-default zodat
newlines + word-wrap exact gelijk vallen. `word-wrap: break-
word` zorgt dat lange woorden niet uit de container puilen. */
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
border-radius: 9px;
}
.lt-mark {
background: transparent;
color: transparent;
text-decoration: underline wavy 1.5px var(--lt-color, #d92626);
text-underline-offset: 2px;
pointer-events: auto;
cursor: pointer;
}
.lt-mark.lt-mark-spelling { --lt-color: #d92626; }
.lt-mark.lt-mark-grammar { --lt-color: #d92626; }
.lt-mark.lt-mark-style { --lt-color: #2196f3; }
.lt-mark.lt-mark-factual { --lt-color: #f59e0b; }
/* ─── Popup voor één marker ────────────────────────────────────────
Verschijnt onder de aangeklikte mark. Toont kind + uitleg + een
"Toepassen"-knop (vervangt de marker met de suggestion) en een
"Sluiten"-knop. Sluit ook bij klik buiten de popup. */
.lt-popup {
position: absolute;
z-index: 50;
min-width: 240px;
max-width: 360px;
padding: 10px 12px;
background: var(--panel);
border: 1px solid var(--border-strong);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
font-size: 13px;
display: flex;
flex-direction: column;
gap: 8px;
}
.lt-popup-kind {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--muted);
}
.lt-popup-kind-spelling, .lt-popup-kind-grammar { color: #d92626; }
.lt-popup-kind-style { color: #2196f3; }
.lt-popup-kind-factual { color: #f59e0b; }
.lt-popup-msg {
color: var(--text);
line-height: 1.4;
}
.lt-popup-apply {
align-self: flex-start;
padding: 6px 10px;
font-size: 12px;
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 7px;
cursor: pointer;
box-shadow: none;
}
.lt-popup-apply:hover {
background: var(--accent);
color: #fff;
}
.lt-popup-ignore {
align-self: flex-start;
padding: 5px 10px;
font-size: 12px;
color: var(--muted);
background: var(--panel-2);
border: 1px solid var(--border-strong);
border-radius: 7px;
cursor: pointer;
box-shadow: none;
}
.lt-popup-ignore:hover {
color: var(--text);
border-color: var(--muted-2);
}
.lt-popup-dismiss {
align-self: flex-end;
padding: 4px 8px;
font-size: 11.5px;
color: var(--muted);
background: transparent;
border: 1px solid var(--border);
border-radius: 7px;
cursor: pointer;
box-shadow: none;
}
/* ─── Schedule-card op /drafts/{id} (slice 2: auto-plan voorstel) ───
Drie suggestion-cards naast elkaar (responsief 2 → 1 kol op smalle
viewports) met heatmap+clustering-score, plus een details voor de
"eigen tijd"-picker. Geen accent-overdose: enkel de score en de
"Kies dit tijdstip"-knop pakken de accentkleur. */
.schedule-card { display: flex; flex-direction: column; gap: 12px; }
.schedule-suggestions {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.schedule-suggestion {
display: flex; flex-direction: column; gap: 6px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--panel-2);
}
.schedule-suggestion-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.schedule-suggestion-time {
font-weight: 700; font-size: 14px;
color: var(--text);
letter-spacing: -.05px;
}
.schedule-suggestion-score {
font-size: 11px; font-weight: 700;
color: var(--accent);
text-transform: uppercase; letter-spacing: .08em;
}
.schedule-suggestion-reason {
margin: 0;
font-size: 12.5px; color: var(--muted);
line-height: 1.4;
}
.schedule-pick {
align-self: flex-start;
margin-top: 2px;
}
.schedule-custom > summary {
cursor: pointer;
font-size: 13px; color: var(--muted);
font-weight: 600;
padding: 4px 0;
list-style: none;
}
.schedule-custom > summary::-webkit-details-marker { display: none; }
.schedule-custom > summary::before {
content: "+ ";
font-weight: 700; color: var(--accent);
}
.schedule-custom[open] > summary::before { content: "− "; }
/* ─── Form-accordion: lichte uitklap-sectie binnen een form ──────────
Gebruikt voor optionele velden in een create/edit-form (bv. AutoCapture
+ Bijlage bij planning-item create). Bewust minder dominant dan
`.admin-section`: kleinere padding, lichter contrast, géén gap-0
override op de omhullende form.vstack (zodat label-velden hun ritme
houden). */
details.form-accordion {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel-2);
overflow: hidden;
}
details.form-accordion > summary {
list-style: none;
cursor: pointer;
padding: 10px 12px;
display: flex; align-items: center; gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
user-select: none;
transition: background .12s var(--ease), color .12s var(--ease);
}
details.form-accordion > summary::-webkit-details-marker { display: none; }
details.form-accordion > summary::marker { content: ''; display: none; }
details.form-accordion > summary::before { content: none; }
details.form-accordion > summary:hover {
background: var(--panel);
color: var(--text);
}
details.form-accordion > summary::after {
content: '';
margin-left: auto;
width: 7px; height: 7px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translateY(-1px);
transition: transform .15s var(--ease);
}
details.form-accordion[open] > summary {
color: var(--text);
border-bottom: 1px solid var(--border);
background: var(--panel);
}
details.form-accordion[open] > summary::after {
transform: rotate(-135deg) translateY(2px);
}
.form-accordion-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-accordion-body > label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.form-accordion-body .field-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 12px;
}
@media (max-width: 520px) {
.form-accordion-body .field-row {
grid-template-columns: 1fr;
}
}
/* ─── Per-bedrijf admin: compacte settings-list ─────────────────────
Gebruikt op /admin/subsidiaries/{id}. Elke ``
voelt aan als een rij in een lijst (zoals iOS Settings) — een hair-
line border tussen items, geen kaart-shadow per item, zacht hover-
effect zodat duidelijk is dat het hele rij-oppervlak klikbaar is. */
details.admin-section {
border: 1px solid var(--border);
border-radius: 10px;
background: var(--panel);
/* Eén consistent ritme tussen secties — werkt zowel binnen als
buiten het brand-edit form. We zetten hieronder de form.vstack
gap op 0 wanneer het admin-sections bevat, zodat alleen deze
margin de afstand bepaalt en je niet de optelsom van twee
mechanismen krijgt.
NB: bewust géén `:last-child { margin-bottom: 0 }` — de echt
laatste section ZIT WEL als laatste kind van zijn flex-container
(het brand-edit form), maar daar staat ze precies op de overgang
naar de admin-sections die NA het form komen (PPT-templates, …).
Stripten we daar de margin, dan plakt Vrije richtlijnen aan
PPT-templates. De extra 16px onderaan de allerlaatste sectie
valt sowieso binnen .content's padding-bottom van 72px, dus
visueel niet storend. */
margin-bottom: 16px;
overflow: hidden;
}
/* Het autosave-form (op /admin/subsidiaries/{id}) functioneert als
settings-list, niet als input-form: wanneer het rechtstreeks
admin-sections bevat zetten we het vstack-gap-mechanisme uit zodat
de margin-bottom van details.admin-section het ritme bepaalt
(16px overal, ook tussen secties die buiten het form zitten).
Andere autosave-forms (compose-opts, overlay-edit) bevatten form-
fields en behouden de 16px-gap. */
form.vstack:has(> details.admin-section) {
gap: 0;
}
details.admin-section > summary {
/* Beide native disclosure-indicators (Webkit `details-marker` én
de standaard `::marker`) wegduwen + `list-style: none` voor
browsers die geen van beide ondersteunen. Onze eigen ::after
chevron rechts vervangt 'm. */
list-style: none;
cursor: pointer;
padding: 11px 14px;
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 14px;
color: var(--text);
user-select: none;
transition: background .12s var(--ease);
}
details.admin-section > summary::-webkit-details-marker { display: none; }
details.admin-section > summary::marker { content: ''; display: none; }
/* Override de globale `details summary::before` regel die overal een
"›" toevoegt — onze admin-section heeft een eigen ::after-chevron
rechts en wil geen tweede aan de linkerkant. */
details.admin-section > summary::before { content: none; }
details.admin-section > summary:hover { background: var(--panel-2); }
details.admin-section > summary::after {
/* Chevron rechts. `margin-left: auto` duwt 'm naar de
rechterkant; de title-tekst (anoniem flex-item) houdt links. */
content: '';
margin-left: auto;
width: 8px; height: 8px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translateY(-2px);
transition: transform .15s var(--ease);
}
details.admin-section[open] > summary::after {
transform: rotate(-135deg) translateY(2px);
}
details.admin-section[open] > summary {
border-bottom: 1px solid var(--border);
}
.admin-section-body {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 12px;
}
.admin-section-body > .hint:first-child,
.admin-section-body > p.hint:first-child {
margin-top: 0;
}
/* Gevarenzone: rode header zodat de admin meteen ziet dat dit
destructive is (delete subsidiary, wipe content). De body-styling
blijft normaal — enkel de header-rij is gekleurd. */
details.admin-section.danger {
border-color: var(--danger);
}
details.admin-section.danger > summary {
background: var(--danger-soft);
color: var(--danger);
}
details.admin-section.danger > summary:hover {
background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 30%);
}
details.admin-section.danger > summary::after {
border-color: var(--danger);
}
details.admin-section.danger[open] > summary {
border-bottom-color: var(--danger);
}
/* Compactere form-velden binnen een settings-rij — 36px ipv 46px. */
.admin-section-body label > input[type="text"],
.admin-section-body label > input[type="url"],
.admin-section-body label > input[type="email"],
.admin-section-body label > select {
min-height: 36px;
padding: 7px 12px;
font-size: 13px;
}
/* Auto-save status indicator. Verschijnt naast (of bovenaan via
`data-form`-koppeling) een form.autosave en geeft 4 toestanden
weer: pending (debounce telt af), saving (fetch loopt), saved
(vervaagt na 2.2s), error (blijft staan tot volgende save). */
.autosave-status {
display: inline-flex;
align-items: center;
min-height: 24px;
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
color: var(--muted);
padding: 3px 10px;
border-radius: 999px;
background: transparent;
transition: background .15s var(--ease), color .15s var(--ease);
}
.autosave-status:empty {
padding: 0;
min-height: 0;
}
.autosave-status.is-pending {
color: var(--muted);
background: var(--panel-2);
}
.autosave-status.is-saving {
color: var(--accent);
background: var(--accent-soft);
}
.autosave-status.is-saved {
color: var(--accent);
background: var(--accent-soft);
}
.autosave-status.is-error {
color: var(--danger);
background: var(--danger-soft);
}
/* Verberg de submit-knoppen binnen een autosave-form — niet meer
nodig nu de save automatisch gebeurt. De `.autosave-status` bovenaan
(of inline) communiceert de save-state. */
form.autosave button[type="submit"],
form.autosave .button[type="submit"] {
display: none;
}
form.autosave .actions:empty,
form.autosave > div.actions {
display: none;
}
/* Moderne iOS-stijl toggle. Een `