/* Grundlegende Styles */
:root {
	--ion-color-primary: #5f7482;
	--ion-color-primary-rgb: 95, 116, 130;
	--ion-color-primary-contrast: #ffffff;
	--ion-color-primary-contrast-rgb: 255, 255, 255;
	--ion-color-primary-shade: #546672;
	--ion-color-primary-tint: #6f828f;

	--ion-color-secondary: #92c068;
	--ion-color-secondary-rgb: 146, 192, 104;
	--ion-color-secondary-contrast: #000000;
	--ion-color-secondary-contrast-rgb: 0, 0, 0;
	--ion-color-secondary-shade: #80a95c;
	--ion-color-secondary-tint: #9dc677;

	--ion-background-color: #f5f5f5;
	--ion-text-color: #333333;

	--ion-color-danger: #eb445a;
	--ion-color-danger-shade: #cf3c4f;
	--ion-color-danger-tint: #ed576b;
}

body {
	font-family: 'Roboto', sans-serif;
	line-height: 1.6;
}

ion-content {
	--padding-top: 30px;
	--padding-bottom: 86px;
	--padding-start: 20px;
	--padding-end: 20px;
}

/* Login-Seite Styles */
#login-page ion-card {
	max-width: 400px;
	margin: 0 auto;
}

/* Tabbar Styles */
ion-tab-bar {
	--background: var(--ion-background-color);
	border-top: 1px solid var(--ion-color-primary);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: 56px; /* Fügen Sie eine feste Höhe hinzu */
	padding-bottom: env(
		safe-area-inset-bottom
	); /* Für Geräte mit einer "notch" oder einem "safe area" */
}

ion-tab-button {
	--color: var(--ion-color-primary);
	--color-selected: var(--ion-color-secondary);
}

/* Stellen Sie sicher, dass der Inhalt nicht von der Tabbar überdeckt wird */
ion-content {
	--padding-bottom: 56px;
}

ion-tabs {
	display: flex;
	flex-direction: column;
	height: 100%;
}

ion-tab {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 76px; /* Stellt sicher, dass der Inhalt nicht hinter der Tabbar verschwindet */
}

/* Wochenübersicht Styles */
.week-overview {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 25px;
	margin-bottom: 30px;
	transition: all 0.3s ease;
}

.today-summary {
	background-color: #ffffff;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.today-summary h2 {
	color: var(--ion-color-primary);
	font-size: 22px;
	margin-bottom: 15px;
}

.week-overview:hover,
.extended-overview:hover,
.day-details:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.week-days {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.day-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--ion-color-primary);
	color: var(--ion-color-primary-contrast);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
	transition: all 0.3s ease;
}

.day-circle:hover {
	transform: scale(1.1);
}

.day-circle.today {
	background-color: var(--ion-color-secondary);
	font-weight: bold;
}

.today-summary h2,
.week-summary h2,
.overview-content h2 {
	color: var(--ion-color-primary);
	font-size: 22px;
	margin-bottom: 15px;
}

.status-working {
	color: var(--ion-color-secondary);
	font-weight: bold;
}

.status-not-started {
	color: var(--ion-color-medium);
}

.status-vacation {
	color: var(--ion-color-primary);
	font-weight: bold;
}

.status-day-off {
	color: var(--ion-color-warning);
	font-weight: bold;
}

.status-not-verified {
	color: var(--ion-color-danger);
	font-weight: bold;
}

#week-worked-time,
#week-remaining-time {
	font-weight: bold;
	color: var(--ion-color-primary);
}

ion-tab[tab='uebersicht'] ion-content {
	--background: #f0f0f0;
}

ion-app {
	background-color: #f0f0f0;
}

/* Überschriften */
h1 {
	color: var(--ion-color-primary);
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 30px;
	text-align: center;
}

/* Buttons */
ion-button {
	--background: var(--ion-color-primary);
	--background-hover: var(--ion-color-primary-shade);
	--background-activated: var(--ion-color-primary-shade);
	--background-focused: var(--ion-color-primary-shade);
	--border-radius: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Fügen Sie diese Styles am Ende der Datei hinzu */
.extended-overview {
	background-color: var(--ion-background-color);
	border-radius: 8px;
	padding: 20px;
	margin-top: 20px;
	margin-bottom: 20px; /* Fügen Sie einen unteren Abstand hinzu */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#time-range-selector {
	margin-bottom: 20px;
}

.overview-content h2 {
	color: var(--ion-color-primary);
	font-size: 20px;
	margin-bottom: 15px;
}

.overview-stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: #f9f9f9;
	border-radius: 6px;
}

