/* public/css/main.css - CLEAN VERSION */

/* Base Font */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Email Row Hover Effects */
.email-row:hover { 
    background-color: #f9fafb; 
}
.dark .email-row:hover { 
    background-color: #374151; 
}

/* Bold Unread Emails */
.email-unread .font-medium, 
.email-unread .font-bold { 
    font-weight: 700 !important; 
}

/* Chart Container Sizing */
.chart-container { 
    position: relative; 
    height: 350px; 
    width: 100%; 
}

/* Toast Notification Styles */
.toast {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    padding: 1rem 1.5rem; 
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    display: flex; 
    align-items: center; 
    opacity: 0; 
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease; 
    z-index: 100;
}
.toast.show { 
    opacity: 1; 
    transform: translateY(0); 
}

/* === Quill Editor Dark Mode Overrides === */

/* 1. Main Editor Area (Where you type) */
.dark .ql-editor {
    background-color: #111827; /* Matches bg-gray-900 */
    color: #f3f4f6; /* Matches text-gray-100 for light text */
}

/* 2. Toolbar (The buttons above the editor) */
.dark .ql-toolbar.ql-snow {
    background-color: #1f2937; /* Matches bg-gray-800 for a slightly lighter toolbar */
    border-color: #374151; /* Matches border-gray-700 */
}

/* 3. Editor Container Border */
.dark .ql-container.ql-snow {
    border-color: #374151; /* Matches border-gray-700 */
}

/* 4. Toolbar Icons (Make them light gray by default) */
.dark .ql-snow .ql-stroke {
    stroke: #9ca3af; /* Matches text-gray-400 */
}
.dark .ql-snow .ql-fill {
    fill: #9ca3af; /* Matches text-gray-400 */
}

/* 5. Toolbar Icons on Hover & Active State (Make them blue) */
.dark .ql-snow button:hover .ql-stroke,
.dark .ql-snow button.ql-active .ql-stroke,
.dark .ql-snow .ql-picker-label:hover .ql-stroke,
.dark .ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: #60a5fa; /* Matches text-blue-400 */
}

.dark .ql-snow button:hover .ql-fill,
.dark .ql-snow button.ql-active .ql-fill,
.dark .ql-snow .ql-picker-label:hover .ql-fill,
.dark .ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: #60a5fa; /* Matches text-blue-400 */
}

/* 6. Dropdown text color (e.g., text size) */
.dark .ql-snow .ql-picker-options {
    background-color: #1f2937; /* Matches bg-gray-800 */
    color: #f3f4f6;
}
.dark .ql-snow .ql-picker-item:hover {
    color: #60a5fa; /* Matches text-blue-400 */
}