/* CSS Custom Properties for Theme Management */
:root {
  /* Dark Theme (Default) */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2c2c2c;
  --text-primary: #ddd;
  --text-secondary: #eee;
  --text-placeholder: #df9c9c;
  --text-placeholder-optional: #949494;
  --text-inactive: #777;
  --text-inactive-today: #aaa;
  --border-color: #555;
  --border-divider: #333;
  --hover-bg: #444;
  --accent-primary: #41ad72;
  --accent-secondary: #36755b;
  --accent-tertiary: #2e5e47;
  --snake-body: #236138;
  --snake-head: #318356;
  --today-bg: #657ec9;
  --selected-today: rgb(106, 186, 197);
  --nav-icon: #aeabab;
}

/* Light Theme */
[data-theme="light"] {
  --bg-primary: #f5f7fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8f9fa;
  --text-primary: #2c3e50;
  --text-secondary: #34495e;
  --text-placeholder: #e74c3c;
  --text-placeholder-optional: #7f8c8d;
  --text-inactive: #bdc3c7;
  --text-inactive-today: #95a5a6;
  --border-color: #ddd;
  --border-divider: #e9ecef;
  --hover-bg: #e9ecef;
  --accent-primary: #27ae60;
  --accent-secondary: #219a52;
  --accent-tertiary: #1e8449;
  --snake-body: #1e8449;
  --snake-head: #27ae60;
  --today-bg: #3498db;
  --selected-today: #5dade2;
  --nav-icon: #7f8c8d;
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Light theme specific enhancements */
[data-theme="light"] .theme-toggle {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .calendar-container,
[data-theme="light"] .form-container {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .footer {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.theme-toggle:hover {
  transform: scale(1.1);
  background: var(--accent-primary);
}

.theme-toggle .material-symbols-rounded {
  font-size: 20px;
  color: var(--accent-primary);
  transition: all 0.3s ease;
  pointer-events: none; /* Prevents icon from interfering with button hover */
}

.theme-toggle:hover .material-symbols-rounded {
  color: var(--bg-secondary);
}

/* Base Styles with smooth transitions */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Font Face */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  src: url("font.woff2") format("woff2");
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* Shared Container Styles */
.calendar-container,
.form-container,
.email-container {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 20px; /* Inner spacing */
  height: 500px; /* Fixed height for all containers */
  width: 400px; /* Fixed width to prevent resizing */
  display: flex;
  flex-direction: column; /* Vertical stacking of child elements */
  margin: 0 10px; /* Horizontal spacing between containers */
  z-index: 2;
  gap: 15px; /* Consistent vertical spacing */
}

/* Container-specific layout adjustments */
.calendar-container {
  justify-content: flex-start;
}

.form-container {
  justify-content: flex-start;
}

/* Unified h3 styles for all containers */
.calendar-container h3,
.form-container h3,
.email-container h3 {
  color: var(--text-primary);
  margin: 0;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 500;
}

.outerContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Main content wrapper */
.main-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 20px; /* Space between content and footer */
}

/* Calendar Container Specific Styles */
.calendar-container header {
  display: flex;
  align-items: center;
  padding: 10px 15px; /* Adjusted padding for better spacing */
  justify-content: space-between;
  border-bottom: 1px solid var(--border-divider);
  width: 100%; /* Ensures header spans the full width of the container */
  margin: 0;
}

.calendar-navigation {
  display: flex;
  gap: 10px; /* Adds space between navigation buttons */
  flex-shrink: 0; /* Prevent navigation from shrinking */
}

.calendar-navigation span,
.input-container span {
  height: 38px;
  width: 38px;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
  user-select: none;
  color: var(--nav-icon);
  font-size: 1.9rem;
  transition: background 0.3s, color 0.3s;
  display: flex; /* Centers icon vertically and horizontally */
  align-items: center;
  justify-content: center;
}

span:last-child {
  margin-right: 0; /* Removed negative margin for better alignment */
}

span:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

header .calendar-current-date {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text-primary);
  text-align: center; /* Centers the current date text */
  flex: 1; /* Takes up available space but maintains consistent width */
  white-space: nowrap; /* Prevents text wrapping to maintain layout */
  min-width: 0; /* Allow text to shrink if needed */
}

.calendar-body {
  padding: 0;
  width: 100%; /* Ensures calendar body spans the full width */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.calendar-body ul {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  text-align: center;
  padding: 0;
  margin: 0;
}

.calendar-body .calendar-weekdays {
  padding: 10px 0 5px 0;
}

.calendar-body .calendar-dates {
  flex-grow: 1;
  align-content: flex-start;
}

.calendar-body li {
  width: calc(100% / 7);
  font-size: 1.07rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px; /* Ensures uniform height for each date */
}

.calendar-body .calendar-weekdays li {
  cursor: default;
  font-weight: 500;
}

.calendar-body .calendar-dates li {
  margin: 2px 0; /* Consistent vertical spacing */
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.calendar-dates li.inactive {
  color: var(--text-inactive);
}

.calendar-dates li.inactive#today {
  color: var(--text-inactive-today);
}

.calendar-dates li.active {
  color: var(--text-secondary);
}

.calendar-dates li#today::before {
  background: var(--today-bg);
}

.calendar-dates li::before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.calendar-dates li.selected::before {
  background: var(--accent-primary);
}
.calendar-dates li.selected#today::before {
  background: var(--selected-today);
}
.calendar-dates li.selected#head::before {
  background: var(--snake-head);
}

.calendar-dates li.active:not(.selected):hover::before {
  background: var(--hover-bg);
}

