/**
 * Sudoku Engine - Master Theme-Proof Stylesheet
 * High specificity & CSS reset overrides to prevent conflicts with Tailwind / Bootstrap / Theme resets.
 */

:root {
  --sdk-primary: #0284c7;
  --sdk-primary-hover: #0369a1;
  --sdk-primary-light: #e0f2fe;
  --sdk-danger: #dc2626;
  --sdk-danger-light: #fee2e2;
  --sdk-warning: #f59e0b;
  --sdk-warning-light: #fef3c7;
  --sdk-success: #16a34a;
  --sdk-success-light: #dcfce7;
  --sdk-board-border: #0f172a;
  --sdk-cell-bg: #ffffff;
  --sdk-cell-given: #f8fafc;
  --sdk-cell-selected: #fef08a;
  --sdk-cell-peer: #f0f9ff;
  --sdk-cell-same: #bae6fd;
}

/* Master Container */
.sdk-page-container {
  width: 100% !important;
  max-width: 860px !important;
  margin: 30px auto 60px !important;
  padding: 0 16px 40px !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #1e293b !important;
}

/* Breadcrumb */
.sdk-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
  padding: 0 2px !important;
}

.sdk-breadcrumb a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.sdk-breadcrumb a:hover {
  color: #0284c7 !important;
}

