:root {
    --kop: #034d70;
    --kop-2: #03638f;
    --accent: #1183b8;
    --accent-d: #0a6791;
    --ink: #1f2d36;
    --muted: #6b818f;
    --line: #e2ebf1;
    --bg: #eef3f6;
    --surface: #ffffff;
    --prio-hoog: #fdecec;
    --prio-middel: #fff8e6;
    --prio-laag: #ebf8ee;
    --ok-bg:#e3f6e8; --ok-tx:#176b32; --ok-br:#aee0bd;
    --err-bg:#fbe6e6; --err-tx:#9d1b1b; --err-br:#efb4b4;
    --radius: 10px;
    --radius-s: 7px;
    --shadow: 0 2px 10px rgba(20,60,90,.06);
    --shadow-lg: 0 6px 26px rgba(20,60,90,.10);
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 15px;
    color: var(--ink);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ===== Container ===== */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
main.wrap { padding-top: 22px; padding-bottom: 48px; }

/* ===== App-bar (bovenmenu) ===== */
.appbar {
    background: linear-gradient(180deg, var(--kop-2), var(--kop));
    color: #fff;
    box-shadow: 0 2px 12px rgba(3,77,112,.25);
    position: sticky; top: 0; z-index: 100;
}
.appbar .wrap { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.appbar .brand { font-size: 1.12em; font-weight: 700; letter-spacing: .2px; white-space: nowrap; color: #fff; text-decoration: none; }
.appbar .brand:hover { color: #fff; text-decoration: none; opacity: .92; }
.appbar .brand .light { font-weight: 400; opacity: .85; }
.appbar .tabs { display: flex; gap: 4px; margin-left: 6px; }
.appbar .tabs a {
    color: #dcebf4; text-decoration: none; font-weight: 600;
    padding: 8px 16px; border-radius: 8px; transition: background .14s, color .14s;
}
.appbar .tabs a:hover { background: rgba(255,255,255,.12); color:#fff; }
.appbar .tabs a.actief { background: #fff; color: var(--kop-2); }
.appbar .tabs a.beheer { color:#ffe7b8; }
.appbar .tabs a.beheer.actief { color:#8a5a00; background:#fff; }
.appbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.appbar .who { opacity: .9; font-size: .95em; color:#fff; text-decoration:none; padding:5px 10px; border-radius:8px; }
.appbar .who:hover { background: rgba(255,255,255,.12); opacity:1; color:#fff; text-decoration:none; }
.appbar .who.actief { background:#fff; color: var(--kop-2); opacity:1; }
.appbar .uitlog {
    color:#fff; text-decoration:none; font-weight:600; font-size:.95em;
    border:1px solid rgba(255,255,255,.45); padding:6px 14px; border-radius:8px; transition: background .14s;
}
.appbar .uitlog:hover { background: rgba(255,255,255,.16); color:#fff; }

/* ===== Koppen ===== */
h1, h2, h3 { color: var(--kop); font-weight: 700; margin: 0 0 10px; }
h1 { font-size: 1.7em; margin: 6px 0 18px; }
h2 { font-size: 1.28em; margin-top: 6px; }
h3 { font-size: 1.06em; margin: 22px 0 10px; }

a { color: var(--accent-d); text-decoration: none; transition: color .14s; }
a:hover { color: var(--kop); text-decoration: underline; }

/* ===== Kaarten ===== */
.card, .formbox {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.formbox { max-width: 720px; }
.formbox label, .subfilter label { font-weight: 600; color: var(--kop-2); }

/* ===== Tabellen ===== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
}
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* Koppen nooit middenin een woord afbreken; alleen op spaties. */
th { overflow-wrap: normal; word-break: normal; }
/* Inhoud mag lange, ononderbroken tokens (URL/bestandsnaam) afbreken, gewone woorden niet. */
td { overflow-wrap: break-word; }
th {
    background: linear-gradient(180deg, var(--kop-2), var(--kop)); color: #fff; font-weight: 700; font-size: .9em;
    text-transform: uppercase; letter-spacing: .03em; border-bottom: none;
}
th.sortable { cursor: pointer; }
th.sortable a { color: #fff; text-decoration: none; }
th.sortable a:hover { color: #dcebf4; text-decoration: underline; }
tbody tr:hover, tr.clickable-row:hover { background: #f6fbfe; }
tr.prio-hoog   { background: var(--prio-hoog); }
tr.prio-middel { background: var(--prio-middel); }
tr.prio-laag   { background: var(--prio-laag); }
tr.prio-hoog:hover   { background: #fbe0e0; }
tr.prio-middel:hover { background: #fff2cf; }
tr.prio-laag:hover   { background: #ddf2e2; }

/* ===== Formuliervelden ===== */
select, input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], textarea {
    font-size: 1em;
    padding: 8px 10px;
    border-radius: var(--radius-s);
    border: 1px solid #c3d6e0;
    background: #fff;
    font-family: inherit;
    color: var(--ink);
}
select:focus, input:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17,131,184,.13);
}
textarea { width: 100%; min-height: 80px; resize: vertical; }
/* Volledige breedte alleen binnen echte formulieren, niet bij inline mail-acties */
.formbox select, .formbox input[type="text"], .formbox input[type="number"],
.formbox input[type="email"], .formbox input[type="password"],
.loginbox input { width: 100%; }
.formbox select, .formbox input, .formbox textarea { margin-top: 3px; margin-bottom: 14px; }

/* ===== Knoppen ===== */
button, input[type="submit"], .btn, .primary-btn {
    background: var(--accent); color: #fff; border: none;
    padding: 8px 16px; border-radius: var(--radius-s); font-size: .97em;
    cursor: pointer; font-family: inherit; font-weight: 600;
    transition: background .14s, box-shadow .14s; text-decoration: none; display: inline-block;
}
button:hover, input[type="submit"]:hover, .btn:hover, .primary-btn:hover {
    background: var(--accent-d); color:#fff; text-decoration: none;
}
button:disabled, input[type="submit"]:disabled { opacity: .55; cursor: default; }
.btn-grijs { background: #6b818f; }
.btn-grijs:hover { background: #54656f; }
.btn-klein { padding: 5px 11px; font-size: .9em; }
.btn-secundair { background:#eaf2f7; color: var(--accent-d); }
.btn-secundair:hover { background:#dbe9f1; color: var(--kop); }

.delete-btn { background: #d94545; }
.delete-btn:hover { background: #b22e2e; }
.mark-btn { background: var(--kop-2); }
.mark-btn:hover { background: var(--kop); }
.edit-btn { background: #f4f8fb; color: var(--accent-d); border:1px solid var(--line); }
.edit-btn:hover { background:#e7f1f7; color: var(--kop); }

.filterbar { margin-bottom: 10px; display:flex; gap:6px; flex-wrap:wrap; }
.filterbar button { background:#fff; color: var(--kop-2); border:1px solid #c3d9e6; font-weight:600; }
.filterbar button:hover { background:#eaf2f7; color: var(--kop); }
.filterbar button.actief { background: linear-gradient(180deg, var(--kop-2), var(--kop)); color:#fff; border-color: var(--kop); }
.subfilter { margin-bottom: 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.subfilter select { width:auto; }

/* ===== Inklapbare panelen ===== */
details.paneel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden;
}
details.paneel > summary {
    cursor: pointer; list-style: none; padding: 13px 18px; font-weight: 700; color: var(--kop-2);
    display: flex; align-items: center; gap: 9px; user-select: none;
}
details.paneel > summary::-webkit-details-marker { display: none; }
details.paneel > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
details.paneel[open] > summary { border-bottom: 1px solid var(--line); }
details.paneel[open] > summary::after { transform: rotate(180deg); }
details.paneel .paneel-body { padding: 16px 18px; }
.tag-aantal { background: var(--accent); color:#fff; border-radius: 11px; font-size: .78em; padding: 1px 8px; font-weight: 700; }

/* ===== Meldingen ===== */
.flash, .mailflash { padding: 11px 15px; border-radius: var(--radius-s); margin-bottom: 16px; font-weight: 500; }
.flash.ok, .mailflash.ok   { background: var(--ok-bg); color: var(--ok-tx); border: 1px solid var(--ok-br); }
.flash.err, .mailflash.err { background: var(--err-bg); color: var(--err-tx); border: 1px solid var(--err-br); }

/* ===== Beschrijving ===== */
.beschrijvingsbox {
    background: #eef7fb; border: 1px solid #cfe6f1; border-radius: var(--radius);
    margin: 16px 0; padding: 14px 18px; line-height: 1.5;
}

/* ===== Onderwerp-koptabel ===== */
.topic-header-table { max-width: 100%; }
.tip { font-size: .9em; color: var(--muted); margin-bottom: 4px; }
.submitrow { margin-top: 10px; }

/* ===== Mailkoppel-rijen (zaakpagina) ===== */
.mk-rij { display:flex; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mk-rij:last-child { border-bottom:none; }
.mk-van { min-width:160px; color: var(--kop-2); font-weight:600; }
.mk-ond { flex:1; min-width:160px; }
.mk-datum { color: var(--muted); font-size:.92em; }
.mk-chip { display:inline-flex; align-items:center; gap:6px; background:#eaf2f7; border-radius:14px; padding:3px 8px 3px 12px; margin:2px; font-size:.93em; }
.mk-x { border:none; background:none; cursor:pointer; color: var(--err-tx); padding:0 2px; font-weight:700; }
.mk-x:hover { background:none; color:#7a1414; }
.mk-btn { padding:5px 12px; border:none; border-radius:7px; cursor:pointer; font-size:.9em; text-decoration:none; font-weight:600; display:inline-block; }
.mk-open { background: var(--accent); color:#fff; }
.mk-open:hover { background: var(--accent-d); color:#fff; text-decoration:none; }

/* ===== Mail: inline actie-rijen (compact) ===== */
.actiebalk { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.veldlabel { color: var(--muted); font-size:.82em; }

/* ===== Footer ===== */
.footer {
    margin-top: 40px; padding: 16px 0; color: #cfe3ef; background: var(--kop);
    text-align: center; font-size: .92em;
}
.footer a { color:#fff; }

/* ===== Login/reset boxen ===== */
.loginbox {
    max-width: 400px; margin: 56px auto 0; padding: 30px 28px; background: var(--surface);
    border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}

/* ===== Rich-text editor (beperkte opmaak bij updates) ===== */
.rte-wrap { margin-top: 3px; margin-bottom: 14px; }
.rte-bar { display: flex; gap: 4px; flex-wrap: wrap; background: #f4f8fb; border: 1px solid #c3d6e0; border-bottom: none; border-radius: var(--radius-s) var(--radius-s) 0 0; padding: 5px 6px; }
.rte-bar button { background: #fff; color: var(--kop-2); border: 1px solid #cfe0ea; border-radius: 5px; padding: 4px 10px; font-size: .95em; line-height: 1.2; min-width: 34px; cursor: pointer; }
.rte-bar button:hover { background: var(--kop-2); color: #fff; }
.rte {
    border: 1px solid #c3d6e0; border-radius: 0 0 var(--radius-s) var(--radius-s);
    min-height: 90px; padding: 9px 11px; background: #fff; font-family: inherit; font-size: 1em; line-height: 1.5;
}
.rte:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17,131,184,.13); }
.rte ul, .rte ol { margin: 4px 0 4px 22px; }
.rte-hidden { display: none !important; }

/* ===== Badges & legenda ===== */
.tab-badge { background:#d94545; color:#fff; border-radius:10px; font-size:.72em; font-weight:700; padding:1px 7px; margin-left:2px; }
.badge-open { background:#eaf2f7; color:var(--kop-2); border:1px solid #cfe0ea; border-radius:14px; padding:3px 12px; font-weight:600; font-size:.9em; }
.badge-mail { background:#fff0d6; color:#8a5a00; border:1px solid #f0dca8; border-radius:14px; padding:3px 12px; font-weight:600; font-size:.9em; text-decoration:none; }
.badge-mail:hover { background:#ffe8bf; color:#8a5a00; text-decoration:none; }
.legenda { color:#54656f; font-size:.88em; margin:0 0 12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.legenda .lg { border-radius:10px; padding:1px 9px; font-weight:600; }
.lg-hoog { background:var(--prio-hoog); }
.lg-middel { background:var(--prio-middel); }
.lg-laag { background:var(--prio-laag); }

/* ===== Print / PDF ===== */
@media print {
    .appbar, .footer, .noprint, .filterbar, .subfilter, .legenda,
    .mailtools, .pager, .rte-bar, details.paneel,
    .vol-kop, .vol-cel,
    button, .btn, input[type=submit], .delete-btn, .edit-btn, .mark-btn { display: none !important; }
    body { background: #fff; }
    main.wrap { padding: 0; max-width: 100%; }
    a { color: #000; text-decoration: none; }
    table { box-shadow: none; }
    th { background: #e6eef3 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    tr.prio-hoog, tr.prio-middel, tr.prio-laag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Mobiel (desktop blijft ongewijzigd) ===== */
@media (max-width: 760px) {
    /* Container & typografie */
    .wrap { padding: 0 13px; }
    main.wrap { padding-top: 14px; padding-bottom: 34px; }
    h1 { font-size: 1.4em; margin: 4px 0 14px; }
    h2 { font-size: 1.16em; }
    h3 { font-size: 1.02em; }

    /* App-bar: merk boven, tabs als volle-breedte rij, naam+uitloggen rechts */
    .appbar .wrap { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-top: 9px; padding-bottom: 9px; }
    .appbar .brand { font-size: 1.02em; }
    .appbar .right { order: 2; margin-left: auto; gap: 10px; }
    .appbar .who { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
    .appbar .tabs { order: 3; width: 100%; gap: 6px; }
    .appbar .tabs a { flex: 1; text-align: center; padding: 9px 6px; font-size: .95em; }

    /* Kaarten/panelen compacter */
    .card, .formbox, details.paneel .paneel-body { padding: 14px; }
    details.paneel > summary { padding: 12px 14px; }
    .beschrijvingsbox { padding: 12px 14px; }

    /* Knoppen: ruimere tap-targets; filterknoppen vullen de rij */
    button, input[type="submit"], .btn, .primary-btn { padding: 10px 14px; }
    .filterbar { gap: 6px; }
    .filterbar button { flex: 1 1 46%; }
    .subfilter { gap: 8px; }
    .subfilter select { flex: 1; }

    /* Formuliervelden volle breedte voor makkelijke invoer */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], select { width: 100%; }

    /* Dashboard-overzicht als kaarten i.p.v. brede tabel */
    table.responsive { background: transparent; box-shadow: none; border-radius: 0; }
    table.responsive thead, table.responsive th { position: absolute; left: -9999px; }
    table.responsive tr {
        display: block; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
    }
    table.responsive tr.prio-hoog   { background: var(--prio-hoog); }
    table.responsive tr.prio-middel { background: var(--prio-middel); }
    table.responsive tr.prio-laag   { background: var(--prio-laag); }
    table.responsive td {
        display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
        border: none; border-bottom: 1px solid rgba(20,60,90,.10); padding: 9px 14px; text-align: right;
    }
    table.responsive tr td:last-child { border-bottom: none; }
    table.responsive td:before {
        content: attr(data-label); font-weight: 700; color: var(--muted);
        text-align: left; flex: 0 0 36%; white-space: normal;
    }
    table.responsive td[data-label="Onderwerp"] { font-size: 1.08em; font-weight: 700; }
    table.responsive td.vol-cel { justify-content: flex-start; font-size: 1.25em; }

    /* Overige (smalle) tabellen: nette horizontale scroll i.p.v. uit beeld lopen */
    .tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); }
    .tabel-scroll table { min-width: 560px; margin-bottom: 0; box-shadow: none; border-radius: 0; }

    .formbox { max-width: 100%; }
    .footer { margin-top: 28px; }
}