/**
 * Allians Personalportal — personalens gränssnitt.
 *
 * Visuell identitet hämtad ur Allians Trafikskolas logotyp:
 *   #274754  marinblå (logotypens text)      — primär yta och knapp
 *   #60B1FF  ljusblå (logotypens ratt)       — accent
 *   #1668B8  länkblå, härledd för kontrast   — länkar och fokus
 * Mobil först. Alla textfärger klarar WCAG AA mot sin bakgrund.
 */

.app-portal {
	--a-navy: #274754;
	--a-navy-700: #1D3742;
	--a-navy-050: #EDF2F5;
	--a-sky: #60B1FF;
	--a-sky-050: #EAF4FF;
	--a-blue: #1668B8;

	--a-ink: #14232B;
	--a-ink-2: #40515C;
	--a-muted: #5A6B75;

	--a-bg: #F4F8FC;
	--a-bg-2: #EAF2FA;
	--a-surface: #FFFFFF;
	--a-line: #E7EEF5;
	--a-line-strong: #D5E1EC;

	--a-ok: #17663F;
	--a-ok-bg: #E7F4ED;
	--a-warn: #8A5510;
	--a-warn-bg: #FDF3E4;
	--a-err: #97231F;
	--a-err-bg: #FBEBEA;
	--a-wait: #1F5B8F;
	--a-wait-bg: #E9F2FA;

	--a-r-sm: 14px;
	--a-r: 20px;
	--a-r-lg: 26px;

	/* Mjuka, låga skuggor i stället för kantlinjer. */
	--a-shadow: 0 1px 2px rgba(31, 68, 94, .04), 0 6px 20px rgba(31, 68, 94, .06);
	--a-shadow-lift: 0 2px 8px rgba(31, 68, 94, .07), 0 18px 42px rgba(31, 68, 94, .11);
	--a-shadow-btn: 0 2px 6px rgba(22, 104, 184, .22), 0 8px 20px rgba(22, 104, 184, .18);

	--a-grad-brand: linear-gradient(135deg, #2E6E96 0%, #274754 100%);
	--a-grad-btn: linear-gradient(135deg, #1F7CC6 0%, #1668B8 55%, #135A9F 100%);
	--a-grad-soft: linear-gradient(160deg, #FFFFFF 0%, #F7FBFF 100%);

	box-sizing: border-box;
	max-width: 780px;
	margin: 0 auto;
	padding: 0 0 72px;
	/* Diskret blå gradient som lugnar hela vyn. */
	background:
		radial-gradient(1100px 420px at 50% -180px, #DCEBF9 0%, rgba(220, 235, 249, 0) 70%),
		linear-gradient(180deg, var(--a-bg) 0%, #FBFDFF 55%, var(--a-bg) 100%);
	color: var(--a-ink);
	font-size: 16px;
	line-height: 1.55;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.app-portal *,
.app-portal *::before,
.app-portal *::after { box-sizing: inherit; }

.app-portal h1,
.app-portal h2,
.app-portal h3 {
	color: var(--a-ink);
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.app-portal a { color: var(--a-blue); }

/* Portalen definierar detta själv i stället för att lita på temat. */
.app-portal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.app-portal :focus-visible {
	outline: 3px solid var(--a-sky);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ── Sidhuvud ─────────────────────────────────────────────────────────── */

.app-head {
	background: var(--a-grad-brand);
	border-radius: 0 0 var(--a-r-lg) var(--a-r-lg);
	padding: 18px 20px 22px;
	color: #fff;
}

.app-head__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	/* På riktigt smala skärmar hamnar menyn på egen rad i stället för att
	   klippas av. */
	flex-wrap: wrap;
}

.app-head__logo {
	height: 24px;
	max-width: 58%;
	object-fit: contain;
	object-position: left center;
	width: auto;
	display: block;
	/* Logotypen är mörk marinblå — vänds till vit mot den mörka ytan. */
	filter: brightness(0) invert(1);
	opacity: .96;
}

.app-head__wordmark {
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 15px;
	color: #fff;
}

.app-head__menu {
	display: flex;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap;
}

.app-head__who {
	margin-top: 18px;
}

.app-head__hello {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, .72);
}

.app-head__name {
	margin: 2px 0 0;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
}

.app-head__role {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: rgba(255, 255, 255, .78);
}

.app-body { padding: 0 16px; }

/* ── Adminlänk ────────────────────────────────────────────────────────── */

.app-adminbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 11px 14px;
	background: var(--a-sky-050);
	border: 1px solid #CFE4FA;
	border-radius: var(--a-r-sm);
	font-size: 14px;
	color: var(--a-ink-2);
}

/* ── Månadsväljare ────────────────────────────────────────────────────── */

.app-monthnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding: 6px;
	background: var(--a-surface);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
}

.app-monthnav__arrow {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	color: var(--a-navy);
	border-radius: var(--a-r-sm);
}

.app-monthnav__arrow:hover { background: var(--a-navy-050); }

.app-monthnav__label {
	font-size: 17px;
	font-weight: 700;
}

/* ── Statusremsa ──────────────────────────────────────────────────────── */

.app-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--a-r);
	font-size: 14px;
	background: linear-gradient(135deg, #FFFFFF 0%, #F1F7FC 100%);
	border: 1px solid rgba(213, 225, 236, .8);
	box-shadow: var(--a-shadow);
	color: var(--a-ink-2);
}

.app-status--locked {
	background: var(--a-err-bg);
	border-color: #F1D2D0;
	color: #7A1E1A;
}

/* ── Statusmärken ─────────────────────────────────────────────────────── */

.app-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.5;
	white-space: nowrap;
	background: var(--a-navy-050);
	color: var(--a-ink-2);
}

.app-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: .75;
}

.app-chip--draft { background: var(--a-warn-bg); color: var(--a-warn); }
.app-chip--submitted { background: var(--a-wait-bg); color: var(--a-wait); }
.app-chip--approved { background: var(--a-ok-bg); color: var(--a-ok); }
.app-chip--locked { background: var(--a-err-bg); color: var(--a-err); }
.app-chip--verified { background: var(--a-ok-bg); color: var(--a-ok); }
.app-chip--ongoing { background: var(--a-navy-050); color: var(--a-ink-2); }
.app-chip--missing { background: var(--a-warn-bg); color: var(--a-warn); }
.app-chip--planned { background: #EFE9FB; color: #52398A; }

.app-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--a-navy-050);
	font-size: 11.5px;
	font-weight: 650;
	color: var(--a-muted);
	vertical-align: middle;
}

