/* Färgpalett inspirerad av Material Design (Första versionen) */
:root {
	--color-primary: #007bff; 
	--color-on-primary: #ffffff;
	--color-surface: #ffffff; 
	--color-background: #f4f4f4; 
	--color-on-surface: #333; 
	--color-error: #d9534f;
	--color-outline: #ccc;
	
	/* Grön för Spara */
	--color-save-button: #28a745;
}

body { 
	font-family: Arial, sans-serif; 
	background-color: var(--color-background); 
	margin: 0; 
	padding: 20px; 
	line-height: 1.6;
}
.container { 
	max-width: 700px; 
	margin: 30px auto; 
	background: var(--color-surface); 
	padding: 30px; 
	border-radius: 8px; 
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}
.logo { 
	text-align: center; 
	margin-bottom: 30px; 
}
.logo img { 
	max-width: 180px; 
	height: auto; 
	display: block; 
	margin: 0 auto; 
}
h1, h2 { 
	text-align: center; 
	color: #0056b3; 
	margin-bottom: 25px;
}
h3 {
	color: var(--color-on-surface);
}

/* Progress-information */
.progress-text {
	font-size: 0.9em; 
	color: #666;
	text-align: center;
	margin-bottom: 15px;
}

/* Frågetext */
.question-text {
	font-size: 1.25em; 
	font-weight: bold;
	line-height: 1.4;
	padding: 10px 0;
	text-align: center;
}

/* För att gruppera knappar i rad (standard för stor skärm) */
.button-group {
	display: flex;
	gap: 10px; 
	width: 100%;
	margin-top: 15px;
}

/* MEDIA QUERY FÖR MOBIL (Max-bredd 600px) */
@media (max-width: 600px) {
	.container {
		padding: 20px;
		margin: 10px auto;
	}
	
	/* FIX: Tvinga inputfält att respektera containern på mobilen */
	input[type="date"], input[type="text"], textarea { 
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box; /* Säkerställer att padding inte lägger till bredd */
	}
	
	.button-group {
		flex-direction: column; /* Låter knapparna hamna OVANFÖR varandra */
		gap: 15px;
	}
	
	/* Återställ flex-grow så knapparna tar hela bredden i kolumnläget */
	button, .button {
		flex-grow: 0; 
	}
}


/* Formulärelement */
label { 
	display: block; 
	margin-bottom: 8px; 
	font-weight: bold; 
	color: var(--color-on-surface);
}
input[type="date"], input[type="text"], textarea { 
	width: 100%; 
	padding: 10px; 
	margin-bottom: 20px; 
	border: 1px solid var(--color-outline); 
	border-radius: 4px; 
	box-sizing: border-box; 
	font-size: 16px;
}

/* Knappstil (Basstil) */
button, .button { 
	background-color: var(--color-primary); 
	color: var(--color-on-primary); 
	padding: 12px 20px; 
	border: none; 
	border-radius: 4px; 
	cursor: pointer; 
	font-size: 18px; 
	flex-grow: 1; 
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s ease;
	
	/* Ikon/text-layout: Ikon till vänster */
	display: flex; 
	align-items: center; 
	justify-content: center; 
	gap: 8px; /* Mellanrum mellan ikon och text */
	margin: 0; 
}
button:hover, .button:hover { 
	background-color: #0056b3; 
}

/* --- SPECIFIK KNAPPSTYLING --- */

/* Grön Spara-knapp */
.save-button {
	background-color: var(--color-save-button);
}
.save-button:hover {
	background-color: #1e7e34;
}

/* Primär Blå Start-knapp (för "Påbörja Ny Kontroll") */
.primary-start-button {
	background-color: var(--color-primary);
}
.primary-start-button:hover {
	background-color: #0056b3;
}
/* -------------------- */


/* Ikonstil */
.material-symbols-outlined {
	font-size: 20px;
	line-height: 1; 
}

/* Felmeddelande */
.error {
	color: var(--color-error);
	font-weight: bold;
	text-align: center;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid var(--color-error);
	background-color: #f2dede;
	border-radius: 4px;
}

/* Separator */
hr {
	margin-top: 30px; 
	border-top: 1px solid #e0e0e0;
	border-bottom: none;
}