/* ============================================
   User Dashboard Pro - Modern Styling
   ============================================ */

:root {
	--udw-primary: #8b3dff;
	--udw-primary-hover: #7329e6;
	--udw-secondary: #6b7280;
	--udw-success: #10b981;
	--udw-warning: #f59e0b;
	--udw-danger: #ef4444;
	--udw-info: #3b82f6;
	--udw-white: #ffffff;
	--udw-black: #1a1a1a;
	--udw-gray-50: #f9fafb;
	--udw-gray-100: #f3f4f6;
	--udw-gray-200: #e5e7eb;
	--udw-gray-300: #d1d5db;
	--udw-gray-400: #9ca3af;
	--udw-gray-500: #6b7280;
	--udw-gray-600: #4b5563;
	--udw-gray-700: #374151;
	--udw-gray-800: #1f2937;
	--udw-gray-900: #111827;
	--udw-border-radius: 12px;
	--udw-border-radius-sm: 8px;
	--udw-transition: all 0.3s ease;
	--udw-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	--udw-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Variables */
body.dark-mode {
	--udw-white: #1f2937;
	--udw-black: #f9fafb;
	--udw-gray-50: #111827;
	--udw-gray-100: #1f2937;
	--udw-gray-200: #374151;
	--udw-gray-300: #4b5563;
	--udw-gray-800: #e5e7eb;
	--udw-gray-900: #f3f4f6;
	--udw-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Widget Container
   ============================================ */
.udw-pro-widget {
	background: var(--udw-white);
	border-radius: var(--udw-border-radius);
	padding: 40px;
	box-shadow: var(--udw-shadow);
	margin-bottom: 30px;
	transition: var(--udw-transition);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.udw-pro-widget:hover {
	box-shadow: var(--udw-shadow-lg);
}

/* Widget Header */
.widget-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	border-bottom: 2px solid var(--udw-gray-100);
	padding-bottom: 20px;
}

.widget-headline {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--udw-black);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.widget-headline i {
	color: var(--udw-primary);
	font-size: 1.75rem;
}

/* ============================================
   Forms
   ============================================ */
.udw-form {
	width: 100%;
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}

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

.udw-form label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--udw-gray-700);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.udw-form label i {
	color: var(--udw-primary);
	font-size: 14px;
}

.udw-form input[type="text"],
.udw-form input[type="email"],
.udw-form input[type="password"],
.udw-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--udw-gray-200);
	border-radius: var(--udw-border-radius-sm);
	background-color: var(--udw-white);
	color: var(--udw-black);
	font-size: 15px;
	font-family: inherit;
	transition: var(--udw-transition);
}

.udw-form input:focus,
.udw-form textarea:focus {
	border-color: var(--udw-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 61, 255, 0.1);
}

.udw-form textarea {
	resize: vertical;
	min-height: 100px;
}

.form-hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--udw-gray-500);
}

/* Password Input with Toggle */
.password-input-wrapper {
	position: relative;
}

.password-input-wrapper input {
	padding-right: 50px;
}

.toggle-password {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--udw-gray-400);
	cursor: pointer;
	padding: 8px;
	transition: var(--udw-transition);
}

.toggle-password:hover {
	color: var(--udw-primary);
}

/* ============================================
   Buttons
   ============================================ */
.udw-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--udw-border-radius-sm);
	font-size: 15px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: var(--udw-transition);
	text-decoration: none;
	font-family: inherit;
}

.udw-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--udw-primary);
	color: white;
}