.app-tag--fix { background: #F1EAFA; color: #5B3C8C; }

/* ── Sammanfattningskort ──────────────────────────────────────────────── */

.app-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}

.app-stat {
	padding: 18px 18px 16px;
	background: var(--a-grad-soft);
	border: 1px solid rgba(213, 225, 236, .7);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
}

.app-stat__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--a-muted);
	text-transform: uppercase;
	letter-spacing: .045em;
}

.app-stat__value {
	display: block;
	margin-top: 6px;
	font-size: 30px;
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--a-navy);
	font-variant-numeric: tabular-nums;
}

.app-stat__hint {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--a-muted);
}

/* ── Frånvarosammanfattning ───────────────────────────────────────────── */

.app-absence-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.app-absence-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 14px;
	background: var(--a-surface);
	border: 1px solid var(--a-line);
	border-left: 3px solid var(--a-sky);
	border-radius: var(--a-r-sm);
	font-size: 14px;
}

.app-absence-list__cat { font-weight: 650; }
.app-absence-list__days { color: var(--a-ink-2); }
.app-absence-list__dates { color: var(--a-muted); font-size: 13px; }

/* ── Sektion ──────────────────────────────────────────────────────────── */

.app-section { margin-top: 34px; }

.app-section__title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 750;
	letter-spacing: -0.015em;
}

/* ── Veckolista ───────────────────────────────────────────────────────── */

