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

:root {
    --primary: #1f5f8b;
    --primary-dark: #163f5e;
    --secondary: #0f9f66;
    --danger: #d14343;
    --warning: #c98318;
    --dark: #1d2b3a;
    --medium: #4f6277;
    --light: #f2f5f9;
    --border: #c9d4df;
    --surface: #ffffff;
    --muted: #7f90a4;
    --accent-cyan: #2980b9;
}

body {
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    background: #edf2f7;
    min-height: 100vh;
    padding: 16px;
    color: var(--dark);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

.header {
    background: var(--surface);
    padding: 16px 22px;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(13, 24, 40, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.header-compact {
    padding-top: 11px;
    padding-bottom: 11px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.logo-text h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
}

.app-version {
    margin-left: 10px;
    font-size: 13px;
    color: #7a8794;
    font-weight: 500;
}

.logo-text p {
    font-size: 12px;
    color: var(--medium);
    font-weight: 500;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-tabs-compact {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.nav-tab {
    padding: 9px 2px 11px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #91a1b4;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    opacity: 0.92;
}

.nav-tab:hover {
    color: #6e8196;
    opacity: 1;
}

.nav-tab.active {
    color: #2d4157;
    border-bottom-color: var(--accent-cyan);
    font-weight: 600;
    opacity: 1;
}

.nav-tab-beheer {
    color: #9f6267;
}

.nav-tab-beheer:hover {
    color: #85484f;
}

.nav-tab-beheer.active {
    color: #76363d;
    border-bottom-color: #b85863;
    box-shadow: inset 0 -1px 0 rgba(184, 88, 99, 0.12);
}

.nav-tab-android {
    color: #4f7a2b;
}

.nav-tab-android:hover {
    color: #3d641d;
}

.nav-tab-android.active {
    color: #315617;
    border-bottom-color: #67a33b;
    box-shadow: inset 0 -1px 0 rgba(103, 163, 59, 0.12);
}

.nav-tab-logout {
    border: 1px solid #d6dfe8;
    border-bottom-width: 1px;
    border-radius: 6px;
    padding: 7px 9px;
    color: #74879b;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.nav-tab-logout:hover {
    border-color: #c8d4e0;
    color: #4f6277;
}

.nav-tab-about {
    border: 1px solid #d6dfe8;
    border-bottom-width: 1px;
    border-radius: 999px;
    padding: 7px 12px;
    color: #5f7388;
    text-transform: none;
    letter-spacing: 0;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    background: #fbfdff;
}

.beheer-shell {
    display: grid;
    gap: 18px;
}

.beheer-header {
    border: 1px solid #f0d9dc;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff8f8 0%, #fffdfd 100%);
    padding: 18px 20px;
}

.beheer-header-copy {
    display: grid;
    gap: 8px;
}

.beheer-kicker,
.beheer-panel-kicker {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a85c65;
}

.beheer-description {
    max-width: 760px;
    color: #6f5f64;
    font-size: 14px;
    line-height: 1.55;
}

.beheer-subnav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 2px 6px;
    border-bottom: 1px solid #eadfe1;
}

.beheer-subtab {
    padding-left: 4px;
    padding-right: 4px;
    color: #966067;
    border-bottom-color: transparent;
    opacity: 0.96;
}

.beheer-subtab:hover {
    color: #7f4950;
}

.beheer-subtab.active {
    color: #76363d;
    border-bottom-color: #c06772;
    font-weight: 600;
    box-shadow: inset 0 -1px 0 rgba(192, 103, 114, 0.14);
}

.beheer-panel {
    border: 1px solid #eddcdf;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
}

.beheer-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a05c64;
}

.beheer-panel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c55a65;
}

.beheer-panel-header {
    margin-bottom: 18px;
}

.role-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.role-admin {
    background: #fee2e2;
    color: #b91c1c;
}

.role-monteur {
    background: #dcfce7;
    color: #166534;
}

.source-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.source-web {
    background: #dbeafe;
    color: #1d4ed8;
}

.source-app {
    background: #e5e7eb;
    color: #4b5563;
}

.nav-tab-about:hover {
    border-color: #c8d4e0;
    color: #314961;
}

.header-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e1e8ef;
    border-radius: 999px;
    padding: 4px 6px 4px 10px;
    background: #fbfdff;
}

.header-user-name {
    font-size: 11px;
    font-weight: 600;
    color: #34485d;
}

.header-user-role {
    font-size: 10px;
    color: #98a8b9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.content {
    background: var(--surface);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(13, 24, 40, 0.08);
    min-height: 600px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.form-section {
    background: var(--light);
    padding: 24px;
    border-radius: 12px;
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.form-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--medium);
    margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.12);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

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

.btn {
    padding: 10px 14px;
    border: none;
    border-radius: 7px;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-success {
    background: var(--secondary);
    color: #fff;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-secondary {
    background: #66778c;
    color: #fff;
}

.btn-info {
    background: #e8f1fa;
    color: #245b87;
    border: 1px solid #bfd4e8;
}

.btn-outline-primary {
    background: transparent;
    color: #245b87;
    border: 1px solid #8db2d0;
}

.btn-outline-success {
    background: transparent;
    color: #1f7e53;
    border: 1.5px solid #66af8e;
}

.btn-small {
    padding: 6px 10px;
    font-size: 12px;
}

.btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-titlebar {
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.restpunten-shell {
    --rest-bg: #f4f5f7;
    --rest-surface: #ffffff;
    --rest-surface-soft: #f8f9fb;
    --rest-border: #e2e6ed;
    --rest-border-strong: #c8d0db;
    --rest-text: #1a2233;
    --rest-text-soft: #4b5568;
    --rest-text-muted: #8896aa;
    --rest-blue: #2563a8;
    --rest-blue-soft: #eff6ff;
    --rest-amber: #d97706;
    --rest-amber-soft: #fffbeb;
    --rest-green: #166534;
    --rest-green-soft: #f0fdf4;
    --rest-red: #991b1b;
    --rest-red-soft: #fef2f2;
    display: grid;
    gap: 16px;
}

.restpunten-header,
.restpunten-filterbar,
.restpunten-list-panel,
.restpunten-detail-panel,
.restpunt-detail-card,
.restpunten-empty-state,
.restpunten-form-section {
    background: var(--rest-surface);
    border: 1px solid var(--rest-border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(26, 34, 51, 0.06);
}

.restpunten-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

.restpunten-header-copy {
    display: grid;
    gap: 4px;
}

.restpunten-header-actions,
.restpunten-detail-actions,
.restpunten-filterbar-side,
.restpunt-list-item-top,
.restpunt-list-item-bottom,
.restpunt-detail-header-top,
.restpunt-detail-meta-row,
.restpunt-form-inline,
.restpunt-upload-grid,
.restpunt-upload-actions,
.restpunt-update-form-actions,
.restpunt-update-card-top,
.restpunt-attachment-actions {
    display: flex;
    gap: 10px;
}

.restpunten-header-actions,
.restpunten-filterbar-side,
.restpunten-detail-actions,
.restpunt-upload-actions,
.restpunt-update-form-actions {
    align-items: center;
}

.restpunten-filterbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
}

.restpunten-filterbar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.restpunten-status-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-basis: 100%;
}

.restpunten-status-chip {
    border: 1px solid var(--rest-border);
    background: #fff;
    border-radius: 999px;
    min-height: 26px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--rest-text-soft);
    font-size: 10.5px;
    font-weight: 600;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.restpunten-status-chip:hover {
    background: var(--rest-surface-soft);
    border-color: #cfd8e4;
    box-shadow: 0 2px 6px rgba(26, 34, 51, 0.06);
}

.restpunten-status-chip strong {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    font-size: 10px;
}

.restpunten-status-chip.active {
    border-color: var(--rest-blue);
    background: var(--rest-blue-soft);
    color: var(--rest-blue);
    box-shadow: 0 4px 12px rgba(37, 99, 168, 0.14);
}

.restpunten-status-chip.active strong {
    background: rgba(37, 99, 168, 0.12);
}

.restpunten-status-chip:not(.active) strong {
    background: rgba(31, 41, 55, 0.06);
    color: inherit;
}

.restpunten-status-chip.status-open {
    border-color: #d7e6fb;
    background: #f7fbff;
    color: #2563a8;
}

.restpunten-status-chip.status-note {
    border-color: #f3dfb6;
    background: #fffaf0;
    color: #c26a08;
}

.restpunten-status-chip.status-progress {
    border-color: #f3dfb6;
    background: #fffaf0;
    color: #c26a08;
}

.restpunten-status-chip.status-done {
    border-color: #cfe8d6;
    background: #f6fcf7;
    color: #1f7a43;
}

.restpunten-status-chip.status-expired {
    border-color: #dde2e8;
    background: #f7f8fa;
    color: #5c6675;
}

.restpunten-status-chip.status-critical {
    border-color: #f1cccc;
    background: #fff6f6;
    color: #991b1b;
}

.restpunten-status-chip.active:not(.status-critical):not(.status-expired) {
    box-shadow: 0 4px 12px rgba(26, 34, 51, 0.1);
}

.restpunten-status-chip.status-open.active {
    border-color: #2563a8;
    background: #eff6ff;
    color: #2563a8;
}

.restpunten-status-chip.status-note.active {
    border-color: #d97706;
    background: #fffbeb;
    color: #b45309;
}

.restpunten-status-chip.status-progress.active {
    border-color: #d97706;
    background: #fffbeb;
    color: #b45309;
}

.restpunten-status-chip.status-done.active {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}

.restpunten-status-chip.status-critical.active {
    border-color: #991b1b;
    background: #fef2f2;
    color: #991b1b;
}

.restpunten-status-chip.status-critical.active strong {
    background: rgba(153, 27, 27, 0.12);
}

.restpunten-status-chip.status-expired.active {
    border-color: #6b7280;
    background: #f4f5f7;
    color: #4b5563;
}

.restpunten-status-chip.status-expired.active strong {
    background: rgba(107, 114, 128, 0.12);
}

.restpunten-filter-search,
.restpunten-filter-field {
    display: grid;
    gap: 6px;
    min-width: 150px;
}

.restpunten-selected-object-context {
    min-width: 0;
}

.restpunten-selected-object-line {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.restpunten-selected-object-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.restpunten-filter-search {
    min-width: 260px;
    flex: 1 1 260px;
}

.restpunten-filter-search span,
.restpunten-filter-field span,
.restpunt-info-field span,
.restpunten-form-section-title {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rest-text-muted);
}

.restpunten-filter-search input,
.restpunten-filter-field input,
.restpunten-filter-field select,
.restpunt-form-inline input,
.restpunt-form-inline select,
.restpunt-upload-grid input,
.restpunt-upload-grid select,
.restpunt-update-form textarea,
.restpunten-modal-form input,
.restpunten-modal-form select,
.restpunten-modal-form textarea {
    width: 100%;
    border: 1px solid var(--rest-border);
    border-radius: 8px;
    background: var(--rest-surface-soft);
    color: var(--rest-text);
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.restpunten-filter-search input,
.restpunten-filter-field input,
.restpunten-filter-field select,
.restpunt-form-inline input,
.restpunt-form-inline select,
.restpunt-upload-grid input,
.restpunt-upload-grid select,
.restpunten-modal-form input,
.restpunten-modal-form select {
    min-height: 36px;
    padding: 9px 11px;
}

.restpunt-update-form textarea,
.restpunten-modal-form textarea {
    padding: 11px 12px;
    min-height: 110px;
    resize: vertical;
}

.restpunten-filter-search input:focus,
.restpunten-filter-field input:focus,
.restpunten-filter-field select:focus,
.restpunt-form-inline input:focus,
.restpunt-form-inline select:focus,
.restpunt-upload-grid input:focus,
.restpunt-upload-grid select:focus,
.restpunt-update-form textarea:focus,
.restpunten-modal-form input:focus,
.restpunten-modal-form select:focus,
.restpunten-modal-form textarea:focus {
    outline: none;
    border-color: #3b7dd8;
    box-shadow: 0 0 0 3px rgba(59, 125, 216, 0.12);
    background: #fff;
}

.restpunten-count-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--rest-surface-soft);
    border: 1px solid var(--rest-border);
    font-size: 12px;
    color: var(--rest-text-soft);
}

.restpunten-kpi-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--rest-surface);
    border: 1px solid var(--rest-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(26, 34, 51, 0.05);
}

