/* 🌠 Planets of Richmack – Semi-Dark Cosmic Theme */

body {
  background-color: #0d1117;
  color: #f8f9fa;
  font-family: 'Raleway', sans-serif;
}

.card-semidark {
  background-color: #1b1f24 !important;
  border: 1px solid #2a2f36 !important;
  color: #f8f9fa !important;
  border-radius: 0.75rem;
}

.card-semidark .card-title {
  color: #ffffff;
  font-weight: 600;
}

.form-control-dark {
  background-color: #21262d !important;
  color: #f8f9fa !important;
  border: 1px solid #30363d !important;
}
.form-control-dark:focus {
  border-color: #58a6ff !important;
  box-shadow: 0 0 0 0.1rem rgba(88,166,255,.25);
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-outline-light:hover {
  background-color: #f8f9fa;
  color: #0d1117;
}

.btn-outline-warning {
  border-color: #ffc107;
  color: #ffc107;
}
.btn-outline-warning:hover {
  background-color: #ffc107;
  color: #0d1117;
}

/* 🌗 Text Brightness Fixes */
.text-bright,
.card-body,
ul li,
p {
  color: #f8f9fa !important;
}

.text-phase {
  color: #f5f5f5 !important;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.phase-percent {
  color: #9ae6ff !important;
  font-weight: 600;
}
.text-info {
  color: #9ae6ff !important;
}

/* 🌙 Harmony / Conflict Matrix Dark Mode */
#matrix table {
  background-color: #121212 !important;
  border-color: #222 !important;
  color: #f8f9fa !important;
}

#matrix th,
#matrix td {
  color: #f5f5f5 !important;
  border-color: #2a2a2a !important;
  text-align: center;
  vertical-align: middle;
}

/* ✨ Harmonize cells */
.table-harmonize {
  background-color: rgba(34, 139, 34, 0.25) !important;
  color: #c9f9c9 !important;
  border-color: #1b3d1b !important;
}

/* ⚡ Conflict cells */
.table-harm {
  background-color: rgba(139, 0, 0, 0.3) !important;
  color: #ffb4b4 !important;
  border-color: #3d1b1b !important;
}

/* · Neutral cells */
.table-neutral {
  background-color: rgba(90, 90, 90, 0.25) !important;
  color: #d1d1d1 !important;
  border-color: #333 !important;
}

/* Hover & Transition */
#matrix table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.2s ease;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .card-semidark {
    padding: 0.5rem;
  }
  h5.card-title, h4.card-title {
    font-size: 1.1rem;
  }
  table.table-sm th, table.table-sm td {
    font-size: 0.8rem;
    padding: 0.35rem;
  }
}