.app-portal .app-weeks,
.app-weeks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.app-portal .app-weeks > li,
.app-weeks > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-portal .app-week,
.app-week {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px 14px 16px 18px;
	background: var(--a-surface);
	border: 1px solid rgba(213, 225, 236, .65);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}

.app-week:hover { transform: translateY(-1px); }

.app-week:hover { box-shadow: var(--a-shadow-lift); }

.app-week::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	border-radius: var(--a-r) 0 0 var(--a-r);
	background: linear-gradient(180deg, #60B1FF 0%, #1668B8 100%);
}

.app-week--approved::before { background: linear-gradient(180deg, #34A06A 0%, #17663F 100%); }
.app-week--draft::before { background: linear-gradient(180deg, #F0B95F 0%, #C4841F 100%); }
.app-week--missing::before { background: var(--a-line-strong); }
.app-week--future { opacity: .72; }
.app-week--future::before { background: var(--a-line-strong); }

.app-week__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.app-week__no {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.app-week__dates {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--a-muted);
	white-space: nowrap;
	padding-top: 2px;
}

.app-week__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
	margin: 0;
	position: relative;
	z-index: 0;
}

.app-week__fig {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 12.5px;
	color: var(--a-muted);
	line-height: 1.3;
	word-break: break-word;
}

.app-week__fig strong {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: var(--a-ink);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.app-week__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-width: 0;
}

.app-week__comment {
	margin: 0;
	padding: 10px 12px;
	background: var(--a-bg);
	border-radius: var(--a-r-sm);
	font-size: 13.5px;
	color: var(--a-ink-2);
	overflow-wrap: anywhere;
}

.app-week__cta {
	margin: 0;
}

.app-week__cta .app-btn {
	width: 100%;
}

/* ── Knappar ──────────────────────────────────────────────────────────── */

/* Specificiteten måste överstiga ".app-portal a" (0,1,1), annars vinner
   länkfärgen över knapparnas egna färger. */
.app-portal .app-btn,
.app-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 13px 22px;
	background: var(--a-surface);
	color: var(--a-navy);
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	font-size: 15.5px;
	font-weight: 650;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.app-portal .app-btn:hover,
.app-btn:hover {
	background: var(--a-navy-050);
	border-color: var(--a-navy);
	color: var(--a-navy);
}

.app-portal .app-btn--primary,
.app-btn--primary {
	background: var(--a-grad-btn);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--a-shadow-btn);
}

.app-portal .app-btn--primary:hover,
.app-btn--primary:hover {
	background: linear-gradient(135deg, #1B72BA 0%, #135A9F 55%, #0F4C88 100%);
	border-color: transparent;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(22, 104, 184, .28), 0 14px 30px rgba(22, 104, 184, .2);
}

.app-portal .app-btn--ghost,
.app-btn--ghost {
	white-space: nowrap;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-color: rgba(255, 255, 255, .34);
	min-height: 40px;
	padding: 7px 13px;
	font-size: 14px;
}

.app-portal .app-btn--ghost:hover,
.app-btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .5); }

.app-btn--block { width: 100%; }
.app-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }

.app-btnrow { display: grid; gap: 10px; margin-top: 20px; }

/* ── Formulär ─────────────────────────────────────────────────────────── */

.app-card {
	margin-top: 16px;
	padding: 22px 18px;
	background: var(--a-surface);
	border: 1px solid rgba(213, 225, 236, .65);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
}

.app-card--soft {
	background: var(--a-grad-soft);
}

.app-card__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 750;
	letter-spacing: -0.02em;
}

.app-card__lede {
	margin: 0 0 18px;
	color: var(--a-muted);
	font-size: 14.5px;
}

.app-back { margin: 14px 0 0; font-size: 14px; }

.app-weekhead { margin-top: 14px; }
.app-weekhead__title { margin: 0; font-size: 24px; font-weight: 750; }
.app-weekhead__dates { margin: 3px 0 0; color: var(--a-muted); font-size: 14.5px; }

