/* ============================================================
   WijsThuis Beheer — gedeelde stylesheet
   Volgt de huisstijl van de marketingsite (donker & premium)
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --teal: #3DA5B8;
    --teal-light: #67afb7;
    --green: #22C55E;
    --green-light: #82db5c;
    --red: #f87171;
    --red-dark: #dc2626;

    --bg: #0a0f16;
    --bg-raised: #0f1620;
    --sidebar-bg: #0d131c;
    --card-bg: rgba(255, 255, 255, 0.035);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(103, 175, 183, 0.45);

    --text-primary: #f2f6f9;
    --text-secondary: #a7b3c2;
    --text-muted: #6b7889;

    --gradient-brand: linear-gradient(120deg, var(--teal-light), var(--green-light));
    --shadow-card: 0 20px 45px rgba(0, 0, 0, 0.35);
    --radius: 14px;

    --font-display: 'Outfit', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 50% 35% at 85% 0%, rgba(61, 165, 184, 0.08), transparent),
        radial-gradient(ellipse 40% 30% at 10% 100%, rgba(34, 197, 94, 0.05), transparent);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 15px;
}

::selection {
    background: rgba(61, 165, 184, 0.4);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.015em;
}

a {
    color: var(--teal-light);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== Admin-layout: sidebar + main ===== */
.container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    padding: 24px 18px;
    border-right: 1px solid var(--card-border);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 10;
}

.sidebar h2 {
    font-size: 1.05rem;
    margin-bottom: 24px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 26px;
    padding: 4px 6px;
    text-decoration: none;
}

.sidebar-brand:hover {
    text-decoration: none;
}

.sidebar-brand img {
    height: 36px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-brand .brand-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.15;
}

.sidebar-brand .brand-text em {
    font-style: normal;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-brand .brand-text small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.sidebar nav a {
    display: block;
    padding: 11px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 0.93rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    text-decoration: none;
}

.sidebar nav a.active {
    background: linear-gradient(120deg, rgba(61, 165, 184, 0.16), rgba(34, 197, 94, 0.1));
    color: var(--text-primary);
    border: 1px solid rgba(61, 165, 184, 0.3);
    padding: 10px 13px;
}

.sidebar-divider {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--card-border);
}

.main {
    margin-left: 250px;
    flex: 1;
    padding: 32px 36px;
    min-width: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.header h1 {
    font-size: 1.7rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 7px 14px;
    border-radius: 100px;
}

/* ===== Knoppen ===== */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--gradient-brand);
    color: #06130b;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2);
}

.btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.3);
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-brand);
    color: #06130b;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-secondary,
.btn.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: none;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--card-border-hover);
    filter: none;
}

.btn-danger,
.btn.btn-danger {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--red);
    box-shadow: none;
}

.btn-danger:hover,
.btn.btn-danger:hover {
    background: rgba(220, 38, 38, 0.25);
    filter: none;
}

.btn-sm,
.btn.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* ===== Statistiekkaarten (dashboard) ===== */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 22px 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--card-border-hover);
}

.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card h3 {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.stat-card .number {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card.warning {
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.05);
}

.stat-card.warning:hover {
    border-color: rgba(220, 38, 38, 0.6);
}

.stat-card .number.warning {
    background: none;
    -webkit-text-fill-color: var(--red);
    color: var(--red);
}

/* ===== Secties & tabellen ===== */
.recent-section,
.table-container,
.section,
.detail-container,
.form-container,
.content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 24px 26px;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.recent-section h3,
.section h3 {
    font-size: 1.05rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.subsection-title {
    margin: 22px 0 10px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.table-container,
.recent-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    white-space: nowrap;
}

th:first-child, td:first-child {
    white-space: normal;
}

th {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(103, 175, 183, 0.25);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.92rem;
}

tbody tr {
    transition: background 0.15s ease;
}

tbody tr:hover {
    background: rgba(61, 165, 184, 0.05);
}

tbody tr:last-child td {
    border-bottom: none;
}

td a {
    font-weight: 500;
}

.stock-low {
    color: var(--red);
    font-weight: 700;
}

.stock-ok {
    color: var(--green-light);
    font-weight: 600;
}

/* ===== Formulieren ===== */
.form-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}

.form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section h2 {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: var(--teal-light);
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--teal-light);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--card-border);
}

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row.full {
    grid-template-columns: 1fr;
}

label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(10, 15, 22, 0.55);
    border: 1.5px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
    resize: vertical;
    min-height: 90px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7889' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

select option {
    background: var(--bg-raised);
    color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(61, 165, 184, 0.14);
}

