body {
  font-family: 'Arial', sans-serif;
  background-color: #111827; /* Dark background */
  color: #f9fafb; /* Off-white text */
  line-height: 1.7; /* Improved line height for better readability */
  min-height: 100vh;
}

/* ===== Rotating motivational quote (ambient, next to Add Section) ===== */
.quote-banner {
  max-width: 60%;
  line-height: 1.3;
  pointer-events: none; /* stays out of the way of interactions */
}

.quote-text {
  font-size: 0.9rem;
  color: rgba(147, 197, 253, 0.55); /* faint blue, dark theme */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-author {
  font-size: 0.7rem;
  color: rgba(147, 197, 253, 0.4); /* even fainter */
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-flag {
  opacity: 0.6;
  border-radius: 2px;
  vertical-align: -2px;
}

.quote-cursor {
  color: rgba(147, 197, 253, 0.35);
  animation: quote-blink 1s step-end infinite;
  margin-left: 1px;
}

@keyframes quote-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Light theme overrides for the quote */
body[data-theme="light"] .quote-text {
  color: rgba(71, 85, 105, 0.55); /* faint slate */
}
body[data-theme="light"] .quote-author {
  color: rgba(71, 85, 105, 0.4);
}
body[data-theme="light"] .quote-cursor {
  color: rgba(71, 85, 105, 0.35);
}

/* Respect reduced motion: hide the blinking cursor */
@media (prefers-reduced-motion: reduce) {
  .quote-cursor { display: none; }
}

/* On small screens, hide the quote so the button row stays clean */
@media (max-width: 640px) {
  .quote-banner { display: none; }
}

/* Section styling */
.section-container {
  background-color: rgba(59, 130, 246, 0.15) !important; /* Much brighter blue background */
  border: 1px solid rgba(96, 165, 250, 0.6) !important; /* Highly visible border */
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3); /* Enhanced glow effect */
  transition: all 0.3s ease;
}

.section-container:hover {
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* Section header styling */
.section-header {
  padding: 0.75rem 0.5rem;
  border-radius: 0.375rem;
  background-color: rgba(37, 99, 235, 0.25); /* Increased opacity for better visibility */
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(147, 197, 253, 0.3);
}

.section-header:hover {
  background-color: rgba(37, 99, 235, 0.35);
}

.section-title {
  font-weight: 700; /* Bolder text */
  color: #bfdbfe; /* Even brighter blue for better visibility */
  text-shadow: 0 0 10px rgba(191, 219, 254, 0.5);
  font-size: 1.25rem;
}

.section-toggle-btn {
  color: #93c5fd; /* Brighter color */
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 1.1rem;
}

.section-toggle-btn:hover {
  color: #dbeafe; /* Almost white for maximum contrast */
  transform: scale(1.2);
}

/* Tile styling */
.tile-container {
  position: relative;
  transition: all 0.2s ease;
  background-color: rgba(96, 165, 250, 0.15) !important; /* Brighter background */
  border: 1px solid rgba(147, 197, 253, 0.4) !important; /* Visible border */
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

.tile-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.5);
  background-color: rgba(96, 165, 250, 0.25) !important;
  border-color: rgba(147, 197, 253, 0.6) !important;
}

/* Make main tile icons brighter - only target the main icon, not action buttons */
.tile-container > a > i {
  color: #93c5fd !important; /* Brighter blue */
  text-shadow: 0 0 10px rgba(147, 197, 253, 0.5);
  font-size: 1.75rem !important;
}

/* Make tile text more visible */
.tile-container span {
  color: #e0f2fe !important; /* Very light blue, almost white */
  font-weight: 500;
}

.tile-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.tile-container:hover .tile-actions {
  opacity: 1;
}

/* Style the action buttons */
.tile-actions button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.tile-actions button:hover {
  transform: scale(1.1);
}

/* Ensure action button icons are properly sized */
.tile-actions button i {
  font-size: 0.75rem !important;
  color: white !important;
  text-shadow: none !important;
}
.container {
  max-width: 1200px; /* Increased max-width for larger screens */
  padding: 1rem;
}
.bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05);
}
.text-gray-200 {
  color: #e5e7eb;
}
.border-gray-700 {
  border-color: #4b5563;
}
.bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.2);
}
.text-white {
  color: #fff;
}