.app-field { margin-bottom: 20px; }
.app-field:last-child { margin-bottom: 0; }

.app-field__label {
	display: block;
	font-weight: 650;
	font-size: 15.5px;
	margin-bottom: 6px;
}

.app-field__hint {
	display: block;
	font-weight: 400;
	font-size: 13px;
	color: var(--a-muted);
	margin-top: 2px;
}

.app-field__optional {
	font-weight: 400;
	font-size: 13px;
	color: var(--a-muted);
}

.app-input,
.app-portal textarea,
.app-portal select {
	width: 100%;
	min-height: 52px;
	padding: 13px 15px;
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	font-size: 16px;
	font-family: inherit;
	color: var(--a-ink);
	background: #FCFDFF;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.app-input:focus,
.app-portal textarea:focus,
.app-portal select:focus {
	background: #fff;
	border-color: var(--a-blue);
	box-shadow: 0 0 0 4px rgba(96, 177, 255, .18);
	outline: none;
}

.app-input:disabled,
.app-portal textarea:disabled,
.app-portal select:disabled {
	background: var(--a-bg);
	color: var(--a-muted);
	cursor: not-allowed;
}

/* Stegare med stora plus- och minusknappar */

.app-stepper {
	display: flex;
	align-items: stretch;
	gap: 10px;
	max-width: 260px;
}

.app-stepper__btn {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	background: linear-gradient(160deg, #F2F8FD 0%, #E4EFF9 100%);
	color: var(--a-blue);
	border: 1.5px solid rgba(213, 225, 236, .9);
	border-radius: var(--a-r-sm);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.app-stepper__btn:hover { background: #DFE9EF; border-color: var(--a-navy); }
.app-stepper__btn:active { transform: scale(.96); }
.app-stepper__btn:disabled { opacity: .4; cursor: not-allowed; }

.app-stepper__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 62px;
	text-align: center;
	font-size: 28px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	color: var(--a-navy);
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	background: var(--a-surface);
	-moz-appearance: textfield;
}

.app-stepper__input::-webkit-outer-spin-button,
.app-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Frånvaro — mobil: tydliga dagrader. Större skärm: veckorutnät. */

.app-cal {
	margin-top: 6px;
}

/* Mobil först: en dag per rad med stora tryckytor (iOS klarar inte 7 smala select). */
.app-cal__head {
	display: none;
}

.app-cal__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.app-cal__cell--empty {
	display: none;
}

.app-cal__cell {
	display: grid;
	grid-template-columns: 4.75rem 1fr;
	grid-template-areas:
		"date cat"
		"date amt";
	align-items: center;
	column-gap: 12px;
	row-gap: 8px;
	min-height: 0;
	padding: 12px 14px;
	background: #F7FAFD;
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.app-cal__num {
	grid-area: date;
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.15;
	color: var(--a-ink);
}

.app-cal__dow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--a-muted);
}

.app-cal__daynum {
	font-size: 22px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}

.app-cal__cat {
	grid-area: cat;
}

.app-cal__amt {
	grid-area: amt;
}

.app-cal__cat,
.app-cal__amt {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1.5px solid var(--a-line-strong);
	border-radius: 12px;
	background: #fff;
	color: var(--a-ink);
	font-size: 16px; /* undvik iOS-zoom */
	line-height: 1.25;
	font-family: inherit;
	appearance: auto;
	-webkit-appearance: menulist;
}

.app-cal__amt[hidden] {
	display: none !important;
}

.app-cal__cell--set {
	background: #EAF4FF;
	border-color: #BFDCF7;
	box-shadow: inset 0 0 0 1px rgba(22, 104, 184, .08);
}

.app-cal__cell--sjuk {
	background: #FBEBEA;
	border-color: #F0C9C7;
}

.app-cal__cell--vab {
	background: #FDF3E4;
	border-color: #F0DCB8;
}

.app-cal__cell--semester {
	background: #E7F4ED;
	border-color: #C9E4D5;
}

.app-cal__cell--ledighet {
	background: #EAF4FF;
	border-color: #C8E0F8;
}

.app-cal__cell--annan {
	background: #F3EEF8;
	border-color: #DDD0EA;
}

.app-cal__cell--ej_arbetsdag {
	background: #EEF1F4;
	border-color: #D5DCE3;
}

.app-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--a-muted);
}