.restpunten-kpi-item {
    min-width: 140px;
    padding: 12px 16px;
    display: grid;
    gap: 2px;
    border-right: 1px solid var(--rest-border);
}

.restpunten-kpi-item:last-child {
    border-right: none;
}

.restpunten-kpi-item strong {
    font-size: 20px;
    line-height: 1;
    color: var(--rest-text);
}

.restpunten-kpi-item span {
    font-size: 11px;
    color: var(--rest-text-muted);
}

.restpunten-kpi-item.is-total strong {
    color: #1a2744;
}

.restpunten-kpi-item.is-open strong {
    color: #2563a8;
}

.restpunten-kpi-item.is-progress strong {
    color: #d97706;
}

.restpunten-kpi-item.is-done strong {
    color: #16a34a;
}

.restpunten-kpi-item.is-critical strong {
    color: #991b1b;
}

.restpunten-kpi-item.is-expired strong {
    color: #6b7280;
}

.restpunten-summary-stack {
    display: grid;
    gap: 12px;
}

.restpunten-object-summary-list {
    display: grid;
    gap: 10px;
}

.restpunten-object-summary-group {
    display: grid;
    gap: 0;
}

.restpunten-object-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
    border: 1px solid var(--rest-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(26, 34, 51, 0.04);
}

.restpunten-object-summary-bar.is-selected {
    border-color: #2b6cb0;
    box-shadow: 0 0 0 1px rgba(43, 108, 176, 0.18), 0 10px 22px rgba(43, 108, 176, 0.12);
}

.restpunten-object-summary-bar.is-handled {
    background: linear-gradient(180deg, #f7fcf8 0%, #eef8f1 100%);
    border-color: #cfe2d5;
    box-shadow: 0 8px 18px rgba(34, 94, 58, 0.08);
}

.restpunten-object-summary-bar.is-selected.is-handled {
    border-color: #2b6cb0;
    box-shadow: 0 0 0 1px rgba(43, 108, 176, 0.2), 0 10px 22px rgba(43, 108, 176, 0.14);
}

.restpunten-object-summary-label {
    min-width: 240px;
    padding: 12px 16px;
    display: grid;
    gap: 8px;
    border-right: 1px solid var(--rest-border);
    background: rgba(63, 137, 191, 0.04);
}

.restpunten-object-summary-bar.is-handled .restpunten-object-summary-label {
    background: rgba(34, 94, 58, 0.06);
}

.restpunten-object-summary-bar.is-selected .restpunten-object-summary-label {
    background: rgba(43, 108, 176, 0.08);
}

.restpunten-object-summary-bar.is-selected.is-handled .restpunten-object-summary-label {
    background: linear-gradient(180deg, rgba(43, 108, 176, 0.08) 0%, rgba(34, 94, 58, 0.08) 100%);
}

.restpunten-object-summary-label span {
    font-size: 11px;
    color: var(--rest-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.restpunten-object-summary-label strong {
    font-size: 14px;
    color: var(--rest-text);
    line-height: 1.35;
}

.restpunten-object-summary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.restpunten-object-summary-action {
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.restpunten-object-summary-action.is-disabled,
.restpunten-object-summary-action:disabled {
    opacity: 0.8;
}

.restpunten-object-summary-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e8f5ea;
    color: #23603c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.restpunten-object-summary-bar .restpunten-kpi-item {
    min-width: 112px;
    padding: 10px 14px;
}

.restpunten-object-summary-bar .restpunten-kpi-item strong {
    font-size: 18px;
}

.restpunten-object-summary-bar .restpunten-kpi-item:last-child {
    border-right: none;
}

.restpunten-object-summary-inline-panel {
    margin: 0 0 4px;
    padding: 14px 14px 16px;
    border: 1px solid var(--rest-border);
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
    box-shadow: 0 12px 24px rgba(26, 34, 51, 0.05);
}

.restpunten-object-summary-group.is-selected .restpunten-object-summary-inline-panel {
    border-color: #bfd3ea;
}

.restpunten-object-summary-group.is-handled .restpunten-object-summary-inline-panel {
    background: linear-gradient(180deg, #fafdfb 0%, #f4f9f6 100%);
    border-color: #cfe2d5;
}

.restpunten-inline-object-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 0 2px;
}

.restpunten-inline-object-toolbar-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.restpunten-inline-object-toolbar-copy span {
    display: block;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rest-text-muted);
    line-height: 1.2;
}

.restpunten-inline-object-toolbar-copy strong {
    display: block;
    color: var(--rest-text);
    font-size: 15px;
    line-height: 1.35;
}

.restpunten-inline-object-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.restpunten-content-stack {
    display: grid;
    gap: 18px;
}

.restpunten-object-overview,
.restpunten-list-shell {
    border: 1px solid var(--rest-border);
    border-radius: 16px;
    background: var(--rest-bg);
    box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
    overflow: hidden;
}

.restpunten-section-head,
.restpunten-list-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--rest-border);
}

.restpunten-object-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
}

.restpunten-object-card {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e6ed;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.restpunten-object-card:hover {
    background: #fbfcfe;
    border-color: #d4dce7;
    box-shadow: 0 8px 18px rgba(26, 34, 51, 0.08);
    transform: translateY(-1px);
}

.restpunten-object-card.active {
    border-color: #bfd3ea;
    background: #f7fbff;
    box-shadow: 0 10px 20px rgba(37, 99, 168, 0.12);
}

.restpunten-object-card.is-open {
    border-left: 4px solid #2563a8;
}

.restpunten-object-card.is-closed {
    border-left: 4px solid #16a34a;
}

.restpunten-object-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.restpunten-object-top strong {
    display: block;
    color: var(--rest-text);
    font-size: 14px;
    line-height: 1.35;
}

.restpunten-object-top > div > span {
    display: block;
    margin-top: 4px;
    color: var(--rest-text-muted);
    font-size: 12px;
}

.restpunten-object-top .restpunt-badge {
    display: inline-flex;
    margin-top: 0;
}

.restpunten-object-stats,
.restpunten-object-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.restpunten-object-stats span,
.restpunten-object-signal {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.restpunten-object-stats span {
    background: #f5f7fb;
    border: 1px solid #e3e8f0;
    color: var(--rest-text-soft);
}

.restpunten-object-stats strong {
    color: var(--rest-text);
    margin-right: 4px;
}

.restpunten-object-signal {
    background: #f5f7fb;
    color: var(--rest-text-soft);
}

.restpunten-object-signal.is-action {
    background: #fef2f2;
    color: #991b1b;
}

.restpunten-object-signal.is-soon {
    background: #fff7ed;
    color: #ea580c;
}

.restpunten-object-signal.is-no-date {
    background: #fffbea;
    color: #a16207;
}

.restpunten-object-signal.is-planned {
    background: #eff6ff;
    color: #2563a8;
}

.restpunten-list-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rest-border);
    background: linear-gradient(180deg, #fcfdfe 0%, #f7f9fc 100%);
}

.restpunten-summary-card {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.restpunten-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 34, 51, 0.08);
}

.restpunten-summary-card.active {
    border-color: #bdd0e9;
    background: #f7fbff;
}

.restpunten-summary-card span {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rest-text-muted);
}

.restpunten-summary-card strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--rest-text);
}

.restpunten-summary-card.is-critical strong {
    color: #991b1b;
}

.restpunten-summary-card.is-open strong {
    color: var(--rest-blue);
}

.restpunten-summary-card.is-progress strong {
    color: var(--rest-amber);
}

.restpunten-summary-card.is-done strong {
    color: var(--rest-green);
}

.restpunten-list-head h3,
.restpunt-detail-title-wrap h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--rest-text);
}

.restpunten-list-head p,
.restpunt-detail-title-wrap p,
.restpunt-card-section-head p,
.restpunten-modal-subtitle {
    margin-top: 4px;
    color: var(--rest-text-muted);
    line-height: 1.5;
    font-size: 12px;
}

.restpunten-accordion-list {
    display: grid;
    gap: 14px;
    padding: 14px;
    background: #f5f7fa;
}

.restpunt-accordion-item {
    border: 1px solid #e2e6ed;
    border-radius: 8px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    transition: background 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
    border-left: 4px solid transparent;
    box-shadow: 0 1px 2px rgba(26, 34, 51, 0.04);
}

.restpunt-accordion-item:hover {
    background: #fbfcfe;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26, 34, 51, 0.08);
    border-color: #d7deea;
}

.restpunt-accordion-item.active {
    background: #f7fbff;
    border-color: #bfd3ea;
    box-shadow: 0 8px 20px rgba(37, 99, 168, 0.12);
}

.restpunt-accordion-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.restpunt-accordion-head-main {
    flex: 1;
    min-width: 0;
}

.restpunt-accordion-title-row,
.restpunt-accordion-head-side {
    display: flex;
}

.restpunt-accordion-title-row {
    margin-top: 12px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.restpunt-accordion-title-row strong {
    color: var(--rest-text);
    font-size: 14px;
    line-height: 1.4;
}

.restpunt-accordion-title-row span {
    flex: 0 0 auto;
    color: var(--rest-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.restpunt-accordion-head-side {
    align-items: center;
}

.restpunt-accordion-toggle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    border: 1px solid #d8e1ec;
    color: var(--rest-text-soft);
    font-size: 18px;
    line-height: 1;
}

.restpunt-accordion-body {
    display: none;
    border-top: 1px solid var(--rest-border);
    background: #fbfcfe;
}

.restpunt-accordion-body.open {
    display: block;
    animation: restpunten-tab-enter 0.22s ease;
}

.restpunten-table-wrap {
    margin-top: 0;
}

.restpunten-data-table th,
.restpunten-data-table td {
    vertical-align: middle;
}

.mobile-label {
    display: none;
}

.restpunten-data-table th {
    white-space: nowrap;
}

.restpunten-sort-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.restpunten-sort-button:hover {
    color: var(--rest-blue);
}

.restpunten-sort-icons {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.restpunten-sort-icons .sort-arrow {
    font-size: 9px;
    color: #a9b4c0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.restpunten-sort-icons .sort-arrow.active {
    color: var(--rest-blue);
    transform: scale(1.05);
}

.restpunten-cell-description {
    min-width: 320px;
    color: var(--rest-text);
}

.restpunten-description-with-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.restpunt-opmerking-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--rest-amber);
    background: var(--rest-amber-soft);
    border: 1px solid rgba(217, 119, 6, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.restpunt-opmerking-indicator svg {
    display: block;
}

.restpunten-table-row {
    cursor: pointer;
    --restpunt-accent: #94a3b8;
    --restpunt-active-bg: #f4fbf6;
    --restpunt-active-border: #d4ebda;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.restpunten-table-row td:first-child {
    border-left: 4px solid var(--restpunt-accent);
}

.restpunten-table-row:hover td {
    background: #fafcff;
}

.restpunten-table-row.is-expanded td {
    background: var(--restpunt-active-bg);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}

.restpunten-row-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.restpunten-row-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-right: 2px;
    border-right: 2px solid #7b8ea2;
    border-bottom: 2px solid #7b8ea2;
    transform: rotate(45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.restpunten-table-row.is-expanded .restpunten-row-chevron {
    transform: rotate(225deg);
    border-color: var(--restpunt-accent);
}

.restpunten-row-detail td {
    padding: 0;
    background: var(--restpunt-active-bg);
    border-top: 0;
}

.restpunt-status-tone-open {
    --restpunt-accent: #2563a8;
    --restpunt-active-bg: #f4f8fd;
    --restpunt-active-border: #d7e4f1;
}

.restpunt-status-tone-progress {
    --restpunt-accent: #d97706;
    --restpunt-active-bg: #fdf9f3;
    --restpunt-active-border: #eee1cb;
}

.restpunt-status-tone-done {
    --restpunt-accent: #16a34a;
    --restpunt-active-bg: #f4fbf6;
    --restpunt-active-border: #d4ebda;
}

.restpunt-status-tone-critical {
    --restpunt-accent: #991b1b;
    --restpunt-active-bg: #fcf5f5;
    --restpunt-active-border: #edd7d7;
}

.restpunt-status-tone-expired {
    --restpunt-accent: #6b7280;
    --restpunt-active-bg: #f5f6f7;
    --restpunt-active-border: #dee2e7;
}

.restpunten-table-row.restpunt-priority-kritiek::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.24);
    animation: restpunten-critical-pulse 2.3s ease-out infinite;
}

.restpunten-detail-shell {
    margin-left: 16px;
    border-left: 4px solid var(--restpunt-accent);
    background: var(--restpunt-active-bg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.restpunten-detail-context-bar {
    display: flex;
    align-items: center;
    gap: 12px 18px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.42);
    border-bottom: 1px solid var(--restpunt-active-border);
}

.restpunten-detail-context-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    color: var(--rest-text-soft);
    font-size: 12px;
}

.restpunten-detail-context-label {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rest-text-muted);
}

.restpunten-detail-context-item strong {
    color: var(--rest-text);
    font-size: 12px;
    font-weight: 700;
}

.restpunt-list-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.restpunt-list-item-top-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.restpunt-id-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: var(--rest-text-muted);
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
}

