/* Dark Theme Variables (Optional, but recommended) */
:root {
  --background-color: #202124;
  --surface-color: #303134;
  --on-background-color: #e0e0e0;
  --on-surface-color: #f0f0f0;
  --accent-color: #64b5f6; /* A light blue for links and highlights */
  --border-color: #333;
}

/* Apply dark theme colors to the entire page */
body.dark-theme {
  background-color: var(--background-color);
  color: var(--on-background-color);
}

.dark-theme #aaro-banner {
    background: url(/AARO-banner-glow.png);
}

/* Update main content containers, cards, or sections */
.dark-theme .container,
.dark-theme .card,
.dark-theme .status-section {
  background-color: var(--surface-color);
  border-color: var(--border-color);
}

/* Style headings and other text */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3 {
  color: var(--on-surface-color);
}

/* Style links and interactive elements */
.dark-theme a {
  color: var(--accent-color);
}

/* Adjust button and input styles */
/* .dark-theme button, */
.dark-theme input {
  background-color: var(--surface-color);
  color: var(--on-surface-color);
  border-color: var(--border-color);
}

/* Ensure status indicators are visible. You might need to adjust these based on your site's specific color codes for 'up,' 'down,' etc. */
.dark-theme .status.up {
  color: #4caf50; /* A light green */
}

.dark-theme #menu {
    background-color: var(--surface-color);
    color: grey;
    border-color: var(--border-color);
}

.dark-theme #menu li a {
    color: grey;
}

.dark-theme .roofTabs {
    background-color: #404040;
}

.dark-theme #openHoursCount {
    color: #c0c0c0;
}

.dark-theme .status.down {
  color: #f44336; /* A light red */
}