.app-cal__legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.app-cal__swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	border: 1px solid transparent;
}

.app-cal__swatch--sjuk { background: #FBEBEA; border-color: #F0C9C7; }
.app-cal__swatch--vab { background: #FDF3E4; border-color: #F0DCB8; }
.app-cal__swatch--semester { background: #E7F4ED; border-color: #C9E4D5; }
.app-cal__swatch--ledighet { background: #EAF4FF; border-color: #C8E0F8; }
.app-cal__swatch--annan { background: #F3EEF8; border-color: #DDD0EA; }
.app-cal__swatch--ej_arbetsdag { background: #EEF1F4; border-color: #D5DCE3; }

@media (min-width: 720px) {
	.app-cal__head {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 6px;
	}

	.app-cal__weekday {
		text-align: center;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--a-muted);
		padding: 0 2px 6px;
	}

	.app-cal__grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 6px;
	}

	.app-cal__cell--empty {
		display: block;
		visibility: hidden;
		pointer-events: none;
		min-height: 0;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.app-cal__cell {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-height: 110px;
		padding: 10px 8px;
		border-radius: 14px;
	}

	.app-cal__num {
		display: block;
		text-align: center;
	}

	.app-cal__dow {
		display: none;
	}

	.app-cal__daynum {
		font-size: 15px;
	}

	.app-cal__cat,
	.app-cal__amt {
		min-height: 40px;
		padding: 6px 8px;
		font-size: 13px;
		border-radius: 10px;
	}
}

/* ── Meddelanden ──────────────────────────────────────────────────────── */

.app-note {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: var(--a-r-sm);
	font-size: 14px;
	border: 1px solid transparent;
}

.app-note--success { background: var(--a-ok-bg); border-color: #C9E4D5; color: var(--a-ok); }
.app-note--warn { background: var(--a-warn-bg); border-color: #F0DCB8; color: var(--a-warn); }
.app-note--error { background: var(--a-err-bg); border-color: #F1D2D0; color: var(--a-err); }
.app-note--info { background: var(--a-wait-bg); border-color: #CDE0F0; color: var(--a-wait); }

.app-hint { margin-top: 10px; font-size: 13px; color: var(--a-muted); }
.app-muted { color: var(--a-muted); }

/* ── Historik ─────────────────────────────────────────────────────────── */

.app-history { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.app-history__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--a-surface);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
}

.app-history__link { text-decoration: none; color: inherit; flex: 1 1 auto; }
.app-history__month { display: block; font-weight: 700; font-size: 16px; }
.app-history__stats { display: block; margin-top: 2px; font-size: 13.5px; color: var(--a-muted); }

/* ── Inloggning ───────────────────────────────────────────────────────── */

.app-login { padding: 0 16px; }

.app-login__hero {
	margin-top: 24px;
	padding: 34px 24px;
	background: var(--a-navy);
	border-radius: var(--a-r-lg);
	text-align: center;
	color: #fff;
}

.app-login__logo {
	height: 34px;
	width: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 18px;
}

.app-login__title { margin: 0; font-size: 26px; font-weight: 750; color: #fff; }
.app-login__text { margin: 8px 0 0; color: rgba(255, 255, 255, .82); font-size: 15px; }

.app-login__card {
	margin-top: -20px;
	position: relative;
	padding: 22px 20px;
	background: var(--a-surface);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow-lift);
}

.app-login__card label { display: block; font-weight: 650; margin-bottom: 6px; font-size: 15px; }
.app-login__card p { margin: 0 0 16px; }

.app-login__card input[type="text"],
.app-login__card input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	font-size: 16px;
	font-family: inherit;
}

.app-login__card .login-remember label { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.app-login__card .login-remember input { width: auto; min-height: 0; }

.app-login__card .login-submit input[type="submit"] {
	width: 100%;
	min-height: 50px;
	background: var(--a-navy);
	color: #fff;
	border: 0;
	border-radius: var(--a-r-sm);
	font-size: 16px;
	font-weight: 650;
	font-family: inherit;
	cursor: pointer;
}

.app-login__card .login-submit input[type="submit"]:hover { background: var(--a-navy-700); }

.app-login__help { margin-top: 14px; font-size: 14px; text-align: center; }

/* ── Sidfot ───────────────────────────────────────────────────────────── */

.app-foot {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid var(--a-line);
	font-size: 13px;
	color: var(--a-muted);
}

/* ── Större skärmar ───────────────────────────────────────────────────── */

@media (min-width: 640px) {
	.app-portal { padding-bottom: 72px; }
	.app-head { border-radius: var(--a-r-lg); margin-top: 16px; padding: 22px 26px 26px; }
	.app-body { padding: 0 4px; }

	.app-stats { grid-template-columns: repeat(4, 1fr); }
	.app-btnrow { grid-template-columns: 1fr 1fr; }

	.app-week {
		/* Flex i stället för grid-template-areas: CTA till höger om titeln,
		   siffror/meta under — undviker överlapp när rader kollapsar. */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 20px;
		row-gap: 10px;
		padding: 18px 18px 18px 22px;
	}

	.app-week__top {
		flex: 1 1 calc(100% - 140px);
		min-width: 0;
		align-items: baseline;
	}

	.app-week__dates {
		font-size: 14px;
	}

	.app-week__cta {
		flex: 0 0 auto;
		margin-top: 0;
	}

	.app-week__cta .app-btn {
		width: auto;
	}

	.app-week__figures {
		flex: 1 1 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 22px;
		grid-template-columns: none;
	}

	.app-week__fig {
		min-width: 5em;
		font-size: 13px;
	}

	.app-week__meta,
	.app-week__comment {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.app-portal * { transition: none !important; }
}

/* ── Val (radioknappar som stora ytor) ────────────────────────────────── */

.app-choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.app-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 14px;
	background: var(--a-surface);
	border: 1.5px solid var(--a-line-strong);
	border-radius: var(--a-r-sm);
	font-weight: 600;
	cursor: pointer;
}

.app-choice:has(input:checked) {
	background: var(--a-sky-050);
	border-color: var(--a-blue);
	box-shadow: inset 0 0 0 1px var(--a-blue);
}

.app-choice input { width: 20px; height: 20px; accent-color: var(--a-blue); }

.app-required {
	font-size: 12px;
	font-weight: 650;
	color: var(--a-err);
	background: var(--a-err-bg);
	padding: 2px 8px;
	border-radius: 6px;
}

/* ── Utlägg och kvitton ───────────────────────────────────────────────── */

.app-receipts { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }

.app-receipt {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	background: var(--a-bg);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r-sm);
	font-size: 14px;
}

.app-receipt__text { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-receipt__link { font-size: 13px; }
.app-receipt__remove { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--a-muted); }

.app-expense { display: grid; gap: 10px; }
.app-expense__row { display: grid; grid-template-columns: 1fr; gap: 10px; }

.app-filebtn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 16px;
	background: var(--a-navy-050);
	border: 1.5px dashed var(--a-line-strong);
	border-radius: var(--a-r-sm);
	font-weight: 650;
	color: var(--a-navy);
	cursor: pointer;
}

.app-filebtn:hover { border-color: var(--a-blue); background: var(--a-sky-050); }
.app-filebtn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.app-filename { display: block; margin-top: 4px; font-size: 13px; color: var(--a-muted); }

.app-stats--slim { grid-template-columns: 1fr 1fr; }

@media (min-width: 640px) {
	.app-expense__row { grid-template-columns: 1fr 1fr; }
	.app-stats--slim { grid-template-columns: 1fr 1fr; max-width: 420px; }
}

/* ── Feedbacksektion ──────────────────────────────────────────────────── */

.app-myfeedback {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--a-line);
}

.app-myfeedback__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--a-ink-2);
}

.app-myfeedback__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.app-myfeedback__list li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	background: #F7FAFD;
	border-radius: var(--a-r-sm);
	font-size: 14px;
}

.app-myfeedback__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12.5px;
}

/* ── Ikoner i sektionsrubriker ────────────────────────────────────────── */

.app-section__title--icon {
	display: flex;
	align-items: center;
	gap: 9px;
}

.app-section__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: linear-gradient(135deg, #E4F0FB 0%, #D3E6F8 100%);
	color: var(--a-blue);
	font-size: 14px;
}

/* Skyddsnät som inte döljer fel: bilder och tabeller får aldrig spränga
   sin behållare, men eventuell verklig överspillning syns i stället för
   att klippas bort. */
.app-portal img,
.app-portal table { max-width: 100%; }

/* ── Veckorapportens sektionskort ─────────────────────────────────────── */

.app-weekform > .app-card { margin-top: 14px; }
.app-weekform > .app-card:first-child { margin-top: 16px; }

.app-card__title--sm {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--a-ink-2);
}

