/* Theme and component styles extracted from index.html */

/* Dark Theme */
.dark-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}
.sidebar-bg {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav-active {
    background: linear-gradient(45deg, #f97316, #eab308);
    transform: scale(1.02);
}
.metric-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.capability-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.policy-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Light Theme */
.light-bg {
    /* EDITED: Using slightly darker, softer shades for the background gradient */
    background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #dbeafe 100%);
}
.light-sidebar-bg {
    background: rgba(255, 255, 255, 0.9); /* Reduced transparency slightly for a more solid feel */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.light-nav-active {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    transform: scale(1.02);
}
.light-metric-card {
    /* EDITED: Changed from transparent white to a soft, light gray background */
    background: rgba(248, 250, 252, 0.75); /* Tailwind slate-50 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.light-capability-card {
    /* EDITED: Changed from transparent white to a soft, light gray background */
    background: rgba(248, 250, 252, 0.65); /* Tailwind slate-50 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.07);
}
.light-policy-card {
    /* EDITED: Changed from transparent white to a soft, light gray background */
    background: rgba(248, 250, 252, 0.65); /* Tailwind slate-50 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Settings Container Styling - Match capability-card appearance */
.settings-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.light-settings-container {
    background: rgba(248, 250, 252, 0.65); /* Tailwind slate-50 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

/* Instruction Item Styling */
.instruction-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.light-instruction-item {
    background: rgba(248, 250, 252, 0.65); /* Tailwind slate-50 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.07);
}
.instruction-label {
    color: #4b5563; /* text-gray-700 */
}
.dark .instruction-label {
    color: #d1d5db; /* text-gray-300 */
}

.light-header {
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light mode adjustments for policy cards */
/* When the page is in light mode (body has .light-bg), ensure that text inside policy cards is dark. */
.light-bg .policy-card h3,
.light-bg .policy-card label,
.light-bg .policy-card span,
.light-bg .policy-card select,
.light-bg .policy-card textarea,
.light-bg .policy-card input {
    color: #1f2937; /* Equivalent to Tailwind's text-gray-800 */
}
.light-bg .policy-card select,
.light-bg .policy-card textarea,
.light-bg .policy-card input {
    background-color: #ffffff; /* Explicitly set a light background */
    border-color: #d1d5db; /* Explicitly set a light border color */
}

/* Card styling for theme switching */
.source-card {
    transition: all 0.3s ease;
}
.label-card {
    transition: all 0.3s ease;
}
.capability-item {
    transition: all 0.3s ease;
}
.form-container {
    transition: all 0.3s ease;
}

/* Animations and transitions */
.animate-pulse-green {
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.hover-scale:hover {
    transform: scale(1.02);
}
.transition-all {
    transition: all 0.3s ease;
}

/* Notification container */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Notification styles */
.notification {
    position: relative;
    right: 0;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    min-width: 250px;
    max-width: 400px;
    color: #ffffff;
    background-color: #374151;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    background-color: #10b981;     /* Green-500 */
    color: #ffffff;
    border-left: 4px solid #059669; /* Darker green accent */
}

.notification.error {
    background-color: #ef4444;     /* Red-500 */
    color: #ffffff;
    border-left: 4px solid #dc2626; /* Darker red accent */
}

.notification.warning {
    background-color: #f59e0b;     /* Amber-500 */
    color: #ffffff;
    border-left: 4px solid #d97706; /* Darker amber accent */
}

.notification.info {
    background-color: #3b82f6;     /* Blue-500 */
    color: #ffffff;
    border-left: 4px solid #2563eb; /* Darker blue accent */
}

/* Notification icon styling */
.notification-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Notification message text */
.notification-message {
    flex: 1;
    line-height: 1.4;
}

/* Notification close button */
.notification-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-close:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* --- Light Mode Styles --- */
#sidebar {
    border-right-color: #e5e7eb !important; /* light gray */
}

#sidebar-header, 
.sidebar-divider {
    border-color: #e5e7eb !important; /* light gray */
}

/* --- Dark Mode Styles --- */
.dark #sidebar {
    border-right-color: #334155 !important; /* dark gray */
}

.dark #sidebar-header,
.dark .sidebar-divider {
    border-color: #334155 !important; /* dark gray */
}

/* =========== DARK THEME BUTTON FIXES =========== */
/* Ensure buttons stay visible in dark theme */
.dark button {
  transition: background-color 0.2s ease;
}

/* Green action buttons (Save, Update, etc.) */
.dark .bg-green-500 {
  background-color: #10b981 !important;
}
.dark .bg-green-500:hover {
  background-color: #059669 !important;
}

/* Gray action buttons (Cancel, etc.) */
.dark .bg-gray-500 {
  background-color: #6b7280 !important;
}
.dark .bg-gray-500:hover {
  background-color: #4b5563 !important;
}

/* Blue action buttons */
.dark .bg-blue-500 {
  background-color: #3b82f6 !important;
}
.dark .bg-blue-500:hover {
  background-color: #2563eb !important;
}

/* Red action buttons */
.dark .bg-red-500 {
  background-color: #ef4444 !important;
}
.dark .bg-red-500:hover {
  background-color: #dc2626 !important;
}

/* Gradient buttons stay visible */
.dark .bg-gradient-to-r {
  color: #ffffff !important;
}

/* =========== NEW FIXES START HERE =========== */

/* FIX 1: Draft Table Header */
.thead-theme {
    background-color: #f3f4f6; /* Tailwind gray-100 for light mode */
    color: #4b5563; /* Tailwind gray-600 for light mode */
}
.dark .thead-theme {
    background-color: #1e293b; /* Tailwind slate-800 for dark mode */
    color: #d1d5db; /* Tailwind gray-300 for dark mode */
}

/* Native form controls should follow the active theme */
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select {
  color-scheme: light; /* default when not in .dark */
}

.dark input[type="number"],
.dark input[type="datetime-local"],
.dark input[type="date"],
.dark input[type="time"],
.dark select {
  color-scheme: dark !important; /* force dark glyphs/icons */
}


/* FIX 3: Date/Time Input Background and Text Color */
/* Explicitly set light mode styles to override browser defaults */
input[type="datetime-local"] {
    background-color: #ffffff;
    color: #111827; /* Tailwind gray-900 */
    border-color: #d1d5db; /* Tailwind gray-300 */
}
/* Explicitly set dark mode styles */
.dark input[type="datetime-local"] {
    background-color: #374151; /* Tailwind gray-700 */
    color: #f9fafb; /* Tailwind gray-50 */
    border-color: #4b5563; /* Tailwind gray-600 */
}

/* Backdrop */
.light-bg #draft-preview-modal { background: rgba(0,0,0,0.5); }
.dark-bg  #draft-preview-modal { background: rgba(0,0,0,0.6); }

.light-bg #draft-edit-modal { background: rgba(0,0,0,0.5); }
.dark-bg  #draft-edit-modal { background: rgba(0,0,0,0.6); }

.light-bg #spam-details-modal { background: rgba(0,0,0,0.5); }
.dark-bg  #spam-details-modal { background: rgba(0,0,0,0.6); }
/* Panel */
.light-bg .modal-panel {
  background:linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 50%, #dbeafe 100%); color:#111827; border:1px solid #e5e7eb;
}
.dark-bg .modal-panel {
  background:linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); color:#f3f4f6; border:1px solid #374151;
}

/* Close button */
.light-bg .modal-close-btn { color:#6b7280; }
.light-bg .modal-close-btn:hover { color:#000; background:#f3f4f6; }

.dark-bg .modal-close-btn { color:#9ca3af; }
.dark-bg .modal-close-btn:hover { color:#fff; background:#374151; }

/* =========== END OF NEW FIXES =========== */

/* ===== Themed Scrollbars & Range (consistent across engines) ===== */
:root {
  --sb-track: #e5e7eb;   /* light track */
  --sb-thumb: #9ca3af;   /* light thumb */
  --rg-track: #e5e7eb;   /* light range track */
  --rg-thumb: #6b7280;   /* light range thumb */
}
.dark {
  --sb-track: #111827;   /* dark track */
  --sb-thumb: #374151;   /* dark thumb */
  --rg-track: #374151;   /* dark range track */
  --rg-thumb: #9ca3af;   /* dark range thumb */
}

/* Firefox scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit scrollbars (Chrome/Edge/Safari) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sb-track); }
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 9999px;
  border: 2px solid var(--sb-track);
}

/* Range input */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}

/* Track */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--rg-track);
  border-radius: 9999px;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--rg-track);
  border-radius: 9999px;
}

/* Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px; margin-top: -5px;
  border-radius: 9999px;
  background: var(--rg-thumb);
  border: 2px solid transparent;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 9999px;
  background: var(--rg-thumb);
  border: 2px solid transparent;
}

.btn-spinner {
  display: inline-block;
  width: 1em; /* Adjust size as needed */
  height: 1em;
  border: 2px solid currentColor; /* Use button's text color */
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.75s linear infinite;
  margin-right: 0.5em; /* Space between spinner and text */
  vertical-align: middle; /* Align with text */
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hide elements visually but keep accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sets the height of the follow-up editor (h-32 = 8rem = 128px) */
#follow-up-editor .ql-editor {
  min-height: 128px;
}

/* --- Optional: Fixes for Quill toolbar in Dark Mode --- */
.dark .ql-snow .ql-stroke {
  stroke: #d1d5db; /* gray-300 */
}
.dark .ql-snow .ql-picker-label {
  color: #d1d5db;
}
.dark .ql-snow .ql-picker-options {
  background-color: #374151; /* gray-700 */
  color: #d1d5db;
}
.dark .ql-snow .ql-fill {
  fill: #d1d5db;
}
/* =========== NEW HEADER STATS STYLES (Replaced) =========== */

/* Main circle card */
.header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* === CHANGES ARE HERE === */
    /* Set width and height to be equal for a perfect circle */
    width: 64px;  /* h-16 */
    height: 64px; /* h-16 */
    /* Radius should be half the width/height, or just use 9999px */
    border-radius: 9999px; /* This is a common way to force a circle */
    /* === END OF CHANGES === */

    padding: 0.25rem; /* p-1 */
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
}

/* Icon style */
.header-stat-icon {
    width: 16px; /* w-4 */
    height: 16px; /* h-4 */
    margin-bottom: 0.125rem; /* mb-0.5 */
}

/* Number style */
.header-stat-number {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* bold */
    line-height: 1.2;
}

/* Label style */
.header-stat-label {
    font-size: 0.75rem; /* text-xs (no change) */
    font-weight: 500; /* medium */
    line-height: 1.1;
}

/* --- Light Mode Colors --- */
/* We target .light-bg because the header is transparent */
.light-bg #header-stat-received-card {
    background-color: #eff6ff; /* blue-50 */
    border-color: #dbeafe; /* blue-100 */
}
.light-bg #header-stat-received-card .header-stat-icon,
.light-bg #header-stat-received-card .header-stat-number,
.light-bg #header-stat-received-card .header-stat-label {
    color: #2563eb; /* blue-600 */
}

