:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#080c17;color:#f3f7ff}*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:inherit;text-decoration:none}.muted{color:#94a2bd;line-height:1.65}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#58c9ff}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.04em;font-size:20px}.brand b{color:#53c6ff}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#287bff,#27d4ee);box-shadow:0 10px 32px #168fff44;color:white;font-size:24px}.login-body{display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 50% 0,#132b50 0,transparent 45%),#080c17}.login-shell{width:min(100%,450px)}.login-shell>.brand{justify-content:center;margin-bottom:36px}.login-card,.dashboard-card{background:linear-gradient(145deg,#141d32,#101726);border:1px solid #293b58;border-radius:22px;padding:38px;box-shadow:0 24px 75px #0005}.login-card h1{font-size:36px;letter-spacing:-.055em;margin:13px 0 8px}.login-card .muted{margin:0 0 30px}.login-card form{display:flex;flex-direction:column;gap:10px}label{font-size:13px;font-weight:650;margin-top:9px}input{font:inherit;background:#0a1222;border:1px solid #33425d;border-radius:11px;padding:15px;color:#fff;outline:none}input:focus{border-color:#54bfff;box-shadow:0 0 0 3px #54bfff25}button{font:inherit;cursor:pointer}form>button:not(.logout){margin-top:15px;padding:16px;border:0;border-radius:11px;background:linear-gradient(90deg,#2784ff,#35c9e7);font-weight:800;color:white;display:flex;justify-content:space-between}.error{background:#5b2530;border:1px solid #e76c81;color:#fff;padding:12px 15px;border-radius:10px;margin-bottom:18px;font-size:14px}.footer{text-align:center;color:#697995;font-size:12px;margin-top:25px}.app-body{display:flex}.sidebar{width:255px;min-height:100vh;background:#0e1524;border-right:1px solid #23334b;padding:28px 20px;display:flex;flex-direction:column}.sidebar .brand{font-size:18px}.sidebar nav{margin-top:55px}.sidebar nav a{display:block;padding:14px;border-radius:10px;color:#a9b8d3}.sidebar nav a.active{background:#1c3152;color:#77d5ff}.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:5px;border-top:1px solid #26344b;padding-top:20px;font-size:14px}.sidebar-bottom small{color:#8d9bb6;overflow-wrap:anywhere}.logout{background:none;border:0;padding:14px 0;color:#77d5ff;text-align:left}.content{padding:70px 6vw;width:100%;max-width:1200px}.content h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.05em;margin:15px 0 10px}.dashboard-card{margin-top:45px;max-width:650px}.dashboard-card h2{font-size:24px;margin-top:20px}.status{color:#66e3ad;font-size:13px;font-weight:700}@media(max-width:700px){.app-body{display:block}.sidebar{width:100%;min-height:auto;padding:16px;gap:16px}.sidebar nav{margin:0}.sidebar-bottom{margin:0}.content{padding:42px 22px}.login-card{padding:27px}}
/* JurreVideo OS — uitbreiding agenda en navigatie */
.sidebar nav a{margin-bottom:5px}.nav-label{display:block;font-size:10px;letter-spacing:.16em;color:#627794;margin:28px 12px 10px;font-weight:800}.nav-disabled{display:block;color:#62718b;padding:12px 14px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:35px}.feature-card{display:block;background:linear-gradient(145deg,#141d32,#101726);border:1px solid #293b58;border-radius:19px;padding:27px;min-height:230px;transition:border-color .2s,transform .2s}.feature-card:hover{border-color:#4dafff;transform:translateY(-2px)}.feature-card h2{font-size:22px;display:flex;justify-content:space-between}.feature-card p{color:#94a2bd;line-height:1.55}.feature-icon{font-size:31px;color:#64c9ff}.muted-feature{opacity:.65}.pill{display:inline-block;border-radius:99px;padding:5px 10px;background:#153c41;color:#6ee5b9;font-size:11px;font-weight:750}.muted-pill{background:#202b40;color:#a3b4cf}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.primary-link,.primary-button{display:inline-block;border:0;border-radius:10px;background:linear-gradient(90deg,#2784ff,#35c9e7);padding:13px 17px;color:#fff;font-weight:800;cursor:pointer}.calendar-shell{background:#111b2d;border:1px solid #293b58;border-radius:18px;margin-top:27px;overflow:hidden}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 22px}.calendar-toolbar h2{margin:0;font-size:23px}.calendar-actions{display:flex;gap:8px}.calendar-actions a{border:1px solid #32425f;border-radius:9px;padding:8px 12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.weekday{text-align:center;color:#9fb0c9;font-size:12px;padding:12px;background:#162238;border-top:1px solid #2c3c55}.calendar-day{min-height:105px;padding:9px;border-top:1px solid #293b58;border-right:1px solid #293b58;min-width:0}.calendar-day.empty{background:#0d1422}.calendar-day.today{background:#152c42}.day-number{font-weight:750;margin-bottom:8px}.today .day-number{color:#62cfff}.event-chip{display:block;border-radius:6px;padding:5px 6px;margin:4px 0;background:#173e58;color:#a8e7ff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-chip span{opacity:.7}.type-opname{background:#173e58}.type-montage{background:#392c62;color:#d8c3ff}.type-afspraak{background:#1e463e;color:#9ff0cb}.type-deadline{background:#57322c;color:#ffd1ae}.section-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:24px}.section-grid .dashboard-card{margin-top:0;max-width:none;padding:25px}.event-form{display:flex;flex-direction:column;gap:9px}.event-form input,.event-form select,.event-form textarea{width:100%;font:inherit;color:#fff;background:#0a1222;border:1px solid #33425d;border-radius:10px;padding:12px}.event-form label{margin-top:9px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-two>div{min-width:0}.form-two label{display:block;margin-bottom:8px}.event-form .primary-button{margin-top:12px}.event-detail{padding:16px 0;border-bottom:1px solid #293b58}.event-detail h3{margin:12px 0 4px}.event-detail .small,.small{font-size:13px}.event-detail details{margin:15px 0}.event-detail summary{color:#69cbff;cursor:pointer}.event-detail .notes{white-space:normal}.delete-button{border:0;background:transparent;color:#ff9b9b;padding:7px 0;cursor:pointer}.success-note{background:#163b30;color:#a3f3cb;padding:12px;border-radius:10px;margin:14px 0}@media(max-width:900px){.section-grid{grid-template-columns:1fr}}@media(max-width:600px){.calendar-day{min-height:75px;padding:5px}.weekday{padding:8px 0}.event-chip{font-size:9px;padding:3px}.calendar-toolbar{padding:14px}.calendar-toolbar h2{font-size:19px}.form-two{grid-template-columns:1fr}.content{padding:30px 15px}}

/* JurreVideo OS — Mail */
.mail-page .dashboard-card {
    max-width: 100%;
    margin-top: 24px;
    padding: 28px;
}

.mail-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.mail-accounts a {
    display: inline-block;
    padding: 12px 16px;
    border: 1px solid #334762;
    border-radius: 10px;
    color: #c0cee2;
    overflow-wrap: anywhere;
}

.mail-accounts a.active {
    background: linear-gradient(90deg,#2784ff,#35c9e7);
    color: white;
    border-color: transparent;
    font-weight: 800;
}

.mail-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mail-table th,
.mail-table td {
    padding: 16px 12px;
    text-align: left;
    border-bottom: 1px solid #293b58;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.mail-table th {
    color: #94a2bd;
    font-size: 12px;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) { width: 32%; }

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) { width: 48%; }

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) { width: 20%; }

