/* =====================================================================
   Start-pagina en kernviews van de admin (ronde 2, oktober 2026; Start herwerkt in ronde 5).
   Laadt na admin-ui.css. Terugdraaien: de <link> in templates/admin.php weghalen.
   ===================================================================== */

/* ---------- 1. Start: kop met Moonlight-achtergrond ----------
   Basis is de achtergrondkleur van het thema, met drie zachte lichtvelden (Swift-blauw, hemelsblauw, witte maangloed)
   die traag drijven, en een statisch stippenraster. Alleen transform beweegt. Stil bij een verborgen tabblad
   (html.hm-verborgen), als de kop uit beeld is (.is-pauze), bij reduced motion en bij html[data-motion="uit"].
   Ronde 3: de velden drijven door het open middenstuk en schuiven 160 tot 240 px heen en weer (ongeveer 10 px per
   seconde: zichtbaar, nooit snel). Ronde 5: rechts staan de snelle acties in plaats van de aandachtspunten; wat brandt,
   staat nu in de zin onder de groet en in het blok Vandaag en deze week.
   Contrast: de grijze regels (datum en zin) krijgen op deze kop een iets donkerdere (licht) of lichtere (donker) tint,
   zodat ze ook op het blauwste punt van de cyclus boven AA (4,5:1) blijven. */
.hm-hero.hm-kop {
    --hm-veld-a: rgba(36, 122, 214, 0.18);
    --hm-veld-b: rgba(95, 179, 240, 0.11);
    --hm-veld-c: rgba(255, 255, 255, 0.95);
    --hm-raster: rgba(20, 33, 58, 0.06);
    --hm-zacht: color-mix(in srgb, var(--ui-fg) 30%, var(--ui-fg-muted));
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center;
    margin: 0 0 16px; padding: 18px 18px 18px 22px; min-height: 112px;
    background: var(--ui-bg); border: 1px solid var(--ui-border); border-radius: 16px;
}
[data-theme="dark"] .hm-hero.hm-kop {
    --hm-veld-a: rgba(36, 122, 214, 0.25);
    --hm-veld-b: rgba(95, 179, 240, 0.10);
    --hm-veld-c: rgba(225, 238, 255, 0.09);
    --hm-raster: rgba(230, 237, 247, 0.05);
    --hm-zacht: color-mix(in srgb, var(--ui-fg) 40%, var(--ui-fg-muted));
}
.hm-maan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hm-maan::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(var(--hm-raster) 1px, transparent 1.2px); background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 120% at 55% 35%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 60% 120% at 55% 35%, #000 0%, transparent 72%);
}
.hm-maan__veld {
    position: absolute; border-radius: 50%; will-change: transform;
    animation: hmDrijfA 22s ease-in-out infinite alternate;
}
/* A: Swift-blauw, drijft van rechts naar het midden. B: hemelsblauw onder de groet. C: maangloed die naar rechts schuift. */
.hm-maan__veld--a { width: 640px; height: 640px; left: 38%; top: -330px; background: radial-gradient(closest-side, var(--hm-veld-a) 0%, var(--hm-veld-a) 28%, transparent 100%); }
.hm-maan__veld--b { width: 540px; height: 540px; left: -170px; top: 0; background: radial-gradient(closest-side, var(--hm-veld-b) 0%, var(--hm-veld-b) 24%, transparent 100%); animation-name: hmDrijfB; animation-duration: 27s; }
.hm-maan__veld--c { width: 360px; height: 360px; left: 10%; top: -200px; background: radial-gradient(closest-side, var(--hm-veld-c) 0%, var(--hm-veld-c) 20%, transparent 100%); animation-name: hmDrijfC; animation-duration: 19s; }
@keyframes hmDrijfA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-320px, 56px, 0) scale(1.2); } }
@keyframes hmDrijfB { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(280px, -48px, 0) scale(0.9); } }
@keyframes hmDrijfC { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(220px, 40px, 0) scale(1.25); } }
html.hm-verborgen .hm-maan__veld, .hm-kop.is-pauze .hm-maan__veld { animation-play-state: paused; }

.hm-kop__tekst { min-width: 0; }
.hm-hero.hm-kop .hm-kop__dag { margin: 0 0 2px; font-size: 12px; font-weight: 500; color: var(--hm-zacht); letter-spacing: 0.01em; }
.hm-hero.hm-kop h1 { margin: 0 0 4px; font-size: 24px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; color: var(--ui-fg); }
.hm-hero.hm-kop .hm-kop__zin { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--hm-zacht); }
.hm-kop__zin .hm-dagkop__fout { margin-left: 4px; }