.light-bg #header-stat-processing-card {
    background-color: #fefce8; /* yellow-50 */
    border-color: #fef08a; /* yellow-100 */
}
.light-bg #header-stat-processing-card .header-stat-icon,
.light-bg #header-stat-processing-card .header-stat-number,
.light-bg #header-stat-processing-card .header-stat-label {
    color: #ca8a04; /* yellow-600 */
}

.light-bg #header-stat-done-card {
    background-color: #f0fdf4; /* green-50 */
    border-color: #dcfce7; /* green-100 */
}
.light-bg #header-stat-done-card .header-stat-icon,
.light-bg #header-stat-done-card .header-stat-number,
.light-bg #header-stat-done-card .header-stat-label {
    color: #16a34a; /* green-600 */
}

.light-bg #header-stat-failed-card {
    background-color: #fef2f2; /* red-50 */
    border-color: #fee2e2; /* red-100 */
}
.light-bg #header-stat-failed-card .header-stat-icon,
.light-bg #header-stat-failed-card .header-stat-number,
.light-bg #header-stat-failed-card .header-stat-label {
    color: #dc2626; /* red-600 */
}


/* --- Dark Mode Colors --- */
/* We target .dark on the html/body tag */
.dark #header-stat-received-card {
    background-color: #1e3a8a; /* blue-900 */
    border-color: #1d4ed8; /* blue-700 */
}
.dark #header-stat-received-card .header-stat-icon,
.dark #header-stat-received-card .header-stat-number,
.dark #header-stat-received-card .header-stat-label {
    color: #93c5fd; /* blue-300 */
}

