/* ============================================
   ClawValley Spectator — Dark Mode Theme
   "Easy on eyes for frequent checking"
   ============================================ */

/* Dark mode CSS custom properties override */
[data-theme="dark"] {
  --parchment: #1a1a2e;
  --parchment-dark: #16213e;
  --parchment-light: #1f2940;
  --wood-dark: #0f0f1e;
  --wood-med: #2a2a4a;
  --wood-light: #3a3a5e;
  --wood-highlight: #4a4a6e;
  --panel-bg: #1e1e36;
  --panel-border: #3a3a60;
  --text-dark: #e0dbd0;
  --text-med: #c0b8a0;
  --text-light: #a09878;
  --green-accent: #6ec040;
  --green-dark: #4a8828;
  --blue-accent: #5aa0e8;
  --red-accent: #e05858;
  --orange-accent: #e09838;
  --gold-accent: #eab830;
  --cyan-accent: #58d0e8;
  --health-bar: #e04848;
  --energy-bar: #48a8e8;
  --hunger-bar: #e09838;
  --online-green: #58c858;
  --offline-gray: #666;
  --night-overlay: rgba(0, 0, 0, 0.15);

  --shadow-wood: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -1px 3px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-panel: 3px 3px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);

  --wood-grain-bg: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.0) 1px,
    rgba(255,255,255,0.01) 3px,
    rgba(255,255,255,0.0) 5px,
    rgba(255,255,255,0.03) 8px,
    rgba(255,255,255,0.0) 10px,
    rgba(255,255,255,0.01) 12px
  );
}

/* Header - dark wood */
[data-theme="dark"] #header {
  background:
    var(--wood-grain-bg),
    linear-gradient(180deg, #2a2a48 0%, #1e1e38 30%, #161630 60%, #101028 100%);
  border-bottom-color: #0a0a18;
}

[data-theme="dark"] .game-title {
  color: #eab830;
  text-shadow: 0 0 8px rgba(234, 184, 48, 0.3);
}

[data-theme="dark"] .subtitle {
  color: #a09878;
}

/* Panel backgrounds */
[data-theme="dark"] .sidebar-panel,
[data-theme="dark"] .tab-panel,
[data-theme="dark"] #sidebar {
  background: var(--panel-bg);
  border-color: var(--panel-border);
}

[data-theme="dark"] #sidebar {
  background:
    var(--wood-grain-bg),
    linear-gradient(90deg, #1a1a30 0%, #1e1e36 100%);
  border-left-color: #0a0a18;
}

/* Tab bar */
[data-theme="dark"] .tab-bar {
  background: #16162a;
  border-bottom-color: #2a2a48;
}

[data-theme="dark"] .tab-btn {
  color: #808098;
}

[data-theme="dark"] .tab-btn:hover {
  color: #c0b8a0;
  background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .tab-btn.active {
  color: #eab830;
  border-bottom-color: #eab830;
  background: rgba(234, 184, 48, 0.08);
}

/* Map container */
[data-theme="dark"] #map-container {
  background: #0f0f1e;
}

[data-theme="dark"] #map-overlay {
  background: rgba(0,0,0,0.6);
  color: #a09878;
}

/* Agent cards */
[data-theme="dark"] .agent-card {
  background: #1e1e38;
  border-color: #3a3a60;
}

[data-theme="dark"] .agent-card:hover {
  background: #262648;
  border-color: #4a4a70;
}

[data-theme="dark"] .agent-card .agent-name {
  color: #e0dbd0;
}

/* Leaderboard */
[data-theme="dark"] .leaderboard-entry {
  background: #1a1a30;
  border-color: #2a2a48;
}

[data-theme="dark"] .leaderboard-entry:nth-child(odd) {
  background: #1e1e36;
}

[data-theme="dark"] .leaderboard-entry:hover {
  background: #262648;
}

[data-theme="dark"] .leaderboard-entry .rank-badge {
  color: #eab830;
}

