/*
 * ASF (AS Financiering) theme.
 *
 * Tokens first, rules after: the rules below only reference var(--asf-*), so changing
 * the palette means changing this block only.
 *
 * Palette source: MinSide, Interface/src/themes/themes.ts (palette.primary / palette.secondary).
 * The hover shade is the "light" variant MUI derives from the secondary colour in MinSide.
 * Button roles follow MinSide's MyPageButton, as used in its onboarding flow:
 *   navigate (every step forward: Velg denne, Les og signer, Fortsett, Fullfør, Logg inn/ut)
 *            - secondary background, dark text
 *   cancel   (Avvis, Tilbake, Åpne igjen) - white background, primary border and text
 * MinSide keeps its dark "action" button for modals, which DocumentHub doesn't have.
 * White text on the orange is only 2.3:1, so the orange always carries dark text.
 *
 * Selectors repeat the prefixes of the compiled styles.min.css so these rules win on
 * source order instead of !important.
 */
:root {
	--asf-primary: #1D1D22;
	--asf-on-primary: #FFFFFF;
	--asf-secondary: #FD902B;
	--asf-secondary-hover: #FDA655;
	--asf-on-secondary: #1D1D22;
	--asf-text: #1D1D22;
	--asf-surface: #FFFFFF;
	--asf-disabled-bg: #E0E0E0;
	--asf-disabled-text: #6B6B6B;
	--asf-radius-card: 8px;
	--asf-radius-button: 4px;
	--asf-focus-ring: 2px solid var(--asf-primary);
}

/* Header, logo and background image */
.header-container {
	position: absolute;
	background-color: transparent;
	width: 100%;
}
.header-container header .logo_center img {
	padding-top: 32px;
	height: 64px;
	max-width: 100%;
}
.main-container .main-body {
	background: url(/Images/bg.jpeg) center center no-repeat fixed;
	background-size: contain;
	background-position-y: 0px;
	background-attachment: scroll;
}
@media only screen and (min-width: 480px) {
	.main-container .main-body {
		background: url(/Images/bg.jpeg) center center no-repeat fixed;
		background-size: cover;
	}
}
.login-wrapper {
	padding: 170px 10px 0 10px;
}

/* Text */
html, body {
	color: var(--asf-text);
}
.new-container,
.login-container {
	border-radius: var(--asf-radius-card);
}

/* Step guide. The header above is absolutely positioned and covers the step bar,
   so the logout button needs its own stacking level to stay clickable. */
.step-guide .logout-column {
	z-index: 10;
}
.step-guide .logout-column button {
	color: var(--asf-text);
}
.progress > li.is-active {
	color: var(--asf-primary);
	border-bottom: none;
}
@media only screen and (min-width: 480px) {
	.progress > li.is-active {
		border-bottom: 4px solid var(--asf-primary);
	}
}
.progress > li.is-active:before,
.progress > li.is-complete:before {
	background: var(--asf-primary);
}

/* List cards (Velg avtale, Les og signer) */
.list-wrapper .list-container .item,
.list-wrapper .list-container .item-editing,
.list-wrapper .list-container .item-disabled,
.list-wrapper .list-container .item-signed,
.list-wrapper .list-container .item-done {
	border-radius: var(--asf-radius-card);
}
.list-wrapper .list-container .item .item-info .item-icon,
.list-wrapper .list-container .item-disabled .item-info .item-icon,
.list-wrapper .list-container .item-editing .item-info .item-icon,
.list-wrapper .list-container .item-signed .item-info .item-icon,
.list-wrapper .list-container .item-done .item-info .item-icon {
	color: var(--asf-primary);
}

/* Navigate: Velg denne, Les og signer, Bekreft avvisning */
.list-wrapper .list-container .item .item-action .item-continue,
.list-wrapper .list-container .item-disabled .item-action .item-continue,
.list-wrapper .list-container .item-editing .item-action .item-continue {
	color: var(--asf-on-secondary);
	background-color: var(--asf-secondary);
	border-radius: var(--asf-radius-button);
}
.list-wrapper .list-container .item .item-action .item-continue:hover:not(:disabled),
.list-wrapper .list-container .item-editing .item-action .item-continue:hover:not(:disabled) {
	background-color: var(--asf-secondary-hover);
}

