/* Info-Widget spezifisches Styling - einheitlich mit Weather-Widget */
:root {
	/* Header widgets layout spacing (can be tuned by adding header-compact or header-loose on body) */
	--header-widget-gap: 16px;
	--header-label-col: 78px;
	--header-col-gap: 16px; /* horizontal gap between label and value */
	--header-row-gap: 8px; /* default vertical gap across header widgets */
	--header-columns-gap: 64px; /* horizontal gap between the three header widgets */
	/* Specific to time rows */
	--time-col-gap: 16px; /* default label/value gap for time */
}

body.header-compact {
	--header-widget-gap: 10px;
	--header-label-col: 70px;
	--header-col-gap: 12px;
	--header-row-gap: 8px;
	--time-col-gap: 4px;
}

body.header-loose {
	--header-widget-gap: 22px;
	--header-label-col: 92px;
	--header-col-gap: 22px;
	--header-row-gap: 8px;
	--time-col-gap: 8px;
}

#info-widget, #time-widget, #status-widget, #towing-reminder-widget {
	display: flex;
	flex-direction: column;
	width: auto;
	min-width: 220px;
	/* Remove card styling inside header; kept generic for other usages if any */
	background: transparent;
	padding: 0;
	border-radius: 0;
	border: none;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin-left: 0;
	transition: all 0.3s ease;
	height: auto;
	box-shadow: none;
}

/* Dark mode for header widgets: keep transparent to blend with header */
.dark-mode #info-widget, .dark-mode #time-widget, .dark-mode #status-widget, .dark-mode #towing-reminder-widget {
	background: transparent !important;
	color: #d1d5db;
	border: none !important;
}
.dark-mode .time-display-row .time-label,
.dark-mode .time-display-row .time-value { color: var(--dark-text) !important; }
.dark-mode #status-widget .status-label { color: var(--dark-text) !important; }
.dark-mode #presence-widget .status-label { color: var(--dark-text) !important; }
.dark-mode .mode-display,
.dark-mode .mode-display > span { color: var(--dark-text) !important; }

/* Responsive Anpassungen - einheitlich mit Weather-Widget */
@media (max-width: 640px) {
	#info-widget, #time-widget, #status-widget {
		width: auto; /* Automatische Breite wie Weather-Widget */
		min-width: 160px;
		padding: 6px 10px; /* Exakt wie Weather-Widget */
	}

	.time-group {
		margin: 0 2px;
	}

	.time-label,
	.mode-label {
		font-size: 0.875rem; /* Angleichen an Weather-Widget Sekundär-Bereich */
	}

	.time-value {
		font-size: 0.9rem; /* Angleichen an Weather-Widget responsive */
	}

}

/* Info-Icon Container wird absolut positioniert */
#info-icon {
	position: absolute;
	top: 8px;
	right: 14px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #64748b;
	background: rgba(255, 255, 255, 0.7); /* Leicht transparenter Hintergrund */
	z-index: 2; /* Über dem Inhalt, aber nicht zu dominant */
	border-radius: 50%; /* Rundes Icon */
}

/* Hauptinhalt für den primären Bereich */
#primary-status {
	flex: 1;
	font-size: 0.75rem;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
	margin-bottom: 4px;
	font-weight: 600; /* Etwas fetter als der sekundäre Text */
}

/* Sekundärer Container für zusätzlichen Status-Text */
#info-widget .info-secondary {
	display: flex;
	align-items: flex-start;
	font-size: 0.875rem;
	color: #64748b;
	width: 100%;
	min-height: 1.2em;
	height: auto;
	padding-top: 4px; /* Abstand zur Trennlinie */
}

/* Status-Anzeige */
#header-status {
	flex: 1;
	font-size: 0.75rem;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	cursor: help;
	line-height: 1.3;
	min-height: 1.2em;
	max-height: none;
	text-align: left;
	display: block;
	word-wrap: break-word;
	width: 100%; /* Stellt sicher, dass der Text die volle Breite nutzt */
}

/* Tooltip für Status */
#header-status:hover::after {
	content: attr(data-tooltip, attr(title, "Status-Information"));
	position: absolute;
	left: 0;
	bottom: -30px;
	background: rgba(58, 67, 84, 0.95);
	color: white;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	white-space: normal;
	width: max-content;
	max-width: 300px;
	z-index: 100;
	box-shadow: none;
}

