html {
  height: 100%;
  overflow: hidden;
  /* This helps lock the entire page down on iOS */
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);

  height: 100%;
  min-height: 100vh;

  /* CRITICAL FIX: Stops the fixed element from dragging */
  overscroll-behavior-y: contain;

  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- New Layout Wrapper --- */
#layout-wrapper {
  z-index: 1;

  /* The definitive combination for a scrollable flex child: */
  flex-grow: 1;
  min-height: 0;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  box-sizing: border-box;

  /* --- Custom Scrollbar Hiding --- */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Apply padding to the main content container instead of the scrollable wrapper */
.container {
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: 16px;
}

/* Apply padding to the main content container instead of the scrollable wrapper
   to avoid flexbox height calculation issues with padding. */

/* --- Header --- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative; /* For centering the title */
  height: 60px; /* Set a fixed height for vertical alignment */
}

.header h1 {
  font-size: 32px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex; /* Use flex to align icon and text */
  align-items: center;
  /* The title is now centered using absolute positioning on its container */
}

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

.header p {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.header img {
  width: 150px;
  height: 100%;
  object-fit: contain;
}

/* --- Common Back Button for Headers --- */
/* Use a more specific selector to ensure it applies consistently */
.header > .back-button {
  background-color: white;
  border: none;
  border-radius: 50%; /* This makes it round */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0; /* Prevent the button from shrinking in the flex container */
  text-decoration: none; /* Remove underline from 'a' tags */
}

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

html.dark-mode .header h1,
html.dark-mode .header p {
  color: var(--color-text-primary);
}

html.dark-mode .header .back-button {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

/* --- Scroll Wheel Spinner --- */
.scroll-spinner-wrapper {
  position: relative;
  width: 100%;
  height: 180px; /* 5 items * 36px item height */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  overflow: hidden; /* Contain the wheels and prevent them from overlapping buttons */
  touch-action: none; /* Prevent page scroll while dragging wheel */
}

.scroll-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.wheel-container {
  height: 100%;
  overflow: hidden;
  width: 80px;
  /*
    Apply a mask to fade out the top and bottom items.
    This is more robust than an overlay. The gradient defines what is visible (black)
    and what is faded (transparent).
  */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    black 40%,
    black 60%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 40%,
    black 60%,
    transparent
  );
}

.wheel {
  transition: transform 0.2s ease-out;
  cursor: grab;
}

.wheel:active {
  cursor: grabbing;
}

.wheel-item {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: #374151;
}

.selection-indicator {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 8px;
  pointer-events: none;
}

.decimal-point,
.spinner-unit {
  font-size: 24px;
  font-weight: 500;
  line-height: 180px; /* Match wrapper height */
}
.decimal-point {
  margin: 0 -4px;
}
.spinner-unit {
  margin-left: 8px;
}

.spinner-unit.degree-symbol {
  margin-left: 2px;
}

html.dark-mode .wheel-item {
  color: var(--color-text-primary);
}

html.dark-mode .decimal-point,
html.dark-mode .spinner-unit {
  color: var(--color-text-primary);
}
html.dark-mode .selection-indicator {
  background-color: rgba(255, 255, 255, 0.05);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}

/* --- Bottom Navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface-subtle);
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding-top: 8px;

  /* Use min-height for the content height (60px) and let padding handle the safe area */
  min-height: 60px;

  border-top: 1px solid var(--color-border-default);
  box-sizing: border-box;

  /* CRITICAL FIX: Ensure the padding correctly handles the iOS safe area */
  /* Fallback for older iOS versions */
  padding-bottom: constant(safe-area-inset-bottom);
  /* Standard for current iOS versions */
  padding-bottom: env(safe-area-inset-bottom);
}

/* This spacer is added at the end of the layout-wrapper. It must match the total height
 * of the fixed nav bar to ensure the scrollable content isn't cut off.
 */
.nav-bar-spacer {
  /* CRITICAL FIX: Calculate the height as content height (60px) PLUS safe area inset */
  /* Fallback */
  height: calc(60px + constant(safe-area-inset-bottom));
  /* Standard */
  height: calc(60px + env(safe-area-inset-bottom));

  flex-shrink: 0; /* Prevent the spacer from shrinking */
}

.nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 12px;
  flex-grow: 1;
  padding: 0;
  position: relative; /* Needed for absolute positioning of the icon */
}

.nav-button .material-symbols-outlined {
  font-size: 30px;
  margin-bottom: 4px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease-in-out;
}

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

.nav-button.active span:not(.material-symbols-outlined) {
  font-weight: 600;
}

.nav-button.active::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-surface-subtle);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-top: 1px solid var(--color-border-default); /* Match nav bar border */
  transition: all 0.5s ease-in-out;
  z-index: -1; /* Place it behind the icon and text */
}

@keyframes icon-bounce-in {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-18px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(-10px) scale(1);
  }
}

@keyframes bg-bounce-in {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) translateY(-18px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-10px) scale(1);
  }
}

.nav-button.active::before {
  /* Use the dedicated animation for the background */
  animation: bg-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nav-button.active .material-symbols-outlined {
  color: var(--color-primary-base);
  /* Use the original animation just for the icon */
  animation: icon-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nav-icon-cycle7 {
  width: 32px; /* Match the size of other icons */
  height: 32px; /* Match the size of other icons */
  margin-bottom: 4px; /* Remove the extra margin */
  background-color: var(--color-text-muted); /* Default color */
  -webkit-mask: url("Assets/Cycle7 Logo Outline.svg") no-repeat center;
  mask: url("Assets/Cycle7 Logo Outline.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out; /* Add transition */
}

.nav-button.active .nav-icon-cycle7 {
  /* Use the original animation just for the icon */
  animation: icon-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  /* The icon itself is colored with the primary color */
  background-color: var(--color-primary-base); /* Active color */
  -webkit-mask-image: url("Assets/Cycle7 Logo.svg");
  mask-image: url("Assets/Cycle7 Logo.svg");
}

/* --- General Dialog & Modal Styles --- */

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100; /* Increased to be above nav bar */
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#confirmDialogOverlay {
  z-index: 1200; /* Ensure it's on top of other dialogs */
}

/* Ensure the weekly reset choice appears on top of all other modals */
#weeklyResetChoiceDialogOverlay {
  z-index: 2100;
}

.dialog-overlay.show {
  opacity: 1;
  visibility: visible;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Stretch items to fill width */
  justify-content: flex-start; /* Align content to the top */
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  gap: 20px; /* Increased gap for better spacing */
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.dialog-overlay.show .dialog-content {
  transform: scale(1);
}

html.dark-mode .dialog-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

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

.dialog-content .material-symbols-outlined.dialog-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #f59e0b; /* Warning orange */
}

.dialog-content .material-symbols-outlined.dialog-icon.lock_reset {
  font-size: 48px;
  margin-bottom: 12px;
  color: var(--color-primary-base);
}

.dialog-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: var(--color-text-primary);
  font-weight: 700;
}

.dialog-content p {
  margin: 0 0 20px 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 12px;
}

.dialog-buttons button {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dialog-buttons .red-button {
  background-color: #ef4444; /* Red for destructive actions */
  color: white;
}

.dialog-buttons .green-button {
  background-color: var(--color-success-base);
  color: white;
}

.dialog-buttons .grey-button {
  background-color: #6b7280;
  color: white;
}

/* --- Fullscreen Modal --- */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-body);
  z-index: 2000;
  transform: translateX(100%); /* Default slide from right */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  /* --- Safe Area Insets for iOS Devices --- */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
}

.fullscreen-modal.show {
  transform: translateX(0);
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

.modal-back-button {
  background-color: white;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html.dark-mode .modal-back-button {
  /* In dark mode, the back button should match other headers */
  background-color: var(--color-surface-subtle);
  color: var(--color-text-primary); /* Light icon on dark background */
}

.modal-back-button .material-symbols-outlined {
  font-size: 36px;
  font-weight: 200;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  flex-grow: 1; /* Allow title to take up space */
  text-align: center; /* Center the title */
}

.modal-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}