.stat-label {
	font-weight: bold;
	color: var(--ion-color-primary);
}

.stat-value {
	font-weight: bold;
	color: var(--ion-color-secondary);
	text-align: right; /* Fügen Sie diese Zeile hinzu */
}

/* Fügen Sie diesen neuen Stil hinzu */
#overview-overtime {
	display: inline-block;
	min-width: 80px; /* Passen Sie diesen Wert an, falls nötig */
}

/* Fügen Sie diese Styles hinzu */
#current-week {
	color: var(--ion-color-primary);
	font-weight: bold;
	margin-bottom: 10px;
}

#overview-week-number {
	font-weight: normal;
	font-size: 0.8em;
}

/* Kalender Styles */
.calendar-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

#calendar {
	background-color: var(--ion-background-color);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	width: 100%;
}

.day-details {
	background-color: var(--ion-background-color);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 100%;
}

.day-details h2 {
	color: var(--ion-color-primary);
	margin-top: 0;
	margin-bottom: 10px;
}

#edit-day-button {
	margin-bottom: 20px;
}

#day-info {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Responsive Design */
@media (min-width: 768px) {
	.calendar-container {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	#calendar {
		width: 48%;
		margin-bottom: 0;
	}

	.day-details {
		width: 48%;
	}
}

@media (min-width: 1024px) {
	#calendar,
	.day-details {
		max-width: none;
	}
}

/* Zentrieren Sie den Inhalt der Kalender-Seite */
ion-tab[tab='kalendar'] ion-content {
	--padding-top: 20px;
	--padding-bottom: 20px;
}

/* Einstellungen Styles */
ion-list {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 10px;
}

ion-item {
	--padding-start: 10px;
	--padding-end: 10px;
	--inner-padding-end: 10px;
	--background: transparent;
}

ion-toggle {
	--background: var(--ion-color-medium);
	--background-checked: var(--ion-color-secondary);
	--handle-background: #ffffff;
	--handle-background-checked: #ffffff;
}

ion-select {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
}

/* Styles für den Schließen-Button im Modal */
ion-modal ion-button.close-button {
	--color: var(--ion-color-primary);
	--background: transparent;
	--background-hover: var(--ion-color-primary-tint);
	--background-activated: var(--ion-color-primary-shade);
	--box-shadow: none;
}

ion-modal ion-button.close-button:hover {
	--color: var(--ion-color-primary-contrast);
}

ion-datetime {
	--background: #ffffff;
	--title-color: var(--ion-color-primary);
	--placeholder-color: var(--ion-color-medium);
	--color: var(--ion-color-dark);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

ion-datetime::part(calendar-day) {
	color: var(--ion-color-dark);
	border-radius: 50%;
}

ion-datetime::part(calendar-day.calendar-day-today) {
	color: var(--ion-color-secondary-contrast);
	background-color: var(--ion-color-secondary);
	font-weight: bold;
}

ion-datetime::part(calendar-day.calendar-day-active) {
	background-color: var(--ion-color-primary);
	color: var(--ion-color-primary-contrast);
}

ion-datetime::part(calendar-day.calendar-day-today.calendar-day-active) {
	box-shadow: inset 0 0 0 1px var(--ion-color-primary-contrast);
}

/* Admin Panel Styles */
.user-overview-card {
	margin-bottom: 20px;
}

.user-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
}

.user-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 10px;
	background-color: var(--ion-color-light);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.user-stat-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background-color: var(--ion-color-light-shade);
}

.user-stat-item ion-icon {
	font-size: 24px;
	margin-bottom: 5px;
	color: var(--ion-color-primary);
}

.user-stat-item .stat-label {
	font-size: 14px;
	color: var(--ion-color-medium);
	margin-bottom: 5px;
}

.user-stat-item .stat-value {
	font-size: 18px;
	font-weight: bold;
	color: var(--ion-color-dark);
}

#export-users-button {
	margin-top: 20px;
}

/* Login und Register Styles */
#login-page ion-card,
#register-page ion-card {
	max-width: 400px;
	margin: 0 auto;
}

#login-page ion-item,
#register-page ion-item {
	--padding-start: 0;
	--inner-padding-end: 0;
	--padding-bottom: 10px;
}

#login-page ion-label,
#register-page ion-label {
	margin-bottom: 5px;
}