input[type="checkbox"],
input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--green);
    cursor: pointer;
}

.checkbox-item,
.checkbox-group,
.radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.checkbox-item label,
.checkbox-group label,
.radio-item label {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 4px;
}

.conditional-field {
    display: none;
    margin-top: 12px;
    padding: 14px 16px;
    border-left: 2px solid rgba(61, 165, 184, 0.4);
    background: rgba(61, 165, 184, 0.05);
    border-radius: 0 10px 10px 0;
}

.conditional-field.show {
    display: block;
}

.help-text,
.field-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.required {
    color: var(--red);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* ===== Detailweergaven ===== */
.field-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 24px;
}

.field {
    min-width: 0;
}

.field-label,
.detail-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.field-value,
.detail-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-word;
}

.field-value .empty,
.field-value.empty {
    color: var(--text-muted);
    font-style: italic;
}

.detail-row {
    display: flex;
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .detail-label {
    flex: 0 0 180px;
    margin-bottom: 0;
    align-self: center;
}

.back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.back-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== Intakegegevens (klant-detail) ===== */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.section-head h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.intake-sub {
    padding: 18px 0 4px;
}

.intake-sub + .intake-sub {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.intake-sub .subsection-title {
    margin: 0 0 14px;
    color: var(--teal-light);
    font-size: 0.8rem;
    letter-spacing: 0.09em;
}

/* Checklist: ja/nee-punten met optionele toelichting */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 18px;
}

.check-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.check-item .check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.check-item .check-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

.check-item .check-detail {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Chips voor meerkeuze-antwoorden */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Brede tekstblokken voor vrije invoer (wensen/opmerkingen) */
.field-wide {
    margin-bottom: 12px;
}

.field-wide .field-value {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 16px;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* ===== Installatie/offerte-detail ===== */
.muted {
    color: var(--text-muted);
}

.room-card .table-container {
    margin-bottom: 16px;
}

.add-item-form {
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

.add-item-row {
    align-items: flex-end;
}

code.ha-label {
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.85rem;
    background: rgba(61, 165, 184, 0.1);
    border: 1px solid rgba(61, 165, 184, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
    color: var(--teal-light);
}

.chip-btn {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chip-btn:hover {
    border-color: var(--card-border-hover);
    color: var(--text-primary);
    background: rgba(61, 165, 184, 0.1);
}

.chip-btn.active {
    border-color: var(--teal);
    color: var(--teal-light);
    background: rgba(61, 165, 184, 0.15);
    font-weight: 600;
}

.ha-list {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px 20px;
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    overflow-x: auto;
    white-space: pre;
}

/* ===== Arbeid & reiskosten-tabel (installatiedetail) ===== */
.arbeid-table {
    width: 100%;
    max-width: 620px;
    border-collapse: collapse;
    margin-bottom: 6px;
}

.arbeid-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 6px 12px;
    border-bottom: 1px solid var(--card-border);
}

.arbeid-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    vertical-align: middle;
}

.arbeid-table td.num,
.arbeid-table th.num {
    text-align: right;
}

.arbeid-table input {
    width: 100%;
    max-width: 120px;
    margin-left: auto;
    text-align: right;
}

.arbeid-table .arb-total {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ===== Statusbadges ===== */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-green {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--green-light);
}

.badge-teal,
.badge-info {
    background: rgba(61, 165, 184, 0.12);
    border: 1px solid rgba(61, 165, 184, 0.35);
    color: var(--teal-light);
}

.badge-yellow,
.badge-warning {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
    color: #facc15;
}

.badge-red {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: var(--red);
}

.badge-gray {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

/* Honeypot: buiten beeld, niet focusbaar — bots zien hem wel, mensen niet */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===== Meldingen ===== */
.error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.92rem;
}

.success {
    background: rgba(34, 197, 94, 0.09);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--green-light);
    padding: 13px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.92rem;
}

.info {
    text-align: center;
    margin-top: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ===== Inloggen & verificatie ===== */
body.page-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background-image:
        radial-gradient(ellipse 55% 45% at 70% 20%, rgba(61, 165, 184, 0.12), transparent),
        radial-gradient(ellipse 45% 35% at 20% 85%, rgba(34, 197, 94, 0.07), transparent);
}

.login-container,
.verify-container,
.error-container {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
}

.error-container {
    text-align: center;
    max-width: 520px;
}

.error-container h1 {
    margin-bottom: 14px;
}

.error-container p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 30px;
}

.auth-brand img {
    height: 60px;
    width: auto;
    margin-bottom: 14px;
}

.auth-brand h1 {
    font-size: 1.5rem;
}

.auth-brand h1 span {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-auth h1:not(.auth-brand h1) {
    text-align: center;
    margin-bottom: 26px;
    font-size: 1.5rem;
}

body.page-auth .btn {
    width: 100%;
    padding: 13px;
}

/* ===== Publieke intake-pagina's ===== */
body.page-public .container {
    display: block;
    max-width: 860px;
    margin: 0 auto;
    padding: 50px 24px 70px;
    min-height: auto;
}

body.page-public .header {
    display: block;
    text-align: center;
    border-bottom: none;
    margin-bottom: 36px;
    padding-bottom: 0;
}

body.page-public .header h1 {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    margin-bottom: 10px;
}

body.page-public .header p {
    color: var(--text-secondary);
    font-size: 1.02rem;
}

body.page-public .section {
    margin-bottom: 20px;
}

body.page-public .form-container {
    padding: 30px 32px;
}

/* Intake succespagina */
.success-box {
    background: var(--card-bg);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-card);
}

.checkmark {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(61, 165, 184, 0.2), rgba(34, 197, 94, 0.16));
    border: 1.5px solid rgba(34, 197, 94, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--green-light);
}

.success-box h1 {
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.success-box p {
    color: var(--text-secondary);
}

.email-highlight {
    color: var(--teal-light);
    font-weight: 600;
}

.next-steps {
    text-align: left;
    margin: 26px auto 0;
    max-width: 480px;
    background: rgba(61, 165, 184, 0.06);
    border: 1px solid rgba(61, 165, 184, 0.22);
    border-radius: 14px;
    padding: 22px 26px;
}

.next-steps h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--teal-light);
}

