:root {
	--ion-safe-area-top: env(safe-area-inset-top);
	--ion-safe-area-bottom: env(safe-area-inset-bottom);
}

/* Grundläggande layout */
ion-content {
	--background: var(--ion-color-light);
}

.container {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ion-safe-area-top) 16px var(--ion-safe-area-bottom);
}

.card-container {
	width: 100%;
	max-width: 400px;
	margin: auto;
}

/* Kort och funktionskort */
.feature-card {
	margin-bottom: 16px;
}

.feature-icon {
	font-size: 24px;
	margin-right: 8px;
}

.info-section {
	margin-top: 32px;
}

.app-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}

.app-card {
	flex: 1;
	min-width: 280px;
}

.security-notice {
	margin-top: 32px;
	padding: 16px;
	border-radius: 8px;
}

.feature-links {
	margin-top: 8px;
}

.feature-links a {
	display: inline-flex;
	align-items: center;
	margin-right: 16px;
	color: var(--ion-color-primary);
	text-decoration: none;
	opacity: 0.9;
}

.feature-links ion-icon {
	margin-right: 4px;
	font-size: 16px;
}

.feature-links a:hover {
	opacity: 1;
}

@media (max-width: 768px) {
	.app-card {
		min-width: 100%;
	}
}

/* Kort-stilar */
ion-card {
	margin: 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	background: #ffffff;
	border-radius: 8px;
}

ion-card-header {
	text-align: center;
	padding: 24px 16px 16px;
}

ion-card-title {
	font-size: 24px;
	font-weight: 600;
	color: var(--ion-color-dark);
}

ion-card-content {
	padding: 16px;
}

/* Formulär-element */
form {
	padding: 0 16px 24px;
}

.forgot-password {
	text-align: center;
	margin: 8px 0;
}

.forgot-password a {
	color: var(--ion-color-primary);
	text-decoration: none;
	font-size: 0.9em;
}

ion-item {
	--background: transparent;
	--padding-start: 0;
	--inner-padding-end: 0;
	--border-color: var(--ion-color-medium);
	--highlight-height: 2px;
	margin-bottom: 16px;
	border-radius: 4px;
}

ion-item.item-has-focus {
	--highlight-background: var(--ion-color-primary);
}

ion-label {
	--color: var(--ion-color-medium);
	font-size: 16px;
	transition: all 0.2s ease;
}

ion-input {
	--padding-start: 16px;
	--padding-end: 16px;
	--padding-top: 16px;
	--padding-bottom: 16px;
	font-size: 16px;
	--background: transparent;
}

/* Knappar och åtgärder */
ion-button {
	margin-top: 24px;
	--border-radius: 4px;
	--box-shadow: none;
	height: 48px;
	font-size: 16px;
	text-transform: none;
}

ion-button[fill="outline"] {
	margin-top: 12px;
}

.form-submit-button {
	margin-top: 16px;
}

.secondary-action-button {
	margin-top: 12px;
}

/* Meddelanden och notifieringar */
.message {
	text-align: center;
	margin: 16px 0;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 4px;
}

.error-message {
	composes: message;
	color: var(--ion-color-danger);
	background: rgba(var(--ion-color-danger-rgb), 0.1);
}

.success-message {
	composes: message;
	color: var(--ion-color-success);
	background: rgba(var(--ion-color-success-rgb), 0.1);
}

.info-message {
	composes: message;
	color: var(--ion-color-primary);
	background: rgba(var(--ion-color-primary-rgb), 0.1);
}

/* Mörkt tema */
@media (prefers-color-scheme: dark) {
	:root {
		--ion-background-color: #121212;
		--ion-text-color: #ffffff;
		--ion-card-background: #1e1e1e;
	}

	ion-content {
		--background: #1a1a1a;
	}

	ion-card {
		--background: var(--ion-card-background);
		background: #2d2d2d;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	}

	ion-card-subtitle {
		color: #e0e0e0 !important;
	}

	ion-card-content {
		color: #f5f5f5;
	}

	ion-card-title {
		color: #ffffff;
	}

	ion-item {
		--background: transparent;
		--border-color: rgba(255, 255, 255, 0.1);
		--highlight-background: #4d8dff;
		color: #ffffff;
	}

	ion-item.item-has-focus {
		--highlight-background: #5a9bff;
	}

	.security-notice {
		background: rgba(255, 196, 0, 0.15);
		color: #ffffff;
	}

	ion-label {
		--color: #ffffff;
		opacity: 0.8;
	}

	ion-input {
		--color: #ffffff;
		--placeholder-color: rgba(255, 255, 255, 0.4);
	}

	.label-floating.sc-ion-label-md-h,
	.label-floating.sc-ion-label-ios-h {
		color: rgba(255, 255, 255, 0.8);
	}

	.item-has-focus .label-floating.sc-ion-label-md-h,
	.item-has-focus .label-floating.sc-ion-label-ios-h {
		color: #5a9bff;
	}

	.message {
		color: #ffffff;
	}
}