/* ============================================================
   Smet Werfleiding — schil (werfleiding.smetapp.com)

   De kleurtokens zijn overgenomen uit smetapp static/css/app.css (zoals
   clientportal en de beheerconsole), zodat elke app van Smet dezelfde
   huisstijl draagt. Mobiel eerst: 16px basis (anders zoomt iOS bij elke
   focus in), tikdoelen van minstens 44px, en genoeg contrast om in de zon
   op een werf te lezen.

   De CSP laat enkel stylesheets uit /static/ toe: geen style-attributen,
   geen <style>-blokken in de templates.
   ============================================================ */
:root {
    --accent:        #FE3000;
    --accent-hover:  #DD2A00;
    --accent-light:  #FFEAE6;
    --tint:          #FFF8F6;

    --content-bg: #F9FAFB;
    --panel:      #FFFFFF;
    --ink:        #0F172A;
    --ink-700:    #334155;
    --ink-600:    #475569;
    --muted:      #64748B;
    --faint:      #94A3B8;
    --line-300:   #CBD5E1;
    --line:       #E2E8F0;
    --border:     #E5E7EB;
    --chip:       #F1F5F9;
    --surface:    #F8FAFC;

    --ok-bg:   #DCFCE7;  --ok:   #16A34A;  --ok-ink:   #166534;
    --warn-bg: #FEF3C7;  --warn: #D97706;  --warn-ink: #92400E;
    --info-bg: #DBEAFE;  --info: #2563EB;  --info-ink: #1E40AF;
    --bad-bg:  #FEE2E2;  --bad:  #DC2626;  --bad-ink:  #991B1B;

    --radius:    12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, .14);
    --tap: 44px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── basis ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* Een fieldset krimpt standaard niet onder de breedte van zijn inhoud (min-width: min-content):
   op een smalle telefoon duwt een formulier dan de pagina breder dan het scherm. */