.dark #header-stat-processing-card {
    background-color: #713f12; /* yellow-900 */
    border-color: #854d0e; /* yellow-700 */
}
.dark #header-stat-processing-card .header-stat-icon,
.dark #header-stat-processing-card .header-stat-number,
.dark #header-stat-processing-card .header-stat-label {
    color: #fde047; /* yellow-300 */
}

.dark #header-stat-done-card {
    background-color: #166534; /* green-900 */
    border-color: #15803d; /* green-700 */
}
.dark #header-stat-done-card .header-stat-icon,
.dark #header-stat-done-card .header-stat-number,
.dark #header-stat-done-card .header-stat-label {
    color: #86efac; /* green-300 */
}

.dark #header-stat-failed-card {
    background-color: #991b1b; /* red-900 */
    border-color: #b91c1c; /* red-700 */
}
.dark #header-stat-failed-card .header-stat-icon,
.dark #header-stat-failed-card .header-stat-number,
.dark #header-stat-failed-card .header-stat-label {
    color: #fca5a5; /* red-300 */
}

/* =========== END NEW HEADER STATS STYLES =========== */
/* AI Message Toggle Button - Ensure it's always clickable */
#ai-message-toggle {
  pointer-events: auto !important;
  touch-action: auto !important;
}

#ai-message-toggle:hover {
  opacity: 0.9;
}