.mail-table td {
    font-size: 14px;
}

.mail-table tr:hover td {
    background: #1a2941;
}

@media(max-width:700px) {
    .mail-table th:nth-child(3),
    .mail-table td:nth-child(3) {
        display: none;
    }

    .mail-table th:nth-child(1),
    .mail-table td:nth-child(1) { width: 42%; }

    .mail-table th:nth-child(2),
    .mail-table td:nth-child(2) { width: 58%; }
}

/* Aanklikbare e-mailonderwerpen */
.mail-subject {
    color: #78d4ff;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mail-subject:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* JurreVideo OS — E-mail lezen */
.mail-page {
    width: 100%;
}

.mail-page .dashboard-card {
    max-width: 950px;
    padding: 36px 42px;
}

.mail-page h1 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mail-page .mail-body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    color: #e1e8f5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 75ch;
}

@media (max-width: 700px) {
    .mail-page .dashboard-card {
        padding: 22px;
    }
}

/* Opmaak van geopende HTML-mails */
.mail-html {
    white-space: normal;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.mail-html p {
    margin: 0 0 16px;
}

.mail-html h1,
.mail-html h2,
.mail-html h3 {
    margin: 24px 0 12px;
    line-height: 1.3;
}

.mail-html a {
    color: #78d4ff;
    text-decoration: underline;
}

.mail-html table {
    max-width: 100%;
    border-collapse: collapse;
}

.mail-html td,
.mail-html th {
    padding: 8px;
    vertical-align: top;
}

.mail-html blockquote {
    border-left: 3px solid #477da9;
    padding-left: 16px;
    margin-left: 0;
    color: #b9c9de;
}

/* JurreVideo OS — Verbeterd e-mailleesvenster */
.content:has(.mail-page) {
    max-width: none;
    width: 100%;
}

.mail-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.mail-page .dashboard-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-top: 22px;
    padding: 36px 44px;
}

.mail-page .mail-body {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.7;
}

.mail-page .mail-html {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: normal;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}

.mail-page .mail-html table {
    max-width: 100%;
}

.mail-page .mail-html h1,
.mail-page .mail-html h2,
.mail-page .mail-html h3 {
    font-weight: 700;
}

@media (max-width: 700px) {
    .mail-page .dashboard-card {
        padding: 22px 18px;
    }
}

/* Afbeeldingen in e-mails */
.mail-images-button {
    margin: 0 0 10px;
    padding: 11px 18px;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mail-images-button:hover {
    background: #1d4ed8;
}

.mail-html img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
}

.mail-html img:not([src]) {
    display: none;
}

/* JurreVideo OS — E-mail opstellen */
.mail-page form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mail-page form label {
    margin-top: 8px;
    font-weight: 600;
}

.mail-page form input,
.mail-page form select,
.mail-page form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #40516d;
    border-radius: 10px;
    background: #152238;
    color: #fff;
    font: inherit;
}

.mail-page form textarea {
    resize: vertical;
    line-height: 1.6;
}

.mail-send-button {
    align-self: flex-start;
    margin-top: 12px;
    padding: 13px 22px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.mail-send-button:hover {
    background: #1d4ed8;
}

/* Knop Nieuwe e-mail */
.mail-compose-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 24px;
    padding: 13px 20px;
    border-radius: 11px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s ease;
}