/* Status-Styles */
#header-status.info {
	color: #4b5563;
}
#header-status.success {
	color: #10b981;
}
#header-status.error {
	color: #ef4444;
}
#header-status.warning {
	color: #f59e0b;
}

/* Zeit-Anzeige Container - exakt wie Weather Widget Primary */
.time-display-row {
	display: grid;
	grid-template-columns: var(--header-label-col, 80px) 1fr;
	column-gap: var(--time-col-gap, 8px);
	align-items: center;
	margin-bottom: var(--header-row-gap, 6px);
	padding-bottom: 0;
}

.time-display-row .time-label {
	font-weight: 500; /* reduced for lighter title weight */
	color: #334155; /* etwas dunkler/blauer Ton */
	font-size: 0.95rem; /* Kompakter: zuvor 1rem */
	min-width: 40px;
	justify-self: start;
}

.time-display-row .time-value {
	font-weight: 500; /* leichter, reduzierter */
	font-size: 0.875rem; /* wie Weather secondary */
	min-width: 40px;
	text-align: right;
	margin-right: 0;
	color: #64748b; /* gleiche Farbe wie Weather secondary */
	letter-spacing: 0px;
	justify-self: end;
}
/* Time widget spacing: 16px vertical gap between rows, and 16px label/value gap */
#time-widget .time-display-row { column-gap: var(--time-col-gap, 16px); margin-bottom: 16px; }

/* Mode Display - exakt wie Weather Widget Secondary */
.mode-display {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Gleichmäßige Verteilung */
	font-size: 0.8125rem; /* Kompakter: zuvor 0.875rem */
	color: #64748b;
	margin-top: 4px;
	flex-wrap: nowrap;
	height: 1.2em;
	line-height: 1.2;
	width: 100%; /* Volle Breite nutzen */
}

/* New unified header layout: three equal columns (Weather, Time, Status) */
.hp-header .header-widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(260px, 1fr));
	column-gap: var(--header-columns-gap, 48px);
	row-gap: 16px;
	align-items: center; /* center blocks vertically for a cleaner line */
}

/* Remove leftover card chrome inside header */
.hp-header #weather-widget,
.hp-header #time-widget,
.hp-header #status-widget,
.hp-header #towing-reminder-widget {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
}

/* Status-Widget Zeilen */
.status-row {
	display: grid;
	grid-template-columns: var(--header-label-col, 80px) 1fr;
	column-gap: var(--header-col-gap, 16px);
	align-items: center;
	margin-bottom: var(--header-row-gap, 8px);
}
/* Force 16px vertical gap specifically for status content */
#status-widget .status-row { margin-bottom: 16px; }
/* Make header status rows clearly interactive */
#status-widget .status-row { cursor: pointer; }
#status-widget .status-row:hover .status-label,
#status-widget .status-row:hover .status-label-value,
#status-widget .status-row:hover .status-meta {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Make Tow Reminder rows interactive and consistent */
#towing-reminder-widget .status-row { cursor: pointer; }
#towing-reminder-widget .status-row:hover .status-label,
#towing-reminder-widget .status-row:hover .status-label-value {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Make Presence widget Users row interactive and consistent */
#presence-widget .status-row:first-child { cursor: pointer; }
#presence-widget .status-row:first-child:hover .status-label,
#presence-widget .status-row:first-child:hover .status-label-value,
#presence-widget .status-row:first-child:hover #presenceNames {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Explicit pointer on the chips container */
#presenceNames { cursor: pointer; }
/* Gruppe für mehrere Werte rechts (Mode + Update Toggle) */
#status-widget .status-value-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#status-widget .modern-toggle-switch { transform: scale(0.85); transform-origin: right center; }
.status-label {
	font-weight: 500; /* reduced for lighter title weight */
	color: #334155;
	font-size: 0.95rem;
	justify-self: start;
}
/* Werte in den Status-Zeilen rechtsbündig ausrichten */
#status-widget .sync-mode-value,
#status-widget .modern-toggle-switch,
#status-widget .sync-mode-badge,
#status-widget .status-value {
	justify-self: end;
}