/* Drag and drop styling */
.dragging {
  opacity: 0.6;
  transform: scale(0.95);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.6) !important;
  border: 2px dashed rgba(147, 197, 253, 0.8) !important;
  z-index: 100;
  position: relative;
}

.drag-over {
  border: 2px dashed rgba(147, 197, 253, 0.8) !important;
  background-color: rgba(96, 165, 250, 0.2) !important;
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.02);
}

/* Add a visual indicator for draggable items */
.tile-container {
  cursor: grab;
}

.tile-container:active {
  cursor: grabbing;
}

/* Add a subtle indicator to show tiles can be dragged */
.tile-container::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(147, 197, 253, 0.8);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
  cursor: move; /* Fallback for older browsers */
  cursor: all-scroll;
}

.tile-container:hover::before {
  opacity: 1;
}

/* Create a hover area around the dot for easier interaction */
.tile-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  opacity: 0;
  z-index: 4;
  cursor: move; /* Fallback for older browsers */
  cursor: all-scroll;
}

.tile-container:hover::after {
  opacity: 1;
}
/* Sticky summary on desktop */
@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
    top: 1rem;
  }
}

/* Financial summary styling */
.financial-summary {
  box-shadow: 0 0 15px rgba(129, 140, 248, 0.2);
  transition: box-shadow 0.3s ease;
}

.financial-summary:hover {
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.3);
}

.difference-highlight {
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border-radius: 0.375rem;
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.3);
  transition: all 0.3s ease;
}

.difference-highlight.positive {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.difference-highlight.negative {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.difference-highlight:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.4);
}

/* Scenario management styling */
.scenario-management {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
  transition: box-shadow 0.3s ease;
}

.scenario-management:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Drag and drop styling */
.entry-item {
  position: relative;
  cursor: grab;
}

.entry-item:active {
  cursor: grabbing;
}

.drag-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: rgba(255, 255, 255, 0.1);
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.entry-item:hover .drag-handle {
  opacity: 1;
}

.drag-handle::before {
  content: '';
  width: 4px;
  height: 16px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 2px);
  background-size: 4px 4px;
  background-repeat: repeat;
}

.dragging {
  opacity: 0.5;
  background-color: rgba(59, 130, 246, 0.2);
  border: 1px dashed rgba(59, 130, 246, 0.5);
}

.drag-over {
  position: relative;
  border: 1px dashed rgba(59, 130, 246, 0.8) !important;
  background-color: rgba(59, 130, 246, 0.1);
}

.drag-over::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background-color: rgba(59, 130, 246, 0.8);
  border-radius: 2px;
  z-index: 10;
}

.entry-content {
  padding-left: 16px; /* Make room for the drag handle */
}

/* ===== Light Theme ===== */

