/**
 * Noggle Dark Mode Styling
 * Toggle switch component and dark theme UI overrides
 * Semantic colors and variables defined in tokens.css
 */

/* ===== TOGGLE SWITCH COMPONENT ===== */

.theme-toggle-wrapper {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  border-radius: 24px;
  transition: all 0.3s ease;
}

.theme-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Sun icon (light mode) - centered on white circle using SVG */
.theme-toggle-slider::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f59e0b"><circle cx="12" cy="12" r="4"/><path stroke="%23f59e0b" stroke-width="1" stroke-linecap="round" fill="none" d="M12 3.5v3m0 11v3M6.1 6.1l2.1 2.1m7.6 7.6l2.1 2.1M3.5 12h3m11 0h3M6.1 17.9l2.1-2.1m7.6-7.6l2.1-2.1"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Moon icon (dark mode) - centered on white circle when toggled using SVG */
.theme-toggle-input:checked + .theme-toggle-slider::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fbbf24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>');
  left: 27px;
}

.theme-toggle-input:checked + .theme-toggle-slider {
  background-color: var(--accent-teal);
}

.theme-toggle-input:checked + .theme-toggle-slider::before {
  transform: translateX(24px);
}

.theme-toggle-input:focus + .theme-toggle-slider {
  outline: none;
}

/* ===== DARK MODE UI OVERRIDES ===== */