.app-hint--first { margin-top: 0; }

/* ── Administratörens flikar och listor i portalen ────────────────────── */

.app-tabs {
	display: flex;
	gap: 6px;
	margin-top: 14px;
	padding: 6px;
	background: var(--a-surface);
	border: 1px solid rgba(213, 225, 236, .7);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Specificiteten måste överstiga ".app-portal a" (0,1,1), annars vinner
   länkfärgen och den aktiva flikens text blir blå mot blå bakgrund. */
.app-portal .app-tab,
.app-tab {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--a-r-sm);
	font-size: 14.5px;
	font-weight: 650;
	white-space: nowrap;
	text-decoration: none;
	color: var(--a-ink-2);
}

.app-portal .app-tab:hover,
.app-tab:hover { background: #F2F7FC; color: var(--a-navy); }

.app-portal .app-tab--active,
.app-tab--active {
	background: var(--a-grad-btn);
	color: #fff;
	box-shadow: var(--a-shadow-btn);
}

.app-portal .app-tab--active:hover,
.app-tab--active:hover { color: #fff; }

.app-tab__badge {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .28);
	font-size: 12px;
}

.app-tab:not(.app-tab--active) .app-tab__badge { background: #E3EEF8; color: var(--a-blue); }

.app-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.app-person {
	background: var(--a-surface);
	border: 1px solid rgba(213, 225, 236, .65);
	border-radius: var(--a-r);
	box-shadow: var(--a-shadow);
	overflow: hidden;
}

.app-person__link {
	display: block;
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
}

.app-person__link:hover { background: #FAFCFE; }

.app-person__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.app-person__name { font-size: 16.5px; font-weight: 700; }

.app-person__figures {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--a-muted);
}

.app-person__figures strong { color: var(--a-ink); font-size: 16px; }

.app-person__meta {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--a-muted);
}

.app-tag--wait { background: var(--a-wait-bg); color: var(--a-wait); }

.app-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.app-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--a-surface);
	border: 1px solid var(--a-line-strong);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--a-ink-2);
}

.app-filter span { color: var(--a-muted); font-weight: 400; }
.app-filter--active { background: var(--a-grad-btn); border-color: transparent; color: #fff; }
.app-filter--active span { color: rgba(255, 255, 255, .8); }

.app-weekactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app-input--sm { min-height: 44px; width: auto; flex: 1 1 140px; font-size: 14px; }
.app-feedbackform { display: grid; gap: 8px; margin-top: 12px; }
.app-feedback__feature { margin: 10px 0 0; font-size: 15.5px; }
.app-exportform { margin-top: 16px; }

.app-head__logout { display: inline; margin: 0; }

.app-monthnav__arrow--off { opacity: .28; cursor: default; }