/* ========================= */
/*       COLOR VARIABLES     */
/* ========================= */

/* Primary Colors */
:root {
  --green: #4caf50; /* Primary Green */
  --green-4: #388e3c; /* Darker Green */
  --beta-blue: #2196f3; /* Blue Tone */

  /* Grayscale */
  --gray-1: #f0f0f0; /* Light Gray */
  --gray-2: #e0e0e0; /* Medium Gray */
  --gray-3: #bdbdbd; /* Dark Gray */
  --gray-4: #9e9e9e; /* Darker Gray */
  --gray-5: #616161; /* Deep Gray */
  --white: #ffffff; /* White */
  --black: #000000; /* Black */

  /* Accent Colors */
  --yellow: #ffeb3b; /* Yellow Tone */
  --yellow-4: #fbc02d; /* Dark Yellow */
  --red: #f44336; /* Warning Red */
  --blue: #1e88e5; /* Default Blue */

  /* Background Colors */
  --background-light: #ffffff; /* Light Background */
  --background-dark: #121212; /* Dark Background */
  --background-gray: #f2f2f2; /* Neutral Background */

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);

  /* Text Colors */
  --text-primary: #212121;
  --text-secondary: #757575;

  /* Borders */
  --border-light: #e0e0e0;
  --border-dark: #424242;
}

/* Dark Theme Colors */
.dark {
  --green: #388e3c; /* Adjusted Green for Dark Theme */
  --yellow: #fbc02d; /* Adjusted Yellow for Dark Theme */
  --red: #d32f2f; /* Adjusted Red for Dark Theme */
  --background: #121212; /* Darker Background */
  --text-color: #e0e0e0; /* Light Text on Dark */
  --border-color: #616161; /* Border in Dark Mode */
  --shadow-medium: rgba(255, 255, 255, 0.1);
}

/* ========================= */
/*       GLOBAL STYLES       */
/* ========================= */

/* General Styling */
body {
  font-family: Arial, sans-serif;
  background: var(--background-gray);
  margin: 0; 
  padding: 0;
}

header {
  background: var(--background-dark);
  color: var(--white);
  padding: 0.5rem;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 1rem;
  background: var(--white);
  box-shadow: 0 0 5px var(--shadow-light);
}

/* Search Box */
.search-box {
  position: relative;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.search-box input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1rem;
}

.search-box button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 5px;
}

.search-box button:hover {
  background: var(--yellow);
}

/* Suggestions Dropdown */
.suggestions {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--gray-2);
  box-shadow: 0 4px 8px var(--shadow-medium);
  z-index: 100;
}

.suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.suggestions li {
  padding: 0.5rem;
  cursor: pointer;
}

.suggestions li:hover {
  background: var(--gray-1);
}

/* Result Message */
p#resultMessage {
  margin-top: 0;
  color: var(--red);
}

/* Table Styling */
table {
  border-collapse: separate;
  border-spacing: 0.25rem;
  width: 100%;
  margin-top: 1rem;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-radius: 0.5rem;
  margin: 1rem;
}

th {
  background: var(--gray-1);
  border-radius: 0;
}

td {
  box-shadow: 0 2px 4px var(--shadow-light);
}

/* Cell Colors */
.cell-red {
  background-color: var(--red);
  color: var(--white);
}

.cell-yellow {
  background-color: var(--yellow);
  color: var(--black);
}

.cell-green {
  background-color: var(--green);
  color: var(--white);
}

/* Special Effects */
.special-green {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--green);
  border: 1px solid var(--green-4);
  color: var(--white);
  font-weight: bold;
  box-shadow: 0 2px 4px var(--shadow-medium);
}

.special-red {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  font-weight: bold;
  box-shadow: 0 2px 4px var(--shadow-medium);
}

/* Share Button */
#shareButton {
  background-color: var(--green);
  color: var(--white);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#shareButton:hover {
  background-color: var(--yellow);
}

#revealButton {
  background-color: var(--blue);
  color: var(--white);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#revealButton:hover {
  background-color: var(--beta-blue);
}

/* Disabled Hint Button */
#hintButton:disabled {
  background-color: var(--gray-2);
  color: var(--gray-4);
  cursor: not-allowed;
  opacity: 0.5;
}

#hintButton:enabled {
  background-color: var(--blue);
  color: var(--white);
  cursor: pointer;
  opacity: 1;
}


/* Timer Section */
#timerSection {
  font-size: 1.25rem;
  color: var(--text-primary);
}

#guesshintDiv {
  height:4rem;
  align-content: center;
}

/* Dark Theme Overrides */
.dark body {
  background: var(--background);
  color: var(--text-color);
}

.dark header {
  background: var(--gray-3);
  color: var(--white);
}

.dark .container {
  background: var(--gray-5);
  box-shadow: 0 0 5px var(--shadow-medium);
}

.dark .suggestions {
  background: var(--gray-4);
  border: 1px solid var(--border-color);
}

.dark .suggestions li:hover {
  background: var(--yellow);
}

.dark .cell-red {
  background-color: var(--red);
  color: var(--white);
}

.dark .cell-yellow {
  background-color: var(--yellow-4);
  color: var(--black);
}

.dark .cell-green {
  background-color: var(--green-4);
  color: var(--white);
}