/*
 * Tema-profil: Schumann (tema "schumann" v1.x, se designpakken).
 *
 * Kun CSS — ingen ordrelogik. Pluginet læser temaets egne tokens (--sch-*) og klæder portalen
 * i samme sprog som forsiden: petrol som grundfarve, orange til handlinger, Roboto til
 * overskrifter og Calibri/Carlito til brødtekst (arves fra temaet; intet hentes udefra).
 * Indlæses automatisk, når det aktive tema er "schumann" (Indstillinger → Crator Portal →
 * Tema-profil). Fallback-værdierne nedenfor er temaets egne, så filen virker også uden temaet.
 */

.crator-portal {
	--crator-accent: var(--sch-petrol, #0F3E4C);
	--crator-accent-contrast: var(--sch-white, #fff);
	--crator-cta: var(--sch-accent, #F39200);
	--crator-cta-hover: #E08600;
	--crator-cta-ink: var(--sch-petrol-ink, #0A2C36);
	--crator-text: var(--sch-ink, #14222A);
	--crator-muted: var(--sch-muted, #4A5A62);
	--crator-border: var(--sch-line, #D9D5CE);
	--crator-field: var(--sch-field, #B9B3A9);
	--crator-surface-alt: var(--sch-sand, #F4F2EE);
	--crator-radius: 4px;
	--crator-head: var(--sch-head, "Roboto", system-ui, sans-serif);
	--crator-chip-bg: var(--sch-chip-bg, #FBEBD2);
	--crator-chip-ink: var(--sch-chip-ink, #7A4A0C);
	--crator-error: #B3261E;
	--crator-danger: #B3261E;
}

/* Portalsiderne er brede (kataloget og tabeller) — temaets standardside er kun 760 px. */
.crator-portal-page .sch-page { max-width: var(--sch-max, 1248px); }
.crator-portal-page .sch-page__content { max-width: none; }

/* Overskrifter ------------------------------------------------------------ */
.crator-portal h3,
.crator-portal h4 { font-family: var(--crator-head); color: var(--crator-accent); margin: 1.4em 0 0.6em; line-height: 1.15; }
.crator-portal h3 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; margin-top: 0; }
.crator-portal h4 { font-size: 19px; font-weight: 700; }

/* Knapper: orange til handlinger (som "Skal vi kontakte dig?"), petrol-outline til resten --- */
.crator-portal .crator-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 4px;
	font-family: var(--crator-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}
.crator-portal .crator-btn:not(.crator-btn--secondary):not(.crator-btn--link) {
	background: var(--crator-cta);
	border-color: var(--crator-cta);
	color: var(--crator-cta-ink);
}
.crator-portal .crator-btn:not(.crator-btn--secondary):not(.crator-btn--link):hover {
	background: var(--crator-cta-hover);
	border-color: var(--crator-cta-hover);
	color: var(--crator-cta-ink);
	filter: none;
}
.crator-portal .crator-btn--secondary { border-color: var(--crator-accent); color: var(--crator-accent); background: transparent; }
.crator-portal .crator-btn--secondary:hover { background: var(--crator-accent); color: var(--crator-accent-contrast); filter: none; }
.crator-portal .crator-btn--link { min-height: 0; padding: 0.25rem 0.4rem; font-family: inherit; font-weight: 400; color: var(--crator-accent); }
.crator-portal .crator-btn[disabled] { opacity: 0.7; cursor: wait; }
.crator-portal :focus-visible { outline: 3px solid var(--sch-accent, #F39200); outline-offset: 2px; }

/* Felter (som kontaktformularen) ------------------------------------------ */
.crator-portal .crator-input {
	font-size: 17px;
	color: var(--crator-text);
	border: 1px solid var(--crator-field);
	border-radius: 4px;
	min-height: 48px;
	padding: 0 14px;
}
.crator-portal textarea.crator-input { padding: 12px 14px; }
.crator-portal .crator-input:focus { border-color: var(--crator-accent); outline: 2px solid var(--crator-accent); outline-offset: 0; }
.crator-portal .crator-input--qty { width: 6rem; min-height: 44px; }
.crator-portal .crator-input[aria-invalid="true"] { border-color: var(--crator-error); }
.crator-portal .crator-form label,
.crator-portal .crator-field label { font-family: var(--crator-head); font-weight: 700; font-size: 15px; }
.crator-portal .crator-field-error { color: var(--crator-error); font-size: 15px; }

/* Tabeller ----------------------------------------------------------------- */
.crator-portal .crator-table th {
	font-family: var(--crator-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--crator-muted);
	border-bottom: 2px solid var(--crator-accent);
}
.crator-portal .crator-table td { border-bottom-color: var(--crator-border); }
.crator-portal .crator-row--gone { background: var(--crator-chip-bg); }

/* Badges: sand-chip som i designet; grøn/rød kun hvor status kræver det ---- */
.crator-portal .crator-badge { background: var(--crator-chip-bg); color: var(--crator-chip-ink); font-family: var(--crator-head); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.crator-portal .crator-badge--ok { background: var(--crator-ok-bg); color: var(--crator-ok); }
.crator-portal .crator-badge--warn { background: var(--crator-chip-bg); color: var(--crator-chip-ink); }
.crator-portal .crator-badge--danger { background: var(--crator-danger-bg); color: var(--crator-danger); }

/* Ordrefremdrift: petrol = overstået, orange = nu ------------------------- */
.crator-portal .crator-step { font-family: var(--crator-head); border-top-color: var(--crator-border); }
.crator-portal .crator-step.is-done { border-top-color: var(--crator-accent); }
.crator-portal .crator-step.is-current { border-top-color: var(--crator-cta); }

.crator-portal .crator-facts dt { font-family: var(--crator-head); font-size: 13px; letter-spacing: 0.04em; }
.crator-portal .crator-timeline li { border-bottom-color: var(--crator-border); }
.crator-portal .crator-total { font-family: var(--crator-head); font-size: 18px; color: var(--crator-accent); }
.crator-portal .crator-price strong { font-family: var(--crator-head); color: var(--crator-accent); }

/* Login og beskeder -------------------------------------------------------- */
.crator-login input[type="text"],
.crator-login input[type="password"] { min-height: 48px; border-color: var(--crator-field); border-radius: 4px; font-size: 17px; }
.crator-login input[type="submit"] {
	min-height: 52px;
	padding: 0 26px;
	border-color: var(--crator-cta);
	background: var(--crator-cta);
	color: var(--crator-cta-ink);
	font-family: var(--crator-head);
	font-weight: 700;
	border-radius: 4px;
}
.crator-login input[type="submit"]:hover { background: var(--crator-cta-hover); border-color: var(--crator-cta-hover); }
.crator-portal--notice { background: var(--crator-surface-alt); border-color: var(--crator-border); }