.btn-primary:hover:not(:disabled) {
	background: var(--udw-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(139, 61, 255, 0.3);
}

.btn-secondary {
	background: var(--udw-gray-100);
	color: var(--udw-gray-700);
}

.btn-secondary:hover:not(:disabled) {
	background: var(--udw-gray-200);
}

.btn-danger {
	background: var(--udw-danger);
	color: white;
}

.btn-danger:hover:not(:disabled) {
	background: #dc2626;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 30px;
}

/* ============================================
   Messages
   ============================================ */
.udw-pro-message {
	padding: 16px 20px;
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.udw-pro-message i {
	font-size: 18px;
}

.udw-pro-message.success {
	background: #f0fdf4;
	border-left: 4px solid var(--udw-success);
	color: #166534;
}

.udw-pro-message.error {
	background: #fef2f2;
	border-left: 4px solid var(--udw-danger);
	color: #991b1b;
}

.udw-pro-message.info {
	background: #eff6ff;
	border-left: 4px solid var(--udw-info);
	color: #1e40af;
}

.udw-pro-message.warning {
	background: #fffbeb;
	border-left: 4px solid var(--udw-warning);
	color: #92400e;
}

/* ============================================
   Password Widget Specific
   ============================================ */
.security-info {
	background: var(--udw-gray-50);
	border-left: 4px solid var(--udw-primary);
	padding: 16px;
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 30px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.security-info i {
	color: var(--udw-primary);
	font-size: 20px;
	margin-top: 2px;
}

.security-info p {
	margin: 0;
	color: var(--udw-gray-700);
	font-size: 14px;
	line-height: 1.6;
}

.password-strength-meter {
	margin-top: 10px;
	height: 6px;
	background: var(--udw-gray-200);
	border-radius: 3px;
	overflow: hidden;
}

.strength-bar {
	height: 100%;
	width: 0%;
	transition: var(--udw-transition);
	border-radius: 3px;
}

.strength-text {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 600;
}

.password-requirements {
	background: var(--udw-gray-50);
	padding: 20px;
	border-radius: var(--udw-border-radius-sm);
	margin-top: 20px;
}

.password-requirements h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px 0;
	color: var(--udw-gray-700);
}

.password-requirements ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.password-requirements li {
	padding: 6px 0;
	font-size: 13px;
	color: var(--udw-gray-600);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: var(--udw-transition);
}

.password-requirements li i {
	color: var(--udw-gray-400);
	font-size: 8px;
	transition: var(--udw-transition);
}

.password-requirements li.met {
	color: var(--udw-success);
}

.password-requirements li.met i {
	color: var(--udw-success);
}

/* ============================================
   Profile Picture Widget
   ============================================ */
.profile-picture-wrapper {
	text-align: center;
}

.profile-picture-preview {
	width: 200px;
	height: 200px;
	margin: 0 auto 24px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: 4px solid var(--udw-gray-200);
	position: relative;
	overflow: hidden;
	transition: var(--udw-transition);
	cursor: pointer;
}

.profile-picture-preview:hover {
	border-color: var(--udw-primary);
}

.picture-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: var(--udw-transition);
	color: white;
	gap: 8px;
}

.profile-picture-preview:hover .picture-overlay {
	opacity: 1;
}

.picture-overlay i {
	font-size: 32px;
}

.picture-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.picture-info {
	text-align: center;
}

.picture-info p {
	font-size: 13px;
	color: var(--udw-gray-500);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.upload-progress {
	margin-top: 20px;
	text-align: center;
}

.progress-bar {
	width: 100%;
	height: 8px;
	background: var(--udw-gray-200);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 8px;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--udw-primary), var(--udw-primary-hover));
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--udw-gray-700);
	margin: 0;
}

/* ============================================
   Notifications Widget
   ============================================ */
.notification-info {
	background: var(--udw-gray-50);
	padding: 16px;
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 30px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.notification-info i {
	color: var(--udw-info);
	font-size: 20px;
	margin-top: 2px;
}

.notification-info p {
	margin: 0;
	color: var(--udw-gray-700);
	font-size: 14px;
	line-height: 1.6;
}

.notification-groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.notification-group {
	border-bottom: 1px solid var(--udw-gray-200);
	padding-bottom: 16px;
}

.notification-group:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.notification-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.notification-toggle {
	flex-shrink: 0;
}

.notification-details h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--udw-black);
	display: flex;
	align-items: center;
	gap: 10px;
}

.notification-details h4 i {
	color: var(--udw-primary);
}

.notification-details p {
	margin: 0;
	font-size: 14px;
	color: var(--udw-gray-600);
	line-height: 1.6;
}

/* Toggle Switch */
.switch {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: var(--udw-gray-300);
	transition: var(--udw-transition);
	border-radius: 28px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: var(--udw-transition);
	border-radius: 50%;
}

input:checked + .slider {
	background-color: var(--udw-primary);
}

input:checked + .slider:before {
	transform: translateX(24px);
}

