/* c:\Users\david\OneDrive\Coding\Projects\Workout-Log\Trackit\calendar.css */
/* Set default weight for all Google Icons */
.material-symbols-outlined {
  font-weight: 200;
}

/* General Body Styling */

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto; /* The animation is removed from here */
}

/* Header Styling */
/* Make this selector more specific to avoid affecting other pages */
.container > .header {
  padding-top: 20px;
}

/* Make this selector more specific to avoid affecting other pages */
.header .back-button {
  background-color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* margin-right is handled by the parent flex container's gap or justify-content */
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.back-button .material-symbols-outlined {
  font-size: 48px;
  color: var(--color-text-muted);
  font-weight: 200;
}

.header h1 {
  font-size: 24px;
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* View Toggle Switch */
.toggle-container {
  width: 9rem;
  height: 2.5rem;
  background-color: #e5e7eb;
  cursor: pointer;
  position: relative;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.25rem;
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  margin: 0 0 24px auto; /* Align toggle to the right and add margin below */
}

.toggle-handle {
  transition: left 0.3s cubic-bezier(0.2, 0.8, 0.5, 1.2);
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  width: 50%;
  height: calc(100% - 0.5rem);
  background-color: #ffffff;
  z-index: 0;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.toggle-text {
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem; /* 14px */
}

/* Default state: Month is selected */
#month-text {
  color: #1f2937;
}

#week-text {
  color: #6b7280;
}

/* Toggled state: Week is selected */
.toggle-container.toggled .toggle-handle {
  left: calc(100% - 50% - 0.25rem);
}

.toggle-container.toggled #month-text {
  color: #6b7280;
}

.toggle-container.toggled #week-text {
  color: #1f2937;
}

/* --- Dark Mode for Toggle --- */
html.dark-mode .toggle-container {
  background-color: var(--color-surface-track);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);
}

html.dark-mode .toggle-handle {
  background-color: var(--color-surface-icon-bg);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
}

html.dark-mode #month-text,
html.dark-mode .toggle-container.toggled #week-text {
  color: var(--color-text-primary); /* Active text color */
}

html.dark-mode #week-text,
html.dark-mode .toggle-container.toggled #month-text {
  color: var(--color-text-muted); /* Inactive text color */
}

