/* Firmagaven konto: bedriftsoversikten (/min-konto/ansatte/).
   Etter Designhåndbok 2026: Lato arves fra temaet, marineblå #002A3A,
   ramme #E3E9EC, tekst #333333 / dempet #5A6E75, bakgrunn #FAFBFC,
   aksent burgunder #7B2436. Hjørner: kort 16 px, merkelapper 4 px.
   Avstander fra skalaen 4/8/12/16/24/32. Ingen skygger. Mobil først. */

.fg-oversikt {
	color: #333333;
	line-height: 1.6;
}

.fg-oversikt__intro {
	margin: 0 0 24px;
	max-width: 60ch;
}

.fg-oversikt__merknad {
	margin: 0 0 24px;
	color: #5A6E75;
	font-size: 15px;
}

.fg-oversikt__fotnote {
	margin: 24px 0 0;
	color: #5A6E75;
	font-size: 15px;
	max-width: 60ch;
}

/* Toppen: intro + logokort. Under hverandre på mobil, side om side fra 768. */

.fg-topp {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 24px;
}

.fg-topp .fg-oversikt__intro {
	margin: 0;
}

/* Logokortet */

.fg-logo {
	background: #FAFBFC;
	border: 1px solid #E3E9EC;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fg-logo__ramme {
	background: #FFFFFF;
	border: 1px solid #E3E9EC;
	border-radius: 6px;
	height: 96px;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fg-logo__bilde {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.fg-logo__tittel {
	margin: 0;
	font-weight: 600;
	color: #002A3A;
}

.fg-logo__hjelp {
	margin: 0;
	font-size: 15px;
	color: #5A6E75;
}

.fg-logo__handlinger {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fg-logo__skjema {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.fg-logo__etikett {
	font-size: 15px;
	color: #5A6E75;
}

.fg-logo__fil {
	font: inherit;
	font-size: 15px;
	color: #333333;
	max-width: 100%;
}

.fg-logo__fil:focus-visible {
	outline: 2px solid #002A3A;
	outline-offset: 2px;
}

.fg-logo__melding {
	margin: 0;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 15px;
	border: 1px solid transparent;
}

.fg-logo__melding--ok {
	background: #E7F4EC;
	border-color: #BFE0CB;
	color: #1F5A33;
}

.fg-logo__melding--feil {
	background: #F6E9EC;
	border-color: #E4C3CB;
	color: #7B2436;
}

.fg-logo__fjern {
	margin: 0;
}

/* Knapper i kortet, etter håndboka: 6 px hjørner, 16 px 600, burgunder. */

.fg-knapp {
	align-self: flex-start;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
	background: #7B2436;
	border: 0;
	border-radius: 6px;
	padding: 10px 16px;
	min-height: 44px;
	cursor: pointer;
}

.fg-knapp:hover,
.fg-knapp:active {
	background: #5E1A28;
}

.fg-knapp:focus-visible {
	outline: 2px solid #002A3A;
	outline-offset: 2px;
}

.fg-lenkeknapp {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #7B2436;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0;
	cursor: pointer;
	align-self: flex-start;
}

.fg-lenkeknapp:hover {
	color: #5E1A28;
}

.fg-lenkeknapp:focus-visible {
	outline: 2px solid #002A3A;
	outline-offset: 2px;
}

/* Sammendragskortene */

.fg-sammendrag {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.fg-sammendrag__kort {
	background: #FAFBFC;
	border: 1px solid #E3E9EC;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fg-sammendrag__tall {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
	color: #002A3A;
}

.fg-sammendrag__tekst {
	font-size: 15px;
	color: #5A6E75;
}

/* Filterlinja */

.fg-filter {
	background: #FAFBFC;
	border: 1px solid #E3E9EC;
	border-radius: 16px;
	padding: 16px;
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fg-filter__etikett {
	display: block;
	font-size: 15px;
	color: #5A6E75;
	margin: 0 0 4px;
}

.fg-filter__sok,
.fg-filter__valg {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 16px;
	color: #333333;
	background: #FFFFFF;
	border: 1px solid #E3E9EC;
	border-radius: 6px;
	padding: 8px 12px;
	min-height: 44px;
	line-height: 1.4;
}

.fg-filter__sok::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}

.fg-filter__sok:focus-visible,
.fg-filter__valg:focus-visible {
	outline: 2px solid #002A3A;
	outline-offset: 2px;
	border-color: #002A3A;
}

.fg-filter__valgrad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fg-filter__status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	font-size: 15px;
	color: #5A6E75;
	min-height: 1.5em;
}

.fg-filter__nullstill,
.fg-tom--filter a {
	color: #7B2436;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.fg-filter__nullstill:hover,
.fg-tom--filter a:hover {
	color: #5E1A28;
}

.fg-filter__nullstill:focus-visible,
.fg-tom--filter a:focus-visible {
	outline: 2px solid #002A3A;
	outline-offset: 2px;
}

.fg-tabell tbody tr[hidden],
.fg-tabell[hidden],
.fg-tom--filter[hidden],
.fg-filter__nullstill[hidden] {
	display: none;
}

/* Tabellen — kortvisning på mobil */

.fg-tabell {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0;
}

.fg-tabell thead {
	display: none;
}

.fg-tabell tbody tr {
	display: block;
	border: 1px solid #E3E9EC;
	border-radius: 16px;
	padding: 12px 16px;
	margin: 0 0 12px;
	background: #FFFFFF;
}

.fg-tabell td {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	border: 0;
	font-size: 16px;
}

.fg-tabell td::before {
	content: attr(data-etikett);
	flex: 0 0 7.5em;
	color: #5A6E75;
	font-size: 15px;
}

.fg-tabell td[data-etikett="Ansatt"] {
	display: block;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid #E3E9EC;
}

.fg-tabell td[data-etikett="Ansatt"]::before {
	display: none;
}

.fg-navn {
	display: block;
	font-weight: 600;
	color: #002A3A;
}

.fg-epost {
	display: block;
	font-size: 15px;
	color: #5A6E75;
	word-break: break-all;
}

/* Flere merker i samme celle flyter sammen under etiketten på mobil. */
.fg-badger {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

.fg-detalj {
	display: block;
	flex-basis: 100%;
	font-size: 15px;
	color: #5A6E75;
}

/* Statusmerker */

.fg-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px 2px 6px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
	white-space: nowrap;
	border: 1px solid transparent;
}

.fg-badge__ikon {
	flex: 0 0 auto;
}

.fg-badge--ok {
	background: #E7F4EC;
	border-color: #BFE0CB;
	color: #1F5A33;
}

.fg-badge--venter {
	background: #FFF4DB;
	border-color: #F1DDA3;
	color: #6B4E00;
}

.fg-badge--aksent {
	background: #F6E9EC;
	border-color: #E4C3CB;
	color: #7B2436;
}

.fg-badge--noytral {
	background: #F3F5F7;
	border-color: #E3E9EC;
	color: #5A6E75;
}

/* Tom tilstand */

.fg-tom {
	background: #FAFBFC;
	border: 1px solid #E3E9EC;
	border-radius: 16px;
	padding: 24px;
	max-width: 60ch;
}

.fg-tom__tittel {
	font-weight: 600;
	color: #002A3A;
	margin: 0 0 8px;
}

/* Nettbrett og skrivebord: ekte tabell */

@media (min-width: 768px) {
	.fg-sammendrag {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.fg-topp {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.fg-topp .fg-oversikt__intro {
		flex: 1 1 0;
	}

	.fg-logo {
		flex: 0 0 280px;
	}

	.fg-filter__valgrad {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.fg-filter__sok {
		max-width: 32rem;
	}

	.fg-tabell thead {
		display: table-header-group;
	}

	.fg-tabell th {
		text-align: left;
		font-size: 15px;
		font-weight: 600;
		color: #5A6E75;
		padding: 8px 12px;
		border-bottom: 1px solid #E3E9EC;
		background: transparent;
	}

	.fg-tabell tbody tr {
		display: table-row;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin: 0;
		background: transparent;
	}

	.fg-tabell tbody tr:nth-child(even) td {
		background: #FAFBFC;
	}

	.fg-tabell td {
		display: table-cell;
		vertical-align: top;
		padding: 12px;
		border-bottom: 1px solid #E3E9EC;
	}

	.fg-tabell td::before {
		display: none;
	}

	.fg-tabell td[data-etikett="Ansatt"] {
		padding-bottom: 12px;
		margin: 0;
		border-bottom: 1px solid #E3E9EC;
	}

	.fg-detalj {
		margin-top: 2px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fg-badge {
		transition: background-color 150ms ease-out;
	}
}