/* Header Status widget chips (unified design) */
#status-widget #sync-mode,
#status-widget .sync-mode-value,
#status-widget .sync-mode-badge,
#status-widget .status-label-value,
#towing-reminder-widget #towingReminderActiveBadge {
	/* Base chip */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	border: 1px solid transparent !important;
	min-width: 0 !important;
	text-align: right;
	font-weight: 400; /* no bold */
	font-size: 0.875rem;
	background: #f8fafc !important; /* will be overridden per-state */
	color: #475569;
}
#status-widget .status-meta {
	font-size: 0.75rem;
	color: #94a3b8;
}

/* Header time badge (styled like tile time stamps) */
.header-time-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 11px;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 999px;
	background: #eff6ff; /* blue-50 */
	color: #1d4ed8;      /* blue-700 */
	border: 1px solid #bfdbfe; /* blue-200 */
	min-width: 40px;
	height: 18px;
}
.dark-mode .header-time-badge {
	background: rgba(59, 130, 246, 0.15);
	color: #93c5fd;
	border-color: #1d4ed8;
}

/* Chip variants by state (light theme) */
/* Update status */
#status-widget #headerUpdateStatus.active {
	background: #ecfdf5 !important; /* green */
	border-color: #a7f3d0 !important;
	color: #065f46 !important;
	border-left: 2px solid #10b981 !important;
}
#status-widget #headerUpdateStatus.inactive {
	background: #f3f4f6 !important; /* gray */
	border-color: #e5e7eb !important;
	color: #64748b !important;
	border-left: 2px solid #94a3b8 !important;
}

/* Tow reminder */
#towing-reminder-widget #towingReminderActiveBadge.active {
	/* Match Auto Update ACTIVE (green) style */
	background: #ecfdf5 !important; /* green */
	border-color: #a7f3d0 !important;
	color: #065f46 !important;
	border-left: 2px solid #10b981 !important;
}
#towing-reminder-widget #towingReminderActiveBadge.inactive {
	background: #f3f4f6 !important; /* gray */
	border-color: #e5e7eb !important;
	color: #64748b !important;
	border-left: 2px solid #94a3b8 !important;
}

/* Sync mode (Master/Read-only/Standalone) */
#status-widget #sync-mode.master {
	background: #ecfdf5 !important; /* green */
	border-color: #a7f3d0 !important;
	color: #065f46 !important;
	border-left: 2px solid #10b981 !important;
}
#status-widget #sync-mode.slave {
	background: #eff6ff !important; /* blue */
	border-color: #bfdbfe !important;
	color: #1d4ed8 !important;
	border-left: 2px solid #3b82f6 !important;
}
#status-widget #sync-mode.standalone {
	background: #f3f4f6 !important; /* gray */
	border-color: #e5e7eb !important;
	color: #475569 !important;
	border-left: 2px solid #94a3b8 !important;
}

/* Dark mode variants for chips */
.dark-mode #status-widget #headerUpdateStatus.active {
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: #065f46 !important;
	color: #a7f3d0 !important;
	border-left: 2px solid #10b981 !important;
}
.dark-mode #status-widget #headerUpdateStatus.inactive {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-secondary) !important;
	border-left: 2px solid #64748b !important;
}
.dark-mode #towing-reminder-widget #towingReminderActiveBadge.active {
	/* Match Auto Update ACTIVE (green) style for dark mode */
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: #065f46 !important;
	color: #a7f3d0 !important;
	border-left: 2px solid #10b981 !important;
}
.dark-mode #towing-reminder-widget #towingReminderActiveBadge.inactive {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-secondary) !important;
	border-left: 2px solid #64748b !important;
}
.dark-mode #status-widget #sync-mode.master {
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: #065f46 !important;
	color: #a7f3d0 !important;
	border-left: 2px solid #10b981 !important;
}
.dark-mode #status-widget #sync-mode.slave {
	background: rgba(59, 130, 246, 0.15) !important;
	border-color: #1d4ed8 !important;
	color: #93c5fd !important;
	border-left: 2px solid #3b82f6 !important;
}
.dark-mode #status-widget #sync-mode.standalone {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-secondary) !important;
	border-left: 2px solid #64748b !important;
}

/* Keep label color in dark mode */
.dark-mode #status-widget .status-label { color: var(--text-secondary) !important; }

/* Gemeinsame Basisstile für alle Elemente im sekundären Bereich */
.mode-display > span {
	display: inline-block;
	white-space: nowrap;
	font-size: 0.8125rem; /* Kompakter: zuvor 0.875rem */
	font-weight: normal;
	color: #64748b;
}