#ai-message-toggle:active {
  transform: scale(1.05);
}

/* =========== TABLE ROW STYLING =========== */

/* Table row borders - applies to ALL table rows regardless of class */
/* Light mode - borders should be light gray */
.light-bg tr.border-b {
  border-bottom-color: #e5e7eb !important; /* light gray-200 */
}

/* Dark mode - borders should be dark gray */
.dark tr.border-b {
  border-bottom-color: #374151 !important; /* dark gray-700 */
}

/* Specific overrides for any gray border classes */
.light-bg tr.border-gray-700,
.light-bg tr.border-gray-200 {
  border-bottom-color: #e5e7eb !important;
}

.dark tr.border-gray-700,
.dark tr.border-gray-200 {
  border-bottom-color: #374151 !important;
}

/* Light mode - Unread draft rows with highlight */
.light-bg tr[data-draft-id].is-unread {
  background-color: #eff6ff !important; /* light blue-50 */
  font-weight: 600 !important;
  border-left: 4px solid #3b82f6 !important; /* blue-600 */
  transition: background-color 0.2s ease;
}

.light-bg tr[data-draft-id].is-unread:hover {
  background-color: #dbeafe !important; /* light blue-100 */
}

/* Dark mode - Unread draft rows with highlight */
.dark tr[data-draft-id].is-unread {
  background-color: rgba(59, 130, 246, 0.1) !important; /* blue-600 with 10% opacity */
  font-weight: 600 !important;
  border-left: 4px solid #3b82f6 !important; /* blue-600 */
  transition: background-color 0.2s ease;
}

.dark tr[data-draft-id].is-unread:hover {
  background-color: rgba(59, 130, 246, 0.2) !important; /* blue-600 with 20% opacity */
}

/* Light mode - Read draft rows */
.light-bg tr[data-draft-id][data-read="true"] {
  background-color: transparent;
  font-weight: 400;
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease;
}

.light-bg tr[data-draft-id][data-read="true"]:hover {
  background-color: #f3f4f6; /* gray-100 */
}

/* Dark mode - Read draft rows */
.dark tr[data-draft-id][data-read="true"] {
  background-color: transparent;
  font-weight: 400;
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease;
}

.dark tr[data-draft-id][data-read="true"]:hover {
  background-color: rgba(255, 255, 255, 0.05); /* subtle white highlight */
}

/* Regular table rows (non-unread, non-specific) */
tr.border-b {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* =========== CURVED EDGES FOR TABLE ROWS =========== */
/* Make table use separate borders for curved edges */
#draft-emails-table,
#sent-drafts-table,
#spam-detection-table,
#irrelevant-emails-table {
  border-collapse: separate !important;
  border-spacing: 0 0.5rem !important;
}

/* Light mode - Curved row backgrounds */
.light-bg #draft-emails-table tr,
.light-bg #sent-drafts-table tr,
.light-bg #spam-detection-table tr,
.light-bg #irrelevant-emails-table tr {
  background-color: #ffffff !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.light-bg #draft-emails-table tr:hover,
