/* Dark Mode Styles - Simple class-based approach */

/* Base dark mode background and text */
.dark {
  background-color: #111827;
  color: #f9fafb;
}

.dark body {
  background-color: #111827;
  color: #f9fafb;
}

/* Header Section */
.dark .header-section {
  background-color: #1e3a8a !important;
}

.dark #blur-toggle.blur-active {
  color: #1e3a8a !important;
}

/* Sidebar */
.dark .sidebar-section {
  background-color: #1f2937 !important;
}

.dark .sidebar-section .bg-gray-300 {
  background-color: #374151 !important;
  color: #f9fafb;
}

.dark .sidebar-section .font-bold.text-blue-800 {
  color: #ffffff !important;
}

/* Sidebar section headers - white text in dark mode */
.dark .sidebar-section .font-bold {
  color: #ffffff !important;
}

/* Sidebar SunLife badge in Projected Returns */
.dark .sidebar-section .bg-yellow-100.text-yellow-800 {
  background-color: #ecbd23 !important;
  color: #003848 !important;
}

/* Main section background */
.dark .main-section {
  background-color: #111827;
}

/* White cards/sections */
.dark .bg-white {
  background-color: #1f2937 !important;
  color: #f9fafb;
}

/* Purple headers */
.dark .purple-header {
  background-color: #7c3aed;
  color: white;
}

/* Table containers */
.dark .table-container {
  background-color: #1f2937;
  border-color: #374151;
}

/* Data tables */
.dark .data-table th {
  color: #d1d5db;
  border-bottom-color: #374151;
}

.dark .data-table td {
  border-bottom-color: #374151;
  color: #f9fafb;
}

.dark .data-table .total-row {
  background-color: #374151;
  border-top-color: #4b5563;
}

.dark .data-table .category-header {
  color: #9ca3af;
}

/* TTM Section */
.dark .ttm-section {
  background-color: #374151;
  border-color: #4b5563;
}

/* Financial sections */
.dark .financial-section {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .financial-section .ttm-section {
  background-color: #374151;
  border-color: #4b5563;
}

.dark .financial-section .total-row {
  background-color: #374151;
}

/* Investment summary cards */
.dark .bg-yellow-50 {
  background-color: #ecbd23 !important;
  border-color: #f3d7b8 !important;
  color: #003848;
}

.dark .bg-yellow-50 .text-xs.italic.text-gray-600 {
  color: #003848 !important;
}

.dark .bg-green-50 {
  background-color: #065f46 !important;
  border-color: #047857 !important;
  color: #d1fae5;
}

.dark .bg-gray-50 {
  background-color: #374151 !important;
  color: #f9fafb;
}

/* Text colors */
.dark .text-gray-500 {
  color: #9ca3af !important;
}

.dark .text-gray-600 {
  color: #d1d5db !important;
}

/* Keep percentage change colors (green/red) in dark mode */
.dark #sl-account-summary .text-green-600 {
  color: #045e41 !important;
}

.dark .text-green-600 {
  color: #10b981 !important;
}

.dark .text-red-600 {
  color: #ef4444 !important;
}

/* Monthly data selector - selected period should have white text */
.dark .period-item.bg-blue-200 {
  color: #ffffff !important;
}

/* Alternative: target by inline style if needed */
.dark [data-period].bg-blue-200 {
  color: #ffffff !important;
}

/* Select dropdowns */
.dark select {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

.dark select option {
  background-color: #1f2937;
  color: #f9fafb;
}

/* Date selector container background (dashboard) */
.dark .main-section .bg-gray-100 {
  background-color: #374151 !important;
}

/* Reset button color in dark mode */
.dark .text-blue-600 {
  color: #60a5fa !important;
}

.dark .text-blue-600:hover,
.dark .hover\:text-blue-800:hover {
  color: #93c5fd !important;
}

/* Buttons stay the same in dark mode (already have good colors) */

/* Charts - slightly darken for dark mode */
/* .dark canvas {
  filter: brightness(2);
} */

/* Ensure rounded sections have borders in dark mode */
.dark .rounded-lg {
  border: 1px solid #374151;
}

/* Shadow adjustments */
.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* Dark mode toggle button - inline in auth-nav-controls */
#dark-mode-toggle {
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Sun icon - yellow color */
#dark-mode-toggle svg.sun-icon {
  color: #fbbf24;
}

/* Moon icon - silver/gray color */
#dark-mode-toggle svg.moon-icon {
  color: #d1d5db;
}

/* SunLife Logo Swap */
.sunlife-logo-dark {
  display: none;
}

.dark .sunlife-logo-light {
  display: none;
}

.dark .sunlife-logo-dark {
  display: block;
}

/* Smooth transitions */
body,
.bg-white,
.sidebar-section,
.header-section,
.table-container,
.financial-section,
select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== Stock Ticker Page Dark Mode ===== */

/* Stock ticker page body */
.dark body {
  background-color: #111827;
  color: #f9fafb;
}

/* Stock ticker container */
.dark .container {
  background-color: #111827;
}

/* Stock ticker header */
.dark .ticker {
  background-color: #000;
  color: white;
}
.dark .ticker-header h1 {
  color: #f9fafb;
}

.dark .ticker-header p {
  color: #d1d5db;
}