/* Base body */
body[data-theme="light"] {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

body[data-theme="light"].bg-gray-900 {
  background-color: #f3f4f6 !important;
}

/* Override text-white for non-button elements */
body[data-theme="light"] p.text-white,
body[data-theme="light"] span.text-white,
body[data-theme="light"] input.text-white,
body[data-theme="light"] select.text-white,
body[data-theme="light"] option {
  color: #1f2937 !important;
}

/* Override text color classes */
body[data-theme="light"] .text-blue-400 {
  color: #2563eb !important;
}

body[data-theme="light"] .text-blue-300 {
  color: #2563eb !important;
}

body[data-theme="light"] .text-red-400 {
  color: #dc2626 !important;
}

body[data-theme="light"] .text-green-400 {
  color: #16a34a !important;
}

body[data-theme="light"] .text-gray-400 {
  color: #6b7280 !important;
}

body[data-theme="light"] .text-gray-200 {
  color: #374151 !important;
}

body[data-theme="light"] .text-gray-300 {
  color: #4b5563 !important;
}

body[data-theme="light"] .text-gray-500 {
  color: #6b7280 !important;
}

/* Modal backgrounds */
body[data-theme="light"] .bg-gray-800 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

body[data-theme="light"] .border-gray-700 {
  border-color: #d1d5db !important;
}

/* Inputs and selects */
body[data-theme="light"] input.bg-gray-900,
body[data-theme="light"] select.bg-gray-900 {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

body[data-theme="light"] input.bg-gray-900::placeholder,
body[data-theme="light"] input.bg-gray-900 placeholder {
  color: #9ca3af !important;
}

/* Icon picker items */
body[data-theme="light"] .bg-gray-700 {
  background-color: #e5e7eb !important;
}

body[data-theme="light"] .bg-gray-700:hover {
  background-color: #d1d5db !important;
}

/* Category buttons - inactive state */
body[data-theme="light"] button.bg-gray-700 {
  background-color: #e5e7eb !important;
  color: #4b5563 !important;
}

body[data-theme="light"] button.bg-gray-700:hover {
  background-color: #d1d5db !important;
}

/* Section containers */
body[data-theme="light"] .section-container {
  background-color: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.12);
}

body[data-theme="light"] .section-container:hover {
  background-color: rgba(59, 130, 246, 0.12) !important;
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
}

/* Section header */
body[data-theme="light"] .section-header {
  background-color: rgba(37, 99, 235, 0.08);
  border-bottom: 1px solid rgba(147, 197, 253, 0.4);
}

body[data-theme="light"] .section-header:hover {
  background-color: rgba(37, 99, 235, 0.12);
}

/* Section title */
body[data-theme="light"] .section-title {
  color: #1d4ed8 !important;
  text-shadow: none;
}

/* Section toggle */
body[data-theme="light"] .section-toggle-btn {
  color: #2563eb;
}

body[data-theme="light"] .section-toggle-btn:hover {
  color: #1d4ed8;
}

/* Tile containers */
body[data-theme="light"] .tile-container {
  background-color: rgba(96, 165, 250, 0.1) !important;
  border: 1px solid rgba(147, 197, 253, 0.5) !important;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.1);
}

body[data-theme="light"] .tile-container:hover {
  background-color: rgba(96, 165, 250, 0.18) !important;
  border-color: rgba(147, 197, 253, 0.7) !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

/* Tile icon */
body[data-theme="light"] .tile-container > div > i {
  color: #2563eb !important;
  text-shadow: none;
}

/* Tile text */
body[data-theme="light"] .tile-container span {
  color: #1f2937 !important;
}

/* Drag indicator dot */
body[data-theme="light"] .tile-container::before {
  background-color: rgba(96, 165, 250, 0.8);
}

/* Drag styles */
body[data-theme="light"] .dragging {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border: 2px dashed rgba(96, 165, 250, 0.8) !important;
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3) !important;
}

body[data-theme="light"] .drag-over {
  border: 2px dashed rgba(96, 165, 250, 0.8) !important;
  background-color: rgba(96, 165, 250, 0.15) !important;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.25) !important;
}

/* Custom utility overrides for light theme */
body[data-theme="light"] .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.08);
}

/* Help modal border */
body[data-theme="light"] .border-t {
  border-top: 1px solid #e5e7eb !important;
}

/* ===== Tile Background Color Palette =====
   Each data-color key defines CSS variables consumed by the generic rules
   below. Dark theme uses saturated dark backgrounds with light text;
   light theme overrides the same variables with light tints + dark text,
   so tile content stays readable in both themes. */