.light-bg #sent-drafts-table tr:hover,
.light-bg #spam-detection-table tr:hover,
.light-bg #irrelevant-emails-table tr:hover {
  background-color: #f3f4f6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode - Curved row backgrounds */
.dark #draft-emails-table tr,
.dark #sent-drafts-table tr,
.dark #spam-detection-table tr,
.dark #irrelevant-emails-table tr {
  background-color: #1f2937 !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

.dark #draft-emails-table tr:hover,
.dark #sent-drafts-table tr:hover,
.dark #spam-detection-table tr:hover,
.dark #irrelevant-emails-table tr:hover {
  background-color: rgba(55, 65, 81, 0.5) !important;
  box-shadow: none !important;
}

/* Remove borders from individual cells since we're using box-shadow */
#draft-emails-table tr td:first-child,
#sent-drafts-table tr td:first-child,
#spam-detection-table tr td:first-child,
#irrelevant-emails-table tr td:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

#draft-emails-table tr td:last-child,
#sent-drafts-table tr td:last-child,
#spam-detection-table tr td:last-child,
#irrelevant-emails-table tr td:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

/* Remove row borders */
#draft-emails-table tr.border-b,
#sent-drafts-table tr.border-b,
#spam-detection-table tr.border-b,
#irrelevant-emails-table tr.border-b {
  border-bottom: none !important;
}

/* =========== UNREAD HIGHLIGHT WITH CURVED EDGES =========== */
/* Light mode - Unread rows override curved edges */
.light-bg #draft-emails-table tr[data-draft-id].is-unread {
  background-color: #eff6ff !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2) !important;
  border-radius: 0.5rem !important;
}

.light-bg #draft-emails-table tr[data-draft-id].is-unread:hover {
  background-color: #dbeafe !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}

/* Dark mode - Unread rows with highlight */
.dark #draft-emails-table tr[data-draft-id].is-unread {
  background-color: rgba(59, 130, 246, 0.1) !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.25) !important;
  border-radius: 0.5rem !important;
}

.dark #draft-emails-table tr[data-draft-id].is-unread:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4) !important;
}

/* =========== HOVER EFFECT THEME FIX =========== */
/* Light mode - override dark hover class */
.light-bg tr.hover\:bg-gray-800\/50:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
}

.light-bg tr.hover\:bg-gray-800:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
}

/* Dark mode - override light hover class */
.dark tr.hover\:bg-gray-100:hover {
  background-color: rgba(31, 41, 55, 0.5) !important; /* gray-800/50 */
}

.dark tr.hover\:bg-gray-200:hover {
  background-color: rgba(31, 41, 55, 0.5) !important; /* gray-800/50 */
}

/* Dark mode - ensure dark hover class works */
.dark tr.hover\:bg-gray-800\/50:hover {
  background-color: rgba(31, 41, 55, 0.5) !important; /* gray-800/50 */
}

.dark tr.hover\:bg-gray-800:hover {
  background-color: rgba(31, 41, 55, 0.5) !important; /* gray-800/50 */
}

/* =========== SELECTED DRAFT ROW (PERSISTENT HIGHLIGHT) =========== */
/* Selected draft row - works in any theme */
tr.draft-row-selected {
  background-color: rgb(209, 213, 219) !important; /* gray-300 for light mode */
}

/* Dark mode - override for selected draft row */
.dark-bg tr.draft-row-selected,
body.dark-bg tr.draft-row-selected {
  background-color: rgba(55, 65, 81, 0.7) !important; /* gray-700/70 for dark mode */
}

/* =========== PAGINATION BUTTON STYLING =========== */

/* Light mode - Default pagination button */
.light-bg .pagination-btn-default {
  background-color: #ffffff !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.light-bg .pagination-btn-default:hover {
  background-color: #f9fafb !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Light mode - Active pagination button */
.light-bg .pagination-btn-active {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
}

.light-bg .pagination-btn-active:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 8px rgba(59, 130, 246, 0.3);
}