/* Calendar Card */
.calendar-card {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-header h2 {
  margin: 0;
  flex-grow: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 27px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Use aspect-ratio to ensure the day is always a square, making the circle perfect */
  aspect-ratio: 1 / 1;
  font-size: 14px;
  border-radius: 50%;
  border: 2px solid transparent; /* Add border to prevent layout shifts */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
  position: relative;
}

.calendar-day.other-month {
  color: #d1d5db;
  cursor: default;
}

/* --- New "Filled vs. Outlined" Styles --- */

.calendar-day.has-log {
  /* FILLED: A solid green fill for logged workouts. */
  background-color: var(--color-success-light);
  color: var(--color-success-dark); /* Use a darker green for better contrast */
  font-weight: 600;
  border-color: transparent;
}

.calendar-day.selected {
  /* On the main calendar page, selection is a prominent blue border. */
  background-color: transparent;
  color: var(--color-accent-purple-base);
  font-weight: 600;
  border-color: var(--color-accent-purple-base);
}

.calendar-day.today {
  /* BORDER: Today is now a prominent border, which combines better with other states. */
  font-weight: 600;
  border-color: var(--color-primary-dark);
  animation: pulse 2s infinite ease-in-out;
}

.calendar-day.today.selected {
  /* When today is also selected, fill it with a light blue. */
  background-color: var(--color-accent-purple-light);
  color: var(--color-accent-purple-dark);
}

.calendar-day.today.has-log {
  /* When today has a log, it keeps the blue "today" border and gets the green "log" fill. */
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.calendar-day.has-log.selected {
  /* When a logged day is selected, it keeps its green fill but gets a blue border. */
  background-color: var(--color-success-light);
  border-color: var(--color-accent-purple-base);
  color: var(--color-success-dark);
}

.calendar-day.has-upcoming {
  /* For upcoming workouts, keep the text color and a dot will be added below via the ::after pseudo-element. */
  /* color: var(--color-primary-base); */
  font-weight: 500;
}

.calendar-day.has-upcoming::after {
  content: "";
  position: absolute;
  bottom: 6px; /* Position the dot below the number */
  width: 6px;
  height: 6px;
  background-color: var(--color-primary-base);
  border-radius: 50%;
}

/* When a day with an upcoming workout is selected, ensure it gets the darker "selected" border. */
.calendar-day.has-upcoming.selected {
  border-color: var(--color-accent-purple-base);
  color: var(--color-accent-purple-dark);
}

/* Log Entries Card */
.log-entries-card {
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.log-entries-card h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.empty-log-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
}

.empty-log-state .material-symbols-outlined {
  font-size: 64px;
  color: var(--color-border-default);
  margin-bottom: 16px;
}

.empty-log-state h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #374151;
}

.empty-log-state p {
  margin: 0;
  font-size: 16px;
}

.log-item-details p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.log-item-sub-details {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.log-item-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.log-item-time .material-symbols-outlined {
  font-size: 16px;
}

.log-item-wrapper {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e5e7eb;
}

.log-item-wrapper:last-child {
  border-bottom: none;
}

.log-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: white;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.log-item.swiped {
  transform: translateX(-90px); /* Width of the delete button */
}

.log-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 0;
}

.delete-log-button {
  /* Make transparent by default to prevent 1px visual glitch */
  background-color: transparent;
  transition: background-color 0.2s ease;
  color: white;
  border: none;
  height: 100%;
  padding: 0 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only show the red background during or after a successful swipe */
.log-item-wrapper.swiping .delete-log-button,
.log-item.swiped + .log-item-actions .delete-log-button {
  background-color: #ef4444; /* Red */
}

.log-item-wrapper.expanded .log-item-actions {
  /* Hide the slide-to-delete actions when the item is expanded */
  display: none;
}

.log-item-icon .material-symbols-outlined {
  font-size: 40px;
}

.log-item-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.log-item-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.log-item-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.log-item-header.summary-view {
  cursor: default;
}

.log-item-header.summary-view:hover {
  /* Override hover effect for summary view */
  background-color: transparent;
}

.log-item-details {
  flex-grow: 1;
}

.log-expand-icon {
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
  padding: 8px;
}

.log-item-wrapper.expanded .log-expand-icon {
  transform: rotate(180deg);
}

/* Container for the detailed exercises, hidden by default */
.log-exercise-details {
  display: none;
  padding: 0 16px 16px 16px;
  background-color: white;
  flex-direction: column;
  gap: 16px;
}

.log-item-wrapper.expanded .log-exercise-details {
  display: flex;
}

html.dark-mode .log-exercise-details {
  background-color: var(--color-surface-subtle);
}

/* Individual exercise item in the log */
.log-exercise-item {
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.log-exercise-details > .log-exercise-item:first-child {
  border-top: none;
  padding-top: 0;
}

html.dark-mode .log-exercise-item {
  border-color: #4a5568;
}

.log-exercise-name-display {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

html.dark-mode .log-exercise-name-display {
  color: #e2e8f0;
}

.log-exercise-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Log Sets Table */
.log-sets-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 0 8px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
}

.log-set-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}

.log-sets-list .log-set-row:nth-child(odd) {
  background-color: #f9fafb;
}

.log-set-row.completed {
  color: var(--color-success-dark);
  font-weight: 600;
}

html.dark-mode .log-sets-list .log-set-row:nth-child(odd) {
  background-color: #1a202c;
}

html.dark-mode .log-set-row {
  color: #cbd5e1;
}

/* Log Cardio Stats */
.log-cardio-stats-container {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  background-color: #f9fafb;
  padding: 12px;
  border-radius: 12px;
}

.log-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.log-stat-item label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
}

.log-stat-item span {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
}

/* Log Notes Section */
.log-exercise-notes-section {
  margin-top: 8px;
}

.log-exercise-notes-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

.log-exercise-notes-section h4 .material-symbols-outlined {
  color: var(--color-success-base);
  font-size: 21px;
}

.log-exercise-notes-section p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: 8px;
}

/* Footer Styling */
.footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
}

.footer p {
  color: #9ca3af;
  font-size: 14px;
  margin: 0;
}

/* --- Detailed Log View Styles (Week View) --- */
.logged-workout-container {
  background-color: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
}

.logged-workout-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.logged-workout-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.exercise-card-log {
  margin-bottom: 12px;
}
.exercise-card-log:last-child {
  margin-bottom: 0;
}

.exercise-header-log h4 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.sets-table-header-log {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 0 8px;
  margin-bottom: 4px;
}