.restpunt-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #edf2f7;
    color: var(--rest-text-soft);
}

.restpunt-badge.open {
    background: var(--rest-blue-soft);
    color: var(--rest-blue);
}

.restpunt-badge.in-behandeling,
.restpunt-badge.in-uitvoering {
    background: var(--rest-amber-soft);
    color: var(--rest-amber);
}

.restpunt-badge.gereed,
.restpunt-badge.afgerond,
.restpunt-badge.afgemeld {
    background: var(--rest-green-soft);
    color: var(--rest-green);
}

.restpunt-badge.vervallen {
    background: #f3f4f6;
    color: #4b5563;
}

.restpunt-badge.afgewezen,
.restpunt-badge.geannuleerd {
    background: var(--rest-red-soft);
    color: var(--rest-red);
}

.restpunt-flag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff4e5;
    color: #9d6513;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.restpunt-list-item-title {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rest-text);
}

.restpunt-list-item-copy,
.restpunt-copy-text,
.restpunt-timeline-body p,
.restpunt-update-card p {
    margin-top: 8px;
    color: var(--rest-text-soft);
    line-height: 1.55;
    font-size: 12px;
}

.restpunt-list-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-list-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.restpunt-assignee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rest-text-soft);
    font-size: 12px;
}

.restpunt-assignee-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: var(--rest-blue);
    font-size: 10px;
    font-weight: 700;
}

.restpunt-list-item-count {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f3f6f9;
    border: 1px solid #e2e8f0;
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-priority-badge,
.restpunt-priority-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-style: normal;
}

.restpunt-priority-badge.is-kritiek,
.restpunt-priority-pill.is-kritiek {
    background: #fef2f2;
    color: #991b1b;
}

.restpunt-priority-badge.is-hoog,
.restpunt-priority-pill.is-hoog {
    background: #fff7ed;
    color: #ea580c;
}

.restpunt-priority-badge.is-midden,
.restpunt-priority-pill.is-midden {
    background: #fffbeb;
    color: #d97706;
}

.restpunt-priority-badge.is-laag,
.restpunt-priority-pill.is-laag {
    background: #f0fdf4;
    color: #16a34a;
}

.restpunt-detail-header {
    background: transparent;
    border-bottom: 1px solid var(--restpunt-active-border);
    padding: 16px 18px 12px;
}

.restpunt-quick-actions-panel,
.restpunt-full-details-shell {
    background: transparent;
}

.restpunt-quick-actions-panel {
    padding: 16px 18px;
    border-bottom: 1px solid var(--restpunt-active-border);
}

.restpunt-quick-actions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.restpunt-quick-actions-head h3 {
    font-size: 18px;
    color: var(--rest-text);
    margin: 8px 0 4px;
}

.restpunt-quick-actions-head p {
    color: var(--rest-text-muted);
    font-size: 13px;
}

.restpunt-quick-actions-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.restpunt-quick-actions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 14px;
}

.restpunt-quick-action-card {
    padding: 14px;
    box-shadow: none;
    background: #fbfcfe;
}

.restpunt-inline-opmerking {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--rest-border);
    border-radius: 12px;
    background: #ffffff;
}

.restpunt-inline-planning {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--rest-border);
    border-radius: 12px;
    background: #ffffff;
}

.restpunt-inline-planning-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.restpunt-inline-planning-week {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef4fb;
    color: #315b84;
    font-size: 11px;
    font-weight: 700;
}

.restpunt-inline-planning-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.restpunt-inline-datepicker {
    position: relative;
    width: 100%;
    max-width: 260px;
}

.restpunt-inline-datepicker-trigger {
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid var(--rest-border);
    border-radius: 10px;
    background: var(--rest-surface-soft);
    color: var(--rest-text);
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.restpunt-inline-datepicker-trigger:hover,
.restpunt-inline-datepicker-trigger.is-open {
    border-color: #3b7dd8;
    background: #fff;
}

.restpunt-inline-datepicker-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 125, 216, 0.12);
}

.restpunt-inline-datepicker-trigger-icon {
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-inline-datepicker-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: min(90vw, 320px);
    padding: 12px;
    border: 1px solid var(--rest-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 30px rgba(26, 34, 51, 0.14);
}

.restpunt-inline-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.restpunt-inline-datepicker-header strong {
    font-size: 13px;
    color: var(--rest-text);
    text-transform: capitalize;
}

.restpunt-inline-datepicker-nav {
    width: 28px;
    height: 28px;
    border: 1px solid var(--rest-border);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--rest-text-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.restpunt-inline-datepicker-grid {
    display: grid;
    grid-template-columns: 34px repeat(7, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
}

.restpunt-inline-datepicker-weekhead,
.restpunt-inline-datepicker-dayhead,
.restpunt-inline-datepicker-weeknumber {
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.restpunt-inline-datepicker-weekhead,
.restpunt-inline-datepicker-dayhead {
    color: var(--rest-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.restpunt-inline-datepicker-weeknumber {
    color: #54708b;
    background: #f3f7fb;
    border-radius: 8px;
}

.restpunt-inline-datepicker-day {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--rest-text);
    font-size: 12px;
    cursor: pointer;
}

.restpunt-inline-datepicker-day:hover {
    background: #f6f9fc;
    border-color: #d8e3ee;
}

.restpunt-inline-datepicker-day.is-muted {
    color: #a2afbd;
}

.restpunt-inline-datepicker-day.is-today {
    border-color: #c8d6e6;
    background: #fafcff;
}

.restpunt-inline-datepicker-day.is-selected {
    background: #eaf2fb;
    border-color: #aac6e3;
    color: #1f4f7a;
    font-weight: 700;
}

.restpunt-inline-opmerking-label {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rest-text-muted);
}

.restpunt-inline-opmerking-textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid #d8e1ec;
    border-radius: 10px;
    background: #fff;
    color: var(--rest-text);
    line-height: 1.55;
    font-size: 12px;
    resize: vertical;
}

.restpunt-inline-opmerking-textarea:focus {
    border-color: var(--rest-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12);
    outline: none;
}

.restpunt-inline-opmerking-actions {
    display: flex;
    justify-content: flex-end;
}

.restpunt-quick-photo-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.restpunt-quick-photo-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--rest-border);
    border-radius: 12px;
    background: #ffffff;
}

.restpunt-quick-photo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.restpunt-quick-photo-top strong {
    color: var(--rest-text);
    font-size: 13px;
}

.restpunt-quick-photo-top span {
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-quick-photo-preview-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.restpunt-quick-photo-preview-item {
    display: grid;
    gap: 5px;
}

.restpunt-quick-photo-preview-thumb {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f9fc;
    cursor: pointer;
}

.restpunt-quick-photo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.restpunt-quick-photo-preview-thumb.is-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--rest-text-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.restpunt-quick-photo-preview-meta {
    min-width: 0;
}

.restpunt-quick-photo-preview-meta strong {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    color: var(--rest-text-muted);
    overflow-wrap: anywhere;
}

.restpunt-quick-photo-empty {
    padding: 10px 12px;
    border: 1px dashed #d7e1ec;
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-quick-actions-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.restpunt-detail-header-top {
    align-items: flex-start;
    flex-wrap: wrap;
}

.restpunt-status-menu {
    position: relative;
}

.restpunt-status-trigger {
    border: 1px solid #d8e1ec;
    background: #fff;
    border-radius: 10px;
    min-height: 34px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.restpunt-status-trigger:hover {
    border-color: #bfd1e8;
    box-shadow: 0 4px 12px rgba(26, 34, 51, 0.08);
    transform: translateY(-1px);
}

.restpunt-quick-status-trigger {
    width: 100%;
    justify-content: space-between;
}

.restpunt-status-trigger-label {
    color: var(--rest-text-soft);
    font-size: 12px;
}

.restpunt-status-trigger.is-open {
    border-color: var(--rest-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.1);
}

.restpunt-status-trigger.is-pop .restpunt-badge {
    animation: restpunten-badge-pop 0.28s ease;
}

.restpunt-status-trigger-icon {
    color: var(--rest-text-muted);
    font-size: 12px;
}

.restpunt-status-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 200px;
    padding: 6px;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(26, 34, 51, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.restpunt-status-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.restpunt-status-option {
    width: 100%;
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.restpunt-status-option:hover {
    background: var(--rest-surface-soft);
}

.restpunt-status-option.active {
    background: #f4f8fd;
}

.restpunt-status-option.active .restpunt-badge {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 168, 0.16);
}

.restpunt-detail-title-wrap {
    flex: 1;
    min-width: 220px;
}

.restpunt-detail-title-wrap h3 {
    font-size: 18px;
}

.restpunt-detail-meta-row {
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--rest-text-soft);
    font-size: 11px;
    row-gap: 6px;
}

.restpunt-detail-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f6f8fb;
    border: 1px solid #e5eaf1;
}

.restpunt-detail-meta-row strong {
    color: var(--rest-text-muted);
    font-weight: 600;
}

.restpunt-detail-tabs {
    display: flex;
    gap: 0;
    background: var(--rest-surface);
    border-bottom: 1px solid var(--rest-border);
    padding: 0 14px;
}

.restpunt-detail-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--rest-text-muted);
    padding: 0 12px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.restpunt-detail-tab.active {
    color: var(--rest-blue);
    border-bottom-color: var(--rest-blue);
}

.restpunt-detail-tab-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.restpunt-detail-scroll {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: visible;
}

.restpunt-tab-panel {
    display: none;
}

.restpunt-tab-panel.active {
    display: block;
    animation: restpunten-tab-enter 0.22s ease;
}

.restpunt-detail-actions-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.restpunt-detail-card {
    padding: 14px;
    box-shadow: 0 4px 14px rgba(26, 34, 51, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.restpunt-detail-card:hover {
    border-color: #d8e0ea;
    box-shadow: 0 8px 18px rgba(26, 34, 51, 0.06);
}

.restpunt-card-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.restpunt-card-section-head h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--rest-text);
}

.restpunt-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.restpunt-info-field {
    display: grid;
    gap: 4px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rest-border);
}

.restpunt-info-field strong {
    color: var(--rest-text);
    font-size: 14px;
    line-height: 1.45;
}

.restpunt-info-field-full {
    grid-column: 1 / -1;
}

.restpunt-form-inline,
.restpunt-upload-grid {
    flex-wrap: wrap;
}

.restpunt-form-inline > *,
.restpunt-upload-grid > * {
    flex: 1 1 220px;
}

.restpunt-timeline {
    display: grid;
}

.restpunt-timeline-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--rest-border);
}