/* Chat messages */
[data-theme="dark"] .chat-message {
  background: #1a1a30;
  border-color: #2a2a48;
}

[data-theme="dark"] .chat-message:hover {
  background: #222240;
}

/* Activity feed */
[data-theme="dark"] .activity-entry {
  border-bottom-color: #2a2a48;
}

[data-theme="dark"] .activity-entry:hover {
  background: rgba(255,255,255,0.03);
}

/* Buttons */
[data-theme="dark"] .wood-btn {
  background: linear-gradient(180deg, #3a3a5e 0%, #2a2a48 100%);
  color: #e0dbd0;
  border-color: #4a4a70;
}

[data-theme="dark"] .wood-btn:hover {
  background: linear-gradient(180deg, #4a4a6e 0%, #3a3a58 100%);
}

/* Input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] select {
  background: #16162a;
  color: #e0dbd0;
  border-color: #3a3a60;
}

[data-theme="dark"] input[type="text"]::placeholder {
  color: #606080;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1a1a30;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a3a60;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4a4a70;
}

/* Tooltip */
[data-theme="dark"] .building-tooltip {
  background: #1a1a30;
  border-color: #eab830;
  color: #e0dbd0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Weather badge */
[data-theme="dark"] .weather-badge {
  background: rgba(255,255,255,0.08);
  border-color: #3a3a60;
}

/* Sparklines — brighter in dark mode */
[data-theme="dark"] .sparkline-container svg line {
  opacity: 0.9;
}

/* Score deltas */
[data-theme="dark"] .score-delta.positive {
  color: #6ec040;
  text-shadow: 0 0 4px rgba(110, 192, 64, 0.3);
}

[data-theme="dark"] .score-delta.negative {
  color: #e05858;
  text-shadow: 0 0 4px rgba(224, 88, 88, 0.3);
}

/* Personality cards */
[data-theme="dark"] .personality-card {
  background: #1e1e38;
  border-color: #3a3a60;
}

/* Story tab */
[data-theme="dark"] .story-event {
  background: #1a1a30;
  border-color: #2a2a48;
}

[data-theme="dark"] .story-event:hover {
  background: #222240;
}

/* Comeback alerts */
[data-theme="dark"] .comeback-toast {
  background: linear-gradient(135deg, #2a1a00, #1a1a30);
  border-color: #eab830;
}

/* Rivalry bars */
[data-theme="dark"] .rivalry-bar-bg {
  background: #16162a;
}

/* Achievement badges */
[data-theme="dark"] .achievement-badge {
  background: #1e1e38;
  border-color: #3a3a60;
}

[data-theme="dark"] .achievement-badge.unlocked {
  border-color: #eab830;
  background: #262638;
}

/* Season countdown */
[data-theme="dark"] .season-progress-bar {
  background: #16162a;
}

/* Hall of fame */
[data-theme="dark"] .hall-of-fame-entry {
  background: #1e1e38;
  border-color: #3a3a60;
}

/* Share cards — keep light background for contrast */
[data-theme="dark"] .share-card-preview {
  /* Share cards keep their own gradient styling */
}

/* Push notification bell */
[data-theme="dark"] .notification-bell {
  color: #a09878;
}

[data-theme="dark"] .notification-bell.active {
  color: #eab830;
}

/* Dark mode toggle button */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, transform 0.2s;
  margin-left: 8px;
}

.dark-mode-toggle:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

[data-theme="dark"] .dark-mode-toggle {
  background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .dark-mode-toggle:hover {
  background: rgba(255,255,255,0.15);
}

/* Smooth transition for theme switching */
body,
#header,
#sidebar,
.tab-bar,
.tab-btn,
.agent-card,
.leaderboard-entry,
.chat-message,
.activity-entry,
.building-tooltip,
input[type="text"],
select,
.wood-btn {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Mobile dark mode adjustments */
@media (max-width: 768px) {
  .dark-mode-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
    min-width: 36px;
  }
}