/* Dark theme (default) color variables */
.tile-container[data-color="slate"]   { --tile-bg:#1e293b; --tile-bg-hover:#334155; --tile-text:#e2e8f0; --tile-icon:#94a3b8; }
.tile-container[data-color="blue"]    { --tile-bg:#1e3a8a; --tile-bg-hover:#1d4ed8; --tile-text:#dbeafe; --tile-icon:#93c5fd; }
.tile-container[data-color="indigo"]  { --tile-bg:#312e81; --tile-bg-hover:#3730a3; --tile-text:#e0e7ff; --tile-icon:#a5b4fc; }
.tile-container[data-color="purple"]  { --tile-bg:#581c87; --tile-bg-hover:#6b21a8; --tile-text:#f3e8ff; --tile-icon:#c4b5fd; }
.tile-container[data-color="pink"]    { --tile-bg:#831843; --tile-bg-hover:#9d174d; --tile-text:#fce7f3; --tile-icon:#f9a8d4; }
.tile-container[data-color="red"]     { --tile-bg:#7f1d1d; --tile-bg-hover:#991b1b; --tile-text:#fee2e2; --tile-icon:#fca5a5; }
.tile-container[data-color="orange"]  { --tile-bg:#7c2d12; --tile-bg-hover:#9a3412; --tile-text:#ffedd5; --tile-icon:#fdba74; }
.tile-container[data-color="amber"]   { --tile-bg:#78350f; --tile-bg-hover:#92400e; --tile-text:#fef3c7; --tile-icon:#fcd34d; }
.tile-container[data-color="green"]   { --tile-bg:#14532d; --tile-bg-hover:#166534; --tile-text:#d1fae5; --tile-icon:#6ee7b7; }
.tile-container[data-color="teal"]    { --tile-bg:#134e4a; --tile-bg-hover:#115e59; --tile-text:#ccfbf1; --tile-icon:#5eead4; }
.tile-container[data-color="cyan"]    { --tile-bg:#164e63; --tile-bg-hover:#155e75; --tile-text:#cffafe; --tile-icon:#67e8f9; }

/* Dark theme generic consumers */
body[data-theme="dark"] .tile-container[data-color] {
  background-color: var(--tile-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body[data-theme="dark"] .tile-container[data-color]:hover {
  background-color: var(--tile-bg-hover) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
body[data-theme="dark"] .tile-container[data-color] span {
  color: var(--tile-text) !important;
}
body[data-theme="dark"] .tile-container[data-color] > div > i {
  color: var(--tile-icon) !important;
  text-shadow: none;
}

/* Light theme color variable overrides */
body[data-theme="light"] .tile-container[data-color="slate"]   { --tile-bg:#e2e8f0; --tile-bg-hover:#cbd5e1; --tile-text:#334155; --tile-icon:#475569; }
body[data-theme="light"] .tile-container[data-color="blue"]    { --tile-bg:#dbeafe; --tile-bg-hover:#bfdbfe; --tile-text:#1e3a8a; --tile-icon:#2563eb; }
body[data-theme="light"] .tile-container[data-color="indigo"]  { --tile-bg:#e0e7ff; --tile-bg-hover:#c7d2fe; --tile-text:#312e81; --tile-icon:#4f46e5; }
body[data-theme="light"] .tile-container[data-color="purple"]  { --tile-bg:#f3e8ff; --tile-bg-hover:#e9d5ff; --tile-text:#6b21a8; --tile-icon:#7c3aed; }
body[data-theme="light"] .tile-container[data-color="pink"]    { --tile-bg:#fce7f3; --tile-bg-hover:#fbcfe8; --tile-text:#9d174d; --tile-icon:#db2777; }
body[data-theme="light"] .tile-container[data-color="red"]     { --tile-bg:#fee2e2; --tile-bg-hover:#fecaca; --tile-text:#991b1b; --tile-icon:#dc2626; }
body[data-theme="light"] .tile-container[data-color="orange"]  { --tile-bg:#ffedd5; --tile-bg-hover:#fed7aa; --tile-text:#9a3412; --tile-icon:#ea580c; }
body[data-theme="light"] .tile-container[data-color="amber"]   { --tile-bg:#fef3c7; --tile-bg-hover:#fde68a; --tile-text:#92400e; --tile-icon:#d97706; }
body[data-theme="light"] .tile-container[data-color="green"]   { --tile-bg:#d1fae5; --tile-bg-hover:#a7f3d0; --tile-text:#166534; --tile-icon:#16a34a; }
body[data-theme="light"] .tile-container[data-color="teal"]    { --tile-bg:#ccfbf1; --tile-bg-hover:#99f6e4; --tile-text:#115e59; --tile-icon:#0d9488; }
body[data-theme="light"] .tile-container[data-color="cyan"]    { --tile-bg:#cffafe; --tile-bg-hover:#a5f3fc; --tile-text:#155e75; --tile-icon:#0891b2; }

/* Light theme generic consumers */
body[data-theme="light"] .tile-container[data-color] {
  background-color: var(--tile-bg) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body[data-theme="light"] .tile-container[data-color]:hover {
  background-color: var(--tile-bg-hover) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body[data-theme="light"] .tile-container[data-color] span {
  color: var(--tile-text) !important;
}
body[data-theme="light"] .tile-container[data-color] > div > i {
  color: var(--tile-icon) !important;
  text-shadow: none;
}