.mail-compose-button:hover {
    background: #1d4ed8;
    color: #fff;
}

/* JurreVideo Mail — verbeterde indeling */

.mail-page,
body:has(.mail-overview) main {
    max-width: 1250px;
}

.mail-overview {
    width: 100%;
    max-width: 1100px;
}

.mail-overview .dashboard-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.mail-account-buttons,
.mail-folder-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.mail-account-buttons a,
.mail-folder-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid #40506a;
    border-radius: 10px;
    text-decoration: none;
    color: #f1f5f9;
    white-space: nowrap;
}

.mail-account-buttons a.primary-link,
.mail-folder-buttons a.primary-link {
    background: linear-gradient(110deg, #2875eb, #36c4da);
    border-color: transparent;
    color: white;
    font-weight: 700;
}

.mail-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.mail-table th,
.mail-table td {
    padding: 15px 12px;
    text-align: left;
    vertical-align: middle;
}

.mail-table th:first-child,
.mail-table td:first-child {
    width: 31%;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 45%;
}

.mail-table th:last-child,
.mail-table td:last-child {
    width: 24%;
    white-space: nowrap;
}

.mail-table td {
    overflow-wrap: anywhere;
}

.mail-table tbody tr {
    border-top: 1px solid #334155;
}

.mail-table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}