.restpunt-timeline-item:first-child {
    border-top: none;
    padding-top: 0;
}

.restpunt-timeline-node {
    flex: 0 0 30px;
}

.restpunt-timeline-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--rest-border);
    background: var(--rest-surface-soft);
    color: var(--rest-text-soft);
}

.restpunt-timeline-icon.is-status {
    background: var(--rest-blue-soft);
    color: var(--rest-blue);
    border-color: #bfd4f4;
}

.restpunt-timeline-icon.is-update {
    background: var(--rest-amber-soft);
    color: var(--rest-amber);
    border-color: #f3d9ad;
}

.restpunt-timeline-body {
    flex: 1;
}

.restpunt-timeline-title,
.restpunt-timeline-statuses,
.restpunt-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.restpunt-timeline-statuses,
.restpunt-timeline-meta {
    margin-top: 6px;
}

.restpunt-timeline-arrow,
.restpunt-timeline-meta {
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-upload-dropzone {
    position: relative;
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 18px;
    border: 1.5px dashed var(--rest-border-strong);
    border-radius: 10px;
    background: var(--rest-surface-soft);
    cursor: pointer;
    text-align: center;
    color: var(--rest-text-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.restpunt-upload-dropzone:hover {
    border-color: #c7d7ec;
    background: #fbfcfe;
}

.restpunt-upload-dropzone strong {
    color: var(--rest-blue);
    font-size: 13px;
}

.restpunt-upload-dropzone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.restpunt-upload-actions {
    justify-content: space-between;
    margin-top: 12px;
    color: var(--rest-text-muted);
    font-size: 12px;
}

.restpunt-attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.restpunt-attachment-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--rest-border);
    border-radius: 10px;
    background: var(--rest-surface-soft);
}

.restpunt-attachment-preview {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d9e2ec;
    background: #ffffff;
    aspect-ratio: 4 / 3;
}

.restpunt-attachment-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.restpunt-attachment-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.restpunt-attachment-icon.pdf {
    background: #fee2e2;
    color: var(--rest-red);
}

.restpunt-attachment-icon.img {
    background: #dcfce7;
    color: var(--rest-green);
}

.restpunt-attachment-icon.doc,
.restpunt-attachment-icon.file {
    background: #dbeafe;
    color: var(--rest-blue);
}

.restpunt-attachment-content {
    display: grid;
    gap: 4px;
}

.restpunt-attachment-content strong {
    color: var(--rest-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.restpunt-attachment-content span,
.restpunt-update-author {
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-attachment-actions {
    flex-wrap: wrap;
}

.restpunt-photo-sections {
    display: grid;
    gap: 16px;
}

.restpunt-photo-section {
    padding: 14px;
    border: 1px solid var(--rest-border);
    border-radius: 12px;
    background: #fcfdff;
}

.restpunt-photo-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.restpunt-photo-section-head h5 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--rest-text);
}

.restpunt-photo-section-head p {
    margin: 0;
    font-size: 12px;
    color: var(--rest-text-muted);
}

.restpunt-photo-count {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--rest-blue);
    background: #eef4fb;
    border: 1px solid #d7e4f1;
}

.restpunt-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.restpunt-photo-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #dce5ef;
    background: #fff;
}

.restpunt-photo-thumb {
    padding: 0;
    border: 1px solid #dbe4ee;
    background: #f8fbfd;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.restpunt-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.restpunt-photo-meta {
    display: grid;
    gap: 4px;
}

.restpunt-photo-meta strong {
    font-size: 12px;
    color: var(--rest-text);
    overflow-wrap: anywhere;
}

.restpunt-photo-meta span {
    font-size: 11px;
    color: var(--rest-text-muted);
}

.restpunt-photo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.restpunt-photo-upload {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed #d7e1ec;
}

.restpunt-photo-upload-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px dashed #c6d5e3;
    border-radius: 10px;
    background: #f8fbfd;
    color: var(--rest-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.restpunt-photo-upload-control input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.restpunt-photo-upload-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--rest-text-muted);
}

.restpunt-photo-lightbox-backdrop {
    background: rgba(19, 27, 36, 0.72);
}

.restpunt-photo-lightbox {
    max-width: 960px;
    width: min(92vw, 960px);
    background: #fff;
}

.restpunt-photo-lightbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}

.restpunt-photo-lightbox-body img {
    max-width: 100%;
    max-height: 74vh;
    border-radius: 12px;
    object-fit: contain;
}

.restpunt-attachment-actions a,
.restpunt-attachment-actions button {
    border: none;
    background: transparent;
    color: var(--rest-blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.restpunt-update-form {
    display: grid;
    gap: 12px;
}

.restpunt-update-card {
    border-left: 3px solid #dbeafe;
}

.restpunt-update-card-top {
    justify-content: space-between;
    align-items: center;
    color: var(--rest-text);
    font-size: 12px;
}

.restpunt-update-card-top span,
.restpunt-update-transition {
    color: var(--rest-text-muted);
    font-size: 11px;
}

.restpunt-update-transition {
    margin-top: 8px;
}

.restpunten-empty-state {
    padding: 28px;
    color: var(--rest-text-muted);
    text-align: center;
}

.restpunten-empty-state.compact {
    padding: 14px;
    background: var(--rest-surface-soft);
    box-shadow: none;
}

.restpunten-modal {
    max-width: 1080px;
    width: min(92vw, 1080px);
    padding: 0;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.22s ease;
}

.restpunten-shell .modal {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.restpunten-shell .modal.active .restpunten-modal {
    opacity: 1;
    transform: translateY(0);
}

.restpunten-modal-header {
    padding: 22px 24px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rest-border);
}

.restpunten-modal-form {
    display: grid;
    gap: 16px;
    padding: 18px 24px 24px;
}

.restpunten-form-section {
    padding: 18px 18px 16px;
}

.restpunten-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 14px;
}

.restpunten-modal-form .form-group {
    margin-bottom: 0;
}

.restpunten-modal-form .form-group > span {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #536274;
}

.restpunten-checkbox {
    min-height: 36px;
    align-items: center;
}

.restpunten-form-upload input[type="file"] {
    padding: 10px;
    background: #fff;
}

.restpunten-form-upload small {
    margin-top: 6px;
    color: var(--rest-text-muted);
    font-size: 11px;
    display: block;
}

.restpunten-selected-file-list {
    display: grid;
    gap: 8px;
}

.restpunten-selected-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--rest-border);
    border-radius: 8px;
    background: var(--rest-surface-soft);
}

