/* Root color variables */
:root {
  --primary-color: #bfadea;
  --secondary-color: #302942;
  --background-color: #171320;
  --text-color: #FFFFFF;
  --accent-text-color: #171320;
  --secondary-text-color: #a393c8;
  --input-background-color: #2f2447;
}

/* Base Styles */
body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans', sans-serif;
  background: var(--background-color);
  color: var(--text-color);
  min-height: 100vh;
  margin: 0;
}

.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
header, .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--secondary-color);
  padding: 1.5rem 2rem;
  background: transparent;
}

.logo-group, .logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: -1px;
  color: var(--text-color);
}

.logo-icon {
  height: 1.2em; /* Relative to parent font-size, makes it ~2.4rem */
  width: auto;   /* Maintain aspect ratio */
  object-fit: contain; /* Ensure logo scales well */
}

.login-btn, .signup-btn {
  min-width: 100px;
  height: 40px;
  background: var(--secondary-color);
  color: var(--text-color);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  box-sizing: border-box; /* Added for consistent sizing */
}
.login-btn:hover, .signup-btn:hover {
  background: #463a5e;
}

.get-started-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 120px;
  height: 48px;
  background: var(--primary-color);
  color: var(--accent-text-color);
  border: none;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0 2rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.get-started-btn:hover {
  background: #a48be0;
  transform: translateY(-2px) scale(1.03);
}
.material-icons-outlined {
  font-size: 2rem;
  vertical-align: middle;
  color: var(--accent-text-color);
  transition: transform 0.2s;
}
.get-started-btn:hover .material-icons-outlined {
  transform: translateX(4px);
}

/* Style for navigation items that should look like buttons */
.nav-button-style {
  min-width: 100px;
  height: 40px;
  background: var(--secondary-color);
  color: var(--text-color);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  text-decoration: none; /* Remove underline from links */
  display: inline-flex; /* To center text vertically like buttons */
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Added for consistent sizing */
}

.nav-button-style:hover {
  background: #463a5e;
  color: var(--text-color); /* Ensure text color remains on hover for links */
}

/* Main Container */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 2rem 1rem;
  text-align: center;
}

/* Specific styles for todo.html main content area */
main.todo-page-main {
  align-items: flex-start; /* Aligns .layout-content-container to the top of main */
}

.layout-content-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.todos-section,
.completed-todos-section {
  width: 100%; /* Ensure sections take full width of layout-content-container */
  display: flex; /* Use flex to manage children like ul properly */
  flex-direction: column; /* Stack children vertically */
  align-items: stretch; /* Stretch children like ul to fill width */
}

.main-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--text-color);
  letter-spacing: -1px;
}
.main-desc {
  color: #cfcfcf;
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Login/Signup Pages */
.auth-container {
  display: flex;
  min-height: 100vh;
}
.left, .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}
.left {
  background: linear-gradient(135deg, #130527 0%, #1c1b22 100%);
  color: #fff;
}
.right {
  background: #161122;
  color: #fff;
}
.signup-image, .login-image {
  max-width: 80%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: cover;
  margin-bottom: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
form#signupForm, form#loginForm {
  max-width: 400px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.signup-names-row {
  display: flex;
  gap: 40px; /* Increased gap between first and last name fields */
  margin-bottom: 16px;
}
.signup-name-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents overflow by allowing shrinking */
}
input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--input-background-color);
  background: var(--input-background-color);
  color: #fff;
  font-size: 1rem;
  margin-bottom: 12px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  outline: 2px solid var(--primary-color);
}
.terms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.terms-row label, .terms-row a {
  color: #a393c8;
  font-size: 0.95rem;
}
.signup-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--primary-color);
  color: var(--accent-text-color);
  border: none;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.signup-btn:hover {
  background: #a48be0;
}
.signup-footer, .login-footer {
  text-align: center;
  margin-top: 16px;
}
.signup-footer a, .login-footer a {
  color: #007bff;
  text-decoration: none;
}
.signup-footer a:hover, .login-footer a:hover {
  text-decoration: underline;
}
.back-home-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #007bff;
  text-decoration: underline;
}

/* Input Section for Todo */
.input-container {
  display: flex;
  gap: 10px;
  margin: 1.5rem 0;
  justify-content: center;
}
#todo-input {
  flex: 1;
  padding: 0.8rem;
  border-radius: 8px 0 0 8px;
  border: none;
  background-color: #2d2c38;
  color: white;
  font-size: 1rem;
  min-width: 200px;
}
#add-todo-btn {
  padding: 0 1.5rem;
  background-color: #a259ff;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background 0.2s;
}
#add-todo-btn:hover {
  background: #7c3aed;
}

/* Task List */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* Ensure ul takes full width of its container (the section) */
}
li {
  background-color: #2a2933;
  margin-bottom: 0.8rem;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
li input[type="checkbox"] {
  margin-right: 1rem;
  transform: scale(1.2);
}
li span {
  flex: 1;
  font-size: 1rem;
  word-break: break-word;
  min-height: 1.5em; /* Ensures a minimum height */
  line-height: 1.5; /* Improves readability for wrapped text */
  min-width: 0; /* Allows the span to shrink and wrap text properly within flex layout */
}
.completed {
  text-decoration: line-through;
  color: #9f9f9f;
}
li button, .delete-btn {
  background-color: transparent;
  color: #ff4b4b;
  border: 1px solid #ff4b4b;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s, visibility 0.2s; /* Added opacity and visibility to transition */
  opacity: 0; /* Hidden by default */
  visibility: hidden; /* Hidden by default */
}

li:hover button, li:hover .delete-btn { /* Show button on li hover */
  opacity: 1;
  visibility: visible;
}

li button:hover, .delete-btn:hover { /* Styles for button hover (when visible) */
  background: #ff4b4b;
  color: #fff;
}
h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #ffffff;
}
.completed-todos {
  margin-top: 2rem;
}
.lower-heading {
  color: #a259ff;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* Button Group */
.button-group {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Responsive */
@media (max-width: 900px) {
  main, header, .header {
    max-width: 98vw;
    padding: 1rem;
  }
  .auth-container {
    flex-direction: column;
  }
  .left, .right {
    min-width: 0;
    padding: 1rem;
  }
}
@media (max-width: 700px) {
  body {
    flex-direction: column;
    align-items: stretch;
  }
  .container {
    padding: 0 0.5rem;
  }
  .left, .right {
    min-width: 0;
    padding: 1rem;
  }
}

/* Specific style for the logout navigation link to match signup button */
#logout-link-nav {
  background-color: var(--primary-color);
  color: var(--accent-text-color);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 10px; /* Apply 10px padding on all sides */
  transition: background 0.2s; /* Added to explicitly match .signup-btn */
  /* Inherits height: 40px, min-width, display, align-items, etc. from .nav-button-style */
}