/* JurreVideo Mail — zoekfunctie */
.mail-search {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.mail-search input {
    width: 100%;
    max-width: 540px;
    padding: 14px 18px;
    background: #111827;
    border: 1px solid #40506a;
    border-radius: 12px;
    color: #fff;
    font: inherit;
}

.mail-search input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

.mail-search input::placeholder {
    color: #94a3b8;
}


/* Mail: herstel- en verwijderknoppen naast elkaar */
.mail-trash-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.mail-trash-actions form {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.mail-trash-actions button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* JurreVideo Mail: vier overzichtelijke tabelkolommen */
.mail-table {
    min-width: 850px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 25% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 38% !important;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 19% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 18% !important;
    min-width: 115px;
    white-space: nowrap;
}

.mail-table td:nth-child(4) > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.mail-table td:nth-child(4) form {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: 40px !important;
    margin: 0 !important;
}

/* Rode verwijderknop, even groot als herstelknop */
.mail-table .mail-list-permanent-button {
    background: #dc2626 !important;
    color: #ffffff !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.mail-table .mail-list-permanent-button:hover {
    background: #b91c1c !important;
}

/* Bevestigingspagina definitief verwijderen */
.mail-confirm-page {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0f172a;
    color: #fff;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.mail-confirm-card {
    width: 100%;
    max-width: 460px;
    padding: 32px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    text-align: center;
}

.mail-confirm-card h1 {
    margin-top: 0;
    font-size: 24px;
}

.mail-confirm-card p {
    color: #cbd5e1;
    line-height: 1.6;
}

.mail-confirm-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.mail-confirm-button {
    display: inline-block;
    padding: 13px 18px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.mail-confirm-cancel {
    background: #475569;
}

.mail-confirm-delete {
    background: #dc2626;
}

/* Bulk mail selectie */
.mail-bulk-checkbox,
#mail-bulk-select-all {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 auto !important;
    cursor: pointer;
}

#mail-bulk-toolbar {
    transition: all .2s ease;
}


.mail-bulk-delete-button {
    background: #dc3545;
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    font-weight: 700;
    cursor: pointer;
}

.mail-bulk-delete-button:hover {
    background: #b91c1c;
}


.mail-bulk-transfer-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.mail-bulk-transfer-form select {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
}

.mail-bulk-transfer-button {
    min-height: 40px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.mail-bulk-transfer-button:hover {
    background: #1d4ed8;
}


.mail-bulk-confirmation {
    max-width: 540px;
    margin: 10vh auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.mail-bulk-confirmation h1 {
    margin-top: 0;
}

.mail-bulk-confirmation form {
    margin: 24px 0;
}


.mail-bulk-confirmation {
    max-width: 540px;
    margin: 10vh auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.mail-bulk-confirmation h1 {
    margin-top: 0;
}

.mail-bulk-confirmation form {
    margin: 24px 0;
}


.mail-bulk-confirmation {
    max-width: 540px;
    margin: 10vh auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.mail-bulk-confirmation h1 {
    margin-top: 0;
}

.mail-bulk-confirmation form {
    margin: 24px 0;
}


.mail-bulk-confirmation {
    max-width: 540px;
    margin: 10vh auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.mail-bulk-confirmation h1 {
    margin-top: 0;
}

.mail-bulk-confirmation form {
    margin: 24px 0;
}


.mail-bulk-trash-form {
    margin: 0;
}

.mail-bulk-restore-button {
    padding: 11px 16px;
    border: 0;
    border-radius: 9px;
    background: #15803d;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.mail-bulk-restore-button:hover {
    background: #166534;
}


.mail-bulk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
}

.mail-bulk-toolbar > strong {
    flex-basis: 100%;
}

.mail-bulk-action-form {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
}

.mail-bulk-toolbar .mail-bulk-transfer-form {
    display: inline-flex;
    align-items: center;
    width: auto;
    gap: 10px;
    margin: 0;
}


.mail-bulk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
}

.mail-bulk-toolbar > strong {
    flex-basis: 100%;
}

.mail-bulk-toolbar .mail-bulk-action-form,
.mail-bulk-toolbar .mail-bulk-transfer-form {
    display: inline-flex;
    align-items: center;
    width: auto;
    gap: 10px;
    margin: 0;
}


.mail-message-limit-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.mail-message-limit-form label {
    font-weight: 600;
}

.mail-message-limit-form select {
    padding: 10px 12px;
    border: 1px solid #64748b;
    border-radius: 9px;
    background: #1e293b;
    color: #fff;
}

.mail-message-limit-form button {
    padding: 10px 16px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail — breed mailoverzicht */

.mail-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.mail-overview .dashboard-card {
    max-width: none;
}

.mail-table-wrap {
    width: 100%;
    max-width: none;
    overflow-x: auto;
}

.mail-table {
    width: 100%;
    min-width: 1000px;
    table-layout: fixed;
}

.mail-table th:nth-child(1),
.mail-table td:nth-child(1) {
    width: 27% !important;
}

.mail-table th:nth-child(2),
.mail-table td:nth-child(2) {
    width: 43% !important;
    overflow-wrap: anywhere;
}

.mail-table th:nth-child(3),
.mail-table td:nth-child(3) {
    width: 16% !important;
}

.mail-table th:nth-child(4),
.mail-table td:nth-child(4) {
    width: 14% !important;
    min-width: 115px;
}

.mail-table td:nth-child(1) {
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .mail-table {
        min-width: 1000px;
    }
}


/* JurreVideo Mail: volledige beschikbare schermbreedte */

.content:has(.mail-overview) {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    padding: 35px 3vw;
}

.content:has(.mail-overview) .mail-overview {
    width: 100%;
    max-width: none !important;
}

.content:has(.mail-overview) .dashboard-card {
    width: 100%;
    max-width: none !important;
}

.content:has(.mail-overview) .mail-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.content:has(.mail-overview) .mail-table {
    width: 100%;
    min-width: 1100px;
    table-layout: fixed;
}

/* Meer ruimte voor volledige afzenders en onderwerpen */

.content:has(.mail-overview) .mail-table th:nth-child(1),
.content:has(.mail-overview) .mail-table td:nth-child(1) {
    width: 34% !important;
}

.content:has(.mail-overview) .mail-table th:nth-child(2),
.content:has(.mail-overview) .mail-table td:nth-child(2) {
    width: 39% !important;
}

.content:has(.mail-overview) .mail-table th:nth-child(3),
.content:has(.mail-overview) .mail-table td:nth-child(3) {
    width: 15% !important;
}

.content:has(.mail-overview) .mail-table th:nth-child(4),
.content:has(.mail-overview) .mail-table td:nth-child(4) {
    width: 12% !important;
    min-width: 115px;
}

@media (max-width: 700px) {
    .content:has(.mail-overview) {
        padding: 22px 15px;
    }
}


/* Gmail-achtige gelezen/ongelezen-status */

.mail-unread-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

.mail-row-unread {
    background: rgba(56,189,248,.055);
}

.mail-row-unread td:first-child span:last-child {
    font-weight: 700;
}

.mail-row-read td:first-child span:last-child {
    font-weight: 400;
}


/* Ongelezen e-mail */
.mail-unread-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
    vertical-align: middle;
}

.mail-table td:first-child strong {
    font-weight: 750;
}


/* Rode achtergrond voor ongelezen e-mails */
.mail-table tbody tr:has(.mail-unread-dot) {
    background: #48242e !important;
    border-left: 4px solid #ef4444;
}

.mail-table tbody tr:has(.mail-unread-dot) td {
    background: transparent !important;
}

.mail-table tbody tr:has(.mail-unread-dot):hover {
    background: #62303c !important;
}

/* Gelezen e-mails behouden hun normale achtergrond */
.mail-table tbody tr:not(:has(.mail-unread-dot)) {
    background: transparent;
}


/* JurreVideo OS - Klanten */
.customers-page {
    width: 100%;
    max-width: 1500px;
}

.customers-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.customers-heading h1 {
    margin-bottom: 6px;
}

.customers-refresh {
    display: inline-block;
    padding: 11px 17px;
    border-radius: 9px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.customers-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 28px 0 20px;
}

#customer-search {
    width: min(100%, 430px);
    padding: 13px 16px;
    border: 1px solid #40506a;
    border-radius: 10px;
    background: #172237;
    color: #fff;
}

.customers-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.customers-table {
    width: 100%;
    min-width: 740px;
    border-collapse: collapse;
}

.customers-table th,
.customers-table td {
    padding: 17px 14px;
    text-align: left;
    border-bottom: 1px solid #334155;
}

.customers-table th {
    color: #94a3b8;
    font-size: 13px;
}

.customers-table td {
    overflow-wrap: anywhere;
}

.customers-table a {
    color: #69cbff;
}

.customers-table tbody tr:hover {
    background: rgba(255,255,255,.045);
}

.customers-table tbody tr[hidden] {
    display: none;
}

@media (max-width: 600px) {
    #customer-search {
        width: 100%;
    }
}

/* Klantenoverzicht volledige breedte */
.customers-page {
    width: 100%;
    max-width: 1400px;
}

.customers-page .dashboard-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.customers-table {
    width: 100%;
    min-width: 850px;
}

.customers-table th,
.customers-table td {
    padding: 16px 18px;
}

.customers-table th:nth-child(1) {
    width: 120px;
}

.customers-table th:nth-child(2) {
    width: 32%;
}

.customers-table th:nth-child(3) {
    width: 25%;
}

/* Klanten: volledige beschikbare schermbreedte */
.content:has(.customers-page) {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    padding: 35px 3vw;
}

.content:has(.customers-page) .customers-page {
    width: 100%;
    max-width: none !important;
    min-width: 0;
}

.content:has(.customers-page) .dashboard-card {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}

.content:has(.customers-page) .customers-table-wrap {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 700px) {
    .content:has(.customers-page) {
        padding: 22px 15px;
    }
}

/* Betaalstatussen klanten */
.customers-table {
    min-width: 1250px;
}

.customer-status-badge {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--badge-color);
    color: var(--badge-color);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Duidelijk zichtbare betaalstatussen */
.customers-page .customer-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--badge-color);
    background: color-mix(
        in srgb,
        var(--badge-color) 14%,
        transparent
    );
    color: var(--badge-color) !important;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Klanten: vaste statuskleuren */
.customers-page .customer-status-badge {
    display: inline-block !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.customers-page .status-0 {
    background: #14532d !important;
    color: #86efac !important;
    border: 1px solid #22c55e !important;
}

.customers-page .status-empty {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border: 1px solid #64748b !important;
}

.customers-page .status-1 {
    background: #713f12 !important;
    color: #fde047 !important;
    border: 1px solid #eab308 !important;
}

.customers-page .status-2 {
    background: #78350f !important;
    color: #fbbf24 !important;
    border: 1px solid #f59e0b !important;
}

.customers-page .status-3 {
    background: #7c2d12 !important;
    color: #fdba74 !important;
    border: 1px solid #f97316 !important;
}

.customers-page .status-4,
.customers-page .status-5 {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border: 1px solid #ef4444 !important;
}

/* JurreVideo OS - Klantdossier */

.content:has(.customer-detail) {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    padding: 35px 3vw;
}

.customer-detail {
    width: 100%;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.customer-detail > p:first-child {
    margin: 0 0 4px;
}

.customer-detail > p:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
}

.customer-detail > p:first-child a:hover {
    color: #dbeafe;
}

.customer-detail .dashboard-card {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 18px;
}

.customer-detail h1 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.8px;
}

.customer-detail h2 {
    margin: 0 0 24px;
    font-size: 21px;
    letter-spacing: -0.3px;
}

/* Vier statistiekkaarten */

.customer-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.customer-detail-stats > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid #334155;
    border-radius: 14px;
    background: #172237;
}

