/* Custom styles — Tailwind utility classes provided by Play CDN script in HTML */

/* Dark mode checkbox styling */
.dark input[type="checkbox"] {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid #6b7280;
	border-radius: 0.25rem;
	background-color: #374151;
	cursor: pointer;
	position: relative;
}
.dark input[type="checkbox"]:checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
}
.dark input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Email body container — force left alignment */
.email-body, .email-body * {
	text-align: left !important;
}
.email-body table {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.dark ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.dark ::-webkit-scrollbar-track {
	background: #1f2937;
}
.dark ::-webkit-scrollbar-thumb {
	background: #4b5563;
	border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
	background: #6b7280;
}
.dark ::-webkit-scrollbar-corner {
	background: #1f2937;
}

/* Firefox scrollbar dark mode */
.dark * {
	scrollbar-width: thin;
	scrollbar-color: #4b5563 #1f2937;
}

/* Light mode scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: #f3f4f6;
}
::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Animations */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slideIn {
	from { transform: translateY(-10px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes scale-in {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn { animation: fadeIn 0.2s ease-in; }
.animate-slideIn { animation: slideIn 0.3s ease-out; }
.animate-scale-in { animation: scale-in 0.15s ease-out; }

/* Email body rendering — respect email's own inline styles */
.email-body img {
	max-width: 100%;
	height: auto;
}
.email-body a {
	color: #03a9f4;
	text-decoration: underline;
}
.email-body table {
	border-collapse: collapse;
}
/* Only add borders to tables that don't have their own inline border style */
.email-body table:not([border]):not([style*="border"]) td,
.email-body table:not([border]):not([style*="border"]) th {
	border: 1px solid #e5e7eb;
	padding: 4px 8px;
}
.dark .email-body table:not([border]):not([style*="border"]) td,
.dark .email-body table:not([border]):not([style*="border"]) th {
	border-color: #374151;
}

/* Star button */
.star-btn {
	cursor: pointer;
	transition: transform 0.1s;
}
.star-btn:hover {
	transform: scale(1.2);
}

/* Message row hover */
.msg-row {
	transition: background-color 0.1s;
}

/* Selected message indicator */
.msg-selected {
	background-color: #dbeafe;
}
.dark .msg-selected {
	background-color: #1e3a5f;
}
/* Toast notifications */
.toast {
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.toast-visible {
    transform: translateX(0);
    opacity: 1;
}