/* Convert all "current sync mode" chips to labels (no pill) */
.currentSyncMode,
#currentSyncMode,
#currentSyncModeSidebar {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	min-width: 0 !important;
	text-align: left;
	font-weight: 700;
	font-size: 0.875rem;
	color: #64748b;
}
/* Color mapping for those labels based on mode class */
.currentSyncMode.mode-master, #currentSyncMode.mode-master, #currentSyncModeSidebar.mode-master { color: var(--sync-master-fg, #C2410C); }
.currentSyncMode.mode-sync, #currentSyncMode.mode-sync, #currentSyncModeSidebar.mode-sync { color: var(--sync-read-fg, #B93815); }
.currentSyncMode.standalone, #currentSyncMode.standalone, #currentSyncModeSidebar.standalone { color: var(--sync-standalone-fg, #344054); }

.dark-mode .currentSyncMode,
.dark-mode #currentSyncMode,
.dark-mode #currentSyncModeSidebar { color: var(--text-secondary) !important; }
/* Color-coded overrides in dark mode for mode labels */
.dark-mode .currentSyncMode.mode-master,
.dark-mode #currentSyncMode.mode-master,
.dark-mode #currentSyncModeSidebar.mode-master { color: #fdba74 !important; }
.dark-mode .currentSyncMode.mode-sync,
.dark-mode #currentSyncMode.mode-sync,
.dark-mode #currentSyncModeSidebar.mode-sync { color: #fcd34d !important; }
.dark-mode .currentSyncMode.standalone,
.dark-mode #currentSyncMode.standalone,
.dark-mode #currentSyncModeSidebar.standalone { color: #cbd5e1 !important; }

/* Mode-Wert Styling - Verbessert für bessere Sichtbarkeit */

/* Compact height for Time and Status widgets in header */
#time-widget,
#status-widget,
#towing-reminder-widget {
	height: 50px;
	min-height: 50px;
	/* keep existing flex column layout; center content vertically */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 4px; /* tighter spacing between the two rows */
}
/* tighten vertical spacing inside to fit two rows within 50px */
#time-widget .time-display-row { margin-bottom: 0; }
#time-widget .time-display-row:last-child { margin-bottom: 0; }
#status-widget .status-row { margin-bottom: 0; }
#status-widget .status-row:last-child { margin-bottom: 0; }
#towing-reminder-widget .status-row { margin-bottom: 0; }
#towing-reminder-widget .status-row:last-child { margin-bottom: 0; }
/* reduce row line-height slightly to compact vertically */
#time-widget .time-display-row,
#status-widget .status-row,
#towing-reminder-widget .status-row { line-height: 1.1; }

/* Fix Tow Reminder alignment: top-align when second row empty, center when populated */
#towing-reminder-widget {
	justify-content: flex-start; /* Default: align to top when only first row visible */
}
/* Modern browsers: center when #towingReminderList has content */
#towing-reminder-widget:has(#towingReminderList:not(:empty)) {
	justify-content: center;
}
/* Fallback for older browsers using JS-toggled class */
#towing-reminder-widget.has-second-row {
	justify-content: center;
}
/* Fine-tune: add small top padding when single-row to match other widgets' baseline */
#towing-reminder-widget:not(.has-second-row):not(:has(#towingReminderList:not(:empty))) {
	padding-top: 6px;
}

/* Fixed width for Time widget to 100px and compact internal layout */
#time-widget {
	width: 100px;
	min-width: 100px;
	/* Narrower label column and smaller label/value gap to fit within 100px */
	--header-label-col: 36px;
	--time-col-gap: 6px;
}

/* Lade-Animation */
@keyframes pulse {
	0% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.6;
	}
}

/* Tow overdue list and dot indicator */
.tow-overdue {
	color: #ef4444;
	font-weight: 700;
}
.tow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ef4444;
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	animation: tow-pulse-2s 2s ease-in-out infinite;
}
@keyframes tow-pulse-2s {
	0% { transform: scale(0.9); opacity: 0.5; }
	50% { transform: scale(1.25); opacity: 1; }
	100% { transform: scale(0.9); opacity: 0.5; }
}

#header-status:contains("Laden..."),
#header-status:contains("Aktualisiere...") {
	animation: pulse 1.5s infinite;
}