.customer-detail-stats span {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}

.customer-detail-stats strong {
    color: #f8fafc;
    font-size: clamp(19px, 2vw, 28px);
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* Contactgegevens */

.customer-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

.customer-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 20px 0;
    border-bottom: 1px solid #334155;
}

.customer-detail-grid span {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}

.customer-detail-grid strong {
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 550;
    overflow-wrap: anywhere;
}

/* Facturen en offertes */

.customer-detail .customers-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #334155;
    border-radius: 12px;
}

.customer-detail .customers-table {
    width: 100%;
    min-width: 720px;
}

.customer-detail .customers-table th {
    padding: 16px 20px;
    background: #172237;
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customer-detail .customers-table td {
    padding: 18px 20px;
    color: #e2e8f0;
    font-size: 14px;
}

.customer-detail .customers-table tbody tr:last-child td {
    border-bottom: none;
}

.customer-detail .customers-table tbody tr:hover {
    background: rgba(255,255,255,0.035);
}

/* Mobiele weergave */

@media (max-width: 1050px) {
    .customer-detail-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .content:has(.customer-detail) {
        padding: 20px 15px;
    }

    .customer-detail .dashboard-card {
        padding: 22px 18px;
    }

    .customer-detail-stats {
        gap: 10px;
    }

    .customer-detail-stats > div {
        padding: 16px;
    }

    .customer-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Klantdossier: facturentabel netjes uitlijnen */

.customer-detail .customers-table {
    min-width: 900px;
    width: 100%;
    table-layout: auto;
}

.customer-detail .customers-table th,
.customer-detail .customers-table td {
    white-space: nowrap;
    padding: 16px 14px;
}

.customer-detail .customers-table th:nth-child(n+3),
.customer-detail .customers-table td:nth-child(n+3) {
    text-align: right;
}

.customer-detail .customers-table th:first-child,
.customer-detail .customers-table td:first-child {
    width: 130px;
}

.customer-detail .customers-table th:nth-child(2),
.customer-detail .customers-table td:nth-child(2) {
    width: 115px;
}

.customer-detail .customers-table th:nth-child(n+3) {
    width: 130px;
}

.customer-detail .customers-table td strong {
    color: #f8fafc;
    font-weight: 750;
}

/* Klantdossier: factuurstatus per regel */

.customer-detail .customers-table tr.invoice-draft td {
    background: #293445 !important;
}

.customer-detail .customers-table tr.invoice-open td {
    background: #46391e !important;
}

.customer-detail .customers-table tr.invoice-reminder td {
    background: #56321f !important;
}

.customer-detail .customers-table tr.invoice-demand td {
    background: #58262d !important;
}

.customer-detail .customers-table tr.invoice-paid td {
    background: #183b30 !important;
}

.customer-detail .customers-table .invoice-status-label {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.customer-detail .invoice-draft .invoice-status-label {
    background: #475569;
    color: #f1f5f9;
}

.customer-detail .invoice-open .invoice-status-label {
    background: #854d0e;
    color: #fef08a;
}

.customer-detail .invoice-reminder .invoice-status-label {
    background: #9a3412;
    color: #ffedd5;
}

.customer-detail .invoice-demand .invoice-status-label {
    background: #991b1b;
    color: #fee2e2;
}

.customer-detail .invoice-paid .invoice-status-label {
    background: #166534;
    color: #dcfce7;
}

.customer-detail .customers-table tr[class^="invoice-"]:hover td {
    filter: brightness(1.18);
}


/* Klantdossier: gekleurde offertestatussen */

.customer-detail .customers-table tr.quote-draft td {
    background: #293445 !important;
}

.customer-detail .customers-table tr.quote-open td {
    background: #46391e !important;
}

.customer-detail .customers-table tr.quote-expired td {
    background: #56321f !important;
}

.customer-detail .customers-table tr.quote-accepted td {
    background: #183b30 !important;
}

.customer-detail .customers-table tr.quote-declined td {
    background: #58262d !important;
}

.customer-detail .quote-status-label {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.customer-detail .quote-draft .quote-status-label {
    background: #475569;
    color: #f1f5f9;
}

.customer-detail .quote-open .quote-status-label {
    background: #854d0e;
    color: #fef08a;
}

.customer-detail .quote-expired .quote-status-label {
    background: #9a3412;
    color: #ffedd5;
}

.customer-detail .quote-accepted .quote-status-label {
    background: #166534;
    color: #dcfce7;
}

.customer-detail .quote-declined .quote-status-label {
    background: #991b1b;
    color: #fee2e2;
}

.customer-detail .quote-neutral .quote-status-label {
    background: #475569;
    color: #f1f5f9;
}
/* Klantdossier: referenties en uitgebreide bedragen */

.customer-detail .customers-table {
    min-width: 1050px;
}

.customer-detail .customers-table th,
.customer-detail .customers-table td {
    white-space: nowrap;
}

.customer-detail .customers-table th:nth-child(3),
.customer-detail .customers-table td:nth-child(3) {
    text-align: left;
    min-width: 150px;
}

.customer-detail .customers-table td:nth-child(3) {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Klantdossier: aanklikbare documenten */

.customer-detail .customer-document-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #93c5fd !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.customer-detail .customer-document-link:hover {
    color: #dbeafe !important;
    text-decoration: underline;
}

/* Klantdossier: zoeken en filteren */

.customer-table-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.customer-table-controls input,
.customer-table-controls select {
    min-height: 44px;
    padding: 11px 15px;
    background: #172237;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #f1f5f9;
    font: inherit;
}

.customer-table-controls input {
    flex: 1 1 300px;
    min-width: 180px;
}

.customer-table-controls select {
    flex: 0 1 230px;
    cursor: pointer;
}

.customer-table-controls input:focus,
.customer-table-controls select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.12);
}

.customer-table-controls input::placeholder {
    color: #94a3b8;
}

@media (max-width: 650px) {
    .customer-table-controls input,
    .customer-table-controls select {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Klikbare factuurnummers */
.invoice-detail-link {
    color: #8ed0ff;
    font-weight: 750;
    text-decoration: none;
}

.invoice-detail-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* JURREVIDEO OS — FACTUURDETAILS */

.invoice-detail {
    width: 100%;
    max-width: 1120px;
    margin: 28px 0 70px;
}

.invoice-detail h1 {
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -.04em;
    margin: 0 0 10px;
}

.invoice-detail > p {
    color: #a5b4cb;
    margin-bottom: 30px;
}

.invoice-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8ed0ff;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 25px;
}

.invoice-back:hover {
    color: #fff;
}

.invoice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.invoice-panel {
    background: #1c273b;
    border: 1px solid #30415c;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.invoice-grid .invoice-panel {
    margin-bottom: 0;
}

.invoice-panel h2 {
    font-size: 19px;
    margin: 0 0 18px;
    letter-spacing: -.02em;
}

.invoice-field {
    padding: 14px 0;
    border-bottom: 1px solid #30415c;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.invoice-field:last-child {
    border-bottom: 0;
}

.invoice-field small {
    display: block;
    color: #9fb0c9;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 7px;
}

.invoice-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.invoice-lines {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

.invoice-lines th {
    padding: 15px 12px;
    color: #a6b8d1;
    background: #152033;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
}

.invoice-lines td {
    padding: 19px 12px;
    border-bottom: 1px solid #30415c;
    font-size: 14px;
}

.invoice-lines tbody tr:hover {
    background: #24334b;
}

.invoice-lines th:first-child {
    border-radius: 9px 0 0 9px;
}

.invoice-lines th:last-child {
    border-radius: 0 9px 9px 0;
}

@media (max-width: 750px) {
    .invoice-grid {
        grid-template-columns: 1fr;
    }

    .invoice-panel {
        padding: 20px;
    }

    .invoice-detail {
        margin-top: 20px;
    }
}

/* JurreVideo OS - Conceptfactuur bewerken */
.edit-page {
    width: 100%;
    max-width: 1100px;
    margin: 25px 0 70px;
}
.edit-page h1 {
    margin: 20px 0 8px;
}
.edit-page h2 {
    margin: 0 0 20px;
    font-size: 20px;
}
.edit-panel {
    display: block;
    background: #1c273b;
    border: 1px solid #30415c;
    border-radius: 16px;
    padding: 25px;
    margin: 20px 0;
}
.edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.edit-page label {
    display: block;
    color: #b8c8de;
    font-size: 13px;
    font-weight: 650;
    margin: 15px 0 8px;
}
.edit-page input,
.edit-page textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #0e1726;
    color: #fff;
    border: 1px solid #40516a;
    border-radius: 10px;
    padding: 12px;
    font: inherit;
}
.edit-page textarea {
    min-height: 90px;
    resize: vertical;
}
.edit-page input[readonly] {
    opacity: .7;
}
.edit-line {
    display: grid;
    grid-template-columns: 2fr .7fr 1fr .7fr;
    gap: 15px;
    padding: 15px 0 25px;
    border-bottom: 1px solid #30415c;
}
.edit-notice {
    display: block;
    padding: 16px 20px;
    margin: 22px 0;
    border: 1px solid #806333;
    border-radius: 12px;
    background: #493a1e;
    color: #ffe0a0;
}
@media (max-width: 750px) {
    .edit-grid,
    .edit-line {
        grid-template-columns: 1fr;
    }
    .edit-panel {
        padding: 18px;
    }
}


/* Productkeuze en factuurregels */
.product-toolbar {
    display:flex; gap:12px; align-items:center;
    flex-wrap:wrap; margin:22px 0;
}
.product-btn {
    background:#2783ce; color:white; border:0;
    border-radius:9px; padding:12px 17px;
    cursor:pointer; font:inherit; font-weight:700;
}
.product-btn:hover {background:#3999e4}
.product-remove {
    background:transparent; color:#ff9d9d;
    border:1px solid #80505b; border-radius:8px;
    padding:9px; cursor:pointer; margin-top:12px;
}
.product-row {
    padding:20px 0; border-bottom:1px solid #40516a;
}
.product-row-grid {
    display:grid;
    grid-template-columns:1.4fr 2fr .65fr 1fr .8fr;
    gap:12px; align-items:start;
}
.edit-page select {
    display:block; width:100%; box-sizing:border-box;
    background:#0e1726; color:#fff;
    border:1px solid #40516a; border-radius:10px;
    padding:12px; font:inherit;
}
.product-row-total {
    margin-top:12px; color:#b8c8de;
    text-align:right;
}
.product-totals {
    margin:22px 0 0 auto; max-width:350px;
    border-top:1px solid #40516a; padding-top:15px;
}
.product-totals div {
    display:flex; justify-content:space-between;
    gap:15px; margin:10px 0;
}
.product-totals .grand-total {
    border-top:1px solid #40516a;
    padding-top:13px; font-weight:800;
}
@media(max-width:900px) {
    .product-row-grid {grid-template-columns:1fr 1fr}
}
@media(max-width:550px) {
    .product-row-grid {grid-template-columns:1fr}
}


/* WEFACT SINGLE ROW V1 */
.edit-page {
    max-width: 1500px;
    width: 100%;
}

#product-rows .product-row {
    overflow-x: auto;
    padding: 16px 0;
}

#product-rows .product-row-grid {
    display: grid;
    min-width: 1120px;
    grid-template-columns:
        130px 75px 165px minmax(250px, 1fr)
        95px 115px 125px;
    grid-template-areas:
        "date quantity product description tax price total"
        ". . discount discount suffix suffix .";
    gap: 12px;
    align-items: start;
}

#product-rows .product-row-grid > :nth-child(1) {
    grid-area: product;
}
#product-rows .product-row-grid > :nth-child(2) {
    grid-area: description;
}
#product-rows .product-row-grid > :nth-child(3) {
    grid-area: quantity;
}
#product-rows .product-row-grid > :nth-child(4) {
    grid-area: price;
}
#product-rows .product-row-grid > :nth-child(5) {
    grid-area: tax;
}
#product-rows .product-row-grid > :nth-child(6) {
    grid-area: date;
}
#product-rows .product-row-grid > :nth-child(7) {
    grid-area: discount;
}
#product-rows .product-row-grid > :nth-child(8) {
    grid-area: suffix;
}