.sdk-breadcrumb .sep {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

.sdk-breadcrumb .current {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Date Navigation Bar */
.sdk-date-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.sdk-date-title-group h1 {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

.sdk-date-subtitle {
  font-size: 0.875rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sdk-date-nav-links {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.sdk-nav-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

.sdk-nav-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Difficulty Badges */
.sdk-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  line-height: 1.2 !important;
}

.sdk-badge-easy { background: #dcfce7 !important; color: #15803d !important; }
.sdk-badge-medium { background: #fef3c7 !important; color: #b45309 !important; }
.sdk-badge-hard { background: #fee2e2 !important; color: #b91c1c !important; }

/* Toolbar */
.sdk-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.sdk-stats-group {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.sdk-stat-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sdk-stat-label {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}

.sdk-stat-value {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
}

.sdk-actions-group {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.sdk-tool-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
}

.sdk-tool-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Board Wrapper */
.sdk-board-box {
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
}

/* 9x9 Board CSS Grid */
.sdk-board {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  grid-template-rows: repeat(9, 1fr) !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #0f172a !important;
  gap: 1px !important;
  border: 3px solid #0f172a !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Cells */
.sdk-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.12s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 3x3 Major Grid Box Dividers */
.sdk-cell[data-col="2"],
.sdk-cell[data-col="5"] {
  border-right: 3px solid #0f172a !important;
}

.sdk-cell[data-row="2"],
.sdk-cell[data-row="5"] {
  border-bottom: 3px solid #0f172a !important;
}

/* Cell Main Digit */
.sdk-cell-val {
  font-size: clamp(1.25rem, 4.2vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Cell States */
.sdk-cell--given {
  background-color: #f8fafc !important;
  cursor: default !important;
}

.sdk-cell--given .sdk-cell-val {
  color: #0f172a !important;
  font-weight: 900 !important;
}

.sdk-cell--user .sdk-cell-val {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.sdk-cell--selected {
  background-color: #fef08a !important;
  outline: 3px solid #eab308 !important;
  z-index: 5 !important;
}

.sdk-cell--peer {
  background-color: #f0f9ff !important;
}

.sdk-cell--same-digit {
  background-color: #bae6fd !important;
}

.sdk-cell--conflict {
  background-color: #fee2e2 !important;
}

.sdk-cell--conflict .sdk-cell-val {
  color: #ef4444 !important;
}

.sdk-cell--incorrect {
  background-color: #fecaca !important;
}

.sdk-cell--incorrect .sdk-cell-val {
  color: #dc2626 !important;
}

/* Mini Pencil Notes Grid (3x3 inside empty cell) */
.sdk-notes-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.sdk-note-num {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.55rem, 1.6vw, 0.75rem) !important;
  font-weight: 700 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

/* Numpad & Controls Container */
.sdk-numpad-container {
  max-width: 520px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.sdk-numpad-digits {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.sdk-pad-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1.1 !important;
  max-height: 52px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.12s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  font-family: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sdk-pad-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: translateY(-1px) !important;
}

.sdk-pad-btn:active {
  background: #e2e8f0 !important;
  transform: translateY(0) !important;
}

.sdk-numpad-controls {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.sdk-control-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  font-family: inherit !important;
  text-align: center !important;
}

.sdk-control-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.sdk-control-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

/* Archive List Section */
.archive-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-top: 36px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.archive-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.archive-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.archive-link {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.archive-link:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.archive-link.is-active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* Success Modal */
.sdk-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.sdk-modal-backdrop.show {
  display: flex !important;
  animation: sdk-fade-in 0.25s ease !important;
}

.sdk-modal {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  max-width: 440px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
  animation: sdk-scale-up 0.25s ease !important;
}

.sdk-modal-icon {
  font-size: 3.5rem !important;
  margin-bottom: 12px !important;
}

.sdk-modal h2 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
}

.sdk-modal p {
  color: #64748b !important;
  font-size: 0.95rem !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.5 !important;
}

.sdk-modal-stats {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-bottom: 24px !important;
}

.sdk-modal-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.sdk-modal-btn {
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  display: block !important;
  text-align: center !important;
}

.sdk-modal-btn-primary {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.sdk-modal-btn-primary:hover {
  background: #0369a1 !important;
  color: #ffffff !important;
}

.sdk-modal-btn-light {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.sdk-modal-btn-light:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Animations */
@keyframes sdk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sdk-scale-up {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] .sdk-page-container,
[data-theme="dark"] .sdk-page-container,
.theme-dark .sdk-page-container {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] .sdk-date-nav,
[data-bs-theme="dark"] .sdk-toolbar,
[data-bs-theme="dark"] .sdk-board-box,
[data-bs-theme="dark"] .archive-section,
[data-bs-theme="dark"] .sdk-modal,
[data-theme="dark"] .sdk-date-nav,
[data-theme="dark"] .sdk-toolbar,
[data-theme="dark"] .sdk-board-box,
[data-theme="dark"] .archive-section,
[data-theme="dark"] .sdk-modal,
.theme-dark .sdk-date-nav,
.theme-dark .sdk-toolbar,
.theme-dark .sdk-board-box,
.theme-dark .archive-section,
.theme-dark .sdk-modal {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-bs-theme="dark"] .sdk-date-title-group h1,
[data-bs-theme="dark"] .sdk-stat-value,
[data-bs-theme="dark"] .archive-title,
[data-bs-theme="dark"] .sdk-modal h2,
[data-theme="dark"] .sdk-date-title-group h1,
[data-theme="dark"] .sdk-stat-value,
[data-theme="dark"] .archive-title,
[data-theme="dark"] .sdk-modal h2,
.theme-dark .sdk-date-title-group h1,
.theme-dark .sdk-stat-value,
.theme-dark .archive-title,
.theme-dark .sdk-modal h2 {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] .sdk-cell,
[data-theme="dark"] .sdk-cell,
.theme-dark .sdk-cell {
  background: #0f172a !important;
}

[data-bs-theme="dark"] .sdk-cell--given,
[data-theme="dark"] .sdk-cell--given,
.theme-dark .sdk-cell--given {
  background: #1e293b !important;
}

[data-bs-theme="dark"] .sdk-cell--given .sdk-cell-val,
[data-theme="dark"] .sdk-cell--given .sdk-cell-val,
.theme-dark .sdk-cell--given .sdk-cell-val {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] .sdk-cell--peer,
[data-theme="dark"] .sdk-cell--peer,
.theme-dark .sdk-cell--peer {
  background: #1e3a5f !important;
}

[data-bs-theme="dark"] .sdk-cell--same-digit,
[data-theme="dark"] .sdk-cell--same-digit,
.theme-dark .sdk-cell--same-digit {
  background: #0369a1 !important;
}

[data-bs-theme="dark"] .sdk-pad-btn,
[data-bs-theme="dark"] .sdk-control-btn,
[data-bs-theme="dark"] .sdk-nav-btn,
[data-bs-theme="dark"] .sdk-tool-btn,
[data-bs-theme="dark"] .archive-link,
[data-theme="dark"] .sdk-pad-btn,
[data-theme="dark"] .sdk-control-btn,
[data-theme="dark"] .sdk-nav-btn,
[data-theme="dark"] .sdk-tool-btn,
[data-theme="dark"] .archive-link,
.theme-dark .sdk-pad-btn,
.theme-dark .sdk-control-btn,
.theme-dark .sdk-nav-btn,
.theme-dark .sdk-tool-btn,
.theme-dark .archive-link {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

[data-bs-theme="dark"] .sdk-pad-btn:hover,
[data-bs-theme="dark"] .sdk-control-btn:hover,
[data-bs-theme="dark"] .sdk-nav-btn:hover,
[data-bs-theme="dark"] .sdk-tool-btn:hover,
[data-bs-theme="dark"] .archive-link:hover,
[data-theme="dark"] .sdk-pad-btn:hover,
[data-theme="dark"] .sdk-control-btn:hover,
[data-theme="dark"] .sdk-nav-btn:hover,
[data-theme="dark"] .sdk-tool-btn:hover,
[data-theme="dark"] .archive-link:hover,
.theme-dark .sdk-pad-btn:hover,
.theme-dark .sdk-control-btn:hover,
.theme-dark .sdk-nav-btn:hover,
.theme-dark .sdk-tool-btn:hover,
.theme-dark .archive-link:hover {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-color: #0284c7 !important;
}