/* Body and main container */
[data-theme="dark"] body {
  background: var(--background) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .main-container {
  background-color: var(--surface) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Title bar */
[data-theme="dark"] .title-bar {
  background: var(--salmon-accent-dark) !important;
  color: #f0f0f0 !important;
}

[data-theme="dark"] .title-bar a {
  color: #f0f0f0 !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .title-bar a:hover {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
}

/* Instruction bar */
[data-theme="dark"] .instruction-bar {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .instruction-left,
[data-theme="dark"] .instruction-center,
[data-theme="dark"] .instruction-right {
  color: #ffffff !important;
}

/* Game board section */
[data-theme="dark"] .game-board {
  background-color: transparent !important;
}

/* Table */
[data-theme="dark"] table {
  background: var(--surface) !important;
}

/* Table cells - sage-tinted borders */
[data-theme="dark"] td {
  background-color: #1a1a1a;
  color: #e8e8e8 !important;
  border: 0.5px solid var(--cell-border-dark) !important;
}

[data-theme="dark"] td:hover {
  background-color: #2a3a2a;
}

/* Table header cells */
[data-theme="dark"] th {
  border: 0.5px solid var(--cell-border-dark) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] th.category-header {
  color: #f0f0f0 !important;
}

/* Category separator borders */
[data-theme="dark"] td.border-right,
[data-theme="dark"] th.border-right,
[data-theme="dark"] .grey-cell.border-right,
[data-theme="dark"] .grey-cell-vert.border-right {
  border-right: 2px solid var(--cell-separator-dark) !important;
}

[data-theme="dark"] td.border-bottom,
[data-theme="dark"] th.border-bottom,
[data-theme="dark"] .grey-cell.border-bottom,
[data-theme="dark"] .grey-cell-vert.border-bottom {
  border-bottom: 2px solid var(--cell-separator-dark) !important;
}

/* Cell states */
[data-theme="dark"] td.state-empty {
  background-color: var(--surface) !important;
}

[data-theme="dark"] td.state-cross {
  background-color: #2a1a1a !important;
}

[data-theme="dark"] td.state-cross::after {
  color: var(--cat1-dark) !important;
}

[data-theme="dark"] td.state-check {
  background-color: #1a2a1a;
}

[data-theme="dark"] td.state-check::after {
  color: var(--cat2-dark) !important;
}

[data-theme="dark"] td.state-soft-cross {
  background-color: #2a1a1a !important;
}

[data-theme="dark"] td.state-soft-cross::after {
  color: var(--cat1-dark) !important;
  opacity: 0.5;
}

/* Scored cell marks - white for contrast against colored backgrounds */
[data-theme="dark"] td[data-scoring-color="green"]::after {
  color: #ffffff !important;
}

[data-theme="dark"] td[data-scoring-color="red"]::after {
  color: #ffffff !important;
}

/* Top-left corner */
[data-theme="dark"] .topLeftSquare {
  background: var(--surface-elevated) !important;
  border-color: var(--cell-border-dark) !important;
}

/* Grey cells - background and border only; category color rules handle text */
[data-theme="dark"] .grey-cell,
[data-theme="dark"] .grey-cell-vert {
  background-color: var(--surface-elevated) !important;
  border: 0.5px solid var(--cell-border-dark) !important;
}

/* Column header text - improved readability */
[data-theme="dark"] .grey-cell-vert text {
  font-weight: 600 !important;
}

/* Category text colors - dark mode optimized for contrast */
[data-theme="dark"] .cat1Text { color: var(--cat1-dark) !important; }
[data-theme="dark"] .cat2Text { color: var(--cat2-dark) !important; }
[data-theme="dark"] .cat3Text { color: var(--cat3-dark) !important; }
[data-theme="dark"] .cat4Text { color: var(--cat4-dark) !important; }

/* Category header SVG fills */
[data-theme="dark"] text.cat1Header { fill: var(--cat1-dark); }
[data-theme="dark"] text.cat2Header { fill: var(--cat2-dark); }
[data-theme="dark"] text.cat3Header { fill: var(--cat3-dark); }
[data-theme="dark"] text.cat4Header { fill: var(--cat4-dark); }

/* Clue close buttons */
[data-theme="dark"] #infoContainer button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Button container */
[data-theme="dark"] .button-container {
  background-color: transparent !important;
}

/* Buttons */
[data-theme="dark"] .button1 {
  background-color: var(--sage-accent-dark) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .button1:hover {
  background-color: var(--accent-teal-dark) !important;
}

[data-theme="dark"] .button2,
[data-theme="dark"] .button4 {
  background-color: #3a3a3a !important;
  color: #e8e8e8 !important;
  border: none !important;
}

[data-theme="dark"] .button2:hover,
[data-theme="dark"] .button4:hover {
  background-color: #4a4a4a !important;
}

[data-theme="dark"] .button3 {
  background-color: var(--accent-orange-dark) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .button3:hover {
  background-color: #db7700 !important;
}

[data-theme="dark"] .button5 {
  background-color: var(--accent-teal) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .button5:hover {
  background-color: var(--accent-teal-dark) !important;
}

/* Tutorial window */
[data-theme="dark"] .tutorial-window {
  background-color: var(--surface) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .tutorial-title-bar {
  background-color: var(--salmon-accent-dark) !important;
  color: #f0f0f0 !important;
}

[data-theme="dark"] .tutorial-content {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .closeButton {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
  color: #f0f0f0 !important;
}

[data-theme="dark"] .closeButton:hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .next-button {
  background-color: var(--accent-teal) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .next-button:hover {
  background-color: var(--accent-teal-dark) !important;
}

/* Score container */
[data-theme="dark"] #scores {
  color: var(--text-primary) !important;
}

/* Info container (clues section) */
[data-theme="dark"] #infoContainer {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #infoContainer h2 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #infoContainer li {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #infoContainer a {
  color: var(--sage-accent-dark) !important;
}

/* Calendar */
[data-theme="dark"] #show-calendar-btn {
  background-color: #2563eb !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] #show-calendar-btn:hover {
  background-color: #1e40af !important;
}

[data-theme="dark"] #calendar-container {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .day {
  background-color: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .day:hover {
  background-color: #2a2a2a !important;
}

[data-theme="dark"] .other-month {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .completed {
  background-color: var(--highlight-yellow) !important;
  border-color: var(--gold) !important;
}

[data-theme="dark"] .current-day {
  border-color: var(--cat4-dark) !important;
}

/* Toast notification - light background for contrast */
[data-theme="dark"] .toast {
  background-color: #f5f5f5;
  color: #1a1a1a;
  border: 1px solid #d0d0d0;
}

/* Fallback modals */
[data-theme="dark"] .fallback-modal.random-puzzle,
[data-theme="dark"] .fallback-modal.error-message {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
}

[data-theme="dark"] .fallback-card {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fallback-card h2 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .fallback-card p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .fallback-card p.subtext {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .fallback-card.error h2 {
  color: var(--salmon-accent-dark) !important;
}

/* ===== TABLE CORNER ROUNDING ===== */
/* Applied to both themes - only round outer corners, not category separators */
table tr:first-child > :first-child:not(.border-bottom):not(.border-right) {
  border-top-left-radius: 8px;
}
table tr:first-child > :last-child:not(.border-bottom):not(.border-right) {
  border-top-right-radius: 8px;
}
table tr:last-child > :first-child:not(.border-bottom):not(.border-right) {
  border-bottom-left-radius: 8px;
}
table tr:last-child > :last-child:not(.border-bottom):not(.border-right) {
  border-bottom-right-radius: 8px;
}