#product-rows .product-row-total {
    grid-area: total;
    margin-top: 0;
    padding-top: 29px;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

#product-rows .product-row-total::before {
    content: "Regeltotaal";
    display: block;
    margin-bottom: 8px;
    color: #b8c8de;
    font-size: 12px;
    font-weight: 600;
}

#product-rows .product-row-grid textarea {
    min-height: 45px;
}

#product-rows .product-remove {
    margin-top: 8px;
}

/* FULL WIDTH INVOICE EDITOR V1 */

/* Gebruik de volledige beschikbare dashboardbreedte */
body:has(.edit-page) main,
body:has(.edit-page) .main-content,
body:has(.edit-page) .content,
body:has(.edit-page) .page-content {
    max-width: none !important;
    width: auto;
}

body:has(.edit-page) .edit-page {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
}

/* Geen horizontale schuifbalk bij factuurregels */
#product-rows .product-row {
    overflow: visible;
}

#product-rows .product-row-grid {
    min-width: 0;
    width: 100%;
    grid-template-columns:
        minmax(105px, 125px)
        minmax(65px, 75px)
        minmax(135px, 170px)
        minmax(200px, 1fr)
        minmax(75px, 90px)
        minmax(95px, 110px)
        minmax(90px, 110px);
    column-gap: 10px;
}