/* ============================================
   Privacy Widget
   ============================================ */
.privacy-intro {
	background: var(--udw-gray-50);
	padding: 16px;
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 30px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.privacy-intro i {
	color: var(--udw-info);
	font-size: 20px;
	margin-top: 2px;
}

.privacy-intro p {
	margin: 0;
	color: var(--udw-gray-700);
	font-size: 14px;
	line-height: 1.6;
}

.privacy-section {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	padding: 24px;
	background: var(--udw-gray-50);
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 20px;
}

.section-icon {
	width: 60px;
	height: 60px;
	background: var(--udw-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 28px;
	flex-shrink: 0;
}

.danger-section .section-icon {
	background: var(--udw-danger);
}

.section-content h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: var(--udw-black);
}

.danger-title {
	color: var(--udw-danger) !important;
}

.section-content h5 {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--udw-black);
}

.section-content p {
	margin: 0 0 16px 0;
	font-size: 14px;
	color: var(--udw-gray-600);
	line-height: 1.6;
}

.warning-text {
	background: #fff7ed;
	border-left: 4px solid var(--udw-warning);
	padding: 12px 16px;
	border-radius: var(--udw-border-radius-sm);
	color: #92400e !important;
	font-weight: 500;
}

.warning-text i {
	color: var(--udw-warning);
	margin-right: 8px;
}

.data-list {
	list-style: none;
	padding: 0;
	margin: 16px 0;
}

.data-list li {
	padding: 8px 0;
	font-size: 14px;
	color: var(--udw-gray-700);
	display: flex;
	align-items: center;
	gap: 10px;
}

.data-list li i {
	color: var(--udw-success);
}

.deletion-consequences {
	background: white;
	padding: 16px;
	border-radius: var(--udw-border-radius-sm);
	margin: 16px 0;
}

.deletion-consequences h6 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px 0;
	color: var(--udw-gray-700);
}

.deletion-consequences ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.deletion-consequences li {
	padding: 6px 0;
	font-size: 13px;
	color: var(--udw-danger);
	display: flex;
	align-items: center;
	gap: 10px;
}

.deletion-consequences li i {
	color: var(--udw-danger);
}

.delete-confirmation-wrapper {
	margin: 16px 0;
}

.delete-confirmation-wrapper label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--udw-gray-700);
}

.delete-confirmation-wrapper input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--udw-gray-200);
	border-radius: var(--udw-border-radius-sm);
	font-size: 14px;
}

.privacy-divider {
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--udw-gray-200), transparent);
	margin: 30px 0;
}

/* ============================================
   Activity Log Widget
   ============================================ */
.activity-count {
	font-size: 13px;
	color: var(--udw-gray-500);
	background: var(--udw-gray-100);
	padding: 6px 12px;
	border-radius: 20px;
	font-weight: 500;
}

.activity-info {
	background: var(--udw-gray-50);
	padding: 16px;
	border-radius: var(--udw-border-radius-sm);
	margin-bottom: 30px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.activity-info i {
	color: var(--udw-info);
	font-size: 20px;
	margin-top: 2px;
}

.activity-info p {
	margin: 0;
	color: var(--udw-gray-700);
	font-size: 14px;
	line-height: 1.6;
}

.activity-log-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.activity-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	padding: 16px;
	background: var(--udw-gray-50);
	border-left: 4px solid var(--udw-gray-300);
	border-radius: var(--udw-border-radius-sm);
	transition: var(--udw-transition);
}

.activity-item:hover {
	transform: translateX(4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activity-item.activity-success {
	border-left-color: var(--udw-success);
}

.activity-item.activity-warning {
	border-left-color: var(--udw-warning);
}

.activity-item.activity-danger {
	border-left-color: var(--udw-danger);
}

.activity-item.activity-info {
	border-left-color: var(--udw-info);
}

.activity-icon {
	width: 40px;
	height: 40px;
	background: var(--udw-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--udw-gray-600);
	flex-shrink: 0;
}

.activity-success .activity-icon {
	color: var(--udw-success);
	background: #f0fdf4;
}

.activity-warning .activity-icon {
	color: var(--udw-warning);
	background: #fffbeb;
}

.activity-danger .activity-icon {
	color: var(--udw-danger);
	background: #fef2f2;
}

.activity-info .activity-icon {
	color: var(--udw-info);
	background: #eff6ff;
}

.activity-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--udw-black);
}

