/**
 * IMMEDIATE DARK THEME APPLICATION
 * 
 * This stylesheet is loaded immediately by the HTML to ensure dark mode styling is applied
 * before React renders. This prevents the flash of light-themed content during initial load.
 * 
 * Include in index.html with:
 * <link rel="stylesheet" href="/styles/immediate-dark-theme.css">
 */

:root {
  /* Neutral palette (dark mode) colors */
  --color-background-dark: 220 14% 13%;      /* #1a1f2a - Dark charcoal */
  --color-surface-1-dark: 222 15% 18%;       /* #252b38 - Primary surface */
  --color-surface-2-dark: 223 18% 22%;       /* #2d3445 - Secondary surface */
  --color-surface-3-dark: 225 19% 27%;       /* #363d52 - Elevated surface */
  --color-border-dark: 220 10% 40% / 0.12;   /* Subtle border */
  --color-divider-dark: 220 10% 40% / 0.08;  /* Even more subtle divider */
  --color-text-primary-dark: 0 0% 100% / 0.95;   /* Slightly off-white */
  --color-text-secondary-dark: 0 0% 100% / 0.75; /* More subdued */
  --color-text-tertiary-dark: 0 0% 100% / 0.45;  /* Significantly faded */
  
  /* Transaction opacities */
  --transaction-past-opacity: 0.8;     /* Past transactions - slightly faded */
  --transaction-today-opacity: 0.8;    /* Today transactions - same as past */
  --transaction-future-opacity: 0.65;  /* Future transactions - more faded */
  
  /* Transaction styling */
  --transaction-future-italic: italic;  /* Apply italic to future transactions */
  
  /* Month header & row size */
  --month-header-font-size: 2.5rem;  /* Large month headers */
  --transaction-row-height: 28px;    /* Spreadsheet-style rows */
}

/* Apply dark styles immediately */
html, body {
  background-color: hsl(var(--color-background-dark)) !important;
  color: hsl(var(--color-text-primary-dark)) !important;
}

/* Add dark class to enable other dark-specific styles */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent initial flash by hiding content until styled */
html.initial-load body > :not(script) {
  opacity: 0;
  transition: opacity 0.15s ease;
}
html.ready body > :not(script) {
  opacity: 1;
}

/* Force dark mode by default */
html, html.dark {
  color-scheme: dark;
}

/* Style high-level containers */
#root, [data-theme="dark"] {
  background-color: hsl(var(--color-background-dark)) !important;
  color: hsl(var(--color-text-primary-dark)) !important;
}

/* Style transaction elements early */
.transaction-row, tr[data-transaction-id] {
  height: var(--transaction-row-height) !important;
  min-height: var(--transaction-row-height) !important;
  max-height: var(--transaction-row-height) !important;
  line-height: 1.2 !important;
  border-bottom: 1px solid hsla(220 10% 40% / 0.15) !important;
}

/* Remove hover effects - a key requirement */
.transaction-row:hover, tr[data-transaction-id]:hover {
  background-color: transparent !important;
}

/* Apply alternating row styles - removed as per requirement */
.transaction-row:nth-child(even), tr[data-transaction-id]:nth-child(even) {
  background-color: transparent !important;
}

.transaction-row:nth-child(odd), tr[data-transaction-id]:nth-child(odd) {
  background-color: transparent !important;
}

/* Apply month header styling early */
.month-separator, h3.month-separator, tr.month-separator, tr.month-separator td {
  font-size: var(--month-header-font-size) !important;
  font-weight: bold !important;
  color: hsl(var(--color-text-primary-dark)) !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0.5rem !important;
  border-bottom: none !important;
}

/* Style past, today and future transactions */
tr[data-is-past="true"] *, .past-transaction * {
  color: rgba(255, 255, 255, var(--transaction-past-opacity)) !important;
  font-style: normal !important;
}

tr[data-is-today="true"] *, .today-transaction * {
  color: rgba(255, 255, 255, var(--transaction-today-opacity)) !important;
  font-style: normal !important;
}

tr[data-is-future="true"] *, tr[data-is-virtual="true"] *, 
.future-transaction *, .virtual-transaction * {
  color: rgba(255, 255, 255, var(--transaction-future-opacity)) !important;
  font-style: var(--transaction-future-italic) !important;
}

/* Cell styling */
tr[data-transaction-id] td, .transaction-row td {
  padding: 4px 8px !important;
  vertical-align: middle !important;
  font-size: 0.875rem !important;
  border-right: 1px solid hsla(220 10% 40% / 0.15) !important;
}

/* Remove border from last cell */
tr[data-transaction-id] td:last-child, .transaction-row td:last-child {
  border-right: none !important;
}

/* Table headers */
thead th, th {
  background-color: hsl(var(--color-surface-2-dark)) !important;
  color: hsl(var(--color-text-secondary-dark)) !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-bottom: 1px solid hsla(220 10% 40% / 0.12) !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}