.restpunten-selected-file strong {
    color: var(--rest-text);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.restpunten-selected-file span {
    color: var(--rest-text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.restpunten-modal-actions {
    justify-content: flex-end;
}

.restpunten-shell .action-btn,
.restpunten-modal .action-btn {
    border: 1px solid #d8e1ec;
    border-radius: 8px;
    min-height: 34px;
    padding: 7px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    color: #33465c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(26, 34, 51, 0.05);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.restpunten-shell .action-btn:hover,
.restpunten-modal .action-btn:hover {
    border-color: #c3d0de;
    background: linear-gradient(180deg, #ffffff 0%, #eef4f9 100%);
    box-shadow: 0 6px 14px rgba(26, 34, 51, 0.08);
    transform: translateY(-1px);
}

.restpunten-shell .action-btn:active,
.restpunten-modal .action-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(26, 34, 51, 0.08);
}

.restpunten-shell .action-btn.primary,
.restpunten-modal .action-btn.primary {
    background: linear-gradient(180deg, #2563a8 0%, #1d4f87 100%);
    border-color: #1d4f87;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 168, 0.18);
}

.restpunten-shell .action-btn.primary:hover,
.restpunten-modal .action-btn.primary:hover {
    background: linear-gradient(180deg, #1f5a98 0%, #194878 100%);
    border-color: #194878;
    box-shadow: 0 10px 20px rgba(37, 99, 168, 0.24);
}

.restpunten-shell .action-btn.btn-danger,
.restpunten-modal .action-btn.btn-danger {
    background: linear-gradient(180deg, #cf4a4a 0%, #b73232 100%);
    border-color: #a92b2b;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(183, 50, 50, 0.18);
}

.restpunten-shell .action-btn.btn-danger:hover,
.restpunten-modal .action-btn.btn-danger:hover {
    background: linear-gradient(180deg, #bf3e3e 0%, #a92b2b 100%);
    border-color: #972424;
    box-shadow: 0 10px 20px rgba(183, 50, 50, 0.24);
}

.restpunten-shell .action-btn.btn-danger:active,
.restpunten-modal .action-btn.btn-danger:active {
    box-shadow: inset 0 2px 4px rgba(92, 18, 18, 0.22);
}

.restpunten-shell .action-btn:disabled,
.restpunten-modal .action-btn:disabled,
.restpunt-status-trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@keyframes restpunten-tab-enter {
    from {
        opacity: 0;
        transform: translateX(8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes restpunten-badge-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes restpunten-critical-pulse {
    0% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.24); }
    70% { box-shadow: 0 0 0 7px rgba(153, 27, 27, 0); }
    100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0); }
}

@media (max-width: 1100px) {
    .restpunten-filterbar,
    .restpunt-quick-actions-head,
    .restpunt-detail-header-top,
    .restpunt-list-item-bottom,
    .restpunt-accordion-header,
    .restpunt-accordion-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .restpunten-list-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .restpunten-object-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restpunten-object-summary-bar {
        flex-direction: column;
    }

    .restpunten-object-summary-label {
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--rest-border);
    }

    .restpunten-object-summary-actions {
        justify-content: flex-start;
    }

    .restpunten-inline-object-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .restpunten-inline-object-toolbar-actions {
        justify-content: flex-start;
    }

    .restpunt-detail-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .restpunt-quick-actions-grid,
    .restpunt-quick-photo-actions {
        grid-template-columns: 1fr;
    }

    .restpunt-inline-planning-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .restpunt-status-menu,
    .restpunt-status-trigger,
    .restpunt-status-dropdown {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .restpunten-header,
    .restpunten-header-actions,
    .restpunten-filterbar-side,
    .restpunten-detail-actions,
    .restpunt-upload-actions,
    .restpunt-update-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .restpunt-info-grid,
    .restpunten-form-grid,
    .restpunt-attachments-grid {
        grid-template-columns: 1fr;
    }

    .restpunten-kpi-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restpunten-kpi-item {
        min-width: 0;
        border-right: 1px solid var(--rest-border);
        border-bottom: 1px solid var(--rest-border);
    }

    .restpunten-object-grid,
    .restpunten-list-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restpunten-status-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .restpunten-status-chip,
    .restpunten-summary-card,
    .restpunten-object-card {
        width: 100%;
        justify-content: space-between;
    }

    .restpunt-detail-tabs {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .restpunt-detail-scroll,
    .restpunt-accordion-header,
    .restpunt-detail-header,
    .restpunten-modal-form,
    .restpunten-modal-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .restpunten-selected-object-line,
    .restpunten-selected-object-actions {
        align-items: stretch;
    }
}

.sla-dashboard-panel {
    margin-bottom: 22px;
    border: 1px solid #d7e2ec;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 32px rgba(18, 40, 63, 0.06);
}

.sla-dashboard-header {
    padding: 18px 22px 16px;
    background: linear-gradient(180deg, #233143 0%, #24374d 100%);
    color: #ffffff;
}

.sla-dashboard-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.sla-dashboard-meta {
    margin-top: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
}

.sla-dashboard-submeta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.sla-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid #d9e3ec;
    border-bottom: 1px solid #d9e3ec;
    background: #f4f8fc;
}

.sla-dashboard-card {
    min-height: 112px;
    padding: 18px 16px 14px;
    text-align: center;
    border-right: 1px solid #d9e3ec;
}

.sla-dashboard-card:last-child {
    border-right: 0;
}

.sla-dashboard-card-value {
    font-size: 18px;
    font-weight: 900;
    color: #214261;
}

.sla-dashboard-card-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #49627c;
}

.sla-dashboard-card-meta {
    margin-top: 4px;
    font-size: 11px;
    color: #7f93a6;
}

.sla-dashboard-card.is-good .sla-dashboard-card-value {
    color: #1d8c5d;
}

.sla-dashboard-card.is-warn .sla-dashboard-card-value {
    color: #b97a17;
}

.sla-dashboard-card.is-danger .sla-dashboard-card-value {
    color: #c43f3f;
}

.sla-dashboard-detail-toggle {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px 0;
}

.sla-dashboard-toggle-btn {
    min-width: 190px;
}

.sla-dashboard-table-wrap {
    padding: 18px 20px 16px;
}

.sla-dashboard-table-title {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #275d87;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 10px 10px 0 0;
}

.sla-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    overflow: hidden;
    border: 1px solid #d9e3ec;
    border-top: 0;
}

.sla-dashboard-table th,
.sla-dashboard-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e4ebf2;
    border-right: 1px solid #e4ebf2;
}

.sla-dashboard-table th:last-child,
.sla-dashboard-table td:last-child {
    border-right: 0;
}

.sla-dashboard-table th {
    background: #f4f8fc;
    font-size: 12px;
    font-weight: 800;
    color: #314b64;
    text-align: left;
}

.sla-dashboard-table tbody tr:nth-child(even) td {
    background: #fbfdff;
}

.sla-dashboard-cell {
    font-weight: 700;
}

.sla-dashboard-cell.is-success {
    color: #1e7f52;
    background: #eef8f2;
}

.sla-dashboard-cell.is-warning {
    color: #a66d12;
    background: #fff7e9;
}

.sla-dashboard-cell.is-danger {
    color: #b43b3b;
    background: #fff0ef;
}

.sla-dashboard-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-size: 12px;
    color: #667d92;
}

.sla-dashboard-legend-label {
    font-weight: 700;
    color: #415a74;
}

.sla-dashboard-legend-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
}

.sla-dashboard-legend-item.is-success {
    color: #1e7f52;
    background: #eef8f2;
    border-color: #d4eadc;
}

.sla-dashboard-legend-item.is-warning {
    color: #a66d12;
    background: #fff7e9;
    border-color: #f0dfb8;
}

.sla-dashboard-legend-item.is-danger {
    color: #b43b3b;
    background: #fff0ef;
    border-color: #f0d0cd;
}

.admin-title-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-breadcrumb {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.dashboard-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dark);
}

.admin-status-line {
    font-size: 13px;
    color: var(--medium);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1da862;
    display: inline-block;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card {
    background: #fff;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    padding: 15px 16px;
    position: relative;
    box-shadow: 0 4px 12px rgba(20, 41, 68, 0.06);
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
}

.stat-card-total::before {
    background: #335f87;
}

.stat-card-vandaag::before {
    background: #1ca469;
}

.stat-card-maand::before {
    background: #da8a1f;
}

.stat-card-stremming::before {
    background: #6d6fc1;
}

.stat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.stat-icon {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f4f7fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8ea1b4;
}

.stat-card-total .stat-icon {
    background: rgba(51, 95, 135, 0.12);
    color: #335f87;
}

.stat-card-vandaag .stat-icon {
    background: rgba(28, 164, 105, 0.12);
    color: #1c8f5e;
}

.stat-card-maand .stat-icon {
    background: rgba(218, 138, 31, 0.12);
    color: #b7781c;
}

.stat-card-stremming .stat-icon {
    background: rgba(109, 111, 193, 0.14);
    color: #5f63b2;
}

.kpi-glyph {
    position: relative;
    display: block;
}

.kpi-glyph-total {
    width: 12px;
    height: 12px;
    border: 1.6px solid currentColor;
    border-radius: 50%;
}

.kpi-glyph-total::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.kpi-glyph-today {
    width: 12px;
    height: 11px;
    border: 1.6px solid currentColor;
    border-radius: 3px;
}

.kpi-glyph-today::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 3px;
    border-top: 1.6px solid currentColor;
}

.kpi-glyph-month {
    width: 13px;
    height: 10px;
    border: 1.6px solid currentColor;
    border-radius: 2px;
}

.kpi-glyph-month::before,
.kpi-glyph-month::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 2px;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
}

.kpi-glyph-month::before {
    left: 3px;
}

.kpi-glyph-month::after {
    right: 3px;
}

.kpi-glyph-alert {
    width: 12px;
    height: 12px;
}

.kpi-glyph-alert::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
}

.kpi-glyph-alert::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
}

.stat-context {
    margin-top: 6px;
    font-size: 11px;
    color: #8fa0b2;
    line-height: 1.35;
}

.stat-label {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.search-bar {
    margin-bottom: 12px;
}

.admin-filter-bar {
    border: 1px solid #dde5ee;
    border-radius: 10px;
    padding: 8px;
    background: #fcfdff;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-search-wrap {
    min-width: 220px;
    flex: 0.85 1 250px;
}

.admin-filter-bar .form-input {
    height: 34px;
    border-color: #dfe6ee;
    background: #ffffff;
    padding-left: 12px;
    font-size: 13px;
}

.admin-filter-select {
    min-width: 140px;
    flex: 0 1 155px;
    height: 34px;
    padding: 0 34px 0 12px;
    font-size: 13px;
    border-color: #dfe6ee;
    background-color: #ffffff;
    background-position: right 12px center;
    background-size: 11px;
}

.admin-filter-select-opdrachtgever {
    min-width: 240px;
    flex: 1.15 1 280px;
}

.admin-filter-reset-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    background: #f4f8fb;
    color: #35526e;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.admin-filter-reset-btn:hover {
    background: #eaf1f7;
}

.admin-active-filters {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 5px 8px 5px 10px;
    border: 1px solid #d7e1ea;
    border-radius: 999px;
    background: #f4f8fb;
    color: #51677d;
    font-size: 12px;
    line-height: 1.2;
}

.admin-active-filter-remove {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #dce7f1;
    color: #35526e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.admin-active-filter-remove:hover {
    background: #cad9e7;
}

.admin-result-summary {
    margin-top: 8px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    color: #6f8194;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.table-container {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #d9e3ec;
    background: #fff;
}

.admin-table-wrap {
    border-radius: 10px;
}

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

.data-table thead {
    background: #f5f8fb;
}

.data-table th {
    padding: 10px 10px;
    text-align: left;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-weight: 700;
    font-size: 10px;
    color: #8395a8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 10px;
    border-top: 1px solid #e1e7ee;
    font-size: 13px;
    color: var(--dark);
    vertical-align: middle;
}

.data-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.data-table tbody tr:hover {
    background: #f2f6fa;
}

.bonnummer-cell {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
}

.subtle-secondary-text {
    font-size: 12px;
    color: #73869b;
}

.component-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f1f4f8;
    color: #5f7388;
    border: 1px solid #dbe3eb;
    font-size: 11px;
    padding: 3px 8px;
    line-height: 1.2;
}

.component-empty {
    color: #9baaba;
}

.monteur-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.monteur-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3a6ea5;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
}

.workflow-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 3px 9px;
    border: 1px solid transparent;
}

.workflow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #95a8bc;
}

.workflow-badge.is-green {
    color: #1e7a4d;
    background: #e8f6ef;
    border-color: #c9e9d8;
}

.workflow-badge.is-green .workflow-dot {
    background: #218653;
}

.workflow-badge.is-amber {
    color: #ad6c15;
    background: #fff3e3;
    border-color: #f2ddbd;
}

.workflow-badge.is-amber .workflow-dot {
    background: #d18a2e;
}

.workflow-badge.is-red {
    color: #b13e3e;
    background: #fdecec;
    border-color: #f3cdcd;
}

.workflow-badge.is-red .workflow-dot {
    background: #d85454;
}

.workflow-badge.is-gray {
    color: #6d8096;
    background: #f1f5f9;
    border-color: #d9e2ea;
}

.workflow-badge.is-gray .workflow-dot {
    background: #8ba1b6;
}

.admin-workflow-inline-cell {
    min-width: 360px;
}

.admin-bon-row {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.admin-bon-row td:first-child {
    border-left: 4px solid transparent;
}

.admin-bon-row.is-danger td:first-child {
    border-left-color: #d85454;
}

.admin-bon-row.is-warning td:first-child {
    border-left-color: #d18a2e;
}

.admin-bon-row.is-success td:first-child {
    border-left-color: #2fa567;
}

.admin-bon-row.is-info td:first-child {
    border-left-color: #3f89bf;
}

.admin-bon-row.is-expanded {
    background: #f7fbff;
}

.admin-workflow-summary {
    display: grid;
    gap: 4px;
}

.admin-workflow-summary-loading {
    font-size: 12px;
    color: #7c90a4;
}

.admin-workflow-summary-step {
    font-size: 12px;
    font-weight: 700;
    color: #314961;
}

.admin-workflow-summary-next {
    font-size: 11px;
    color: #7b8ea2;
}

.admin-bon-row-detail td {
    padding: 0;
    background: #f5f9fd;
    border-top: 0;
}

.admin-workflow-panel {
    border-top: 1px solid #e0e8f0;
    border-left: 4px solid transparent;
    padding: 18px 20px 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
}

.admin-workflow-panel.is-danger {
    border-left-color: #d85454;
}

.admin-workflow-panel.is-warning {
    border-left-color: #d18a2e;
}

.admin-workflow-panel.is-success {
    border-left-color: #2fa567;
}

.admin-workflow-panel.is-info {
    border-left-color: #3f89bf;
}

.admin-workflow-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(220px, 0.6fr) minmax(240px, 0.7fr);
    gap: 16px;
    align-items: start;
}

.admin-workflow-zone {
    background: #ffffff;
    border: 1px solid #dfe8f0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(32, 55, 79, 0.04);
}

.admin-workflow-zone-title {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71879c;
}

.admin-workflow-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(88px, 1fr));
    gap: 10px;
}

.admin-workflow-strip-step {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    min-width: 0;
    text-align: center;
}

.admin-workflow-strip-node {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-workflow-strip-dot {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1.5px solid #d6e1eb;
    background: #f6f9fc;
    color: #8ba0b5;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.admin-workflow-strip-line {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: #e3ebf3;
}

.admin-workflow-strip-step.is-completed .admin-workflow-strip-dot {
    background: #2fa567;
    border-color: #2fa567;
    color: #ffffff;
}

.admin-workflow-strip-step.is-completed .admin-workflow-strip-line {
    background: #66be8d;
}

.admin-workflow-strip-step.is-active .admin-workflow-strip-dot {
    background: #e9f2ff;
    border-color: #4a89dc;
    color: #245b87;
}

.admin-workflow-strip-step.is-next .admin-workflow-strip-dot {
    background: #ffffff;
    border-color: #4a89dc;
    border-style: dashed;
    color: #245b87;
}

.admin-workflow-strip-label {
    font-size: 11px;
    font-weight: 700;
    color: #314961;
    line-height: 1.25;
}

.admin-workflow-strip-time-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 18px;
}

