:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --border: #d9e1e7;
    --text: #1f2933;
    --text-soft: #52606d;
    --heading: #102a43;

    --primary: #1f6feb;
    --primary-hover: #1557b0;
	--primary-contrast: #ffffff;
	--accent: #102a43;
	--danger: #d92d20;

	--sidebar-width: 250px;
	--sidebar-collapsed-width: 72px;
	--sidebar-bg: #111827;
	--sidebar-heading: #ffffff;
	--sidebar-text: #d1d5db;
	--sidebar-text-soft: #8f9aab;
	--sidebar-border: rgba(255, 255, 255, 0.09);
	--sidebar-active-bg: rgba(255, 255, 255, 0.08);

    --success-bg: #e8f7ee;
    --success-text: #166534;
    --success-border: #b7e4c7;

    --error-bg: #fdecec;
    --error-text: #b42318;
    --error-border: #f5c2c7;

    --warning-bg: #fff7df;
    --warning-text: #7c4a03;
    --warning-border: #f3b24d;

    --shadow-sm: 0 2px 8px rgba(16, 42, 67, 0.06);
    --shadow-md: 0 10px 30px rgba(16, 42, 67, 0.08);

    --space-sm: 0.625rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
	--radius-button: 10px;
	--radius-control: 10px;
	--radius-tab: 10px;
	--radius-modal: 14px;

    --container: 1360px;
}

html[data-style-profile='casual'] {
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 22px;
	--radius-button: 14px;
	--radius-control: 14px;
	--radius-tab: 999px;
	--radius-modal: 22px;
	--shadow-sm: 0 3px 12px rgba(16, 42, 67, 0.08);
	--shadow-md: 0 14px 34px rgba(16, 42, 67, 0.1);
}

html[data-style-profile='modern'] {
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 18px;
	--radius-button: 10px;
	--radius-control: 10px;
	--radius-tab: 10px;
	--radius-modal: 14px;
}

html[data-style-profile='zakelijk'] {
	--radius-sm: 2px;
	--radius-md: 3px;
	--radius-lg: 4px;
	--radius-button: 2px;
	--radius-control: 2px;
	--radius-tab: 2px;
	--radius-modal: 4px;
	--shadow-sm: none;
	--shadow-md: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    overflow-y: scroll;
}


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f8fafc 0%, #f4f6f8 100%);
    line-height: 1.5;
}

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

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--heading);
    line-height: 1.2;
}

p {
    margin-top: 0;
}

.hidden {
    display: none !important;
}

.modules-table {
    width: 100%;
    table-layout: fixed;
}

.modules-col-name {
    width: 40%;
    vertical-align: middle;
}

.modules-col-status {
    width: 15%;
    text-align: center;
    vertical-align: middle;
}

.modules-col-actions {
    width: 35%;
    text-align: right;
    vertical-align: middle;
}

.modules-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.modules-actions .button {
    min-width: 140px;
    justify-content: center;
}

.modules-description {
    margin-top: 8px;
}

.loyalty-slide-preview {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}
@media print {
    .app-sidebar,
    .app-header,
    .no-print,
    #toast-container,
    #app-modal,
    #app-confirm-modal { display: none !important; }
    .app-main, .app-content, .container { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card { box-shadow: none !important; break-inside: avoid; border: 1px solid #bbb !important; }
    .print-header { display: block; margin-bottom: 18px; }
    .pack-check { font-size: 24px; }
}

.address-lookup-status {
    min-height: 1.5rem;
    color: var(--color-text-muted, #667085);
}

.address-lookup-status.inline-status-error {
    color: var(--color-danger, #b42318);
}

.address-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-3, .75rem);
}

.address-fields > label {
    display: grid;
    gap: var(--space-1, .25rem);
    min-width: 0;
    align-content: start;
}

.address-fields input {
    width: 100%;
    min-width: 0;
}

.address-fields > .address-lookup-status,
.address-fields > .wb-address-action {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .address-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .address-fields > .address-field-street,
    .address-fields > .address-field-city {
        grid-column: 1 / -1;
    }
}

.address-candidates {
    display: grid;
    gap: var(--space-2, .5rem);
}

.address-candidates select {
    width: 100%;
    min-width: 0;
}

.address-suggestions{display:grid;gap:4px;list-style:none;margin:6px 0 0;padding:0;max-height:270px;overflow-y:auto;overscroll-behavior:contain}
.address-suggestions li{margin:0;padding:0;min-width:0}
.address-suggestions button{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;text-align:left;font:inherit;line-height:1.4;white-space:normal;overflow-wrap:anywhere;background:var(--surface,#fff);color:var(--text,#172b3a);border:1px solid var(--border,#ccd5dc);border-radius:6px;touch-action:manipulation;cursor:pointer}
.address-suggestions button:focus-visible{outline:2px solid var(--primary,#ff7300);outline-offset:-2px}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary, #24688f);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

[data-sortable-lines] > .is-dragging {
    opacity: .45;
}

[data-sortable-lines] > .is-drop-target {
    outline: 0;
}

[data-sortable-lines] > .is-drop-after {
    box-shadow: inset 0 -3px 0 var(--tenant-primary, var(--primary, #2563eb));
}

[data-sortable-lines] > tr.is-drop-after > td {
    box-shadow: inset 0 -3px 0 var(--tenant-primary, var(--primary, #2563eb));
}

.ajax-autocomplete {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    z-index: 30;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 18rem;
    overflow: auto;
    padding: .35rem;
    border: 1px solid var(--border, #d0d5dd);
    border-radius: .5rem;
    background: var(--surface, #fff);
    box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .14);
}

.autocomplete-result {
    display: grid;
    width: 100%;
    gap: .15rem;
    padding: .65rem .75rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.autocomplete-result:hover,
.autocomplete-result:focus-visible {
    background: var(--surface-muted, #f5f7fa);
}

.autocomplete-result small {
    color: var(--text-soft, #667085);
}