/* Snelle acties: drie knoppen naar wat de admin al kan. Rand als enige elevatie, zoals de tegels. */
.hm-snel { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.hm-snel__knop {
    appearance: none; font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 550; color: var(--ui-fg); cursor: pointer; white-space: nowrap;
    background: color-mix(in srgb, var(--ui-surface) 90%, transparent); border: 1px solid var(--ui-border); border-radius: 10px;
    transition: transform var(--ui-dur) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.hm-snel__knop svg { width: 16px; height: 16px; flex: none; color: var(--ui-link); }
.hm-snel__knop:hover { background: var(--ui-surface); border-color: var(--ui-input); transform: translateY(-1px); }
.hm-snel__knop:active { transform: scale(0.98); transition-duration: var(--ui-dur-fast); }
.hm-snel__knop:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.hm-snel__kort { display: none; }

@media (max-width: 1100px) {
    .hm-hero.hm-kop { grid-template-columns: minmax(0, 1fr); }
    .hm-snel { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .hm-hero.hm-kop { gap: 14px; padding: 16px; }
    .hm-hero.hm-kop h1 { font-size: 21px; }
    /* gsm: de acties naast elkaar in gelijke kolommen, icoon boven een kort label; de volledige naam blijft voor
       schermlezers. Naast elkaar paste "Onboarding" niet meer vanaf 390 px. */
    .hm-snel { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
    .hm-snel__knop { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 4px; font-size: 12px; }
    .hm-snel__lang { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .hm-snel__kort { display: inline; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- 2. Start: kerncijfers, Vandaag en deze week, zijkolom ---------- */
/* Gestaffeld binnenkomen bij een bezoek aan Start (--i per blok, 45 ms). backwards: na afloop blijft er geen transform
   staan, zodat de zoekbalk zijn eigen stapelvolgorde houdt. Specificiteit boven #admin-content.ui-entering > *. */
@keyframes hmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#admin-content .hm-in.hm-in.hm-in { animation: hmRise 520ms var(--ui-ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }

/* Kerncijfers: elke tegel is een knop naar de lijst met hetzelfde aantal. Desktop één rij, tablet rijen van drie
   (vier of vijf tegels: de laatste rij verdeelt de breedte), gsm twee kolommen en een oneven laatste tegel over de
   volle breedte. Geen strook die horizontaal scrolt: daar viel de derde tegel half buiten beeld. */
.hm-kpis { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.hm-kpis[hidden] { display: none; }
.hm-kpi {
    position: relative; appearance: none; font: inherit; text-align: left; color: var(--ui-fg);
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px 13px;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: none; cursor: pointer;
    transition: transform var(--ui-dur) var(--ui-ease-out), border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
button.hm-kpi:hover { background: var(--ui-surface-2); border-color: var(--ui-input); transform: translateY(-1px); }
button.hm-kpi:active { transform: scale(0.98); transition-duration: var(--ui-dur-fast); }
.hm-kpi:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
.hm-kpi__lbl { padding-right: 20px; font-size: 12.5px; font-weight: 550; color: var(--ui-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpi__num { font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.hm-kpi__num--leeg { color: var(--ui-fg-muted); }
.hm-kpi__sub { font-size: 11.5px; color: var(--ui-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpi--rood .hm-kpi__num { color: var(--ui-danger); }
.hm-kpi--oranje .hm-kpi__num { color: var(--ui-warning); }
.hm-kpi__pijl { position: absolute; top: 11px; right: 10px; display: grid; color: var(--ui-fg-muted); transition: transform var(--ui-dur) var(--ui-ease-out), color var(--ui-dur-fast) var(--ui-ease-out); }
.hm-kpi__pijl svg { width: 15px; height: 15px; }
button.hm-kpi:hover .hm-kpi__pijl { transform: translateX(2px); color: var(--ui-fg); }
/* Tegel waarvan de bron niet laadde: geen knop (hij kan nergens heen), wel opnieuw proberen. */
.hm-kpi--fout { cursor: default; }
.hm-kpi__opnieuw {
    appearance: none; font: inherit; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    min-height: 28px; margin-top: 2px; padding: 0; font-size: 12px; font-weight: 550; color: var(--ui-link);
    background: none; border: 0; cursor: pointer;
}
.hm-kpi__opnieuw svg { width: 13px; height: 13px; flex: none; }
.hm-kpi__opnieuw:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-kpi__opnieuw:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 601px) and (max-width: 1100px) {
    .hm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hm-kpis > * { grid-column: span 2; }
    .hm-kpis[data-n="1"] > * { grid-column: span 6; }
    .hm-kpis:is([data-n="2"], [data-n="4"]) > * { grid-column: span 3; }
    .hm-kpis[data-n="5"] > :nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 600px) {
    .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    .hm-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .hm-kpi { padding: 10px 12px 11px; }
    .hm-kpi__num { font-size: 22px; }
}

/* Twee kolommen: links Vandaag en deze week, rechts wat misliep. Smaller dan 1100 px onder elkaar. */
.hm-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.hm-raster--een { grid-template-columns: minmax(0, 1fr); }
.hm-zij { display: grid; gap: 20px; align-content: start; min-width: 0; }
.hm-raster .hm-section { margin-bottom: 0; box-shadow: none; }
@media (max-width: 1100px) {
    .hm-raster { grid-template-columns: minmax(0, 1fr); }
    .hm-zij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-zij > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .hm-raster, .hm-zij { gap: 16px; }
    .hm-zij { grid-template-columns: minmax(0, 1fr); }
}
.hm-section__head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-section__head h2:focus { outline: none; }
.hm-section__head h2:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; border-radius: 4px; }
.hm-section__meta { flex: none; font-size: 12px; color: var(--ui-fg-muted); white-space: nowrap; }

/* Groepen in de lijst: Te laat, Vandaag, Morgen, Later deze week. */
.hm-groep + .hm-groep, .hm-fout + .hm-groep { border-top: 1px solid var(--ui-border); }
.hm-groep__kop { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 18px 4px; font-size: 12px; font-weight: 600; color: var(--ui-fg-muted); }
.hm-groep--laat .hm-groep__kop { color: var(--ui-danger); }
.hm-groep__n {
    display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px;
    background: var(--ui-muted); color: var(--ui-fg-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* Rood op de lichtrode achtergrond haalde 4,2:1; een tint donkerder haalt 5,8:1. In donker is het gewone rood genoeg (4,9:1). */
.hm-groep--laat .hm-groep__n { background: var(--ui-danger-soft); color: #B42318; }
[data-theme="dark"] .hm-groep--laat .hm-groep__n { color: var(--ui-danger); }
.hm-lijst { list-style: none; margin: 0; padding: 0 0 6px; }
.hm-lijst > li + li { border-top: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent); }
.hm-rij {
    appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px;
    background: none; border: 0; border-radius: 0; cursor: pointer;
    transition: background-color var(--ui-dur-fast) var(--ui-ease-out);
}
button.hm-rij:hover { background: color-mix(in srgb, var(--ui-muted) 60%, transparent); }
button.hm-rij:active { background: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-surface)); transition-duration: 60ms; }
button.hm-rij:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: -2px; }
.hm-rij--vast { cursor: default; }
.hm-rij__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ui-muted); color: var(--ui-fg-muted); }
.hm-rij__ic svg { width: 15px; height: 15px; }
.hm-rij--rood .hm-rij__ic { background: var(--ui-danger-soft); color: var(--ui-danger); }
.hm-rij--oranje .hm-rij__ic { background: var(--ui-warning-soft); color: var(--ui-warning); }
.hm-rij__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-rij__titel { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-rij__sub { font-size: 12px; line-height: 1.4; color: var(--ui-fg-muted); }
.hm-rij__wanneer { flex: none; font-size: 12px; font-weight: 500; color: var(--ui-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-rij--rood .hm-rij__wanneer { color: var(--ui-danger); font-weight: 600; }
.hm-rij--oranje .hm-rij__wanneer { color: var(--ui-warning); font-weight: 600; }
@media (max-width: 600px) {
    .hm-rij { padding-inline: 14px; gap: 10px; }
    .hm-groep__kop { padding-inline: 14px; }
    /* Smal scherm: een lange klantnaam mag over twee regels in plaats van af te breken na een paar letters. */
    .hm-rij__titel { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    .hm-kpi__sub { white-space: normal; text-overflow: clip; }
}

/* Lege toestand: wat hier komt en waarom, rustig, zonder knop die nergens heen moet. */
.hm-leeg { display: grid; justify-items: center; gap: 6px; padding: 32px 24px 36px; text-align: center; }
.hm-leeg--klein { padding: 20px 18px 22px; }
.hm-leeg__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ui-success-soft); color: var(--ui-success); }
.hm-leeg__ic svg { width: 18px; height: 18px; }
/* Lege toestand zonder rechten: neutraal, geen groen vinkje (er is niets afgewerkt, er is gewoon niets te zien) */
.hm-leeg__ic--rustig { background: var(--ui-muted); color: var(--ui-fg-muted); }
.hm-leeg__titel { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--ui-fg); }
.hm-leeg__uitleg { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 1.5; color: var(--ui-fg-muted); }

/* Zijkolom */
.hm-zijblok__meer { margin: 0; padding: 4px 18px 14px; font-size: 12px; color: var(--ui-fg-muted); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 16px; }
.hm-klant {
    appearance: none; font: inherit; min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 550; color: var(--ui-fg);
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 99px; cursor: pointer;
    transition: border-color var(--ui-dur-fast) var(--ui-ease-out), background-color var(--ui-dur-fast) var(--ui-ease-out);
}
.hm-klant:hover { background: var(--ui-surface-2); border-color: var(--ui-input); }
.hm-klant:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 2px; }
@media (pointer: coarse) {
    .hm-klant, .hm-kpi__opnieuw { min-height: 44px; }
}
/* Tablet met aanraking: de snelle acties waren 40 px hoog. Op gsm zijn ze al 56 px (icoon boven het label). */
@media (pointer: coarse) and (min-width: 601px) {
    .hm-snel__knop { min-height: 44px; }
}
/* Tikdoel van 44 px voor de links in een sectiekop (ook op andere schermen), zonder dat de kop hoger wordt. */
@media (max-width: 600px), (pointer: coarse) {
    .hm-section__head a { min-height: 44px; margin-block: -14px; }
}

/* Zoekbalk: ankerplek voor #gs-results. Dit stond inline, maar de inloopanimatie (hm-in) zette er een tweede
   style-attribuut naast; de browser hield alleen het eerste en de resultaten vielen buiten beeld (ronde 3). */
#hm-search-wrap { position: relative; z-index: 100; }
.hm-searchbar input { min-height: 44px; padding-right: 72px; }
.hm-searchbar__kbd { line-height: 1.4; }
/* Aanraakscherm: geen toetsenbord, dus geen sneltoets-hint. */
@media (hover: none) and (pointer: coarse) {
    .hm-searchbar__kbd { display: none; }
    .hm-searchbar input { padding-right: 14px; }
}
.hm-section__head a { text-decoration: none; }
.hm-section__head a svg:first-child:not(:last-child) { width: 14px; height: 14px; }
.hm-btn svg { width: 14px; height: 14px; flex: none; transition: transform var(--ui-dur) var(--ui-ease-out); }
.hm-btn:hover svg { transform: translateX(2px); }

/* Minder beweging: alles meteen in de eindtoestand, ook de inloop en het drijven van de lichtvelden. */
@media (prefers-reduced-motion: reduce) {
    #admin-content .hm-in.hm-in.hm-in { animation: none !important; }
    .hm-maan__veld { animation: none !important; }
    .hm-snel__knop, .hm-kpi, .hm-kpi__pijl, .hm-rij, .hm-klant { transition: none !important; }
    .hm-snel__knop:hover, .hm-snel__knop:active, button.hm-kpi:hover, button.hm-kpi:active,
    button.hm-kpi:hover .hm-kpi__pijl, .hm-btn:hover svg { transform: none; }
}
html[data-motion="uit"] .hm-maan__veld { animation: none !important; }
html[data-motion="uit"] :is(.hm-snel__knop, button.hm-kpi, button.hm-kpi .hm-kpi__pijl):is(:hover, :active) { transform: none; }
@media (forced-colors: active) {
    .hm-maan { display: none; }
    .hm-snel__knop, .hm-kpi, .hm-klant { border-color: ButtonText; }
}

/* ---------- 3. AI-chatknop (onboardingdossier) ----------
   De stijl staat inline in onboarding-view.php; hier alleen wat de knop niets laat bedekken. Bij een open lade of modal
   verdwijnt hij, en op gsm krijgt de inhoud ruimte onderaan zodat de laatste knop niet onder de chatknop valt. */
body:has(:is(.drawer-overlay--active, .admin-modal-overlay--active)) #ai-chat-btn { display: none !important; }
@media (max-width: 600px) {
    html #ai-chat-btn { width: 48px; height: 48px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    html #ai-chat-panel { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    body:has(#ai-chat-btn[style*="flex"]) #admin-content { padding-bottom: 88px; }
}

/* ---------- 4. Icoonvakjes die emoji vervangen (instellingen, team, account) ---------- */
.st-rij-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.st-rij-ic svg { width: 16px; height: 16px; }
.team-card__head-icon svg, .acc-card__head-icon svg { width: 15px; height: 15px; }
.team-rol-ic { display: inline-grid; }
.team-rol-ic svg { width: 12px; height: 12px; }

/* ---------- 5. Team op gsm: rollen als blokken onder elkaar ----------
   De tabel met drie kolommen paste niet: de permissies werden afgesneden en Opslaan viel buiten beeld. */
@media (max-width: 600px) {
    #roles-manager .team-table, #roles-manager .team-table tbody, #roles-manager .team-table tr, #roles-manager .team-table td { display: block; width: auto; }
    #roles-manager .team-table thead { display: none; }
    #roles-manager .team-table tr { padding: 12px 16px; border-bottom: 1px solid var(--ui-border); }
    #roles-manager .team-table tr:last-child { border-bottom: 0; }
    #roles-manager .team-table td { padding: 0; border: 0; }
    #roles-manager .team-table td + td { margin-top: 10px; }
    #roles-manager .team-table td > div[style*="grid"] { grid-template-columns: 1fr 1fr !important; }
    #roles-manager .team-btn-sm { min-height: 40px; padding-inline: 14px; }
}

/* ---------- 6. Account ----------
   De balk onderaan heeft geen knoppen (alles wordt meteen opgeslagen); plakkend lag hij over het wachtwoordveld. */
.acc-page > .obs-save-bar { position: static; }

/* ---------- 7. Instellingen: icoonvakjes in Moon-tint in plaats van emoji op een kleurverloop ---------- */
.st-tegel-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.st-tegel-ic svg { width: 18px; height: 18px; }

/* ---------- 8. Lijniconen die emoji en tekstpijlen vervangen ----------
   Vangnet zonder specificiteit: een lijnicoon in een knop of label zonder eigen maat krijgt de tekstgrootte.
   Elke bestaande regel met een klasse wint hiervan. */
:where(button, label, a, .admin-btn) > :where(svg:not([width])) { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-inline-end: 0.35em; }
:where(.admin-btn, .ui-btn, .hm-btn, .swc-btn-sm, .hm-section__head a, .hm-kpi, .hm-focus) > :where(svg) { margin-inline-end: 0; }
.admin-btn { gap: 6px; }
.admin-btn > svg { width: 14px; height: 14px; flex: none; }
.admin-mc__count { display: inline-flex; align-items: center; gap: 3px; }
.admin-mc__count svg { width: 10px; height: 10px; margin: 0; }
.st-thumb-ic { display: grid; place-items: center; color: var(--ui-fg-muted); }
.st-thumb-ic svg { width: 22px; height: 22px; }
.st-ic-knop { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: 6px; }
.st-ic-knop svg { width: 14px; height: 14px; margin: 0; }
.st-ic-inline { display: inline-grid; place-items: center; flex: none; color: var(--ui-fg-muted); }
.st-ic-inline svg { width: 16px; height: 16px; }
.cc-head__ic svg { width: 18px; height: 18px; color: var(--ui-link); }
.cc-welkom__btn { display: inline-flex; align-items: center; gap: 6px; }
.cc-welkom__btn svg { width: 13px; height: 13px; margin: 0; }
.st-melder { display: inline-flex; align-items: center; gap: 4px; }
.st-melder svg { width: 12px; height: 12px; }

/* ---------- 9. Wachtrij: mislukte publicaties op gsm ----------
   De dunne getinte rand staat sinds ronde 3 in de basisregel van .wq-fail (admin.css). */
@media (max-width: 600px) {
    .wq-fail { flex-wrap: wrap; }
    .wq-fail > div:first-child { flex: 1 1 100% !important; } /* inline flex:1 zet basis op 0 */
    .wq-fail > .admin-btn { min-height: 40px; }
}