/* Virtual Marketer ERP: brand tokens and presentation overrides.
 *
 * Loaded after the framework bundles (app_include_css for the Desk, web_include_css for
 * website and login pages), so equal-specificity selectors here win.
 * Palette is derived from the brand mark, see BRANDING.md.
 */

:root,
[data-theme="light"] {
	--vm-crimson: #93112a;
	--vm-rose: #8f254a;
	--vm-plum: #8b3a64;
	--vm-mauve: #8a5380;
	--vm-violet: #8673a6;
	--vm-lavender: #7f80b1;
	--vm-sky: #62add6;

	--vm-primary: #8f254a;
	--vm-primary-hover: #741d40;
	--vm-primary-active: #5a1632;
	--vm-primary-soft: #f6e3ea;
	--vm-primary-softer: #fbf1f5;
	--vm-accent: #6a5a8e;
	--vm-on-primary: #ffffff;

	/* The framework's blue scale drives links, selection, focus and info states. */
	--blue-50: #fbf1f5;
	--blue-100: #f6e3ea;
	--blue-200: #eccad8;
	--blue-300: #dfa8bf;
	--blue-400: #c9789b;
	--blue-500: #a8305a;
	--blue-600: #8f254a;
	--blue-700: #741d40;
	--blue-800: #5a1632;
	--blue-900: #430f26;
	--blue-950: #2c0a19;

	--primary: var(--vm-primary);
	--primary-color: var(--vm-primary);
	--brand-color: var(--vm-primary);
	--btn-primary: var(--vm-primary);
	--sidebar-select-color: var(--vm-primary-soft);
	--progress-bar-bg: var(--vm-primary);
	--checkbox-color: var(--vm-primary);
	--date-active-bg: var(--vm-primary);
	--date-active-text: var(--vm-on-primary);
}

[data-theme="dark"],
.dark {
	--vm-primary: #d9648c;
	--vm-primary-hover: #e07d9f;
	--vm-primary-active: #c9789b;
	--vm-primary-soft: #3a1626;
	--vm-primary-softer: #2c0f1c;
	--vm-accent: #b4a4d3;
	--vm-on-primary: #1a0a11;

	--blue-50: #fbe8ef;
	--blue-100: #f6cfdc;
	--blue-200: #f0b0c6;
	--blue-300: #e88aa9;
	--blue-400: #de6f94;
	--blue-500: #d9648c;
	--blue-600: #b8456f;
	--blue-700: #8f254a;
	--blue-800: #6a1c38;
	--blue-900: #4a1527;
	--blue-950: #2f0f1a;

	--primary: var(--vm-primary);
	--primary-color: var(--vm-primary);
	--brand-color: var(--vm-primary);
	--btn-primary: var(--vm-primary);
	--sidebar-select-color: var(--vm-primary-soft);
	--progress-bar-bg: var(--vm-primary);
	--checkbox-color: var(--vm-primary);
	--date-active-bg: var(--vm-primary);
	--date-active-text: var(--vm-on-primary);
}

/* Solid buttons: default (gray) theme takes the brand colour. Destructive buttons keep red. */
.es-button:not([data-theme]),
.es-button[data-theme="gray"] {
	--bt-solid-bg: var(--vm-primary);
	--bt-solid-bg-hover: var(--vm-primary-hover);
	--bt-solid-bg-active: var(--vm-primary-active);
	--bt-solid-fg: var(--vm-on-primary);
}

.btn.btn-primary {
	color: var(--vm-on-primary);
}

/* ---------- Login and other standalone pages ---------- */

.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-reset-password .page-card {
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, var(--vm-crimson), var(--vm-violet), var(--vm-sky)) 1;
	box-shadow: 0 8px 32px rgba(143, 37, 74, 0.12);
}

.page-card .app-logo {
	height: 44px;
	width: auto;
	max-width: 100%;
}

body:has(.for-login),
body:has(.for-forgot),
body:has(.for-signup),
body:has(.for-reset-password) {
	background-image: linear-gradient(160deg, var(--vm-primary-softer) 0%, var(--bg-color) 55%);
	background-attachment: fixed;
}