#product-rows .product-row-grid > div {
    min-width: 0;
}

#product-rows .product-row-grid input,
#product-rows .product-row-grid select,
#product-rows .product-row-grid textarea {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

#product-rows .product-row-grid textarea {
    min-height: 46px;
}

/* Op kleinere schermen mogen de velden teruglopen */
@media (max-width: 1200px) {
    #product-rows .product-row-grid {
        grid-template-columns:
            125px 75px 155px minmax(180px, 1fr);
        grid-template-areas:
            "date quantity product description"
            "tax price total total"
            "discount discount suffix suffix";
    }
}

@media (max-width: 700px) {
    #product-rows .product-row-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "date quantity"
            "product product"
            "description description"
            "tax price"
            "total total"
            "discount suffix";
    }
}

/* INVOICE WIDE LAYOUT V2 */

/* Breek uit de smalle inhoudskolom */
body:has(.edit-page) .edit-page {
    width: calc(100vw - 260px) !important;
    max-width: 1700px !important;
    box-sizing: border-box;
}

/* Gebruik alle ruimte voor de factuurregels */
body:has(.edit-page) #product-rows .product-row {
    overflow: visible;
}

body:has(.edit-page) #product-rows .product-row-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns:
        125px 70px 175px minmax(230px, 1fr)
        85px 115px 105px;
    grid-template-areas:
        "date quantity product description tax price total"
        "discount discount discount suffix suffix . .";
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
}