/* Light mode - Disabled pagination button */
.light-bg .pagination-btn-disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  border: 1px solid #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Dark mode - Default pagination button */
.dark .pagination-btn-default {
  background-color: #1f2937 !important;
  color: #9ca3af !important;
  border: 1px solid #374151 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .pagination-btn-default:hover {
  background-color: #2d3748 !important;
  color: #e5e7eb !important;
  border-color: #4b5563 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Dark mode - Active pagination button */
.dark .pagination-btn-active {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}

.dark .pagination-btn-active:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 8px rgba(59, 130, 246, 0.4);
}

/* Dark mode - Disabled pagination button */
.dark .pagination-btn-disabled {
  background-color: #111827 !important;
  color: #6b7280 !important;
  border: 1px solid #374151 !important;
  cursor: not-allowed !important;
  opacity: 0.5;
}

/* =========== LOGS TABLE STYLING =========== */

/* Light mode - Logs table rows */
.light-bg #logs-tbody tr {
  background-color: #ffffff;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.light-bg #logs-tbody tr:hover {
  background-color: #f0f9ff;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Light mode - Logs text colors */
.light-bg #logs-tbody td {
  color: #374151;
}

/* Dark mode - Logs table rows */
.dark #logs-tbody tr {
  background-color: #2d3748;
  color: #f3f4f6;
  border-bottom: 1px solid #1f2937;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dark #logs-tbody tr:hover {
  background-color: #374151;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* Dark mode - Logs text colors */
.dark #logs-tbody td {
  color: #e5e7eb;
}

/* Light mode - Logs table header */
.light-bg .logs-table-header {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  border-bottom: 3px solid #1e40af;
}

.light-bg .logs-table-header th {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Dark mode - Logs table header */
.dark .logs-table-header {
  background: linear-gradient(to right, #1e3a8a, #1e40af) !important;
  border-bottom: 3px solid #1e3a8a;
}

.dark .logs-table-header th {
  color: #e5e7eb !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Light mode - Error badge */
.light-bg #logs-tbody tr .bg-red-50 {
  background-color: #fee2e2 !important;
  border: 1px solid #fecaca !important;
}

.light-bg #logs-tbody tr .text-red-700 {
  color: #b91c1c !important;
}

/* Dark mode - Error badge */
.dark #logs-tbody tr .bg-red-900\/20 {
  background-color: #7f1d1d !important;
  border: 1px solid #991b1b !important;
}

.dark #logs-tbody tr .text-red-400 {
  color: #fca5a5 !important;
}

/* Light mode - Warning badge */
.light-bg #logs-tbody tr .bg-orange-50 {
  background-color: #ffedd5 !important;
  border: 1px solid #fed7aa !important;
}

.light-bg #logs-tbody tr .text-orange-700 {
  color: #b45309 !important;
}

/* Dark mode - Warning badge */
.dark #logs-tbody tr .bg-orange-900\/20 {
  background-color: #7c2d12 !important;
  border: 1px solid #9a3412 !important;
}

.dark #logs-tbody tr .text-orange-400 {
  color: #fed7aa !important;
}

/* Light mode - Info badge */
.light-bg #logs-tbody tr .bg-blue-50 {
  background-color: #dbeafe !important;
  border: 1px solid #bfdbfe !important;
}

.light-bg #logs-tbody tr .text-blue-700 {
  color: #1e40af !important;
}

/* Dark mode - Info badge */
.dark #logs-tbody tr .bg-gray-700 {
  background-color: #1e3a8a !important;
  border: 1px solid #1e40af !important;
}

.dark #logs-tbody tr .text-blue-400 {
  color: #93c5fd !important;
}

/* Light mode - Logs container */
.light-bg .bg-white.rounded-xl.border.border-gray-200 {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
}