.page-card .btn-primary,
.page-card .btn-login {
	background-color: var(--vm-primary);
	border-color: var(--vm-primary);
	color: var(--vm-on-primary);
}

.page-card .btn-primary:hover,
.page-card .btn-login:hover {
	background-color: var(--vm-primary-hover);
	border-color: var(--vm-primary-hover);
}

.page-card a:not(.btn) {
	color: var(--vm-primary);
}

/* Auftragsampel */
:root,
[data-theme="light"] {
	--vm-ampel-green: #2e8b57;
	--vm-ampel-yellow: #d9a406;
	--vm-ampel-red: #93112a;
	--vm-ampel-gray: #9a9aa5;
	--vm-ampel-blue: #2f6fb5;
}
[data-theme="dark"],
.dark {
	--vm-ampel-green: #4fbf84;
	--vm-ampel-yellow: #f0c040;
	--vm-ampel-red: #e8607e;
	--vm-ampel-gray: #8a8a96;
	--vm-ampel-blue: #6aa4e0;
}
.vm-ampel { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.vm-ampel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--vm-ampel-gray); }
.vm-ampel-green { background: var(--vm-ampel-green); }
.vm-ampel-yellow { background: var(--vm-ampel-yellow); }
.vm-ampel-red { background: var(--vm-ampel-red); }
.vm-ampel-gray { background: var(--vm-ampel-gray); }
.vm-ampel-blue { background: var(--vm-ampel-blue); }
/* Draft (blue circle), cancelled (grey cross), completed (grey tick) */
.vm-ampel-icon-cross, .vm-ampel-icon-tick { width: 14px; height: 14px; line-height: 14px; font-size: 10px; font-weight: 700; color: #fff; text-align: center; }
.vm-ampel-icon-cross::after { content: "\2715"; }
.vm-ampel-icon-tick::after { content: "\2713"; }
.vm-ampel-fast { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--vm-ampel-red); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-right: 4px; }
.vm-ampel-block { display: flex; flex-wrap: wrap; gap: 16px; }
.vm-ampel-item { display: inline-flex; align-items: center; gap: 6px; }
.vm-ampel-action { cursor: pointer; color: var(--vm-primary); }

/* Versandzentrum */
.vm-vz { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 24px; }
@media (max-width: 800px) { .vm-vz { grid-template-columns: 1fr; } }
.vm-vz h4 { color: var(--vm-primary); margin-top: 0; }
.vm-vz-order { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 6px; cursor: pointer; }
.vm-vz-order:hover { background: var(--vm-primary-softer); border-color: var(--vm-primary); }
.vm-vz-scan { font-size: 18px; margin-bottom: 8px; }
.vm-vz-msg { min-height: 22px; margin-bottom: 8px; }
.vm-vz-err { color: var(--vm-ampel-red); }
.vm-vz-ok { color: var(--vm-ampel-green); }
.vm-vz-head { margin-bottom: 8px; }
.vm-vz-done { background: var(--vm-primary-softer); }
.vm-vz-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }

/* Retouren: Wareneingang (Desk) und Kundenformular (Website) */
.vm-rw-scan { max-width: 480px; margin-bottom: 12px; }
.vm-rw-msg, .vm-ret-msg { min-height: 24px; margin: 8px 0; }
.vm-rw-err, .vm-ret-msg { color: var(--vm-danger, #c0392b); }
.vm-rw-ok { color: var(--vm-success, #1e8449); }
.vm-rw-done td { background: rgba(30, 132, 73, 0.08); }
.vm-rw-head { margin-bottom: 8px; }
.vm-ret { max-width: 640px; margin: 0 auto; }
.vm-ret-line { padding: 12px 0; border-bottom: 1px solid var(--vm-border, #e5e5e5); }
.vm-ret-line label { display: inline-block; margin-right: 12px; }
.vm-ret-ref { font-size: 1.6em; font-weight: 600; letter-spacing: 0.04em; }