#login-page ion-input,
#register-page ion-input {
	--padding-start: 10px;
	--padding-end: 10px;
	--padding-top: 10px;
	--padding-bottom: 10px;
	margin-top: 5px;
	border: 1px solid var(--ion-color-medium);
	border-radius: 4px;
}

#login-page ion-button,
#register-page ion-button {
	margin-top: 20px;
}

.form-group {
	margin-bottom: 15px;
}

.form-group ion-label {
	margin-bottom: 5px;
	display: block;
}

/* Toast Styles */
ion-toast {
	--background: var(--ion-color-primary);
	--color: var(--ion-color-primary-contrast);
	--button-color: var(--ion-color-secondary);
	--border-radius: 8px;
	--box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2);
}

ion-toast::part(message) {
	font-weight: bold;
}

ion-toast::part(button) {
	text-transform: uppercase;
	font-weight: bold;
}

/* Fügen Sie diese Styles zu Ihren bestehenden Styles hinzu oder aktualisieren Sie sie */

/* Farben fr Benutzerstatus in der Übersicht */
.user-stat-item[data-status='working'] .stat-value {
	color: var(--ion-color-secondary); /* Grün für arbeitende Benutzer */
}

.user-stat-item[data-status='vacation'] .stat-value {
	color: #3880ff; /* Blau für Benutzer im Urlaub */
}

.user-stat-item[data-status='day-off'] .stat-value {
	color: #ffc409; /* Gelb für Benutzer mit freiem Tag */
}

.user-stat-item[data-status='not-started'] .stat-value {
	color: var(
		--ion-color-medium
	); /* Grau für Benutzer, die nicht begonnen haben */
}

.user-stat-item[data-status='unverified'] .stat-value {
	color: var(--ion-color-danger); /* Rot für nicht verifizierte Benutzer */
}

/* Grünes Badge für den Admin-Tab */
#admin-tab-button ion-badge {
	--background: var(--ion-color-secondary);
	--color: var(--ion-color-secondary-contrast);
}

#admin-log-list ion-item {
	--padding-start: 0;
	--inner-padding-end: 0;
}

#admin-log-list ion-label {
	white-space: normal;
}

#admin-log-list h2 {
	font-size: 0.9em;
	color: var(--ion-color-medium);
}

#admin-log-list h3 {
	font-size: 1em;
	font-weight: bold;
	color: var(--ion-color-dark);
}

#admin-log-list p {
	font-size: 0.8em;
	color: var(--ion-color-medium);
	white-space: pre-wrap;
	word-break: break-word;
}

#admin-log-list .log-item {
	--padding-start: 16px;
	--inner-padding-end: 16px;
	margin-bottom: 16px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#admin-log-list .log-date {
	font-size: 0.9em;
	color: var(--ion-color-medium);
	margin-bottom: 4px;
}

#admin-log-list .log-user {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--ion-color-dark);
	margin-bottom: 4px;
}

#admin-log-list .log-action {
	font-size: 1em;
	color: var(--ion-color-primary);
	margin-bottom: 8px;
}

#admin-log-list .log-details {
	background-color: var(--ion-color-light);
	border-radius: 4px;
	padding: 8px;
	margin-top: 8px;
}

#admin-log-list .log-details ion-item {
	--padding-start: 0;
	--inner-padding-end: 0;
	--min-height: 24px;
	font-size: 0.9em;
}

#admin-log-list .log-details ion-label {
	margin: 0;
}

#admin-log-list ion-select {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

#log-details ion-card {
	margin-top: 20px;
}

#log-details ul {
	padding-left: 20px;
}

#log-details li {
	margin-bottom: 5px;
}

#admin-log-list ion-accordion-group {
	margin-bottom: 20px;
}

#admin-log-list ion-accordion {
	margin-bottom: 8px;
	border: 1px solid var(--ion-color-light);
	border-radius: 8px;
}

#admin-log-list ion-item {
	--padding-start: 16px;
	--inner-padding-end: 16px;
}

#admin-log-list h3 {
	font-size: 0.9em;
	font-weight: bold;
	margin-bottom: 4px;
}

#admin-log-list p {
	font-size: 0.8em;
	color: var(--ion-color-medium);
	margin: 0;
}

#admin-log-list pre {
	background-color: var(--ion-color-light);
	padding: 8px;
	border-radius: 4px;
	font-size: 0.8em;
	white-space: pre-wrap;
	word-break: break-word;
}

.status-no-entry {
	color: var(--ion-color-medium);
}