body:has(.edit-page) #product-rows .product-row-grid
> :nth-child(7) {
    width: 150px;
    max-width: 100%;
}

body:has(.edit-page) #product-rows .product-row-grid
> :nth-child(8) {
    width: 110px;
    max-width: 100%;
}

body:has(.edit-page) #product-rows .product-row-grid
> :nth-child(2) textarea {
    min-height: 46px;
}

body:has(.edit-page) #product-rows .product-row-total {
    padding-top: 28px;
    text-align: right;
}

/* Op smallere schermen een nette indeling zonder schuifbalk */
@media (max-width: 1350px) {
    body:has(.edit-page) .edit-page {
        width: calc(100vw - 220px) !important;
    }

    body:has(.edit-page) #product-rows .product-row-grid {
        grid-template-columns:
            125px 70px 175px minmax(180px, 1fr);
        grid-template-areas:
            "date quantity product description"
            "tax price total total"
            "discount discount suffix suffix";
    }
}

@media (max-width: 750px) {
    body:has(.edit-page) .edit-page {
        width: 100% !important;
    }

    body:has(.edit-page) #product-rows .product-row-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "date quantity"
            "product product"
            "description description"
            "tax price"
            "total total"
            "discount suffix";
    }
}

/* JURREVIDEO GLOBAL INVOICE DISCOUNT V1 */

#product-rows .product-row-grid {
    grid-template-columns:
        125px 70px 175px minmax(230px, 1fr)
        85px 115px 105px !important;
    grid-template-areas:
        "date quantity product description tax price total" !important;
}

#product-rows .product-row-total {
    grid-area: total;
    padding-top: 28px;
    text-align: right;
}

.invoice-global-discount {
    max-width: 300px;
    margin: 20px 0 15px auto;
}

.invoice-global-discount label {
    display: block;
    margin-bottom: 8px;
    color: #b8c8de;
    font-weight: 650;
}

.invoice-global-discount input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1350px) {
    #product-rows .product-row-grid {
        grid-template-columns:
            125px 70px 175px minmax(180px, 1fr) !important;
        grid-template-areas:
            "date quantity product description"
            "tax price total total" !important;
    }
}

@media (max-width: 750px) {
    #product-rows .product-row-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "date quantity"
            "product product"
            "description description"
            "tax price"
            "total total" !important;
    }
}

/* JURREVIDEO: NETTE FACTUURREGELS EN TOTALEN */

#product-rows .product-row-grid {
    display: grid !important;
    grid-template-columns:
        160px 65px 145px minmax(180px, 1fr)
        80px 115px 110px !important;
    grid-template-areas:
        "date quantity product description tax price total" !important;
    gap: 10px !important;
    align-items: start !important;
}

#product-rows .product-row-grid input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px;
}

#product-rows .product-row-total {
    grid-area: total !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    text-align: right !important;
    white-space: nowrap;
    font-weight: 700;
}

#product-rows .product-row-total::before {
    content: "Regeltotaal";
    display: block;
    margin-bottom: 12px;
    color: #b8c8de;
    font-size: 11px;
    font-weight: 600;
}

.jurre-extra-totals {
    max-width: 280px;
    margin: 0 0 10px auto;
    padding: 12px 0;
    border-bottom: 1px solid #42516a;
}

.jurre-extra-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

.jurre-extra-totals strong {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    #product-rows .product-row-grid {
        grid-template-columns:
            160px 65px 145px minmax(180px, 1fr) !important;
        grid-template-areas:
            "date quantity product description"
            "tax price total total" !important;
    }
}

@media (max-width: 650px) {
    #product-rows .product-row-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "date quantity"
            "product product"
            "description description"
            "tax price"
            "total total" !important;
    }
}