/* Dark mode - Logs container */
.dark .bg-white.rounded-xl.border.border-gray-200 {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

/* Light mode - Filter card */
.light-bg .logs-filter-card {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

.light-bg .logs-filter-card h3 {
  color: #111827 !important;
}

.light-bg .logs-input,
.light-bg .logs-select {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

.light-bg .logs-input:focus,
.light-bg .logs-select:focus {
  border-color: #3b82f6 !important;
}

.light-bg .logs-input::placeholder {
  color: #9ca3af !important;
}

.light-bg .logs-checkbox {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

.light-bg .logs-checkbox:hover {
  background-color: #e5e7eb !important;
}

/* Light mode - Filter labels */
.light-bg .logs-filter-card label {
  color: #111827 !important; /* darker gray for better contrast */
}

/* Light mode - Checkbox label text */
.light-bg .logs-checkbox span {
  color: #111827 !important; /* darker gray for better contrast */
}

/* Dark mode - Filter card */
.dark .logs-filter-card {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

.dark .logs-filter-card h3 {
  color: #f9fafb !important;
}

.dark .logs-input,
.dark .logs-select {
  background-color: #2d3748 !important;
  color: #e5e7eb !important;
  border-color: #4b5563 !important;
}

.dark .logs-input:focus,
.dark .logs-select:focus {
  border-color: #60a5fa !important;
}

.dark .logs-input::placeholder {
  color: #9ca3af !important;
}

.dark .logs-checkbox {
  background-color: #2d3748 !important;
  color: #e5e7eb !important;
}

.dark .logs-checkbox:hover {
  background-color: #1f2937 !important;
}

/* Line clamping for message column */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s linear infinite;
}


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

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========== EMAIL HTML CONTENT STYLING =========== */
/* Style links within email HTML content to be blue and clickable */
.email-html-content a {
    color: #3b82f6 !important; /* blue-500 */
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.email-html-content a:hover {
    color: #2563eb !important; /* blue-600 */
    text-decoration: underline;
}

/* Dark mode - ensure links are visible and blue */
.dark .email-html-content a {
    color: #60a5fa !important; /* blue-400 */
}

.dark .email-html-content a:hover {
    color: #3b82f6 !important; /* blue-500 */
}

/* Light mode - ensure links are blue */
.light-bg .email-html-content a {
    color: #2563eb !important; /* blue-600 */
}

.light-bg .email-html-content a:hover {
    color: #1d4ed8 !important; /* blue-700 */
}

/* Preserve email message structure and styling */
.email-html-content .email-message {
    margin-bottom: 20px;
    padding: 10px;
    border-left: 3px solid #ffffff;
    padding-left: 15px;
}

.dark .email-html-content .email-message {
    border-left-color: #ffffff;
}

/* Preserve blockquote styling (Gmail quoted content) */
.email-html-content blockquote,
.email-html-content .gmail_quote {
    margin: 10px 0;
    padding: 10px;
    border-left: 3px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .email-html-content blockquote,
.dark .email-html-content .gmail_quote {
    border-left-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Ensure proper spacing and readability */
.email-html-content p {
    margin: 8px 0;
    line-height: 1.6;
}

.email-html-content div[dir] {
    margin: 10px 0;
}

/* Override inline color styles from email HTML to match theme */
.email-html-content span,
.email-html-content div,
.email-html-content p,
.email-html-content b,
.email-html-content i,
.email-html-content u,
.email-html-content strong,
.email-html-content em {
    color: inherit !important;
}

/* Dark theme - force light text color */
.dark .email-html-content span,
.dark .email-html-content div,
.dark .email-html-content p,
.dark .email-html-content b,
.dark .email-html-content i,
.dark .email-html-content u,
.dark .email-html-content strong,
.dark .email-html-content em {
    color: rgb(229, 231, 235) !important; /* gray-200 */
}

/* Light theme - force dark text color */
.light-bg .email-html-content span,
.light-bg .email-html-content div,
.light-bg .email-html-content p,
.light-bg .email-html-content b,
.light-bg .email-html-content i,
.light-bg .email-html-content u,
.light-bg .email-html-content strong,
.light-bg .email-html-content em {
    color: rgb(31, 41, 55) !important; /* gray-800 */
}

/* Password Strength Indicator Styles */
.password-strength-indicator {
    margin-top: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
    display: none;
}

.dark .password-strength-indicator {
    background: rgba(255, 255, 255, 0.05);
}

.strength-bars {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.strength-bar {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.dark .strength-bar {
    background: rgba(255, 255, 255, 0.1);
}

.strength-bar.filled {
    background-color: currentColor;
}

.strength-label {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    transition: color 0.3s ease;
}

.strength-label.weak {
    color: #ef4444;
}

.strength-label.fair {
    color: #f97316;
}

.strength-label.good {
    color: #eab308;
}

.strength-label.strong {
    color: #22c55e;
}

.strength-feedback {
    color: #6b7280;
    list-style: none;
    padding-left: 0;
    margin: 4px 0 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.dark .strength-feedback {
    color: #d1d5db;
}