.activity-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.activity-meta span {
	font-size: 13px;
	color: var(--udw-gray-500);
	display: flex;
	align-items: center;
	gap: 6px;
}

.activity-meta i {
	color: var(--udw-gray-400);
}

.activity-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--udw-gray-500);
}

.activity-empty i {
	font-size: 64px;
	margin-bottom: 16px;
	color: var(--udw-gray-300);
}

.activity-empty p {
	font-size: 16px;
	margin: 0;
}

.activity-load-more {
	text-align: center;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
	.udw-pro-widget {
		padding: 24px;
	}

	.widget-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.widget-headline {
		font-size: 1.25rem;
	}

	.privacy-section {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.section-icon {
		margin: 0 auto;
	}

	.activity-item {
		grid-template-columns: 1fr;
	}

	.form-actions {
		flex-direction: column;
	}

	.form-actions .udw-button {
		width: 100%;
		justify-content: center;
	}

	.picture-actions {
		flex-direction: column;
	}

	.picture-actions .udw-button {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   Loading States
   ============================================ */
.udw-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.udw-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--udw-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Animations */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.fa-spin {
	animation: spin 1s linear infinite;
}

/* === Notification Bell Widget === */
.udw-notification-bell-container {
	position: relative;
	display: inline-block;
}

.udw-notification-bell {
	position: relative;
	cursor: pointer;
	padding: 8px 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	border-radius: 4px;
}

.udw-notification-bell:hover {
	background: rgba(0, 0, 0, 0.05);
}

.udw-notification-bell.active {
	background: var(--udw-primary, #8b3dff);
	color: white;
}

.udw-notification-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

.udw-notification-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	z-index: 1000;
	animation: slideDown 0.2s ease-out;
	display: none; /* Initial versteckt */
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.udw-notification-header {
	padding: 16px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.udw-notification-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.udw-mark-all-read {
	background: none;
	border: none;
	color: var(--udw-primary, #8b3dff);
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 4px;
	transition: all 0.2s ease;
	font-size: 14px;
}

.udw-mark-all-read:hover {
	background: rgba(139, 61, 255, 0.1);
}

.udw-notification-list {
	max-height: 400px;
	overflow-y: auto;
}

.udw-notification-item {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background 0.2s ease;
	position: relative;
}

.udw-notification-item:hover {
	background: #f9f9f9;
}

.udw-notification-item.unread {
	background: rgba(139, 61, 255, 0.05);
	border-left: 3px solid var(--udw-primary, #8b3dff);
	padding-left: 13px;
}

.udw-notification-item.unread::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: var(--udw-primary, #8b3dff);
	border-radius: 50%;
}

.udw-notification-content {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.udw-notification-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.udw-notification-icon.activity-success {
	background: rgba(76, 175, 80, 0.1);
	color: #4caf50;
}

.udw-notification-icon.activity-info {
	background: rgba(33, 150, 243, 0.1);
	color: #2196f3;
}

.udw-notification-icon.activity-warning {
	background: rgba(255, 152, 0, 0.1);
	color: #ff9800;
}

.udw-notification-icon.activity-danger {
	background: rgba(244, 67, 54, 0.1);
	color: #f44336;
}

.udw-notification-icon.activity-default {
	background: rgba(158, 158, 158, 0.1);
	color: #9e9e9e;
}

.udw-notification-details {
	flex: 1;
	min-width: 0;
}

.udw-notification-text {
	font-size: 14px;
	color: #333;
	margin: 0 0 4px 0;
	line-height: 1.4;
}

.udw-notification-time {
	font-size: 12px;
	color: #999;
}

.udw-notification-loading {
	padding: 40px 16px;
	text-align: center;
	color: #999;
}

.udw-notification-loading i {
	margin-right: 8px;
}

.udw-notification-empty {
	padding: 40px 16px;
	text-align: center;
	color: #999;
}

.udw-notification-empty i {
	font-size: 32px;
	margin-bottom: 12px;
	opacity: 0.3;
}

.udw-notification-footer {
	padding: 12px 16px;
	border-top: 1px solid #eee;
	text-align: center;
}

.udw-notification-footer a {
	color: var(--udw-primary, #8b3dff);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.udw-notification-footer a:hover {
	gap: 10px;
}

/* Dark Mode für Notification Bell */
body.dark-mode .udw-notification-dropdown {
	background: #2a2a2a;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .udw-notification-header {
	border-bottom-color: #444;
}

body.dark-mode .udw-notification-header h3 {
	color: #fff;
}

body.dark-mode .udw-notification-item {
	border-bottom-color: #333;
}

body.dark-mode .udw-notification-item:hover {
	background: #333;
}

body.dark-mode .udw-notification-item.unread {
	background: rgba(139, 61, 255, 0.1);
}

body.dark-mode .udw-notification-text {
	color: #e0e0e0;
}

body.dark-mode .udw-notification-footer {
	border-top-color: #444;
}

/* Responsive */
@media (max-width: 768px) {
	.udw-notification-dropdown {
		right: -10px;
		left: auto;
		width: calc(100vw - 40px) !important;
		max-width: 350px;
   LOGIN WIDGET - MODERN & CLEAN DESIGN
   ======================================== */

/* Base Login Form */
.udw-login-form {
	max-width: 450px;
	margin: 0 auto;
	padding: 50px 40px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.udw-login-form:hover {
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* Header */
.udw-login-header {
	text-align: center;
	margin-bottom: 40px;
}

.udw-login-title {
	font-size: 32px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 8px 0;
	letter-spacing: -0.5px;
}

.udw-login-subtitle {
	font-size: 15px;
	color: #666;
	margin: 0;
	font-weight: 400;
}

/* Form Groups */
.udw-login-form .udw-form-group {
	margin-bottom: 25px;
}

.udw-login-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.udw-login-form label i {
	color: var(--udw-primary, #8b3dff);
	font-size: 16px;
	width: 16px;
}

/* Input Fields */
.udw-login-form input[type="text"],
.udw-login-form input[type="password"] {
	width: 100%;
	padding: 16px 20px;
	font-size: 15px;
	border: 2px solid #e8e8e8;
	border-radius: 12px;
	background: #f9f9f9;
	transition: all 0.3s ease;
	font-family: inherit;
}

.udw-login-form input[type="text"]:focus,
.udw-login-form input[type="password"]:focus {
	outline: none;
	border-color: var(--udw-primary, #8b3dff);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.1);
	transform: translateY(-1px);
}

.udw-login-form input::placeholder {
	color: #aaa;
}

/* Password Toggle */
.udw-login-form .udw-password-wrapper {
	position: relative;
}

.udw-login-form .udw-toggle-password {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #999;
	cursor: pointer;
	padding: 8px;
	font-size: 16px;
	transition: color 0.2s ease;
	z-index: 2;
}

.udw-login-form .udw-toggle-password:hover {
	color: var(--udw-primary, #8b3dff);
}

/* Checkbox */
.udw-login-form .udw-checkbox-group {
	margin: 20px 0;
}

.udw-login-form .udw-checkbox-group label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: 400;
	font-size: 14px;
}

.udw-login-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	accent-color: var(--udw-primary, #8b3dff);
}

/* Submit Button */
.udw-login-submit {
	width: 100%;
	padding: 16px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--udw-primary, #8b3dff) 0%, #6a2dd4 100%);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(139, 61, 255, 0.3);
	position: relative;
	overflow: hidden;
}

.udw-login-submit::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s ease;
}

.udw-login-submit:hover::before {
	left: 100%;
}

.udw-login-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(139, 61, 255, 0.4);
}

.udw-login-submit:active {
	transform: translateY(0);
}

.udw-login-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

.udw-login-submit .udw-button-text,
.udw-login-submit .udw-button-loader {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
}

/* Links */
.udw-login-links {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #e8e8e8;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.udw-login-links a {
	color: #666;
	text-decoration: none;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	font-weight: 500;
}

.udw-login-links a:hover {
	color: var(--udw-primary, #8b3dff);
	gap: 8px;
}

.udw-login-links a i {
	font-size: 13px;
}

/* Already Logged In */
.udw-already-logged-in {
	text-align: center;
	padding: 60px 40px;
}

.udw-already-logged-in .udw-pro-message {
	margin-bottom: 25px;
	font-size: 16px;
	padding: 20px;
	border-radius: 12px;
}

.udw-logout-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 30px;
	background: #f5f5f5;
	color: #666;
	text-decoration: none;
	border-radius: 10px;
	font-weight: 600;
	transition: all 0.3s ease;
}

.udw-logout-link:hover {
	background: #e8e8e8;
	color: #333;
	transform: translateY(-2px);
}

/* Loading Animation */
@keyframes buttonSpin {
	to { transform: rotate(360deg); }
}

.udw-login-submit .fa-spinner {
	animation: buttonSpin 1s linear infinite;
}

/* ========================================
   DESIGN VARIANTS
   ======================================== */

/* Glassmorphism Style */
.udw-login-glass {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.udw-login-glass .udw-login-form input[type="text"],
.udw-login-glass .udw-login-form input[type="password"] {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, 0.6);
}

/* Minimal Style */
.udw-login-minimal {
	background: transparent;
	box-shadow: none;
	border: 2px solid #e8e8e8;
}

.udw-login-minimal:hover {
	border-color: var(--udw-primary, #8b3dff);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.udw-login-minimal .udw-login-submit {
	background: #1a1a1a;
	box-shadow: none;
}

.udw-login-minimal .udw-login-submit:hover {
	background: #333;
}

/* Gradient Style */
.udw-login-gradient {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
}

.udw-login-gradient .udw-login-title,
.udw-login-gradient .udw-login-subtitle,
.udw-login-gradient label {
	color: #fff;
}

.udw-login-gradient .udw-login-form input[type="text"],
.udw-login-gradient .udw-login-form input[type="password"] {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.udw-login-gradient .udw-login-form input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.udw-login-gradient .udw-login-submit {
	background: #fff;
	color: #667eea;
}

.udw-login-gradient .udw-login-submit:hover {
	background: #f0f0f0;
}

.udw-login-gradient .udw-login-links {
	border-top-color: rgba(255, 255, 255, 0.2);
}

.udw-login-gradient .udw-login-links a {
	color: rgba(255, 255, 255, 0.8);
}

.udw-login-gradient .udw-login-links a:hover {
	color: #fff;
}

/* ========================================
   DARK MODE
   ======================================== */

body.dark-mode .udw-login-form {
	background: #2a2a2a;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .udw-login-title {
	color: #fff;
}

body.dark-mode .udw-login-subtitle {
	color: #aaa;
}

body.dark-mode .udw-login-form label {
	color: #e0e0e0;
}

body.dark-mode .udw-login-form input[type="text"],
body.dark-mode .udw-login-form input[type="password"] {
	background: #1a1a1a;
	border-color: #444;
	color: #fff;
}

body.dark-mode .udw-login-form input::placeholder {
	color: #666;
}

body.dark-mode .udw-login-form input[type="text"]:focus,
body.dark-mode .udw-login-form input[type="password"]:focus {
	background: #222;
	border-color: var(--udw-primary, #8b3dff);
}

body.dark-mode .udw-login-links {
	border-top-color: #444;
}

body.dark-mode .udw-login-links a {
	color: #aaa;
}

body.dark-mode .udw-login-links a:hover {
	color: var(--udw-primary, #8b3dff);
}

body.dark-mode .udw-logout-link {
	background: #1a1a1a;
	color: #aaa;
}

body.dark-mode .udw-logout-link:hover {
	background: #333;
	color: #fff;
}

/* Dark Mode Glassmorphism */
body.dark-mode .udw-login-glass {
	background: rgba(42, 42, 42, 0.85);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
	.udw-login-form {
		padding: 40px 30px;
		border-radius: 16px;
		max-width: 100%;
	}
	
	.udw-login-title {
		font-size: 28px;
	}
	
	.udw-login-links {
		flex-direction: column;
		gap: 12px;
	}
	
	.udw-login-links a {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.udw-login-form {
		padding: 30px 20px;
	}
	
	.udw-login-title {
		font-size: 24px;
	}
	
	.udw-login-form input[type="text"],
	.udw-login-form input[type="password"] {
		padding: 14px 18px;
	}
}

/* ============================================
   FIXES & OPTIMIERUNGEN v3.1.0
   ============================================ */

/* FIX: box-sizing für alle Elemente – verhindert Overflow auf Mobile */
.udw-pro-widget *,
.udw-login-form *,
.udw-notification-dropdown * {
	box-sizing: border-box;
}

.udw-form input[type="text"],
.udw-form input[type="email"],
.udw-form input[type="password"],
.udw-form textarea,
.udw-login-form input[type="text"],
.udw-login-form input[type="password"] {
	box-sizing: border-box;
	max-width: 100%;
}

/* Auto-Save Notice */
.udw-auto-save-notice {
	text-align: center;
	color: var(--udw-gray-500);
	font-size: 13px;
	margin-top: 15px;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ============================================
   MOBILE WEBAPP / PWA OPTIMIERUNGEN
   ============================================ */

/* Standalone WebApp Mode (hinzugefügt zum Home-Bildschirm) */
@media (display-mode: standalone) {
	.udw-pro-widget {
		border-radius: 0;
		margin-bottom: 0;
	}

	/* Safe Area für iPhone X+ (Notch / Home Indicator) */
	.udw-login-form,
	.udw-pro-widget {
		padding-left: max(24px, env(safe-area-inset-left));
		padding-right: max(24px, env(safe-area-inset-right));
		padding-bottom: max(24px, env(safe-area-inset-bottom));
	}
}

/* Touch-optimierte Buttons (min. 44x44px Tap Target nach Apple HIG) */
@media (hover: none) and (pointer: coarse) {
	.udw-button,
	.udw-login-submit,
	.udw-reset-submit,
	.toggle-password,
	.udw-toggle-password,
	.udw-mark-all-read {
		min-height: 44px;
		min-width: 44px;
	}

	/* Kein Transform-Hover auf Touch-Geräten (verhindert visuelles Glitching) */
	.udw-login-form:hover,
	.btn-primary:hover:not(:disabled),
	.udw-login-submit:hover,
	.activity-item:hover {
		transform: none;
	}

	/* Größere Checkboxen auf Touch */
	.udw-form input[type="checkbox"],
	.udw-login-form input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}
}

/* Extra kleine Screens (z.B. iPhone SE 375px) */
@media (max-width: 380px) {
	.udw-pro-widget {
		padding: 16px;
	}

	.udw-login-form {
		padding: 24px 16px;
	}

	.udw-login-title {
		font-size: 22px;
	}

	.widget-headline {
		font-size: 1.1rem;
	}

	.form-row {
		grid-template-columns: 1fr;
	}
}

/* Verbesserte Scrollbarkeit für Notification-Dropdown auf Mobile */
@media (max-width: 768px) {
	.udw-notification-list {
		max-height: min(400px, 60vh);
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.udw-notification-dropdown {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: 100%;
		border-radius: 16px 16px 0 0;
		max-height: 75vh;
		overflow-y: auto;
	}

	/* Swipe-Handle für Bottom-Sheet */
	.udw-notification-header::before {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		background: var(--udw-gray-300);
		border-radius: 2px;
		margin: 0 auto 12px;
	}
}

/* Landscape-Optimierung auf Mobile */
@media (max-height: 600px) and (orientation: landscape) {
	.udw-login-form {
		padding: 20px 30px;
	}

	.udw-login-header {
		margin-bottom: 20px;
	}

	.udw-login-title {
		font-size: 22px;
	}

	.udw-form-group {
		margin-bottom: 12px;
	}

	.udw-login-form input[type="text"],
	.udw-login-form input[type="password"] {
		padding: 10px 16px;
	}
}

/* Verbesserte Focus-Styles für Accessibility / Touch */
.udw-form input:focus-visible,
.udw-login-form input:focus-visible,
.udw-button:focus-visible,
.udw-login-submit:focus-visible {
	outline: 3px solid var(--udw-primary);
	outline-offset: 2px;
}

/* Verhindert Zoom beim Tippen in Input-Felder auf iOS (font-size >= 16px) */
@media (max-width: 768px) {
	.udw-form input[type="text"],
	.udw-form input[type="email"],
	.udw-form input[type="password"],
	.udw-login-form input[type="text"],
	.udw-login-form input[type="password"],
	.udw-form textarea {
		font-size: 16px !important;
	}
}