/* 1Fits Hälsa – kundportalens stilar (matchar onefits-temats tokens) */
.onefits-halsa,
.oh-consent-gate {
	--oh-heading: #092E46;
	--oh-text: #2e2e2e;
	--oh-primary: #008CBE;
	--oh-green: #2e9e7b;
	--oh-red: #c04a68;
	--oh-surface: #F5F6F8;
	--oh-border: #e0e0e0;
	max-width: 720px;
}
.onefits-halsa h3 {
	margin: 0 0 .75rem;
	color: var(--oh-heading);
	font-size: 1.15rem;
}
.oh-muted { color: #6b7280; font-size: .9rem; }
.oh-intro { margin: 0 0 .5rem; }

.oh-card {
	background: #fff;
	border: 1px solid var(--oh-border);
	border-radius: 12px;
	padding: 1.25rem 1.25rem 1.4rem;
	margin: 0 0 1.25rem;
}

/* Samtyckesgrind */
.oh-consent-gate {
	background: var(--oh-surface);
	border: 1px solid var(--oh-border);
	border-radius: 12px;
	padding: 1.5rem;
	max-width: 640px;
}
.oh-consent-label {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	margin: 1rem 0 1.25rem;
	font-size: .92rem;
	line-height: 1.5;
}
.oh-consent-label input { margin-top: .3rem; flex: 0 0 auto; }

/* Knappar */
.oh-btn {
	display: inline-block;
	border: 0;
	border-radius: 8px;
	padding: .8rem 1.6rem;
	font-weight: 600;
	cursor: pointer;
	font-size: 1rem;
}
.oh-btn-primary { background: var(--oh-primary); color: #fff; }
.oh-btn-primary:hover { background: #00719a; color: #fff; }

/* Streak */
.oh-streak {
	display: inline-block;
	background: #eaf7f2;
	color: var(--oh-green);
	border-radius: 999px;
	padding: .35rem .9rem;
	margin-bottom: 1rem;
	font-size: .95rem;
}

/* Dagens dos */
.oh-dose {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: var(--oh-surface);
	border: 2px solid var(--oh-border);
	border-radius: 10px;
	padding: .9rem 1rem;
	cursor: pointer;
	margin-bottom: 1.1rem;
	user-select: none;
}
.oh-dose input { position: absolute; opacity: 0; }
.oh-dose-box {
	width: 26px; height: 26px;
	border: 2px solid var(--oh-primary);
	border-radius: 6px;
	background: #fff;
	flex: 0 0 auto;
	position: relative;
}
.oh-dose.is-checked { border-color: var(--oh-green); background: #eaf7f2; }
.oh-dose.is-checked .oh-dose-box { background: var(--oh-green); border-color: var(--oh-green); }
.oh-dose.is-checked .oh-dose-box::after {
	content: "";
	position: absolute; inset: 4px 8px 8px 4px;
	border-left: 3px solid #fff; border-bottom: 3px solid #fff;
	transform: rotate(-45deg);
}
.oh-dose-text { font-weight: 600; color: var(--oh-heading); }

/* Segmentknappar */
.oh-seg-group { border: 0; padding: 0; margin: 0 0 1rem; }
.oh-seg-group legend {
	font-weight: 600;
	color: var(--oh-heading);
	margin-bottom: .4rem;
	font-size: .95rem;
}
.oh-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.oh-seg-3 { grid-template-columns: repeat(3, 1fr); }
.oh-seg-btn { position: relative; }
.oh-seg-btn input { position: absolute; opacity: 0; }
.oh-seg-btn span {
	display: block;
	text-align: center;
	border: 2px solid var(--oh-border);
	border-radius: 8px;
	padding: .65rem .25rem;
	font-size: .92rem;
	cursor: pointer;
	background: #fff;
}
.oh-seg-btn input:checked + span {
	border-color: var(--oh-primary);
	background: #e6f4fa;
	color: var(--oh-heading);
	font-weight: 600;
}
.oh-seg-btn input:focus-visible + span { outline: 2px solid var(--oh-primary); outline-offset: 2px; }

.oh-note-label { display: block; font-weight: 600; color: var(--oh-heading); margin-bottom: .35rem; font-size: .95rem; }
.onefits-halsa textarea {
	width: 100%;
	border: 1px solid var(--oh-border);
	border-radius: 8px;
	padding: .65rem .8rem;
	margin-bottom: 1rem;
	font: inherit;
}

/* Kalender */
.oh-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.oh-cal-head h3 { margin: 0; }
.oh-cal-nav {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--oh-border); border-radius: 8px;
	text-decoration: none; color: var(--oh-heading); font-size: 1.2rem;
}
.oh-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.oh-cal-dow { text-align: center; font-size: .75rem; color: #6b7280; padding: .25rem 0; }
.oh-cal-day {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: var(--oh-surface);
	font-size: .85rem;
	color: var(--oh-text);
}
.oh-cal-day.is-empty { background: transparent; }
.oh-cal-day.is-future { opacity: .35; }
.oh-cal-day.is-dose { background: var(--oh-green); color: #fff; font-weight: 600; }
.oh-cal-day.is-logged { background: #cfe8de; color: var(--oh-heading); }
.oh-cal-day.is-today { outline: 2px solid var(--oh-primary); outline-offset: 1px; }
.oh-cal-legend { display: flex; gap: 1.25rem; margin-top: .75rem; font-size: .85rem; color: #6b7280; }
.oh-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: .35rem; vertical-align: -1px; }
.oh-dot-dose { background: var(--oh-green); }
.oh-dot-logged { background: #cfe8de; }

/* Veckosummering */
.oh-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.oh-week-item { background: var(--oh-surface); border-radius: 10px; padding: .8rem .9rem; }
.oh-week-label { font-size: .82rem; color: #6b7280; margin-bottom: .15rem; }
.oh-week-value { font-size: 1.5rem; font-weight: 700; color: var(--oh-heading); }
.oh-week-max { font-size: .9rem; font-weight: 400; color: #9ca3af; }
.oh-delta { display: inline-block; font-size: .82rem; }
.oh-delta.is-up { color: var(--oh-green); }
.oh-delta.is-down { color: var(--oh-red); }

/* Trend */
.oh-trend-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.oh-trend-head h3 { margin: 0; }
.oh-chip {
	border: 1px solid var(--oh-border);
	background: #fff;
	border-radius: 999px;
	padding: .35rem .9rem;
	font-size: .88rem;
	cursor: pointer;
}
.oh-chip.is-active { background: var(--oh-primary); border-color: var(--oh-primary); color: #fff; }
#oh-trend-chart, #oh-vital-chart { margin-top: .75rem; }
#oh-trend-chart svg, #oh-vital-chart svg { width: 100%; height: auto; display: block; }
.oh-trend-note { margin-top: .5rem; }

/* Banner (Min utveckling) */
.oh-banner {
	background: #e6f4fa;
	border: 1px solid #bfe2f1;
	border-radius: 10px;
	padding: .9rem 1.1rem;
	margin-bottom: 1.25rem;
}
.oh-banner.is-due { background: #eaf7f2; border-color: #bfe5d8; }

/* Skattningsformulär */
.oh-q { border: 0; padding: 0; margin: 0 0 1.15rem; }
.oh-q legend { font-weight: 600; color: var(--oh-heading); margin-bottom: .45rem; font-size: .95rem; }
.oh-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 480px; }
.oh-scale-btn { position: relative; }
.oh-scale-btn input { position: absolute; opacity: 0; }
.oh-scale-btn span {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1;
	border: 2px solid var(--oh-border);
	border-radius: 8px;
	font-size: .88rem;
	cursor: pointer;
	background: #fff;
}
.oh-scale-btn input:checked + span {
	border-color: var(--oh-primary);
	background: var(--oh-primary);
	color: #fff;
	font-weight: 700;
}
.oh-scale-btn input:focus-visible + span { outline: 2px solid var(--oh-primary); outline-offset: 2px; }

/* Vitalitetsindex */
.oh-vital-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.oh-vital-value { font-size: 2rem; font-weight: 700; color: var(--oh-heading); }
.oh-vital-value .oh-delta { font-size: .95rem; margin-left: .4rem; }

/* Områdesstaplar */
.oh-area { display: grid; grid-template-columns: 170px 1fr 70px; gap: .75rem; align-items: center; margin-bottom: .7rem; }
.oh-area-label { font-size: .9rem; color: var(--oh-heading); font-weight: 600; }
.oh-area-bars { display: grid; gap: 3px; }
.oh-bar {
	height: 16px;
	border-radius: 4px;
	position: relative;
	min-width: 22px;
}
.oh-bar span {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: .72rem; color: #fff; font-weight: 600;
}
.oh-bar-baseline { background: #a8c6dd; }
.oh-bar-now { background: var(--oh-primary); }
.oh-area-change { text-align: right; font-size: .85rem; }

/* Adherence */
.oh-adh-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.oh-adh-value { font-size: 2rem; font-weight: 700; color: var(--oh-heading); flex: 0 0 auto; }
.oh-adh-desc { font-size: .9rem; color: var(--oh-text); }
.oh-adh-track { height: 10px; border-radius: 999px; background: var(--oh-surface); overflow: hidden; }
.oh-adh-fill { height: 100%; border-radius: 999px; background: var(--oh-green); }

@media (max-width: 560px) {
	.oh-seg { grid-template-columns: repeat(2, 1fr); }
	.oh-seg-3 { grid-template-columns: repeat(3, 1fr); }
	.oh-area { grid-template-columns: 1fr; gap: .25rem; }
	.oh-area-change { text-align: left; }
	.oh-scale { grid-template-columns: repeat(5, 1fr); }
}