/* Stock cards */
.dark .stock-card {
  background-color: #1f2937;
  color: #f9fafb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Stock symbol text */
.dark .stock-symbol {
  color: #f9fafb;
}

/* Stock details borders */
.dark .stock-details p {
  border-bottom-color: #374151;
}

/* Input fields */
.dark input {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

/* No stocks message */
.dark .no-stocks {
  color: #9ca3af;
}

/* Last updated text */
.dark .last-updated {
  color: #9ca3af;
}

/* Navigation link */
.dark .navigation a {
  color: #60a5fa;
}

.dark .navigation a:hover {
  color: #93c5fd;
}

/* ===== Manage Worksheets Page Dark Mode ===== */

/* Page container */
.dark .container {
  background-color: #111827;
}

/* Headers */
.dark h1.text-gray-800 {
  color: #f9fafb !important;
}

.dark h2.text-xl {
  color: #f9fafb;
}

.dark h3.text-lg {
  color: #f9fafb;
}

/* Paragraphs and text */
.dark p.text-gray-600,
.dark .text-gray-600 {
  color: #d1d5db !important;
}

.dark .text-gray-500 {
  color: #9ca3af !important;
}

.dark .text-gray-900 {
  color: #f9fafb !important;
}

.dark .text-gray-300 {
  color: #9ca3af !important;
}

/* Content cards */
.dark .bg-white {
  background-color: #1f2937 !important;
}

/* Gray background sections */
.dark .bg-gray-50 {
  background-color: #374151 !important;
}

/* Borders */
.dark .border-gray-200 {
  border-color: #4b5563 !important;
}

.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

/* Navigation links */
.dark nav a {
  color: #60a5fa;
}

.dark nav a:hover {
  color: #93c5fd;
}

/* Status messages */
.dark .bg-green-50 {
  background-color: #064e3b !important;
}

.dark .text-green-800 {
  color: #6ee7b7 !important;
}

.dark .bg-red-50 {
  background-color: #7f1d1d !important;
}

.dark .text-red-800 {
  color: #fca5a5 !important;
}

/* SVG icons */
.dark .text-gray-400 {
  color: #6b7280 !important;
}

/* Checkboxes retain their color */
.dark input[type="checkbox"] {
  background-color: #374151;
  border-color: #4b5563;
}

/* ===== Worksheet Explorer Page Dark Mode ===== */

/* Tables */
.dark table.min-w-full {
  background-color: #1f2937;
}

.dark table thead tr th {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

.dark table tbody {
  background-color: #1f2937 !important;
}

.dark table tbody tr {
  border-color: #4b5563;
}

.dark table tbody tr:hover {
  background-color: #374151;
}

.dark .divide-gray-200 > * {
  border-color: #4b5563 !important;
}

/* Info boxes */
.dark .bg-blue-50 {
  background-color: #1e3a8a !important;
}

.dark .bg-blue-50 * {
  color: #ffffff !important;
}

.dark .text-blue-800 {
  color: #ffffff !important;
}

/* Code blocks */
.dark code {
  background-color: #374151;
  color: #fbbf24;
}

/* JSON viewer */
.dark .json-viewer {
  background-color: #1f2937;
  color: #f9fafb;
}

/* Modal overlay */
.dark .modal-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}

/* Modal content */
.dark .modal-content {
  background-color: #1f2937;
  color: #f9fafb;
}

/* Status badge colors */
.dark .bg-green-100 {
  background-color: #065f46 !important;
}

.dark .bg-green-100.text-green-800,
.dark .text-green-800 {
  color: #ffffff !important;
}

.dark .bg-yellow-100 {
  background-color: #78350f !important;
}

.dark .bg-yellow-100.text-gray-600,
.dark .bg-yellow-100.text-gray-700 {
  color: #ffffff !important;
}

/* ===== Upload Page Dark Mode ===== */

/* Upload container borders */
.dark .border-gray-300 {
  border-color: #4b5563 !important;
}

.dark .border-dashed:hover {
  border-color: #3b82f6 !important;
}

/* File details background */
.dark #upload-form .bg-gray-100 {
  background-color: #111827 !important;
}

/* Instruction text */
.dark .text-sm.text-gray-500,
.dark .text-xs.text-gray-500 {
  color: #f9fafb !important;
}

/* List items in instructions */
.dark ol li,
.dark ul li {
  color: #f9fafb !important;
}

/* SVG icons */
.dark svg.text-green-500 {
  color: #10b981 !important;
}

/* Progress bars */
.dark .bg-blue-200 {
  background-color: #1e3a8a !important;
}

/* Alert boxes */
.dark .bg-green-50 {
  background-color: #064e3b !important;
}

.dark .bg-red-50 {
  background-color: #7f1d1d !important;
}

.dark .text-green-900 {
  color: #ffffff !important;
}

.dark .text-red-900 {
  color: #ffffff !important;
}

/* Data freshness badge — same state colours work in both themes; only the
   chip backing needs adjusting for the darker header. */
.dark .data-freshness { background: rgba(0, 0, 0, 0.35); }

/* Data age line — the recent state needs slightly more lift on the darker
   header; the aged amber is already legible in both themes. */
.dark .data-age--recent { color: #e5e7eb; }
.dark .data-age { background: rgba(0, 0, 0, 0.35); }