.admin-workflow-strip-time {
    font-size: 10px;
    color: #7a8ea3;
    line-height: 1.1;
}

.admin-workflow-strip-edit {
    opacity: 0;
    pointer-events: none;
    border: 0;
    background: transparent;
    color: #2d63dd;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s ease;
}

.admin-workflow-strip-step:hover .admin-workflow-strip-edit,
.admin-workflow-strip-step:focus-within .admin-workflow-strip-edit {
    opacity: 1;
    pointer-events: auto;
}

.admin-workflow-strip-state {
    min-height: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #8297ab;
}

.admin-workflow-strip-step.is-active .admin-workflow-strip-state {
    color: #245b87;
}

.admin-workflow-strip-step.is-completed .admin-workflow-strip-state {
    color: #2a8755;
}

.admin-workflow-primary-action {
    margin-top: 16px;
}

.admin-workflow-primary-btn {
    min-width: 220px;
}

.admin-workflow-kpi-list,
.admin-workflow-mail-list {
    display: grid;
    gap: 10px;
}

.admin-workflow-kpi-card,
.admin-workflow-mail-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #dfe8f0;
    background: #ffffff;
    min-height: 96px;
    overflow: hidden;
}

.admin-workflow-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.admin-workflow-mail-card.is-unreached {
    background: #f8fbfd;
    border-color: #dfe8f0;
    opacity: 0.92;
}

.admin-workflow-mail-card.is-waiting {
    background: #fffaf0;
    border-color: #efdcb6;
}

.admin-workflow-mail-card.is-error {
    background: #fff4f3;
    border-color: #f1d2cf;
}

.admin-workflow-mail-card.is-overdue {
    background: #fff7ef;
    border-color: #f0ddc0;
}

.admin-workflow-mail-card.is-sent {
    background: #eff8f3;
    border-color: #cfe8da;
}

.admin-workflow-kpi-card .admin-workflow-kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: #4f6780;
    letter-spacing: 0.02em;
    min-width: 0;
}

.admin-workflow-kpi-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: hidden;
}

.admin-workflow-kpi-indicator.is-success {
    background: rgba(34, 120, 72, 0.12);
    color: #1f6d45;
}

.admin-workflow-kpi-indicator.is-danger {
    background: rgba(186, 58, 58, 0.12);
    color: #a53838;
}

.admin-workflow-kpi-indicator.is-neutral,
.admin-workflow-kpi-indicator.is-warning {
    background: rgba(86, 109, 132, 0.12);
    color: #5a7188;
}

.admin-workflow-kpi-indicator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.admin-workflow-kpi-indicator.is-success .admin-workflow-kpi-indicator-icon {
    background: #1f6d45;
}

.admin-workflow-kpi-indicator.is-danger .admin-workflow-kpi-indicator-icon {
    background: #a53838;
}

.admin-workflow-kpi-indicator.is-neutral .admin-workflow-kpi-indicator-icon,
.admin-workflow-kpi-indicator.is-warning .admin-workflow-kpi-indicator-icon {
    background: #566d84;
}

.admin-workflow-kpi-indicator-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-workflow-kpi-value {
    font-size: 15px;
    font-weight: 800;
    color: #24384b;
    line-height: 1.1;
}

.admin-workflow-kpi-card.is-success {
    background: #f1faf5;
    border-color: #cfe8da;
}

.admin-workflow-kpi-card.is-warning {
    background: #fff8ee;
    border-color: #efdcb6;
}

.admin-workflow-kpi-card.is-danger {
    background: #fff4f2;
    border-color: #f1d2cf;
}

.admin-workflow-kpi-card.is-neutral {
    background: #f7fafc;
    border-color: #dfe8f0;
}

.admin-workflow-kpi-norm {
    display: none;
}

.admin-workflow-kpi-norm.is-success {
    color: #2f8f5b;
}

.admin-workflow-kpi-norm.is-warning {
    color: #c47b18;
}

.admin-workflow-kpi-norm.is-danger {
    color: #c44640;
}

.admin-workflow-kpi-progress {
    display: none;
}

.admin-workflow-mail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admin-workflow-mail-label {
    font-size: 12px;
    font-weight: 700;
    color: #314961;
}

.admin-workflow-mail-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid transparent;
}

.admin-workflow-mail-badge.is-success {
    color: #16643a;
    background: #e5f5eb;
    border-color: #c7e7d3;
}

.admin-workflow-mail-badge.is-warning {
    color: #a8630f;
    background: #fff6e8;
    border-color: #f3dfb7;
}

.admin-workflow-mail-badge.is-danger {
    color: #b93e3e;
    background: #fff0ef;
    border-color: #f4d3d0;
}

.admin-workflow-mail-badge.is-neutral {
    color: #688095;
    background: #f7fafc;
    border-color: #dfe8f0;
}

.admin-workflow-mail-meta {
    font-size: 11px;
    color: #6f8498;
    line-height: 1.4;
}

.admin-workflow-mail-error {
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid #f1d2cf;
    background: #fff7f6;
    color: #a34c4c;
    font-size: 11px;
    line-height: 1.4;
}

.admin-workflow-mail-action {
    width: fit-content;
}

.admin-workflow-inline-loading {
    font-size: 12px;
    color: #7c90a4;
}

.admin-workflow-inline-feedback {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.admin-workflow-inline-feedback.is-success {
    color: #1f7a4c;
}

.admin-workflow-inline-feedback.is-error {
    color: #b13e3e;
}

.admin-workflow-history-inline {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e0e8f0;
}

.admin-workflow-history-title {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #71879c;
}

.admin-workflow-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.admin-workflow-history-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #dfe8f0;
    background: #ffffff;
    font-size: 11px;
    color: #60768b;
}

.admin-workflow-time-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: min(240px, 90vw);
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #d9e4ee;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(26, 45, 68, 0.16);
}

.admin-workflow-time-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.stremming-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e6bf83;
    background: #fff6e7;
    color: #b46f1a;
    border-radius: 6px;
    padding: 2px 8px;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.stremming-none {
    color: #95a4b6;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 13px;
}

.action-buttons {
    display: flex;
    gap: 5px;
}

.action-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    background: transparent;
}

.action-btn.primary {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
}

.action-btn.primary:hover {
    background: #0b5c56;
    border-color: #0b5c56;
}

.action-btn-edit {
    background: #1f5f8b;
    border-color: #1f5f8b;
    color: #ffffff;
}

.action-btn-edit:hover {
    background: #184f76;
    border-color: #184f76;
}

.action-btn-delete {
    background: #fff;
    border-color: #ebc5c5;
    color: #b35e5e;
}

.action-btn-delete:hover {
    background: #fff5f5;
    border-color: #e1aaaa;
    color: #9f4848;
}

.action-btn-pdf {
    background: transparent;
    border-color: #d9e3ec;
    color: #5a7085;
}

.action-btn-pdf:hover {
    background: #f0f5f9;
    border-color: #c9d8e5;
}

.action-btn-details {
    background: transparent;
    border-color: #dbe5ef;
    color: #5d7489;
}

.action-btn-details:hover {
    background: #f6f9fc;
    border-color: #cedbe8;
}

.admin-bottom-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: #f4f8fc;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    color: var(--muted);
}

.admin-bottom-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-bottom-right {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-success {
    background: #d7f3e7;
    color: #106340;
}

.badge-warning {
    background: #fff1d9;
    color: #8a5310;
}

.badge-info {
    background: #e9f3fb;
    color: #245b87;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.success-message {
    background: var(--secondary);
    color: white;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-weight: 600;
    text-align: center;
}

.error-message {
    background: var(--danger);
    color: white;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-weight: 600;
    text-align: center;
}

.loading {
    text-align: center;
    padding: 60px;
    color: var(--medium);
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--medium);
}

.empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.text-center {
    text-align: center;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.pdf-export-modal {
    max-width: 560px;
    border: 1px solid #dde5ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
}

.pdf-export-kicker {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b8ea2;
    margin-bottom: 6px;
}

.pdf-export-options {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.pdf-export-option {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #d9e3ec;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pdf-export-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pdf-export-option.is-active {
    border-color: #7fa6c4;
    background: #f4f9fd;
    box-shadow: 0 0 0 3px rgba(127, 166, 196, 0.16);
}

.pdf-export-option-label {
    font-weight: 700;
    color: #24384c;
}

.pdf-export-option-help {
    color: #698095;
    font-size: 13px;
    line-height: 1.4;
}

.pdf-export-footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.mail-format-dialog {
    max-width: 560px;
}

.mail-format-message {
    margin: 0 0 14px;
    color: #344256;
    line-height: 1.5;
}

.mail-format-recipients {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #1f2937;
}

.mail-format-recipients strong {
    color: #52627a;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.excel-export-object-section {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.excel-export-object-section .form-group {
    display: grid;
    gap: 8px;
}

.excel-export-selection-summary {
    font-size: 13px;
    font-weight: 600;
    color: #496277;
}

.excel-export-object-list {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.excel-export-object-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "input name"
        "input meta";
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid #d9e3ec;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.excel-export-object-option input {
    grid-area: input;
    margin-top: 2px;
}

.excel-export-object-option.is-active {
    border-color: #7fa6c4;
    background: #f4f9fd;
    box-shadow: 0 0 0 3px rgba(127, 166, 196, 0.12);
}

.excel-export-object-name {
    grid-area: name;
    font-weight: 700;
    color: #24384c;
}

.excel-export-object-meta {
    grid-area: meta;
    font-size: 13px;
    color: #698095;
    line-height: 1.4;
}

.restpunt-badge.status-inactive {
    background: #eef3f7;
    color: #637b90;
}

.restpunten-kpi-item.is-review-ready strong {
    color: #1f9d63;
}

.restpunten-kpi-item.is-review-blocked strong {
    color: #8a5a12;
}

.restpunten-import-modal {
    max-width: 1100px;
}

.restpunten-import-layout {
    display: grid;
    gap: 16px;
}

.restpunten-import-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.restpunten-import-summary-card {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #dbe3eb;
    border-radius: 10px;
    background: #fff;
}

.restpunten-import-summary-card strong {
    font-size: 22px;
    line-height: 1;
    color: #1f3b57;
}

.restpunten-import-summary-card span {
    font-size: 13px;
    color: #6a7f93;
}

.restpunten-import-summary-card.is-valid {
    background: #f0fdf4;
    border-color: #cce8d4;
}

.restpunten-import-summary-card.is-valid strong {
    color: #15803d;
}

.restpunten-import-summary-card.is-error {
    background: #fff7ed;
    border-color: #f5d5b1;
}

.restpunten-import-summary-card.is-error strong {
    color: #c2410c;
}

.restpunten-import-summary-card.is-skipped {
    background: #f8fafc;
    border-color: #d7dfe7;
}

.restpunten-import-summary-card.is-skipped strong {
    color: #475569;
}

.restpunten-import-table-wrap {
    border: 1px solid #dde5ee;
    border-radius: 12px;
    overflow: auto;
    max-height: 360px;
}

.restpunten-import-table tbody tr.is-valid {
    background: #f8fdf9;
}

.restpunten-import-table tbody tr.is-invalid {
    background: #fffaf7;
}

.restpunten-import-table tbody tr.is-duplicate {
    background: #f8fafc;
}

.restpunten-import-result {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.restpunten-import-result.valid {
    color: #166534;
    background: #dcfce7;
}

.restpunten-import-result.invalid {
    color: #b45309;
    background: #fef3c7;
}

.restpunten-import-result.skipped {
    color: #475569;
    background: #e2e8f0;
}

.restpunten-import-messages {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.restpunten-import-message {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #dbe3eb;
    color: #42566b;
    font-size: 13px;
}

.about-modal {
    max-width: 860px;
    border: 1px solid #dde5ee;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

.about-kicker {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f90a4;
    margin-bottom: 6px;
}

.about-version-line {
    font-size: 22px;
    font-weight: 700;
    color: #23384d;
    margin-bottom: 8px;
}

.about-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #6f8196;
    font-size: 13px;
    margin-bottom: 18px;
}

.about-divider {
    height: 1px;
    background: linear-gradient(90deg, #d7e1ea 0%, rgba(215, 225, 234, 0) 100%);
    margin: 6px 0 18px;
}

.about-divider-spacious {
    margin-top: 18px;
}

.about-credit-label {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f90a4;
    margin-bottom: 6px;
}

.about-credit-name {
    font-size: 18px;
    font-weight: 700;
    color: #1f3448;
}

.about-release-section {
    display: grid;
    gap: 16px;
}

.android-app-shell {
    display: grid;
    gap: 20px;
}

.android-app-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 26px;
    border: 1px solid #d8e6d0;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(103, 163, 59, 0.12), transparent 34%),
        linear-gradient(180deg, #fbfff8 0%, #f7fbf4 100%);
}

.android-app-hero-copy {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.android-app-kicker,
.android-app-section-kicker,
.android-app-meta-label,
.android-app-step-callout-label,
.android-app-screenshot-step {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.android-app-kicker,
.android-app-section-kicker {
    color: #5c8740;
}

.android-app-hero-text,
.android-app-card-text {
    color: #55697d;
    font-size: 15px;
    line-height: 1.65;
}

.android-app-hero-badge {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #d9e7cf;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 28px rgba(31, 52, 72, 0.06);
}

.android-app-hero-badge-icon,
.android-app-meta-icon,
.android-app-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.android-app-hero-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e5f2da;
    color: #437122;
}

.android-app-inline-icon {
    width: 18px;
    height: 18px;
}

.android-app-hero-badge-label {
    color: #74879b;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.android-app-hero-badge-value {
    color: #20374f;
    font-size: 15px;
    font-weight: 700;
}

.android-app-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 18px;
}

.android-app-primary-column,
.android-app-secondary-column {
    display: grid;
    gap: 18px;
    align-content: start;
}

.android-app-card {
    border: 1px solid #dbe4ec;
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    box-shadow: 0 12px 28px rgba(24, 43, 65, 0.06);
}

.android-app-card-cta {
    background:
        radial-gradient(circle at top right, rgba(41, 128, 185, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.android-app-card-alert {
    border-color: #ead9c8;
    background:
        radial-gradient(circle at top right, rgba(201, 131, 24, 0.08), transparent 34%),
        linear-gradient(180deg, #fffdf9 0%, #fff9f1 100%);
}

.android-app-card-security {
    border-color: #d7e6db;
    background:
        radial-gradient(circle at top right, rgba(15, 159, 102, 0.08), transparent 34%),
        linear-gradient(180deg, #fbfffd 0%, #f6fbf8 100%);
}

.android-app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.android-app-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #20374f;
    line-height: 1.2;
}

.android-app-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #d8e6cf;
    background: #f6fbf1;
    color: #50772f;
    font-size: 12px;
    font-weight: 700;
}

.android-app-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #eef4f8;
    color: #456279;
    padding: 10px;
}

.android-app-card-icon.is-warning {
    background: #fff0da;
    color: #b37417;
}

.android-app-card-icon.is-safe {
    background: #e9f6ee;
    color: #1d8d58;
}

.android-app-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.android-app-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dee7ef;
    border-radius: 14px;
    background: #ffffff;
}

.android-app-meta-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef4f8;
    color: #335f87;
}

.android-app-meta-label {
    color: #8293a5;
    margin-bottom: 5px;
}

.android-app-meta-value {
    color: #21384d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.android-app-cta-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.android-app-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding-inline: 18px;
    font-size: 14px;
    box-shadow: 0 12px 22px rgba(31, 95, 139, 0.2);
}

.android-app-button-icon {
    width: 16px;
    height: 16px;
}

.android-app-download-note {
    color: #6c8196;
    font-size: 13px;
    font-weight: 600;
}

.android-app-release-list {
    display: grid;
    gap: 12px;
}

.android-app-release-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #dee7ef;
    border-radius: 14px;
    background: #ffffff;
}

.android-app-release-index {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5fb;
    color: #245b87;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
}

.android-app-release-copy {
    min-width: 0;
}

.android-app-release-title {
    color: #23384d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.android-app-release-subtle {
    margin-top: 4px;
    color: #72869a;
    font-size: 12px;
}

.android-app-release-icon {
    width: 18px;
    height: 18px;
    color: #19955e;
}

.android-app-steps {
    display: grid;
    gap: 14px;
}

.android-app-step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 18px;
    border: 1px solid #dee7ef;
    border-radius: 16px;
    background: #ffffff;
}

.android-app-step-marker {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #edf6e4 0%, #dff0cf 100%);
    color: #487225;
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
}

.android-app-step-content {
    display: grid;
    gap: 12px;
}

.android-app-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #20374f;
}

.android-app-step-list,
.android-app-samsung-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: #41586d;
    font-size: 14px;
    line-height: 1.6;
}

.android-app-step-callouts {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.android-app-step-callout {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #e1e9f1;
    border-radius: 12px;
    background: #f8fbfd;
}

.android-app-step-callout-label {
    color: #7a8ea2;
}

.android-app-step-callout-text {
    color: #294056;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

.android-app-samsung-list {
    margin-top: 14px;
}

.android-app-screenshot-single-wrap {
    display: flex;
    justify-content: center;
}

.android-app-screenshot-single-card {
    width: 100%;
    max-width: 760px;
    margin: 0;
}

.android-app-screenshot-single-frame {
    border: 1px solid #dce5ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbfe 0%, #eef4f8 100%);
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(24, 43, 65, 0.08);
}

.android-app-screenshot-single-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.about-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.about-section-kicker {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f90a4;
    margin-bottom: 6px;
}

.about-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #20374f;
}

.about-section-hint {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #dde7f0;
    border-radius: 999px;
    background: #f7fafd;
    color: #62788f;
    font-size: 12px;
    font-weight: 600;
}

.release-list {
    display: grid;
    gap: 14px;
}

.release-card {
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    box-shadow: 0 14px 32px rgba(24, 43, 65, 0.06);
    overflow: hidden;
}

.release-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 18px;
}

.release-card-headline {
    display: grid;
    gap: 10px;
}

.release-version-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.release-version-badge,
.release-codename-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}

.release-version-badge {
    background: #e9f3fb;
    border: 1px solid #cfe1f0;
    color: #245b87;
}

.release-codename-badge {
    background: #f1f5f9;
    border: 1px solid #dde5ee;
    color: #4a6076;
}

.release-date {
    font-size: 14px;
    color: #61778c;
    font-weight: 600;
}

.release-toggle-btn {
    border: 1px solid #d8e2ec;
    border-radius: 999px;
    background: #ffffff;
    color: #4f667d;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.release-toggle-btn:hover {
    background: #f4f8fb;
    border-color: #c9d8e6;
    color: #35516b;
}

.release-sections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 22px 22px;
}

.release-section {
    display: grid;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #e0e8f1;
    background: #ffffff;
}

.release-section.is-new {
    background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
    border-color: #d5e8f5;
}

.release-section.is-improvements {
    background: linear-gradient(180deg, #f7fcfa 0%, #ffffff 100%);
    border-color: #d5eadf;
}

.release-section.is-fixes {
    background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
    border-color: #edd8dd;
}

.release-section-title {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #53697f;
}

.release-section-list {
    display: grid;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.release-section-list li {
    position: relative;
    padding-left: 16px;
    color: #294056;
    font-size: 14px;
    line-height: 1.55;
}

.release-section-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fa4b8;
}

.release-section.is-new .release-section-list li::before {
    background: #3f89bf;
}

.release-section.is-improvements .release-section-list li::before {
    background: #2d9b68;
}

.release-section.is-fixes .release-section-list li::before {
    background: #b9636e;
}

.release-status-card {
    border: 1px solid #dde6ef;
    border-radius: 14px;
    background: #f8fbfd;
    color: #5d7288;
    padding: 16px;
    font-size: 14px;
}

.release-status-card.is-error {
    border-color: #eed7dc;
    background: #fff8f9;
    color: #9c4f59;
}

.admin-detail-modal {
    max-width: 980px;
    width: min(96vw, 980px);
    padding: 0;
    background: #f7fafc;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.admin-detail-header {
    margin-bottom: 0;
    padding: 24px 28px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    border-bottom: 1px solid #e3ebf2;
    align-items: flex-start;
    flex: 0 0 auto;
}

.admin-detail-header-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-detail-kicker {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #73879d;
}

.admin-detail-title {
    margin: 0;
}

.admin-detail-header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-detail-print-btn {
    padding-inline: 12px;
}

.admin-detail-date {
    font-size: 13px;
    color: #5e7287;
}

.admin-detail-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

.admin-inline-feedback {
    margin: 18px 28px 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.admin-inline-feedback.is-success {
    background: #e9f7ef;
    border: 1px solid #cde8d9;
    color: #236943;
}

.admin-inline-feedback.is-error {
    background: #fdeeee;
    border: 1px solid #f0d1d1;
    color: #9f3f3f;
}

.admin-detail-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 28px 28px;
}

.admin-detail-card {
    background: #ffffff;
    border: 1px solid #e2eaf1;
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 8px 20px rgba(32, 55, 79, 0.05);
}

.admin-detail-card-wide {
    grid-column: 1 / -1;
}

.admin-detail-section-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #2d4157;
    margin-bottom: 14px;
}

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

.admin-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.admin-detail-form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.admin-detail-form-item-wide {
    grid-column: 1 / -1;
}

.admin-detail-label {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b8ea2;
}

.admin-detail-value {
    color: #20374f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    min-height: 20px;
    overflow-wrap: anywhere;
}

.admin-detail-textstack {
    display: grid;
    gap: 12px;
}

.admin-detail-note {
    margin-top: 12px;
    font-size: 12px;
    color: #647a90;
    line-height: 1.45;
}

.admin-detail-textblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-detail-text {
    background: #f6f9fc;
    border: 1px solid #e3ebf3;
    border-radius: 10px;
    padding: 12px 14px;
    color: #2d4259;
    line-height: 1.6;
    white-space: pre-wrap;
}

.admin-detail-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.admin-detail-pill-alert {
    color: #9c6418;
    background: #fff2dd;
    border: 1px solid #f0d3a5;
}

.admin-detail-pill-muted {
    color: #6c8197;
    background: #f2f6fa;
    border: 1px solid #dde6ee;
}

.admin-detail-empty {
    border: 1px dashed #d7e1ea;
    border-radius: 12px;
    padding: 18px;
    color: #6f8498;
    background: #f8fbfd;
    text-align: center;
}

.admin-detail-attachments {
    display: grid;
    gap: 16px;
}

.admin-detail-attachment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.admin-upload-btn {
    position: relative;
    overflow: hidden;
}

