:root {
    color-scheme: light;
    --xp-green: #16833b;
    --xp-green-dark: #0f6a2e;
    --xp-bg: #f3f7f4;
    --xp-surface: #ffffff;
    --xp-surface-2: #eaf2ec;
    --xp-border: #cfddd3;
    --xp-text: #17251c;
    --xp-muted: #5f7065;
    --xp-warning: #9a6200;
    --xp-danger: #b4232c;
}

body,
.sales-dashboard {
    background: #f3f7f4;
    color: var(--xp-text);
}

.app-shell {
    background: linear-gradient(180deg, #f8fbf9 0, #f3f7f4 240px);
}

.driver-card,
.customer-result,
.panel,
.route-card,
.today-route-card,
.today-current-stop,
.driver-progress-panel,
.route-edit-panel,
.route-completed-panel {
    border-color: var(--xp-border);
    background: #fff;
    color: var(--xp-text);
    box-shadow: 0 8px 24px rgba(25, 64, 39, .055);
}

.app-header,
.sales-header,
.panel-header,
.route-card-footer,
.today-route-footer {
    border-color: var(--xp-border);
}

.app-kicker,
.logo-text,
.route-title,
.driver-profile-summary strong,
.route-start-copy strong,
.route-edit-context-label {
    color: var(--xp-green-dark);
}

.version-badge,
.driver-profile-summary,
.route-start-panel {
    border-color: rgba(22, 131, 59, .28);
    background: #edf7f0;
    color: var(--xp-green-dark);
}

textarea,
.driver-profile-card input,
.external-location-dialog input,
.alternate-address-dialog input[type="text"],
.alternate-address-dialog input[name="label"],
.alternate-address-dialog input[name="addressQuery"],
.today-search-form input,
.history-filter-form input {
    border-color: #c9d8ce;
    background: #fff;
    color: var(--xp-text);
}

textarea::placeholder,
input::placeholder {
    color: #829087;
}

textarea:focus,
.driver-profile-card input:focus,
.today-search-form input:focus,
.history-filter-form input:focus {
    border-color: var(--xp-green);
    box-shadow: 0 0 0 3px rgba(22, 131, 59, .13);
}

.primary-action,
.step-number {
    background: #1a9a48;
    color: #fff;
}

.primary-action:hover {
    background: #16833b;
}

.secondary-action,
.danger-action,
.dashboard-nav a,
.btn-small {
    border-color: #bdcec2;
    background: #fff;
    color: #284032;
}

.secondary-action:hover,
.secondary-action:focus,
.dashboard-nav a:hover,
.dashboard-nav a:focus,
.btn-small:hover,
.btn-small:focus {
    border-color: var(--xp-green);
    background: #edf7f0;
    color: #0f6a2e;
}

.danger-action {
    border-color: #e2b8bc;
    color: #9e2029;
}

.route-state,
.route-summary,
.feedback-warning,
.runtime-v2-status-label,
.driver-progress-copy span,
.route-edit-panel > p,
.route-completed-panel p {
    color: var(--xp-muted);
}

#routeStops .quickroute-current-stop,
.driver-stop-current {
    border-color: #58a971;
    background: #f1f8f3;
    box-shadow: 0 0 0 1px rgba(22, 131, 59, .12);
}

#routeStops .quickroute-delivered-stop {
    border-color: #d9e3dc;
    background: #f7f9f7;
}

.quickroute-whatsapp-copy {
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 9px 13px;
    justify-self: start;
    font-size: .82rem;
}

.driver-progress-track {
    background: #dce7df;
}

.driver-progress-track span,
.route-completed-icon {
    background: #2a9a50;
}

.route-edit-actions {
    background: #fff;
}

.route-edit-drag-handle,
.external-location-candidate,
.reusable-external-option,
.saved-alternate-address-option {
    border-color: #c9d8ce;
    background: #f8fbf9;
    color: var(--xp-text);
}

.route-status-inprogress {
    border-color: #58a971;
    background: #edf7f0;
    color: #0f6a2e;
}

.today-current-stop span,
.today-current-stop.delivered-state span {
    color: #0f6a2e;
}

.today-current-stop.waiting-state span {
    color: #8a5900;
}

.route-card:hover,
.today-route-card:hover {
    border-color: #58a971;
}

.feedback-error {
    border-color: #e2b8bc;
    background: #fff1f2;
    color: #8e1d26;
}

.feedback-success {
    border: 1px solid #9bcbaa;
    background: #edf8f0;
    color: #0f6a2e;
}

/* Vandaag en Historie bevatten pagina-lokale stijlen; deze lichte laag is bewust leidend. */
.runtime-summary div,
.runtime-search-results,
.runtime-result,
.runtime-group,
.runtime-trip,
.history-filter,
.history-group,
.history-card,
.today-dashboard-card {
    border-color: var(--xp-border) !important;
    background: #fff !important;
    color: var(--xp-text) !important;
    box-shadow: 0 8px 24px rgba(25, 64, 39, .055) !important;
}

.runtime-trip.cancelled,
.history-card.cancelled {
    border-color: #d5a66d !important;
    background: #fff8ed !important;
}

.runtime-heading p,
.runtime-summary span,
.runtime-group-count,
.runtime-group-summary,
.runtime-driver,
.runtime-trip-meta,
.runtime-note,
.runtime-result span,
.history-page p,
.history-filter label,
.history-group-summary,
.history-card small,
.history-metrics,
.history-note,
.today-dashboard-route-label,
.today-dashboard-departure,
.today-dashboard-customer-number,
.today-dashboard-last-label,
.today-dashboard-last-value strong,
.today-dashboard-last-value span,
.today-dashboard-last-empty,
.today-dashboard-progress {
    color: var(--xp-muted) !important;
}

.runtime-trip-header,
.runtime-trip-footer,
.history-card footer,
.today-dashboard-card-header,
.today-dashboard-current,
.today-dashboard-card-footer {
    border-color: var(--xp-border) !important;
}

.runtime-search input,
.history-filter input,
.history-filter select {
    border: 1px solid #c9d8ce;
    background: #fff;
    color: var(--xp-text);
}

.runtime-search button,
.history-filter button {
    border-color: #1a9a48 !important;
    background: #1a9a48 !important;
    color: #fff !important;
}

.runtime-badge,
.history-status,
.today-dashboard-remaining {
    border-color: #58a971 !important;
    background: #edf7f0 !important;
    color: #0f6a2e !important;
}

.runtime-badge.cancelled,
.history-status.cancelled {
    border-color: #d28a39 !important;
    background: #fff4e4 !important;
    color: #8a4f0d !important;
}

.runtime-result a,
.runtime-trip-footer a,
.history-card a,
.runtime-group-indicator,
.history-group-indicator,
.today-dashboard-section-label {
    color: var(--xp-green-dark) !important;
}

.today-dashboard-route-code,
.today-dashboard-eta,
.today-dashboard-customer-name,
.today-dashboard-empty-value {
    color: var(--xp-text) !important;
}

.today-dashboard-open-route {
    border-color: #bdcec2 !important;
    background: #fff !important;
    color: #284032 !important;
}

.quickroute-help-dialog {
    border-color: var(--xp-border);
    background: #fff;
}

@media (max-width: 520px) {
    .quickroute-whatsapp-copy {
        width: 100%;
    }
}