.status-sick {
	color: #ff4961; /* oder eine andere passende Farbe für den Krank-Status */
	font-weight: bold;
}

.user-stat-item.clickable {
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.user-stat-item.clickable:hover {
	background-color: var(--ion-color-light-shade);
}

/* Fügen Sie diese Styles am Ende der Datei hinzu oder aktualisieren Sie die bestehenden */

.action-buttons {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 15px;
}

.action-buttons ion-button,
.action-buttons ion-select,
.action-buttons ion-item {
	width: 100%;
	margin: 5px 0;
}

#break-duration {
	--padding-start: 16px;
	--padding-end: 16px;
	--padding-top: 12px;
	--padding-bottom: 12px;
	--background: var(--ion-color-light);
	border-radius: 8px;
}

#custom-break-duration {
	--background: var(--ion-color-light);
	border-radius: 8px;
	margin-top: 5px;
}

#start-work-button {
	--background: var(--ion-color-secondary);
	--background-hover: var(--ion-color-secondary-shade);
	--background-activated: var(--ion-color-secondary-shade);
	--background-focused: var(--ion-color-secondary-shade);
}

#end-work-button {
	--background: var(--ion-color-danger);
	--background-hover: var(--ion-color-danger-shade);
	--background-activated: var(--ion-color-danger-shade);
	--background-focused: var(--ion-color-danger-shade);
}

ion-fab {
	bottom: 70px;
	right: 24px;
	position: fixed;
	z-index: 1000;
}

ion-fab-button {
	--background: var(--ion-color-primary);
	--background-activated: var(--ion-color-primary-shade);
	--background-hover: var(--ion-color-primary-tint);
	width: 56px;
	height: 56px;
}

ion-fab-list {
	bottom: 0; /* Ändert die Position der Liste relativ zum Haupt-FAB */
	right: 0;
}

ion-fab-list ion-fab-button {
	--background: var(--ion-color-light);
	--color: var(--ion-color-dark);
	width: 48px;
	height: 48px;
	margin-bottom: 8px; /* Verringert den Abstand zwischen den Buttons */
}

/* Der letzte Button in der Liste sollte näher am Haupt-FAB sein */

/* Spezifische Farben für die FAB-Buttons in der Liste bleiben unverändert */
ion-fab-list ion-fab-button[color='tertiary'] {
	--background: var(--ion-color-tertiary);
	--color: var(--ion-color-tertiary-contrast);
}

ion-fab-list ion-fab-button[color='success'] {
	--background: var(--ion-color-success);
	--color: var(--ion-color-success-contrast);
}

ion-fab-list ion-fab-button[color='warning'] {
	--background: var(--ion-color-warning);
	--color: var(--ion-color-warning-contrast);
}

/* FAB Styles */
#quick-status-fab {
	position: fixed;
	bottom: 70px;
	right: 24px;
	z-index: 1000;
}

#quick-status-fab ion-fab-button {
	--background: var(--ion-color-primary);
	--background-activated: var(--ion-color-primary-shade);
	--background-hover: var(--ion-color-primary-tint);
}

#quick-status-fab ion-fab-list {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#quick-status-fab ion-fab-list ion-fab-button {
	width: 48px;
	height: 48px;
	margin: 4px 0;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.2s ease-out;
	pointer-events: none; /* Buttons standardmäßig nicht klickbar */
}

/* Styles für geöffnetes FAB */
#quick-status-fab.fab-button-open ion-fab-list ion-fab-button {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto; /* Buttons nur klickbar wenn sichtbar */
}

.overtime-query {
	margin-top: 20px;
	padding: 15px;
	background-color: var(--ion-color-light);
	border-radius: 8px;
}

.overtime-query h2 {
	color: var(--ion-color-primary);
	margin-bottom: 15px;
}

#overtime-result {
	margin-top: 15px;
	padding: 10px;
	background-color: var(--ion-color-light-shade);
	border-radius: 4px;
}

.settings-content {
	max-width: 600px;
	margin: 0 auto;
}

.settings-content ion-card {
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.settings-content ion-card-header {
	background-color: var(--ion-color-primary);
	color: var(--ion-color-primary-contrast);
	padding: 16px;
}

.settings-content ion-card-title {
	font-size: 1.2em;
	font-weight: bold;
}

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

.settings-content ion-item {
	--padding-start: 0;
	--inner-padding-end: 0;
	--background: transparent;
	margin-bottom: 16px;
}

.settings-content ion-input {
	--padding-end: 55px; /* Platz für die Einheit am Ende */
}

.settings-content ion-input div[slot='end'] {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ion-color-medium);
	padding-right: 12px;
}