fieldset { min-width: 0; }
/* Een datum- of uurveld heeft op Android een eigen minimumbreedte; in een raster moet het krimpen. */
input[type=date], input[type=time] { min-width: 0; max-width: 100%; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--content-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 12px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
         stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.wl-verborgen {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── kop ───────────────────────────────────────────────────────────── */
.wl-kop {
    position: sticky; top: 0; z-index: 20;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: calc(4px + env(safe-area-inset-top, 0px)) 12px 4px;
}
.wl-kop-rij {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    max-width: 960px; margin: 0 auto; min-height: 48px;
}
.wl-kop-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wl-merk {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
    color: var(--ink); text-decoration: none; min-width: 0;
}
.wl-merk:hover { text-decoration: none; }
.wl-merk-logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.wl-merk-naam { font-size: 16px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.wl-merk-tool {
    padding-left: 8px; border-left: 1px solid var(--border);
    font-size: 14px; font-weight: 600; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-terug {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap); height: var(--tap); margin-left: -8px;
    color: var(--accent); border-radius: var(--radius-sm);
}
.wl-terug svg.ic { width: 24px; height: 24px; }
.wl-kop-acties { display: flex; align-items: center; gap: 2px; flex: none; }
.wl-kopknop {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: var(--tap); height: var(--tap); padding: 0 8px;
    border: 0; border-radius: var(--radius-sm); background: transparent;
    color: var(--ink-600); cursor: pointer; font-weight: 600; font-size: 14px;
}
.wl-kopknop:hover { background: var(--chip); color: var(--ink); text-decoration: none; }
.wl-kop form { margin: 0; }

.wl-talen { display: inline-flex; padding: 3px; gap: 2px; background: var(--chip); border-radius: 999px; }
.wl-taal {
    min-width: 36px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px;
    background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.wl-taal.is-actief { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ── inhoud ────────────────────────────────────────────────────────── */
.wl-inhoud {
    flex: 1;
    width: 100%; max-width: 960px; margin: 0 auto;
    padding: 16px 16px calc(32px + var(--safe-b));
}
.wl-inhoud-smal { max-width: 460px; }
.wl-paginatitel { margin: 4px 0 4px; }
.wl-sub { color: var(--muted); margin-bottom: 16px; }
.wl-klein { font-size: 14px; color: var(--muted); }

.wl-kaart {
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 18px;
}
.wl-kaart + .wl-kaart { margin-top: 12px; }
.wl-kaart-logo { display: block; height: 44px; width: auto; margin: 0 auto 14px; }
.wl-kaart-voet { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ── meldingen ─────────────────────────────────────────────────────── */
.wl-meldingen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.wl-melding, .wl-fout-blok {
    padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500;
    background: var(--info-bg); color: var(--info-ink); border: 1px solid #BFDBFE;
}
.wl-melding-success { background: var(--ok-bg); color: var(--ok-ink); border-color: #BBF7D0; }
.wl-melding-warning { background: var(--warn-bg); color: var(--warn-ink); border-color: #FDE68A; }
.wl-melding-error, .wl-fout-blok { background: var(--bad-bg); color: var(--bad-ink); border-color: #FECACA; }
.wl-fout-blok { margin-bottom: 12px; }

/* ── formulieren ───────────────────────────────────────────────────── */
.wl-formulier { display: grid; gap: 14px; margin: 0; }
.wl-veld { display: grid; gap: 6px; }
.wl-veld label, .wl-label { font-size: 14px; font-weight: 650; color: var(--ink-700); }
.wl-invoer, .wl-veld input[type=text], .wl-veld input[type=email], .wl-veld input[type=password],
.wl-veld input[type=date], .wl-veld input[type=search], .wl-veld select, .wl-veld textarea {
    width: 100%; min-height: var(--tap); padding: 10px 12px;
    border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--panel);
    font-size: 16px;
}
.wl-veld textarea { min-height: 96px; resize: vertical; }
.wl-veld input:focus, .wl-veld select:focus, .wl-veld textarea:focus, .wl-invoer:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
}
.wl-hint { font-size: 13px; color: var(--muted); }
.wl-code { letter-spacing: .3em; font-size: 22px !important; text-align: center; font-variant-numeric: tabular-nums; }
.wl-vink { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-700); cursor: pointer; }
.wl-vink input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

.wl-knop {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 10px 18px;
    border: 1px solid var(--line-300); border-radius: var(--radius-sm);
    background: var(--panel); color: var(--ink); font-size: 16px; font-weight: 650;
    cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.wl-knop:hover { text-decoration: none; background: var(--surface); }
.wl-knop:disabled { opacity: .5; cursor: not-allowed; }
.wl-knop-primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.wl-knop-primair:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.wl-knop-gevaar { color: var(--bad); border-color: #FECACA; }
.wl-knop-blok { width: 100%; }
.wl-knop-groot { min-height: 54px; font-size: 17px; }
.wl-knop-link {
    border: 0; background: none; padding: 6px; color: var(--accent); font-weight: 600; cursor: pointer;
}
.wl-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── startscherm ───────────────────────────────────────────────────── */
.wl-groet { margin: 4px 0 2px; font-size: 24px; }
.wl-tegels { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.wl-tegel {
    position: relative;
    display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
    padding: 16px; min-height: 84px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
}
.wl-tegel:hover { text-decoration: none; border-color: var(--line-300); box-shadow: var(--shadow-md); }
.wl-tegel-icoon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
    background: var(--accent-light); color: var(--accent);
}
.wl-tegel-icoon svg.ic { width: 28px; height: 28px; }
.wl-tegel-naam { display: block; font-size: 17px; font-weight: 700; }
.wl-tegel-tekst { display: block; font-size: 14px; color: var(--muted); font-weight: 500; }
.wl-tegel-pijl { color: var(--faint); }
.wl-tegel-neutraal .wl-tegel-icoon { background: var(--chip); color: var(--ink-600); }
.wl-badge {
    display: inline-flex; align-items: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--chip); color: var(--ink-700);
}
.wl-badge-bad { background: var(--bad-bg); color: var(--bad-ink); }
.wl-badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.wl-badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.wl-badge-info { background: var(--info-bg); color: var(--info-ink); }

/* ── lijsten ───────────────────────────────────────────────────────── */
.wl-lijst { list-style: none; margin: 0; padding: 0; background: var(--panel);
            border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wl-rij { display: grid; grid-template-columns: minmax(55%, 1fr) auto; gap: 4px 12px; padding: 12px 14px;
          border-bottom: 1px solid var(--line); align-items: center; }
.wl-rij:last-child { border-bottom: 0; }
.wl-rij-titel { font-weight: 650; overflow-wrap: anywhere; }
/* Een statuslabel naast een titel mag zelf op twee regels, zodat de titel (een werfnaam) niet
   midden in een woord moet afbreken. */
.wl-rij > .wl-badge { height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; text-align: center; justify-content: center; }
.wl-rij-meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.wl-rij-fout { grid-column: 1 / -1; font-size: 13px; color: var(--bad-ink); }
.wl-leeg { padding: 28px 16px; text-align: center; color: var(--muted); }

/* ── voet ──────────────────────────────────────────────────────────── */
.wl-voet { padding: 12px 16px calc(16px + var(--safe-b)); text-align: center; font-size: 13px; color: var(--faint); }

@media (min-width: 640px) {
    .wl-tegels { grid-template-columns: 1fr 1fr; }
    .wl-inhoud { padding-top: 24px; }
}

/* Op een smalle telefoon past "Werfleiding" naast de naam van de tool, de taalkeuze en
   afmelden niet: dan enkel het logo en de tool. */
@media (max-width: 480px) {
    .wl-merk:has(.wl-merk-tool) .wl-merk-naam { display: none; }
    .wl-merk:has(.wl-merk-tool) .wl-merk-tool { padding-left: 0; border-left: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
}

.wl-banier { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; text-decoration: none; color: var(--warn-ink); }
.wl-banier:hover { text-decoration: none; }

/* ============================================================
   Werven (startscherm, zoeken, pagina van een werf) — sinds 18-10-2026
   ============================================================ */
.wl-kop2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 22px 0 8px; }
.wl-zoek { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 0 0 10px; }
/* Het vergrootglas staat ín het veld: zo houdt het veld zijn breedte op een smalle telefoon. */
.wl-zoek-veld { position: relative; display: block; min-width: 0; }
.wl-zoek-icoon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; }
.wl-zoek-invoer { width: 100%; min-height: 50px; font-size: 17px; padding-left: 42px !important; }
.wl-zoek-stand { margin: 6px 2px 0; }
.wl-werven { margin-bottom: 8px; }
.wl-werf-rij { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.wl-werf-rij:hover { text-decoration: none; background: var(--hover, rgba(0,0,0,.03)); }
.wl-werf-icoon { color: var(--accent); display: inline-flex; }
.wl-werf-rij .wl-rij-titel, .wl-werf-rij .wl-rij-meta { display: block; }
.wl-werf-code { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
.wl-werfkop { margin: 4px 0 14px; }
.wl-werf-code-groot { margin: 0; font-size: 15px; letter-spacing: .03em; }
.wl-tegel-stand { display: block; font-size: 13px; font-weight: 650; color: var(--ink); margin-top: 2px; }
.wl-tegels-onder { margin-top: 26px; }

/* Tabbladen (Instellingen) */
.wl-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-tab { flex: none; white-space: nowrap; padding: 10px 12px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 650; text-decoration: none; }
.wl-tab:hover { text-decoration: none; color: var(--ink); }
.wl-tab.is-actief { color: var(--ink); border-bottom-color: var(--accent); }

/* Tabellen (Instellingen › Functies) */
.wl-inhoud-breed { max-width: 1100px; }
.wl-tabel-schuif { overflow-x: auto; margin: 0 -4px 12px; }
.wl-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.wl-tabel th, .wl-tabel td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wl-tabel thead th { font-size: 13px; color: var(--muted); font-weight: 650; }
.wl-functies td { text-align: center; }
.wl-vink-cel { display: inline-flex; padding: 6px; cursor: pointer; }
.wl-vink-cel input { width: 22px; height: 22px; }
.wl-functie-mensen summary { cursor: pointer; }

/* ============================================================
   Tabbalk onderaan: Werven · Overzicht · Instellingen (sinds 18-10-2026)
   ============================================================ */
.wl-tabbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--panel); border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + var(--safe-b, 0px));
}
.wl-tabbalk-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; border-radius: 10px; color: var(--muted); text-decoration: none;
    font-size: 12px; font-weight: 650;
}
.wl-tabbalk-tab .ic { width: 24px; height: 24px; }
.wl-tabbalk-tab:hover { text-decoration: none; color: var(--ink); }
.wl-tabbalk-tab.is-actief { color: var(--accent); }
body:has(.wl-tabbalk) .wl-inhoud { padding-bottom: calc(84px + var(--safe-b, 0px)); }
@media (min-width: 900px) {
    .wl-tabbalk { left: 50%; right: auto; transform: translateX(-50%); width: 480px;
        border: 1px solid var(--border); border-bottom: 0; border-radius: 14px 14px 0 0; }
}

/* Instellingen › Mijn account */
.wl-account { display: grid; gap: 4px; }
.wl-account-naam { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-account-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 0 0; margin-top: 8px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.wl-account-rij:hover { text-decoration: none; }
.wl-account-rij > span:first-child { font-weight: 400; }
.wl-account-rij > span:last-child { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wl-functies th, .wl-functies td { padding: 10px 4px; }
.wl-functies th[scope=col] { text-align: center; font-size: 12px; line-height: 1.2; }
.wl-functies th[scope=row] { min-width: 96px; padding-left: 0; }
.wl-legende { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.wl-legende dt { font-weight: 700; color: var(--ink-600); }
.wl-legende dd { margin: 0; }
.wl-vink-naam { display: none; }
/* Smal scherm: geen tabel van vijf kolommen, maar per functie een blok met vier vakjes en hun
   naam ernaast (de kolomkoppen zouden er niet naast passen). */
@media (max-width: 520px) {
    .wl-functies thead { display: none; }
    .wl-functies, .wl-functies tbody, .wl-functies tr { display: block; }
    .wl-functies tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 10px 0;
        border-bottom: 1px solid var(--border); }
    .wl-functies th[scope=row] { grid-column: 1 / -1; border: 0; padding: 0 0 4px; }
    .wl-functies td { border: 0; padding: 0; text-align: left; }
    .wl-functies .wl-vink-cel { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
    .wl-vink-naam { display: inline; font-size: 14px; }
}
.wl-functies th[scope=col]:first-child { text-align: left; padding-left: 0; }