.admin-upload-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-detail-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.admin-detail-attachment-thumb {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #dfe8f0;
    background: #fbfdff;
    color: #33506c;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-detail-attachment-thumb:hover {
    border-color: #c9d7e5;
    box-shadow: 0 8px 20px rgba(32, 55, 79, 0.08);
    transform: translateY(-1px);
}

.admin-detail-attachment-thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef3f7;
}

.admin-detail-attachment-thumb span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.admin-detail-attachment-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-detail-file-list {
    display: grid;
    gap: 10px;
}

.admin-detail-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #dfe8f0;
    background: #fbfdff;
}

.admin-detail-file-meta {
    min-width: 0;
}

.admin-detail-file-name {
    font-size: 13px;
    font-weight: 700;
    color: #2d4157;
    overflow-wrap: anywhere;
}

.admin-detail-file-type {
    margin-top: 4px;
    font-size: 12px;
    color: #72869a;
}

.admin-detail-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.admin-pending-files {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-pending-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #dfe8f0;
    background: #fbfdff;
}

.admin-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: #2d4259;
}

.admin-detail-footer {
    padding: 0 28px 24px;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-modal {
    max-width: 1320px;
    width: min(96vw, 1320px);
    border: 1px solid #dde6ee;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: 0 24px 64px rgba(20, 41, 68, 0.18);
}

.workflow-modal-header {
    margin-bottom: 0;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #e3ebf2;
    align-items: flex-start;
}

.workflow-modal-body {
    padding: 18px 28px 26px;
}

.workflow-modal-layout {
    display: grid;
    gap: 18px;
}

.workflow-modal-section {
    background: #ffffff;
    border: 1px solid #dfe8f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(32, 55, 79, 0.04);
}

.workflow-modal-section-primary {
    padding: 20px 20px 18px;
}

.workflow-modal-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.workflow-modal-section-compact {
    min-height: 100%;
}

.workflow-modal-section-wide {
    grid-column: 1 / -1;
}

.workflow-modal-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2d4157;
    margin-bottom: 8px;
}

.workflow-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.workflow-quick-note {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #dfe8f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.workflow-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.workflow-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-help-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b8095;
    line-height: 1.45;
}

.workflow-context-box {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e1e9f1;
    background: #f8fbfd;
    color: #294056;
    font-size: 13px;
}

.workflow-modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-card {
    display: grid;
    gap: 20px;
}

.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.workflow-card-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7d93a8;
}

.workflow-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #24384b;
}

.workflow-card-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-card-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #dbe5ee;
    background: #f6f9fc;
    color: #566d84;
    font-size: 12px;
    font-weight: 700;
}

.workflow-card-chip.is-progress {
    background: #eef6ff;
    border-color: #cfe0f1;
    color: #245b87;
}

.workflow-card-empty {
    border: 1px dashed #d9e4ee;
    border-radius: 14px;
    padding: 18px;
    background: #f8fbfd;
    color: #6b8095;
    text-align: center;
}

.workflow-rail {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 16px 8px;
    border: 1px solid #dde7f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
    overflow-x: auto;
}

.workflow-rail-step {
    min-width: 108px;
    display: grid;
    gap: 10px;
}

.workflow-rail-step-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workflow-rail-circle {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 2px solid #d7e2ec;
    background: #f5f8fb;
    color: #8aa0b5;
    font-weight: 800;
    flex: 0 0 auto;
}

.workflow-rail-step.is-completed .workflow-rail-circle {
    border-color: #3aa36c;
    background: #3aa36c;
    color: #fff;
}

.workflow-rail-step.is-active .workflow-rail-circle {
    border-color: #d6871f;
    color: #d6871f;
    background: #fff7eb;
}

.workflow-rail-step.is-clickable .workflow-rail-circle {
    cursor: pointer;
}

.workflow-rail-line {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: #e5edf4;
}

.workflow-rail-step.is-completed .workflow-rail-line {
    background: #55b67f;
}

.workflow-rail-label {
    font-size: 12px;
    font-weight: 700;
    color: #42596f;
    line-height: 1.35;
}

.workflow-step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.workflow-step-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 176px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #e1e9f1;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.workflow-step-card.is-active {
    border-color: #e7c48d;
    background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%);
}

.workflow-step-card.is-completed {
    background: linear-gradient(180deg, #f9fcfb 0%, #ffffff 100%);
}

.workflow-step-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.workflow-step-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #294056;
    line-height: 1.3;
}

.workflow-step-card-state {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a9db0;
}

.workflow-step-card.is-active .workflow-step-card-state {
    color: #b26d18;
}

.workflow-step-card.is-completed .workflow-step-card-state {
    color: #2a8755;
}

.workflow-step-activate-btn {
    border: 1px solid #bfd1f6;
    color: #2d63dd;
    background: #f4f8ff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.workflow-step-meta {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #7f93a8;
    line-height: 1.4;
}

.workflow-step-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-inline-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #e1e9f1;
    width: fit-content;
}

.workflow-inline-pill.is-success,
.workflow-mail-status.is-success {
    color: #16643a;
    background: #e5f5eb;
    border-color: #c7e7d3;
}

.workflow-inline-pill.is-danger,
.workflow-mail-status.is-danger {
    color: #b93e3e;
    background: #fff0ef;
    border-color: #f4d3d0;
}

.workflow-inline-pill.is-warning,
.workflow-mail-status.is-warning {
    color: #a8630f;
    background: #fff6e8;
    border-color: #f3dfb7;
}

.workflow-inline-pill.is-neutral,
.workflow-mail-status.is-neutral {
    color: #688095;
    background: #f7fafc;
    border-color: #dfe8f0;
}

.workflow-step-mail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 28px;
}

.workflow-mail-btn {
    margin: 0;
}

.workflow-mail-indicator {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe8f0;
    background: #fff;
    color: #98a9ba;
    font-size: 13px;
}

.workflow-mail-indicator.is-success {
    color: #b93e3e;
    background: #fff0ef;
    border-color: #f4d3d0;
}

.workflow-time-edit-btn {
    border: 1px solid #bfd1f6;
    color: #2d63dd;
    background: #f7faff;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
    cursor: pointer;
}

.workflow-step-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.workflow-history {
    display: grid;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid #e3ebf2;
}

.workflow-history-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.workflow-history-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #62778d;
}

.workflow-history-caption {
    font-size: 12px;
    color: #7b90a5;
}

.workflow-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.workflow-history-item {
    border: 1px solid #e1e9f1;
    border-radius: 12px;
    padding: 12px;
    background: #f8fbfd;
}

.workflow-history-label {
    font-size: 13px;
    font-weight: 700;
    color: #294056;
}

.workflow-history-meta {
    font-size: 12px;
    color: #7d93a8;
    margin-top: 4px;
}

.workflow-history-note {
    margin-top: 6px;
    font-size: 12px;
    color: #41586c;
    line-height: 1.45;
}

.workflow-time-editor {
    display: grid;
    gap: 12px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
}

.login-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-title-icon {
    width: 18px;
    height: 18px;
    color: #4f6277;
    flex: 0 0 auto;
}

.login-actions {
    justify-content: center;
}

.login-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 170px;
    padding-inline: 18px;
}

.login-submit-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.login-security-note {
    margin: 20px auto 0;
    width: min(100%, 320px);
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--dark);
    text-align: center;
}

.login-security-icon {
    width: 150px;
    height: 150px;
    color: #5f7388;
    flex: 0 0 auto;
    opacity: 0.88;
}

.login-security-copy {
    display: grid;
    gap: 4px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--medium);
}

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

.monteur-sections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.monteur-card {
    background: var(--light);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.monteur-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

.monteur-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.monteur-control {
    background: white;
}

.monteur-checkbox-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.monteur-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.monteur-subgrid-spacing {
    margin-top: 12px;
}

.monteur-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

.monteur-bijlagen-card {
    margin-top: 16px;
}

.monteur-bijlagen-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 1280px) {
    .header {
        flex-wrap: wrap;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sla-dashboard-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .android-app-grid {
        grid-template-columns: 1fr;
    }

    .android-app-secondary-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .monteur-top-grid {
        grid-template-columns: 1fr;
    }

    .android-app-hero {
        flex-direction: column;
    }

    .android-app-hero-badge {
        width: 100%;
        flex-basis: auto;
    }

    .android-app-secondary-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .restpunten-data-table,
    .restpunten-data-table tbody,
    .restpunten-data-table tr,
    .restpunten-data-table td {
        display: block;
        width: 100%;
    }

    .restpunten-data-table thead {
        display: none;
    }

    .restpunten-data-table tbody {
        display: grid;
        gap: 12px;
    }

    .restpunten-table-row {
        border: 1px solid var(--rest-border);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(26, 34, 51, 0.05);
        overflow: hidden;
    }

    .restpunten-table-row td {
        padding: 10px 14px;
        border-top: 1px solid #edf1f5;
    }

    .restpunten-table-row td:first-child {
        border-top: none;
    }

    .restpunten-cell-description {
        order: -10;
        min-width: 0;
    }

    .restpunten-cell-actions {
        order: 20;
    }

    .mobile-label {
        display: inline-block;
        margin-bottom: 6px;
        font-family: "IBM Plex Mono", Consolas, monospace;
        font-size: 10px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rest-text-muted);
    }

    .restpunten-description-with-indicator {
        align-items: flex-start;
    }

    .restpunten-cell-actions .action-buttons {
        justify-content: flex-start;
    }

    .restpunten-row-detail {
        margin-top: -6px;
    }

    .restpunten-row-detail td {
        display: block;
        padding: 0;
        border: none;
        background: transparent;
    }

    .restpunten-detail-shell {
        margin-left: 12px;
    }

    .restpunten-detail-context-bar {
        padding: 12px 14px;
    }

    .content {
        padding: 14px;
    }

    .dashboard-title {
        font-size: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .sla-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .sla-dashboard-table-wrap {
        overflow-x: auto;
    }

    .sla-dashboard-table {
        min-width: 720px;
    }

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

    .admin-filter-bar {
        gap: 6px;
    }

    .admin-search-wrap,
    .admin-filter-select,
    .admin-filter-reset-btn {
        width: 100%;
        flex-basis: 100%;
    }

    .header-user-chip {
        width: 100%;
        border-radius: 10px;
        justify-content: space-between;
    }

    .nav-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .admin-detail-layout {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .release-sections-grid {
        grid-template-columns: 1fr;
        padding: 0 18px 18px;
    }

    .release-card-top {
        padding: 18px;
        flex-direction: column;
        align-items: stretch;
    }

    .android-app-card,
    .android-app-hero {
        padding: 18px;
    }

    .android-app-meta-grid,
    .android-app-step-callouts {
        grid-template-columns: 1fr;
    }

    .android-app-step-card {
        grid-template-columns: 1fr;
    }

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

    .admin-workflow-inline-cell {
        min-width: 300px;
    }

    .admin-workflow-panel-grid {
        grid-template-columns: 1fr;
    }

    .admin-workflow-strip {
        min-width: 760px;
    }

    .admin-inline-feedback {
        margin-inline: 18px;
    }

    .admin-detail-attachment-toolbar,
    .workflow-status-row,
    .workflow-actions,
    .workflow-modal-footer,
    .admin-detail-footer,
    .admin-detail-row-actions,
    .admin-pending-file-row,
    .workflow-panel-header,
    .workflow-history-header {
        flex-direction: column;
        align-items: stretch;
    }

    .workflow-modal-secondary {
        grid-template-columns: 1fr;
    }

    .workflow-step-grid,
    .workflow-history-list,
    .workflow-rail {
        grid-template-columns: 1fr;
    }

    .workflow-modal-layout {
        grid-template-columns: 1fr;
    }

    .admin-detail-header {
        padding: 20px 18px 16px;
    }

    .admin-bottom-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .monteur-card {
        padding: 18px;
    }
}