.settings-content ion-label {
	font-weight: 500;
}

.settings-content ion-toggle {
	--background: var(--ion-color-medium);
	--background-checked: var(--ion-color-primary);
	--handle-background: var(--ion-color-light);
	--handle-background-checked: var(--ion-color-light);
}

.settings-content ion-button {
	margin-top: 20px;
	--border-radius: 8px;
}

#save-settings-button {
	--background: var(--ion-color-secondary);
	--color: var(--ion-color-secondary-contrast);
}

/* Fügen Sie diese neuen Stile hinzu */
.settings-content ion-input {
	--color: var(--ion-color-dark);
	--placeholder-color: var(--ion-color-medium);
}

.settings-content ion-label {
	--color: var(--ion-color-dark);
}

.settings-content ion-item {
	--border-color: var(--ion-color-medium);
}

.settings-content ion-note {
	--color: var(--ion-color-medium);
}

.notifications-content {
	position: relative;
	opacity: 0.6;
}

.coming-soon-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.coming-soon-overlay span {
	background-color: var(--ion-color-primary);
	color: var(--ion-color-primary-contrast);
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: bold;
}

.notifications-content ion-item {
	--opacity: 0.6;
}

/* Fügen Sie diese Styles hinzu */
#developer-tab-button {
	--color: var(--ion-color-primary);
	--color-selected: var(--ion-color-secondary);
}

#developer-tab-button ion-icon {
	color: var(--ion-color-primary);
}

#developer-tab-button.tab-selected ion-icon {
	color: var(--ion-color-secondary);
}

/* Fügen Sie diese Styles am Ende der Datei hinzu */
.changelog-modal {
	--height: 80%;
	--width: 90%;
	--max-width: 600px;
	--border-radius: 16px;
}

.changelog-modal ion-content {
	--padding-top: 20px;
	--padding-bottom: 20px;
	--padding-start: 20px;
	--padding-end: 20px;
}

.changelog-modal h2 {
	color: var(--ion-color-primary);
	margin-bottom: 15px;
	font-size: 1.5em;
}

.changelog-modal ul {
	padding-left: 20px;
	margin-bottom: 20px;
}

.changelog-modal li {
	margin-bottom: 10px;
	font-size: 1.1em;
}

.changelog-modal ion-title {
	font-size: 1.2em;
	font-weight: bold;
}

.changelog-modal p {
	font-size: 1em;
	color: var(--ion-color-medium);
}

.segment-content {
	margin-top: 20px;
}

#localStorage-content {
	white-space: pre-wrap;
	word-break: break-all;
	background-color: var(--ion-color-light);
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.overview-item {
	background-color: var(--ion-color-light);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overview-item .label {
	font-weight: bold;
	color: var(--ion-color-medium);
	display: block;
	margin-bottom: 5px;
}

.overview-item .value {
	font-size: 1.2em;
	color: var(--ion-color-dark);
}

.overview-item .value.positive {
	color: var(--ion-color-success);
}

.overview-item .value.negative {
	color: var(--ion-color-danger);
}

.overtime-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 20px;
}

.overtime-item {
	background-color: var(--ion-color-light);
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overtime-item .label {
	font-weight: bold;
	font-size: 0.9em;
	color: var(--ion-color-medium);
	display: block;
	margin-bottom: 5px;
}

.overtime-item .value {
	font-size: 1em;
	color: var(--ion-color-dark);
}

.overtime-item .value.positive {
	color: var(--ion-color-success);
}

.overtime-item .value.negative {
	color: var(--ion-color-danger);
}

.overview-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}

.summary-item {
	flex-basis: calc(33.33% - 10px);
	background-color: var(--ion-color-light);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
}

@media (max-width: 768px) {
	.summary-item {
		flex-basis: 100%;
	}
}

.overview-details {
	background-color: var(--ion-color-light);
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.overview-details h3 {
	margin-top: 0;
	color: var(--ion-color-medium);
}

.overview-content {
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
}

.overview-header {
	text-align: center;
	margin-bottom: 30px;
}

.overview-header h2 {
	color: var(--ion-color-primary);
	font-size: 1.8em;
	margin: 0;
	font-weight: 500;
}

.overview-content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 25px;
	margin: 0 auto;
}