#snake::before {
  background: var(--snake-body);
  width: 25px;
  height: 25px;
}

#head::before {
  background: var(--snake-head);
  width: 30px;
  height: 30px;
}

#fruit::before {
  background: var(--today-bg);
  width: 25px;
  height: 25px;
}

.distance-info {
  width: 100%; /* Fill the parent container */
  display: flex;
  justify-content: center; /* Center content vertically */
  align-items: center;
  flex-direction: column;
  gap: 8px; /* Consistent spacing between elements */
  flex-grow: 1; /* Allow it to grow within parent */
}

.input-container {
  display: flex;
  width: 100%; /* Utilize full width of the parent */
  align-items: center; /* Vertically centers the items */
  gap: 10px; /* Adds space between input elements */
  margin: 0; /* Remove margins, use parent gap instead */
}

/* Text input */
input[type="text"] {
  border: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
  border-radius: 5px;
  font-size: 1.1rem;
  height: 40px;
  text-align: left;
  width: 100%;
  color: var(--text-secondary);
  padding: 0 10px; /* Added horizontal padding to prevent text from touching sides */
}

input[type="text"]::placeholder {
  color: var(--text-placeholder);
}

/* for the iban the color of the placeholder can be #eee since it's optional */
input[type="text"]#iban::placeholder {
  color: var(--text-placeholder-optional);
}

/* Button */
.send-button {
  background: var(--accent-secondary);
  color: var(--text-secondary);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  margin: 5px 0 0 0; /* Reduced top margin */
  text-align: center;
  width: 60%;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.send-button:hover:not(:disabled) {
  background: var(--accent-tertiary);
}

.send-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Email Container Specific Styles */
.email-container {
  justify-content: flex-start;
  gap: 10px; /* Specific gap for email container */
}

#email-template {
  width: 100%;
  min-height: 280px;
  padding: 15px;
  border: 1px solid var(--border-divider);
  border-radius: 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  resize: vertical;
  box-sizing: border-box;
  flex-grow: 1;
}

#email-template:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.email-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.copy-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-secondary);
  color: var(--text-secondary);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  align-self: flex-start;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.copy-button:hover:not(:disabled) {
  background: var(--accent-tertiary);
}

.copy-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.copy-button .material-symbols-rounded {
  font-size: 20px;
}

/* Light theme specific override for copy button text color */
[data-theme="light"] .copy-button {
  color: #ffffff;
}

.copy-feedback {
  color: var(--accent-primary);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Upload button styles */
#upload-office-days-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--nav-icon);
  height: 38px;
  width: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-size: 1.9rem;
}

#upload-office-days-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

#upload-office-days-btn .material-symbols-rounded {
  font-size: 20px;
  pointer-events: none;
}

/* Footer styles */
.footer {
  background: var(--bg-secondary);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
}

.footer-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.footer-content p {
  font-size: 1rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  margin: 5px;
}

.footer-content a.github-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 500;
  margin: 5px;
}

.footer-content a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-content a:hover {
  color: var(--accent-secondary);
}

.footer-content a.github-link:hover {
  color: var(--accent-secondary);
}

.github-logo {
  width: 20px;
  height: 20px;
  fill: var(--accent-primary);
  transition: fill 0.3s;
}

.tail {
  position: relative;
  top: 160px;
  left: 20px;
  width: 70px;
  height: 70px;
  fill: var(--accent-primary);
  transition: fill 0.3s, transform 1s;
  z-index: 1;
}

/* Make it a fun font for snake game */
.gameTitle {
  font-size: 3.5rem;
  color: var(--bg-primary);
  margin: 5px;
  font-family: "Hachi Maru Pop", cursive;
  font-weight: bold;
  transition: all 0.3s;
}

.gameTitleContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.move-right {
  transform: translateX(100px);
}

.move-left {
  transform: translateX(-100px);
}

.move-up {
  transform: translateY(-100px);
  color: var(--accent-primary);
}

.move-down {
  transform: translateY(100px);
}

.github-link:hover .github-logo {
  fill: var(--accent-secondary);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    align-items: center; /* Center containers horizontally */
    margin-bottom: 20px; /* Optional: adjust spacing if needed */
  }

  .calendar-container,
  .form-container,
  .email-container {
    width: 100%; /* Full width on mobile */
    max-width: 400px; /* But don't exceed the desktop width */
    margin: 10px auto; /* Center and add vertical spacing */
    height: auto; /* Allow height to adjust based on content */
    padding: 15px; /* Reduce padding on smaller screens */
    z-index: 2; /* Ensure containers are above the footer */
  }

  .calendar-body ul {
    padding: 5px 0; /* Reduce vertical spacing */
  }

  .calendar-body li {
    font-size: 0.9rem; /* Adjust font size for dates */
    height: 35px; /* Adjust height for dates */
  }

  input[type="text"] {
    font-size: 1rem; /* Adjust input font size */
    height: 35px; /* Adjust input height */
  }

  .send-button {
    font-size: 1rem; /* Adjust button font size */
    padding: 8px 16px; /* Adjust button padding */
    width: 80%; /* Adjust button width */
  }

  .calendar-container h3,
  .form-container h3,
  .email-container h3 {
    font-size: 1.1rem;
  }

  #email-template {
    font-size: 0.9rem;
    min-height: 200px;
  }

  .copy-button {
    font-size: 0.95rem;
    padding: 8px 16px;
  }

  .footer {
    position: relative; /* Remove absolute positioning */
    bottom: 0;
    margin-top: 20px; /* Add space above footer */
  }
}