:root {
    --dark:#111827;
    --panel:#ffffff;
    --muted:#6b7280;
    --bg:#f3f4f6;
    --red:#b91c1c;
    --red2:#ef4444;
    --line:#e5e7eb;
    --green:#047857;
    --orange:#c2410c;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; background:var(--bg); color:var(--dark); }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:285px; background:#0f172a; color:white; padding:22px; display:flex; flex-direction:column; gap:22px; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { background:linear-gradient(135deg, var(--red), #7f1d1d); color:white; border-radius:16px; width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:.5px; box-shadow:0 12px 28px rgba(0,0,0,.25); }
.brand-mark.large { width:76px; height:76px; font-size:22px; margin:auto; }
.brand small { display:block; color:#cbd5e1; margin-top:4px; }
.sidebar nav { display:flex; flex-direction:column; gap:8px; }
.sidebar nav a, .user-box a { color:#e5e7eb; text-decoration:none; padding:12px 14px; border-radius:14px; }
.sidebar nav a:hover { background:rgba(255,255,255,.10); }
.user-box { margin-top:auto; border-top:1px solid rgba(255,255,255,.15); padding-top:15px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.content { flex:1; padding:28px; overflow:auto; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
h1 { margin:0 0 6px; font-size:30px; }
h2 { margin-top:0; }
p { color:var(--muted); }
.card, .stat-card { background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:0 10px 30px rgba(15,23,42,.07); padding:20px; margin-bottom:20px; }
.stats-grid { display:grid; grid-template-columns:repeat(5, minmax(150px, 1fr)); gap:16px; }
.stat-card span { color:var(--muted); display:block; }
.stat-card strong { font-size:34px; margin-top:8px; display:block; }
.stat-card.danger strong { color:var(--red); }
.grid-2 { display:grid; grid-template-columns:minmax(320px, 430px) 1fr; gap:20px; align-items:start; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:start; }
.form-card label, .login-card label { display:flex; flex-direction:column; gap:7px; margin-bottom:13px; color:#374151; font-weight:700; }
input, select, textarea { width:100%; border:1px solid #d1d5db; border-radius:12px; padding:11px 12px; font:inherit; background:white; }
textarea { min-height:78px; resize:vertical; }
button, .actions a, td a { background:var(--red); color:white; border:0; border-radius:12px; padding:10px 14px; text-decoration:none; font-weight:700; cursor:pointer; display:inline-block; }
button:hover, .actions a:hover, td a:hover { background:#991b1b; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:#374151; background:#f9fafb; }
.pill { display:inline-block; padding:5px 9px; border-radius:999px; background:#e5e7eb; font-size:12px; font-weight:800; }
.risk-laag { background:#dcfce7; color:#166534; }
.risk-middel { background:#ffedd5; color:#9a3412; }
.risk-hoog { background:#fee2e2; color:#991b1b; }
.ok { background:#dcfce7; color:#166534; }
.actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.actions form { margin:0; }
.inline-form { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; align-items:end; }
.inline-form label { margin:0; }
.mini-form { display:flex; gap:8px; align-items:center; }
.mini-form input, .mini-form select { min-width:130px; }
.check-row { border:1px solid var(--line); background:#fafafa; border-radius:18px; padding:16px; margin-bottom:14px; }
.radio-line { display:flex; gap:18px; margin:12px 0; }
.check-action { flex-direction:row !important; align-items:center; font-weight:700; color:var(--red) !important; }
.check-action input { width:auto; }
.mobile-note { background:#fee2e2; color:#7f1d1d; padding:12px 14px; border-radius:14px; margin-bottom:15px; font-weight:700; }
.toolbox-body { white-space:pre-line; line-height:1.6; background:#f9fafb; padding:16px; border-radius:16px; }
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#111827,#7f1d1d); padding:20px; }
.login-card { width:100%; max-width:430px; background:white; padding:30px; border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center; }
.login-card h1 { margin-top:14px; }
.login-card p { margin-bottom:24px; }
.alert { background:#fee2e2; color:#991b1b; padding:12px; border-radius:12px; margin-bottom:15px; font-weight:700; }
@media (max-width: 1000px) {
    .app-shell { flex-direction:column; }
    .sidebar { width:100%; }
    .sidebar nav { flex-direction:row; overflow:auto; }
    .stats-grid, .grid-2, .grid-3, .inline-form { grid-template-columns:1fr; }
    .content { padding:16px; }
    table { min-width:850px; }
    .card { overflow:auto; }
}

.section-title {
    margin: 22px 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #111827;
    color: white;
    font-size: 18px;
}
.question-help {
    display:block;
    margin-top:6px;
    color:#6b7280;
    font-weight:600;
}

.signature-block { border:1px solid var(--line); border-radius:18px; padding:16px; background:#f9fafb; margin:14px 0 18px; }
.signature-block label { font-weight:800; margin-bottom:10px; display:block; }
#signature-pad { width:100%; height:220px; border:2px dashed #cbd5e1; border-radius:14px; background:white; touch-action:none; }
.signature-actions { margin-top:10px; }
.signature-actions button { background:#374151; }

.public-body { background:#f3f4f6; margin:0; padding:20px; }
.public-card { max-width:900px; margin:0 auto; background:white; border-radius:24px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.12); }
.public-card label { display:flex; flex-direction:column; gap:7px; margin:14px 0; font-weight:800; }
select[multiple] { min-height:180px; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.photo-card {
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.photo-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.photo-placeholder {
    height: 180px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    text-align: center;
    font-weight: 800;
}
.photo-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.photo-card-body small {
    color: #6b7280;
}
.danger-button {
    background: #7f1d1d !important;
}

.toolbox-editor-layout {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 390px;
    gap: 22px;
    align-items: start;
}
.toolbox-editor-card textarea#toolbox_body_editor {
    min-height: 720px;
    width: 100%;
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    line-height: 1.45;
    padding: 18px;
}
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    padding: 10px;
    margin: 8px 0 10px;
}
.editor-toolbar button {
    background: #111827;
    color: white;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 13px;
}
.editor-help {
    color: #6b7280;
    font-size: 13px;
    margin: 8px 0 16px;
}
.toolbox-photo-side {
    position: sticky;
    top: 18px;
}
.editor-link-form {
    align-items: stretch;
}
.editor-link-form select {
    min-width: 100%;
}
@media (max-width: 1100px) {
    .toolbox-editor-layout {
        grid-template-columns: 1fr;
    }
    .toolbox-photo-side {
        position: static;
    }
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.header-actions a,
.button-link {
    background: var(--red, #b91c1c) !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 10px 14px;
    text-decoration: none !important;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.header-actions a:hover,
.button-link:hover {
    background: #991b1b !important;
}
#quill-toolbar {
    border-radius: 16px 16px 0 0;
    background: #f9fafb;
    border: 1px solid var(--line, #e5e7eb);
}
#toolbox_quill_editor {
    min-height: 720px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    font-size: 16px;
}
#toolbox_quill_editor .ql-editor {
    min-height: 720px;
    font-size: 16px;
    line-height: 1.55;
}
#toolbox_quill_editor h1,
.toolbox-body h1 {
    font-size: 28px;
    margin: 16px 0 10px;
}
#toolbox_quill_editor h2,
.toolbox-body h2 {
    font-size: 22px;
    margin: 14px 0 8px;
}
#toolbox_quill_editor h3,
.toolbox-body h3 {
    font-size: 18px;
    margin: 12px 0 8px;
}
.toolbox-body {
    white-space: normal !important;
}
.toolbox-body ul,
.toolbox-body ol {
    padding-left: 24px;
}

.dashboard-two {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    margin-bottom: 20px;
}
.soft-title {
    color: #7fa3df;
    font-size: 24px;
    margin: 0 0 12px;
}
.mini-stats {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.mini-stat {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    min-width: 96px;
    padding: 8px 12px;
    background: #fff;
    text-align: center;
}
.mini-stat strong {
    display: block;
    font-size: 22px;
}
.mini-stat span {
    font-size: 12px;
}
.mini-stat.green { border-color: #22c55e; color: #16a34a; }
.mini-stat.blue { border-color: #5b75bd; color: #4f68b0; }
.mini-stat.red { border-color: #ef4444; color: #dc2626; }
.mini-stat.orange { border-color: #f59e0b; color: #d97706; }
.chart-card {
    min-height: 320px;
}
.planned-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.planned-pill {
    border: 1px solid #86efac;
    color: #16a34a;
    background: #f0fdf4;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}
.muted {
    color: #6b7280;
}
@media (max-width: 1100px) {
    .dashboard-two {
        grid-template-columns: 1fr;
    }
}

.inline-photo-button {
    width: auto !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}
.inline-photo-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 420px;
    overflow: auto;
}
.inline-photo-choice {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 10px;
    background: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 8px !important;
    text-align: left;
}
.inline-photo-choice img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
}
.inline-photo-choice span {
    font-weight: 800;
    font-size: 13px;
}
.small-muted {
    color: #6b7280;
    font-size: 13px;
}
#toolbox_quill_editor .ql-editor img,
.toolbox-body img {
    max-width: 100%;
    border-radius: 16px;
    margin: 12px 0;
    box-shadow: 0 8px 22px rgba(15,23,42,.12);
}

.question-card {
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    background: #f9fafb;
}
.question-card strong {
    display: block;
    margin-bottom: 10px;
}
.question-card textarea {
    min-height: 110px;
}

.calendar-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.calendar-list {
    display:grid;
    gap:14px;
}
.calendar-item {
    display:grid;
    grid-template-columns:220px 1fr;
    gap:16px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#fff;
    padding:16px;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.calendar-date {
    border-radius:14px;
    background:#f8fafc;
    padding:14px;
}
.calendar-date strong {
    display:block;
    font-size:18px;
    color:#111827;
}
.calendar-date span {
    display:inline-block;
    margin-top:8px;
    padding:4px 8px;
    border-radius:999px;
    background:#e5e7eb;
    font-weight:800;
    font-size:12px;
}
.calendar-body h3 {
    margin:0 0 8px;
}
.mini-plan {
    display:grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap:8px;
    margin-top:12px;
}
.danger-button {
    background:#7f1d1d !important;
    color:white !important;
}
@media (max-width: 900px) {
    .calendar-item {
        grid-template-columns:1fr;
    }
    .mini-plan {
        grid-template-columns:1fr;
    }
}

.inspection-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.inspection-stat-card {
    background: #fff;
    border: 1px solid #dcfce7;
    color: #16a34a;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.inspection-stat-card strong {
    display: block;
    font-size: 30px;
}
.inspection-stat-card span {
    font-weight: 800;
    color: #374151;
}
.inspection-stat-card.blue {
    border-color: #bfdbfe;
    color: #2563eb;
}
.inspection-stat-card.green {
    border-color: #bbf7d0;
    color: #16a34a;
}
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.responsive-table {
    overflow-x: auto;
}
.clean-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.clean-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.clean-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.small-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
    min-height: 36px;
}
.danger-button {
    background: #7f1d1d !important;
    color: #fff !important;
}
.deficiency-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
}
.deficiency-form .span-2 {
    grid-column: span 2;
}
.def-status-form {
    display: grid;
    grid-template-columns: 150px 180px 180px auto;
    gap: 8px;
    align-items: center;
}
.muted {
    color: #64748b;
}
@media (max-width: 1000px) {
    .inspection-overview-grid,
    .deficiency-form {
        grid-template-columns: 1fr;
    }
    .deficiency-form .span-2 {
        grid-column: auto;
    }
    .def-status-form {
        grid-template-columns: 1fr;
    }
}

.page-grid-compact {
    display: grid;
    gap: 22px;
}
.form-panel,
.table-panel {
    border-radius: 22px;
    padding: 24px;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}
.panel-header h2 {
    margin: 0;
}
.panel-header p {
    margin: 6px 0 0;
    color: #64748b;
}
.panel-header-actions {
    align-items: center;
}
.polished-form {
    display: grid;
    gap: 16px;
}
.form-row {
    display: grid;
    gap: 16px;
}
.form-row.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-row.three {
    grid-template-columns: 1fr 1fr 2fr;
}
.form-row.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.polished-form label {
    font-weight: 800;
    color: #334155;
}
.polished-form input,
.polished-form select,
.polished-form textarea,
.def-status-form input,
.def-status-form select,
.mini-plan input {
    margin-top: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    min-height: 44px;
}
.polished-form textarea {
    min-height: 84px;
}
.form-actions-right {
    display: flex;
    justify-content: flex-end;
}
.responsive-table {
    overflow-x: auto;
}
.clean-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.clean-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}
.clean-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.def-status-form {
    display: grid;
    grid-template-columns: 145px 170px 170px auto;
    gap: 8px;
    align-items: end;
}
.calendar-list {
    display: grid;
    gap: 14px;
}
.calendar-item {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.calendar-date {
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
    padding: 16px;
}
.calendar-date strong {
    display: block;
    font-size: 18px;
    color: #111827;
}
.calendar-date span {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    font-weight: 900;
    font-size: 12px;
}
.calendar-body h3 {
    margin: 0 0 10px;
}
.calendar-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.calendar-meta p {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    margin: 0;
}
.mini-plan {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.danger-button {
    background: #7f1d1d !important;
    color: #fff !important;
}
@media (max-width: 1000px) {
    .form-row.two,
    .form-row.three,
    .form-row.four,
    .calendar-meta,
    .mini-plan,
    .def-status-form {
        grid-template-columns: 1fr;
    }
    .calendar-item {
        grid-template-columns: 1fr;
    }
    .panel-header,
    .panel-header-actions {
        flex-direction: column;
    }
}



/* =========================================================
   MBS GLOBAL PREMIUM STYLE
   Toegepast op alle pagina's
   ========================================================= */

:root {
    --mbs-navy: #0f172a;
    --mbs-navy-2: #1e3a5f;
    --mbs-red: #c81e1e;
    --mbs-red-dark: #7f1d1d;
    --mbs-bg: #f1f5f9;
    --mbs-card: #ffffff;
    --mbs-line: #e2e8f0;
    --mbs-muted: #64748b;
    --mbs-text: #111827;
    --mbs-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

body {
    background: var(--mbs-bg) !important;
    color: var(--mbs-text) !important;
}

main,
.container,
.page,
.content {
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-header {
    background: linear-gradient(135deg, var(--mbs-navy), var(--mbs-navy-2)) !important;
    color: #fff !important;
    border-radius: 26px !important;
    padding: 26px 30px !important;
    margin: 0 0 24px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.page-header h1,
.page-header h2 {
    color: #fff !important;
    margin: 0 0 6px !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
}

.page-header p {
    color: #cbd5e1 !important;
    margin: 0 !important;
    font-size: 16px !important;
}

.card,
section.card,
.narrow-card,
.form-card {
    background: var(--mbs-card) !important;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 26px !important;
    padding: 24px !important;
    box-shadow: var(--mbs-shadow) !important;
    margin-bottom: 24px !important;
}

.card > h2:first-child,
.card > h3:first-child,
section.card > h2:first-child,
section.card > h3:first-child {
    background: #f8fafc !important;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 20px !important;
    padding: 16px 18px !important;
    margin: 0 0 20px !important;
    color: var(--mbs-navy) !important;
}

label {
    font-weight: 800 !important;
    color: #334155 !important;
}

input,
select,
textarea {
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    color: var(--mbs-text) !important;
    box-sizing: border-box !important;
}

textarea {
    min-height: 90px !important;
}

button,
.button-link,
a.button-link,
input[type="submit"] {
    background: var(--mbs-red) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 11px 16px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

button:hover,
.button-link:hover,
a.button-link:hover {
    background: #991b1b !important;
}

.danger-button,
button.danger-button {
    background: var(--mbs-red-dark) !important;
    color: #fff !important;
}

.header-actions,
.actions,
.row-actions,
.form-actions,
.signature-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

thead th,
table th {
    background: var(--mbs-navy) !important;
    color: #fff !important;
    padding: 13px 14px !important;
    text-align: left !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-bottom: 0 !important;
}

thead th:first-child,
table th:first-child {
    border-radius: 14px 0 0 14px !important;
}

thead th:last-child,
table th:last-child {
    border-radius: 0 14px 14px 0 !important;
}

tbody td,
table td {
    background: #f8fafc !important;
    border-top: 1px solid var(--mbs-line) !important;
    border-bottom: 1px solid var(--mbs-line) !important;
    padding: 14px !important;
    vertical-align: top !important;
}

tbody td:first-child,
table td:first-child {
    border-left: 1px solid var(--mbs-line) !important;
    border-radius: 16px 0 0 16px !important;
}

tbody td:last-child,
table td:last-child {
    border-right: 1px solid var(--mbs-line) !important;
    border-radius: 0 16px 16px 0 !important;
}

.pill {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-weight: 900 !important;
}

.mobile-note {
    border-radius: 16px !important;
    padding: 14px 16px !important;
    background: #fef2f2 !important;
    color: #7f1d1d !important;
    font-weight: 800 !important;
    margin-bottom: 18px !important;
}

/* Forms algemeen compacter en mooier */
.form-grid,
.compact-form,
.polished-form,
.deficiency-form {
    display: grid !important;
    gap: 16px !important;
}

.form-grid label,
.compact-form label,
.polished-form label,
.deficiency-form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 0 !important;
}

/* Checklist / inspectie */
.section-title {
    background: var(--mbs-navy) !important;
    color: #fff !important;
    border-radius: 18px !important;
    padding: 16px 18px !important;
    margin: 24px 0 16px !important;
}

.check-row {
    background: #fff !important;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 22px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
}

.radio-line {
    display: flex !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    margin: 14px 0 !important;
}

.radio-line label {
    background: #f8fafc !important;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Kalender en kaartblokken */
.calendar-list,
.mbs-calendar-list,
.photo-grid {
    display: grid !important;
    gap: 16px !important;
}

.calendar-item,
.mbs-calendar-item,
.photo-card {
    background: #fff !important;
    border: 1px solid var(--mbs-line) !important;
    border-radius: 22px !important;
    padding: 18px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
}

/* Dashboard */
.dashboard-two,
.inspection-overview-grid,
.mini-stats,
.mbs-kpi-row {
    gap: 16px !important;
}

.mini-stat,
.inspection-stat-card,
.mbs-kpi {
    background: #fff !important;
    border: 1px solid var(--mbs-line) !important;
    border-left: 7px solid var(--mbs-red) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07) !important;
}

/* Menu/nav indien aanwezig */
nav,
.navbar,
.topnav {
    background: var(--mbs-navy) !important;
    color: #fff !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.16) !important;
}

nav a,
.navbar a,
.topnav a {
    color: #fff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
}

nav a:hover,
.navbar a:hover,
.topnav a:hover {
    background: rgba(255,255,255,.12) !important;
}

/* Mobiel */
@media (max-width: 1000px) {
    .page-header {
        padding: 22px !important;
    }

    .page-header h1 {
        font-size: 28px !important;
    }

    .card,
    section.card {
        padding: 18px !important;
    }

    table {
        min-width: 850px !important;
    }

    .form-grid,
    .compact-form,
    .dashboard-two,
    .inspection-overview-grid,
    .mbs-kpi-row,
    .mini-stats {
        grid-template-columns: 1fr !important;
    }
}


/* Compactere checklist kaarten */
.check-row {
    padding: 14px !important;
    border-radius: 18px !important;
}
.radio-line {
    gap: 10px !important;
    margin: 10px 0 !important;
}
.radio-line label {
    padding: 8px 12px !important;
    min-width: 110px !important;
    font-size: 14px !important;
}


/* Compacte radio keuze blokken werkplekinspectie */

.check-row {
    padding: 14px 16px !important;
}

.check-row > strong,
.check-row > h3,
.check-row > h4 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
}

.check-row .question-help,
.check-row small {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.radio-line {
    gap: 8px !important;
    margin: 10px 0 14px !important;
}

.radio-line label {
    min-width: 82px !important;
    max-width: 110px !important;
    min-height: 54px !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    gap: 7px !important;
}

.radio-line input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    transform: scale(.82) !important;
}

.radio-line label span,
.radio-line label strong {
    font-size: 12px !important;
    line-height: 1.15 !important;
}

.check-row label {
    font-size: 13px !important;
}

.check-row input[type="file"] {
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
}

.check-row textarea,
.check-row select {
    font-size: 13px !important;
}

.section-title {
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
}


/* =========================================================
   HARD OVERRIDE: zeer compacte radio blokken inspectieformulier
   ========================================================= */

form .check-row,
.card .check-row,
section .check-row,
.check-row {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
}

form .check-row > strong,
form .check-row > h3,
form .check-row > h4,
.card .check-row > strong,
.card .check-row > h3,
.card .check-row > h4,
.check-row > strong,
.check-row > h3,
.check-row > h4 {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
}

form .check-row .question-help,
form .check-row small,
.card .check-row .question-help,
.card .check-row small,
.check-row .question-help,
.check-row small {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
}

form .radio-line,
.card .radio-line,
.check-row .radio-line,
.radio-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 10px !important;
}

form .radio-line label,
.card .radio-line label,
.check-row .radio-line label,
.radio-line label {
    width: auto !important;
    min-width: 76px !important;
    max-width: 86px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    gap: 5px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

form .radio-line label input[type="radio"],
.card .radio-line label input[type="radio"],
.check-row .radio-line label input[type="radio"],
.radio-line label input[type="radio"],
input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    flex: 0 0 14px !important;
}

form .radio-line label span,
form .radio-line label strong,
.card .radio-line label span,
.card .radio-line label strong,
.check-row .radio-line label span,
.check-row .radio-line label strong,
.radio-line label span,
.radio-line label strong {
    font-size: 11px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0 !important;
}

form .check-row label,
.card .check-row label,
.check-row label {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

form .check-row input[type="file"],
.card .check-row input[type="file"],
.check-row input[type="file"] {
    min-height: 30px !important;
    height: 30px !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}

form .check-row textarea,
form .check-row select,
.card .check-row textarea,
.card .check-row select,
.check-row textarea,
.check-row select {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}

form .section-title,
.card .section-title,
.section-title {
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    margin: 14px 0 10px !important;
}


/* Toolbox editor opschonen */
.ql-toolbar button:empty,
.editor-toolbar button:empty {
    display: none !important;
}
.ql-toolbar button[style*="background"],
.editor-toolbar button[style*="background"] {
    background: transparent !important;
    box-shadow: none !important;
}
.ql-toolbar button:not(.ql-bold):not(.ql-italic):not(.ql-underline):not(.ql-list):not(.ql-blockquote):not(.ql-link):not(.ql-clean):not(.ql-header):not(.ql-image) {
    width: auto !important;
    min-width: 0 !important;
}


/* Toolbox database en editor cleanup */
.toolbox-database-fulltext {
    max-width: 900px;
    line-height: 1.55;
}
.toolbox-database-fulltext h2 {
    font-size: 18px !important;
    margin: 18px 0 8px !important;
    color: #0f172a !important;
}
.toolbox-database-fulltext p,
.toolbox-database-fulltext li {
    font-size: 14px !important;
}
.hide-toolbox-duration {
    display: none !important;
}
.ql-toolbar button:empty,
.editor-toolbar button:empty {
    display: none !important;
}
.ql-toolbar button[style*="background"],
.editor-toolbar button[style*="background"] {
    background: transparent !important;
    box-shadow: none !important;
}


/* Toolbox database inklapbaar overzicht */
.toolbox-card:not(.is-open) .toolbox-full {
    display: none !important;
}
.toolbox-card.is-open .toolbox-full {
    display: block !important;
}


/* =========================================================
   Toolbox editor toolbar fix
   Voorkomt dat algemene rode button stijl de Quill knoppen sloopt
   ========================================================= */

.ql-toolbar {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.ql-toolbar .ql-formats {
    display: inline-flex !important;
    gap: 4px !important;
    margin-right: 8px !important;
    align-items: center !important;
}

.ql-toolbar button,
.ql-toolbar .ql-picker-label {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    min-width: 32px !important;
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ql-toolbar button:hover,
.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label:hover {
    background: #e8f0fb !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.ql-toolbar button svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

.ql-toolbar button svg .ql-stroke {
    stroke: #0f172a !important;
}

.ql-toolbar button svg .ql-fill {
    fill: #0f172a !important;
}

.ql-toolbar .ql-picker {
    color: #0f172a !important;
    height: 30px !important;
}

.ql-toolbar .ql-picker-options {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16) !important;
    padding: 6px !important;
}

.ql-toolbar .ql-picker-item {
    color: #0f172a !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

/* Fallback wanneer Quill iconen niet laden: toon tekstlabels */
.ql-toolbar button.ql-bold::before {
    content: "B";
    font-weight: 900;
}
.ql-toolbar button.ql-italic::before {
    content: "I";
    font-style: italic;
}
.ql-toolbar button.ql-underline::before {
    content: "U";
    text-decoration: underline;
}
.ql-toolbar button.ql-blockquote::before {
    content: "”";
    font-weight: 900;
}
.ql-toolbar button.ql-link::before {
    content: "Link";
    font-size: 11px;
    font-weight: 800;
}
.ql-toolbar button.ql-clean::before {
    content: "Tx";
    font-size: 11px;
    font-weight: 800;
}
.ql-toolbar button.ql-list[value="ordered"]::before {
    content: "1.";
    font-size: 12px;
    font-weight: 800;
}
.ql-toolbar button.ql-list[value="bullet"]::before {
    content: "•";
    font-size: 18px;
    font-weight: 900;
}

/* Als SVG wel geladen is, geen dubbele tekst tonen */
.ql-toolbar button svg + * {
    display: none !important;
}

/* De eigen knop Foto in tekst mag rood blijven, maar netjes */
.ql-toolbar button.insert-photo-btn,
.ql-toolbar button[data-action="image"],
.ql-toolbar button.toolbox-insert-photo,
button.insert-photo-btn,
button[data-action="image"],
button.toolbox-insert-photo {
    background: #c81e1e !important;
    color: #ffffff !important;
    border: 1px solid #c81e1e !important;
    border-radius: 999px !important;
    min-width: auto !important;
    width: auto !important;
    height: 30px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Quill editor zelf netjes leesbaar */
.ql-container {
    border: 1px solid #cbd5e1 !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background: #ffffff !important;
}

.ql-editor {
    min-height: 360px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    padding: 18px !important;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3 {
    color: #0f172a !important;
    margin: 18px 0 10px !important;
}

.ql-editor p {
    margin: 0 0 12px !important;
}

.ql-editor ul,
.ql-editor ol {
    margin: 8px 0 14px 22px !important;
}