.overview-card {
	background: white;
	border-radius: 16px;
	padding: 25px;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.overview-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.overview-card.main-card {
	background: linear-gradient(
		135deg,
		var(--ion-color-primary) 0%,
		var(--ion-color-primary-shade) 100%
	);
	color: white;
}

.card-value {
	font-size: 2.5em;
	font-weight: bold;
	line-height: 1.2;
}

.card-label {
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
}

.card-description {
	font-size: 0.9em;
	line-height: 1.5;
	opacity: 0.9;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.overview-card.positive {
	background: linear-gradient(
		135deg,
		var(--ion-color-success) 0%,
		var(--ion-color-success-shade) 100%
	);
	color: white;
}

.overview-card.initial {
	background: linear-gradient(
		135deg,
		var(--ion-color-warning) 0%,
		var(--ion-color-warning-shade) 100%
	);
	color: white;
}

@media (max-width: 600px) {
	.overview-content-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.overview-card {
		padding: 20px;
	}

	.card-value {
		font-size: 2em;
	}
}

.today-summary {
	margin-bottom: 30px;
	padding: 0 20px;
}

.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.summary-card {
	background: white;
	border-radius: 16px;
	padding: 20px;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.summary-card.main-card {
	background: linear-gradient(
		135deg,
		var(--ion-color-primary) 0%,
		var(--ion-color-primary-shade) 100%
	);
	color: white;
}

.summary-card.active {
	background: linear-gradient(
		135deg,
		var(--ion-color-success) 0%,
		var(--ion-color-success-shade) 100%
	);
	color: white;
}

.summary-card.inactive {
	background: linear-gradient(
		135deg,
		var(--ion-color-medium) 0%,
		var(--ion-color-medium-shade) 100%
	);
	color: white;
}

.summary-card .card-value {
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 8px;
}

.summary-card .card-label {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}

.summary-card .card-description {
	font-size: 0.9em;
	opacity: 0.9;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 12px;
}

@media (max-width: 600px) {
	.summary-grid {
		grid-template-columns: 1fr;
	}
}

.status-overview {
	padding: 20px 0; /* Vertikaler Abstand oben und unten */
	max-width: 800px;
	margin: 0 auto;
}

.status-card {
	background: transparent;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 40px; /* Größerer Abstand nach unten */
	box-shadow: none;
}

.status-header {
	background: linear-gradient(
		135deg,
		var(--ion-color-primary) 0%,
		var(--ion-color-primary-shade) 100%
	);
	color: white;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2em;
	border-radius: 16px;
	margin-bottom: 20px; /* Konsistenter Abstand zum Content */
}

.status-header ion-icon {
	font-size: 1.4em;
}

.status-content {
	padding: 0 20px; /* Seitlicher Abstand für den Content */
}

.status-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
}

.time-display {
	font-size: 2.8em;
	font-weight: bold;
	color: var(--ion-color-dark);
}

.status-badge {
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 500;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.status-badge.active {
	background: var(--ion-color-success);
	color: white;
}

.status-badge.completed {
	background: var(--ion-color-medium);
	color: white;
}

.status-badge.no-entry {
	background: var(--ion-color-light);
	color: var(--ion-color-medium);
}

.status-badge.vacation {
	background: var(--ion-color-warning);
	color: white;
}

.status-badge.day-off {
	background: var(--ion-color-tertiary);
	color: white;
}

.status-badge.sick {
	background: var(--ion-color-danger);
	color: white;
}

.status-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.detail-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ion-color-medium);
	font-size: 1.1em;
}

.detail-item ion-icon {
	font-size: 1.3em;
}

.remember-me-container {
	--padding-start: 4px;
	--padding-end: 4px;
	--inner-padding-end: 0;
	--min-height: 35px;
	margin: 8px 0;
	--background: transparent;
	display: flex;
	align-items: center;
}

.remember-me-container ion-checkbox {
	--size: 18px;
	--checkbox-background-checked: var(--ion-color-primary);
	--border-radius: 4px;
	--border-color: var(--ion-color-medium);
	--border-color-checked: var(--ion-color-primary);
	margin: 0;
	margin-top: 2px;
}

.remember-me-container ion-label {
	font-size: 14px;
	color: var(--ion-color-medium);
	margin-left: 8px;
	cursor: pointer;
	margin-top: 2px;
}

/* Hover-Effekt für die Checkbox */
.remember-me-container:hover ion-checkbox {
	--border-color: var(--ion-color-primary);
}

/* Hover-Effekt für den Text */
.remember-me-container:hover ion-label {
	color: var(--ion-color-primary);
}