.next-steps ol {
    padding-left: 20px;
    color: var(--text-secondary);
}

.next-steps li {
    margin-bottom: 8px;
    font-size: 0.93rem;
}

.contact-info {
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.contact-info a {
    font-weight: 500;
}

/* ===== Interactions/Contact History ===== */
.interactions-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.add-interaction-form {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 20px;
}

.add-interaction-form h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.add-interaction-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.add-interaction-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.add-interaction-form label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.add-interaction-form input,
.add-interaction-form select,
.add-interaction-form textarea {
    padding: 8px 12px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

.add-interaction-form textarea {
    resize: vertical;
    font-family: 'Courier New', monospace;
}

.interactions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interaction-item {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 4px solid #22C55E;
    border-radius: 6px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interaction-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.interaction-header strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.interaction-notes {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== Responsive ===== */
/* Hamburgerknop: alleen zichtbaar op mobiel, JS injecteert 'm naast het
   logo (zie beheer.js) zodat er geen aparte markup nodig is op alle
   16 pagina's die de sidebar herhalen. */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-brand {
        justify-content: space-between;
        margin-bottom: 0;
    }

    .sidebar nav {
        display: none;
    }

    .sidebar.menu-open nav {
        display: flex;
        flex-direction: column;
        margin-top: 18px;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        padding: 18px;
    }

    .main {
        margin-left: 0;
        padding: 22px 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .detail-row {
        flex-direction: column;
        gap: 2px;
    }

    .detail-row .detail-label {
        flex: none;
    }

    .header h1 {
        font-size: 1.4rem;
    }
}

/* ===== Inklapbare secties (details/summary) ===== */
details.section > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    list-style: none;
}

details.section > summary::-webkit-details-marker {
    display: none;
}

details.section > summary .chevron {
    display: inline-block;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

details.section[open] > summary .chevron {
    transform: rotate(90deg);
}

details.section > summary h3,
details.section > summary .section-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

details.section > summary .section-head {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/* ===== Intake-stepper ===== */
.intake-stepper {
    margin-bottom: 22px;
}

.intake-stepper-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.intake-stepper-head .field-label {
    margin-bottom: 0;
}

.stap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.stap:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 12px;
    width: 1px;
    height: calc(100% - 6px);
    background: var(--card-border);
}

.stap-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-raised);
    border: 1.5px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.stap-afgerond .stap-dot {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.stap-body {
    flex: 1;
    min-width: 0;
}

.stap-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stap-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.stap-meta {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stap-afgerond-tekst {
    color: var(--green-light);
    font-weight: 500;
}

.stap-niet-ingepland {
    color: var(--text-muted);
    font-style: italic;
}

.stap-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.stap-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stap-form input[type="date"] {
    width: auto;
    padding: 6px 10px;
    font-size: 0.82rem;
}

/* ===== Installatie-stepper (storing) ===== */
/* Beide statustrajecten naast elkaar zolang er ruimte is; daaronder
   gestapeld met een horizontale scheiding */
.stepper-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 36px;
    align-items: start;
    margin-bottom: 18px;
}

.stepper-row .installatie-stepper {
    border-left: 1px solid var(--card-border);
    padding-left: 32px;
}

@media (max-width: 1100px) {
    .stepper-row {
        grid-template-columns: 1fr;
    }
    .stepper-row .installatie-stepper {
        border-left: none;
        padding-left: 0;
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--card-border);
    }
}

.stap-storing .stap-dot {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.stap-storing-tekst {
    color: var(--red);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Veld dat afhankelijk van een andere keuze verdwijnt (zie klantformulier) */
.verborgen {
    display: none;
}

/* ===== Sorteerbare tabelkoppen (componentenoverzicht) ===== */
th.sorteerbaar-kop {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sorteerbaar-kop:hover {
    color: var(--text-primary);
}

th.sorteerbaar-kop::after {
    content: '↕';
    margin-left: 6px;
    opacity: 0.35;
    font-size: 0.85em;
}

th.sorteerbaar-kop[data-richting='op']::after { content: '↑'; opacity: 1; }
th.sorteerbaar-kop[data-richting='af']::after { content: '↓'; opacity: 1; }

/* ===== Tabellen binnen een inklapbare sectie =====
   Twee dingen: geen tweede kaart om de eerste heen (de sectie is de kaart al,
   anders staat de tabel ingesprongen ten opzichte van zijn eigen kop), en
   vaste kolombreedtes zodat de secties onder elkaar netjes uitlijnen in plaats
   van dat elke tabel zijn eigen breedtes verzint. */
details.section > .table-container {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

table.sorteerbaar {
    table-layout: fixed;
    /* Zonder minimumbreedte worden de kolommen op een smal scherm samengeperst
       in plaats van dat de container horizontaal gaat scrollen. */
    min-width: 620px;
}

table.sorteerbaar th:nth-child(1),
table.sorteerbaar td:nth-child(1) { width: 38%; }
table.sorteerbaar th:nth-child(2),
table.sorteerbaar td:nth-child(2) { width: 12%; }
table.sorteerbaar th:nth-child(3),
table.sorteerbaar td:nth-child(3) { width: 26%; }
table.sorteerbaar th:nth-child(4),
table.sorteerbaar td:nth-child(4) { width: 16%; }

/* Vaste breedtes betekent dat een lange productnaam niet meer vanzelf ruimte
   pakt; laat hem dan afbreken in plaats van de kolom uit te rekken. */
table.sorteerbaar td { overflow-wrap: anywhere; }

/* ===== Protocollen per component ===== */
.protocol-keuze {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    width: auto;
    margin-top: 4px;
}

.protocol-keuze .checkbox-item {
    gap: 7px;
}

.protocol-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.chip-protocol {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: rgba(61, 165, 184, 0.14);
    border: 1px solid rgba(61, 165, 184, 0.3);
    color: var(--text-secondary);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Apparatenlijst per ruimte op de installatiepagina.
   Elke ruimte is een eigen tabel, en een browser rekent kolombreedtes per
   tabel uit de inhoud. Een ruimte met korte labels kreeg daardoor heel andere
   kolommen dan een met lange, en dan verspringt alles van sectie naar sectie.
   Vaste indeling met vaste breedtes zet ze over alle ruimtes op één lijn.
   Zelfde aanpak als table.sorteerbaar hierboven. */
table.apparaten {
    table-layout: fixed;
    /* Zonder minimumbreedte worden de kolommen op een smal scherm samengeperst
       in plaats van dat de container horizontaal gaat scrollen. */
    min-width: 860px;
}
table.apparaten th:nth-child(1),
table.apparaten td:nth-child(1) { width: 25%; }
table.apparaten th:nth-child(2),
table.apparaten td:nth-child(2) { width: 31%; }
table.apparaten th:nth-child(3),
table.apparaten td:nth-child(3) { width: 17%; }
table.apparaten th:nth-child(4),
table.apparaten td:nth-child(4) { width: 10%; }
table.apparaten th:nth-child(5),
table.apparaten td:nth-child(5) { width: 12%; }
table.apparaten th:nth-child(6),
table.apparaten td:nth-child(6) { width: 5%; }

/* Met een vaste indeling moet lange tekst kunnen afbreken, anders loopt een
   componentnaam of een entity-id gewoon over de kolomrand heen. */
table.apparaten th,
table.apparaten td {
    white-space: normal;
    overflow-wrap: anywhere;
}