.sets-table-header-log span {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  text-align: center;
}

.sets-list-log .set-row-log {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
}

.sets-list-log .set-row-log:nth-child(odd) {
  background-color: #f9fafb;
}

.set-row-log span {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  text-align: center;
}

.cardio-stats-log {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #4b5563;
  padding: 8px;
  background-color: #f9fafb;
  border-radius: 8px;
}

/* Dark Mode for Detailed Log View */
html.dark-mode .logged-workout-container {
  background-color: #2d3748;
  border-color: #4a5568;
}

html.dark-mode .logged-workout-header {
  border-bottom-color: #4a5568;
}

html.dark-mode .logged-workout-header h3,
html.dark-mode .exercise-header-log h4 {
  color: #e2e8f0;
}

html.dark-mode .sets-table-header-log span {
  color: #a0aec0;
}

html.dark-mode .sets-list-log .set-row-log:nth-child(odd) {
  background-color: #1a202c;
}

html.dark-mode .set-row-log span,
html.dark-mode .cardio-stats-log {
  color: #cbd5e1;
}

html.dark-mode .cardio-stats-log {
  background-color: #1a202c;
}

html.dark-mode .header h1,
html.dark-mode .calendar-header h2,
html.dark-mode .log-entries-card h3, /* This is handled by .log-item-details h4 */
html.dark-mode .log-item-details h4 {
  color: var(--color-text-primary);
}

html.dark-mode .calendar-card,
html.dark-mode .log-entries-card,
html.dark-mode .bottom-nav {
  background-color: var(--color-surface-subtle);
}

html.dark-mode .calendar-header button {
  color: #a0aec0;
}

html.dark-mode .calendar-weekdays {
  color: var(--color-text-muted);
}

html.dark-mode .calendar-day.other-month {
  color: var(--color-border-default);
}

html.dark-mode .calendar-day.selected {
  /* Use a border for consistency with light mode, allowing other states to show through. */
  border-color: var(--color-accent-purple-base);
  color: var(--color-accent-purple-dark);
}

html.dark-mode .calendar-day.today {
  border-color: var(--color-primary-base);
}

html.dark-mode .log-item-details p {
  color: var(--color-text-muted);
}

html.dark-mode .empty-log-state {
  color: var(--color-text-muted);
}

html.dark-mode .empty-log-state .material-symbols-outlined {
  color: var(--color-border-default);
}

html.dark-mode .empty-log-state h3 {
  color: var(--color-text-primary);
}

html.dark-mode .log-item {
  background-color: var(--color-surface-subtle);
}

html.dark-mode .bottom-nav {
  border-top-color: var(--color-border-default);
}

html.dark-mode .nav-button.active {
  color: var(--color-primary-base);
}

html.dark-mode .log-item-icon {
  background-color: var(--color-surface-icon-bg); /* Dark background */
  color: white; /* White icon color */
}

html.dark-mode .log-item-img {
  /* Invert color to make black PNGs white */
  filter: brightness(0) invert(1);
}

html.dark-mode .log-item-header.summary-view:hover {
  /* Override hover effect for summary view in dark mode */
  background-color: transparent;
}

html.dark-mode .log-exercise-body {
  color: #cbd5e1;
}

html.dark-mode .log-exercise-item {
  border-color: var(--color-border-default);
}

html.dark-mode .log-exercise-name-display {
  color: var(--color-text-primary);
}

html.dark-mode .log-exercise-body {
  color: #cbd5e1;
}

html.dark-mode .back-button {
  /* In dark mode, the back button has a different background, but the icon color is handled by the header rule in common.css */
  box-shadow: none;
}

/* --- Hover states for devices that support it --- */
@media (hover: hover) and (pointer: fine) {
  .back-button:hover {
    transform: translateY(-2px);
  }

  .calendar-header button:hover {
    background-color: #f3f4f6;
  }

  .calendar-day:not(.other-month):hover {
    background-color: #eef2ff;
  }

  .log-item-header:hover {
    background-color: #f9fafb;
  }

  .log-item-header.summary-view:hover {
    background-color: transparent;
  }

  html.dark-mode .calendar-header button:hover {
    background-color: var(--color-border-default);
  }

  html.dark-mode .calendar-day:not(.other-month):hover {
    background-color: var(--color-border-default);
  }

  html.dark-mode .log-item-header:hover {
    background-color: #1a202c;
  }
}