/* Cancel: Avvis, Avbryt */
.list-wrapper .list-container .item .item-action .item-cancel,
.list-wrapper .list-container .item-editing .item-action .item-cancel {
	color: var(--asf-primary);
	background-color: var(--asf-surface);
	border-color: var(--asf-primary);
	border-radius: var(--asf-radius-button);
}

/* Signed document: no green. Orange check (checker.svg), dark text,
   and "Åpne igjen" as a cancel-style button since the task is done. */
.list-wrapper .list-container .item-signed .item-info .item-text *,
.list-wrapper .list-container .item-done .item-info .item-text * {
	color: var(--asf-text);
}
.list-wrapper .list-container .item-signed .item-info .item-text > div:not(.title),
.list-wrapper .list-container .item-done .item-info .item-text > div:not(.title) {
	font-weight: bold;
}
.list-wrapper .list-container .item-signed .item-info .item-icon .icon-check,
.list-wrapper .list-container .item-done .item-info .item-icon .icon-check {
	color: var(--asf-secondary);
}
.list-wrapper .list-container .item-signed .item-action .item-continue,
.list-wrapper .list-container .item-done .item-action .item-continue {
	color: var(--asf-primary);
	background-color: var(--asf-surface);
	border-color: var(--asf-primary);
	border-radius: var(--asf-radius-button);
}
.list-wrapper .list-container .item-signed .item-action .item-continue:hover,
.list-wrapper .list-container .item-done .item-action .item-continue:hover {
	color: var(--asf-on-primary);
	background-color: var(--asf-primary);
}

/* Navigate: Logg inn, Fortsett, Fullfør, Logg ut */
.button.button-orange,
.button.button-orange:focus {
	color: var(--asf-on-secondary);
	background-color: var(--asf-secondary);
	border-color: transparent;
	border-radius: var(--asf-radius-button);
}
.button.button-orange:hover:not(:disabled) {
	background-color: var(--asf-secondary-hover);
}
.button.button-orange .svg-icon-right svg > path {
	stroke: var(--asf-on-secondary);
}
.button.button-orange:disabled,
.button.button-orange:disabled:focus,
.button.button-gray,
.button.button-gray:focus {
	color: var(--asf-disabled-text);
	background-color: var(--asf-disabled-bg);
	border-color: transparent;
	border-radius: var(--asf-radius-button);
	box-shadow: none;
}
.button.button-gray:disabled .svg-icon-right svg > path,
.button.button-orange:disabled .svg-icon-right svg > path {
	stroke: var(--asf-disabled-text);
}

/* Cancel: Tilbake, Avbryt */
.button.button-back,
.button.button-back:focus {
	color: var(--asf-primary);
	background-color: var(--asf-surface);
	border-color: var(--asf-primary);
	border-radius: var(--asf-radius-button);
}
.button.button-back:hover {
	color: var(--asf-on-primary);
	background-color: var(--asf-primary);
}

/* The base stylesheet removes every outline on :focus. Restore a visible ring for
   keyboard users only; !important because the base reset sits on many selectors. */
:focus-visible {
	outline: var(--asf-focus-ring) !important;
	outline-offset: 2px !important;
}

/* Insurance */
.document-download-wrapper a {
	color: var(--asf-primary);
}
.marketing-options-list .checkbox {
	border-color: var(--asf-primary);
}
.marketing-options-list .checkbox:checked {
	background-color: var(--asf-primary);
}

/* Completed page: the signed documents are links, not disabled items */
.signed-document-list .document-link {
	opacity: 1;
	color: var(--asf-text);
	border-radius: var(--asf-radius-card);
}
.signed-document-list .document-link:hover {
	text-decoration: underline;
}

/* Spinner */
.loader {
	border-color: var(--asf-primary);
	border-top-color: var(--asf-secondary);
}