:root {
  --myradius: 6px;
  --mainBackgroundColor: #2a2a2a;
  --mainBackgroundColor-rgb: 42, 42, 42;
  /* --smallBackgroundColor: #424242; */
  --smallBackgroundColor: #3f3f46;
  --softFontColor: #bcbcbc;
  --labelColor: #ccc;
  --cardColor: #424141;
  --myBtnBlue: #3b82f6;
  --myblue: #60a5fa;
  --myblue-rgb: 96, 165, 250; /* RGB components of --myblue */
  --myLightBlue: #2f8aea;
  --mygray: #838a95;
  --myLightGray: #a0a0a0;

  /* Font stack */
  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";

  /* Standard spacing */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-xxl: 3rem; /* 48px */

  /* Add specific error/success colors if desired */
  --error-color-text: #721c24;
  --error-color-text-on-dark: #f87171;
  --error-color-bg: #f8d7da;
  --error-color-border: #f5c6cb;
  --success-color-text: #155724;
  --success-color-bg: #d4edda;
  --success-color-border: #c3e6cb;
}

/* --- Global Resets & Base Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  @media (max-width: 768px) {
    font-size: 93.75%;
  }
  @media (max-width: 480px) {
    font-size: 87.5%;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--labelColor);
  background-color: var(--mainBackgroundColor);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global Link Styling */
a {
  text-decoration: none;
  color: var(--myblue);
  font-weight: 500;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--myLightBlue);
}

a.btn-base:hover {
  color: white; /* Override the global 'a:hover' for links styled as buttons */
}

/* Screen Reader Only (Accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ******************************************* */

/* Decide what to do */
.usage-display {
  margin-left: 10px;
  font-size: 0.9em;
  color: var(--softFontColor);
  /* color: var(--error-color-text-on-dark); */
}

#nav-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 5%;
  background-color: var(--mainBackgroundColor);
  border-bottom: 1px solid var(--smallBackgroundColor);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo-container h2 {
  margin: 0 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
}

.logo-container img {
  height: 50px;
  width: auto;
}

#nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

#nav-menu a {
  color: var(--labelColor);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--myradius);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  white-space: nowrap;
}

#nav-menu a:hover {
  color: white;
}

#nav-menu a.active {
  color: var(--myblue);
  font-weight: 700;
}

.user-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--myradius);
  transition: background-color 0.2s ease;
}

.user-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.user-nav-item a {
  padding: 0;
}

.navbar-profile-pic {
  width: 36px; /* A good size for a navbar */
  height: 36px;
  border-radius: 50%; /* Makes the image perfectly circular */
  object-fit: cover; /* Prevents non-square images from stretching or squishing */
  border: 2px solid var(--smallBackgroundColor); /* Adds a subtle border that matches your theme */
}

/* Responsive Adjustments for Nav */
@media (max-width: 768px) {
  /* Tablet and smaller */
  #nav-container {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  #nav-logo h2 {
    font-size: 1.3rem;
  }

  #nav-menu {
    width: 100%;
    justify-content: flex-start; /* Align to start when stacked */
    gap: var(--space-md);
    flex-wrap: wrap;
  }

  #nav-menu a {
    font-size: 0.95rem;
    padding: var(--space-xs) var(--space-sm);
  }
}

@media (max-width: 480px) {
  /* Phone */
  #nav-menu {
    gap: var(--space-sm);
    flex-direction: column;
    align-items: stretch;
  }
  #nav-menu a {
    padding: var(--space-xs);
    text-align: center;
  }
}

#content {
  flex-grow: 1;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-lg) 5%;
}

footer {
  width: 100%;
  padding: var(--space-md) 5%;
  text-align: center;
  background-color: transparent;
  flex-shrink: 0; /* Prevents the footer from shrinking if content is sparse */
  margin-top: auto; /* Pushes footer to the bottom */
}

footer p {
  margin: 0; /* Removes default paragraph margin */
  font-size: 0.875rem; /* Slightly smaller font size for a more subtle look */
  color: var(--softFontColor); /* Softer color for less emphasis */
}

/* Responsive Adjustments for Content Area */
@media (max-width: 992px) {
  /* Wider tablets */
  #content {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

@media (max-width: 768px) {
  #content {
    padding: var(--space-md) var(--space-md);
    max-width: 100%;
  }

  footer {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 480px) {
  #content {
    padding: var(--space-sm) var(--space-sm);
  }

  footer {
    padding: var(--space-sm);
  }
}

.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--space-xl) var(--space-md);
  min-height: calc(
    100vh - var(--calculated-main-nav-height, 60px)
  ); /* Ensure it fills viewport below nav */
  position: relative;
}

.auth-panel {
  /* background-color: transparent; */
  background-color: var(
    --cardColor
  ); /* SUGGESTION: Give panels a background for better contrast */
  padding: var(--space-xl) var(--space-xxl);
  border-radius: var(--myradius);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 100%;
  max-width: 460px;
  border-top: 4px solid var(--myblue);
  position: relative;
  z-index: 1;
}

.signup-logo-panel {
  /* This class wasn't used but good to have styles if you add a logo */
  max-width: 70px;
  margin: 0 auto var(--space-lg) auto; /* Center logo */
}

.auth-panel h2 {
  color: white;
  font-weight: 600;
  font-size: 1.9rem;
  margin-bottom: var(--space-sm);
}

.signup-subheading,
.login-subheading,
.auth-panel > p:first-of-type {
  /* Target first p in reset for subheading style */
  color: var(--softFontColor);
  margin-bottom: var(--space-xl);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.signup-form-fields,
.login-form-fields {
  text-align: left;
}

.password-hint {
  font-size: 0.8em;
  color: var(--mygray);
  padding-left: 2px;
  margin-top: calc(-1 * var(--space-xs) + 4px); /* Fine-tune after input */
  margin-bottom: var(--space-md); /* Give more space before next element */
  display: block;
  line-height: 1.3;
}

.signup-submit-button, /* This can be moved to a global buttons.css if style is identical */
.login-submit-button {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xl);
  background-color: var(--myBtnBlue);
  border: none;
  color: white;
  border-radius: var(--myradius); /* SUGGESTION: Add consistent radius */
  cursor: pointer; /* SUGGESTION: Add cursor pointer */
  transition:
    background-color 0.2s ease,
    transform 0.1s ease;
}

.signup-submit-button:hover,
.login-submit-button:hover {
  background-color: var(--myLightBlue);
}

.signup-submit-button:active,
.login-submit-button:active {
  transform: scale(0.98);
}

.login-prompt,
.signup-prompt {
  font-size: 0.9rem;
  color: var(--softFontColor);
  text-align: center;
  margin-top: var(--space-lg);
}

.login-prompt a,
.signup-prompt a {
  color: var(--myblue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-bottom-color 0.2s ease;
}

.login-prompt a:hover,
.signup-prompt a:hover {
  color: var(--myLightBlue);
  border-bottom-color: var(--myLightBlue);
}

.forgot-password-link {
  display: block; /* SUGGESTION: Make it block for easier layout */
  text-align: right;
  font-size: 0.85em;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 2;
}

.forgot-password-link a {
  color: var(--softFontColor);
  text-decoration: none;
  transition: color 0.2s ease;
}

.forgot-password-link a:hover {
  color: var(--myLightGray);
  text-decoration: underline;
}

/* === OR Divider === */
.or-divider {
  position: relative; /* Required for the pseudo-element positioning */
  display: flex;
  justify-content: center; /* Center the text */
  margin-bottom: var(--space-xl); /* Vertical spacing */
}

/* This is the continuous horizontal line that sits BEHIND the text */
.or-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--softFontColor); /* A subtle, dark line color */
  transform: translateY(-50%); /* Perfectly center the line vertically */
}

/* This styles the text itself */
.or-divider span {
  position: relative; /* Ensures it renders on top of the ::before line */

  /* THIS IS THE TRICK: Give the text a background that matches the panel's background */
  background-color: var(--cardColor);

  /* This padding creates the "gap" in the line */
  padding: 0 var(--space-md);

  /* Style the text itself */
  color: var(--softFontColor);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Responsive Adjustments for Auth Layouts */
@media (max-width: 768px) {
  /* Tablet */
  .auth-container {
    padding: var(--space-lg) var(--space-sm); /* Reduce side padding */
    align-items: flex-start; /* SUGGESTION: Align to top for more space on smaller viewports */
    padding-top: var(--space-xl); /* More top space */
  }

  .auth-panel {
    padding: var(--space-lg); /* Reduce panel padding */
    max-width: 420px; /* Slightly smaller max-width */
  }
}

@media (max-width: 480px) {
  /* Phone */
  .auth-panel {
    padding: var(--space-md) var(--space-sm);
    border-top-width: 3px;
    margin-top: var(--space-lg); /* More top margin */
  }

  .auth-panel h2 {
    font-size: 1.6rem;
  }

  .input-group.vertical label {
    font-size: 0.85em;
  }
  .password-hint,
  .error-message, /* Assuming .error-message is styled globally in messages.css */
  .login-prompt {
    font-size: 0.8rem;
  }

  .signup-submit-button,
  .login-submit-button {
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
  }
}

/* Button styling */
.btn-base {
  display: inline-flex; /* Use flex for centering icon/text */
  align-items: center;
  justify-content: center;
  border-radius: var(--myradius); /* Use variable */
  border: 1px solid transparent; /* Start with transparent border */
  font-family: inherit;
  font-weight: 500; /* Make buttons slightly bolder */
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
  line-height: 1;
  font-size: 1rem;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.btn-base:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-image: none;
  box-shadow: none;
}

.btn-base:disabled[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #333;
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--myradius);
  font-size: 0.85em;
  z-index: 10;

  /* --- Initial hidden state --- */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
  pointer-events: none;
}

.btn-base:disabled[data-tooltip]:hover::after {
  /* Show the tooltip on hover */
  opacity: 1;
  visibility: visible;
}

.small-btn {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  font-size: 0.9rem;
}

.large-btn {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  font-size: 1.1rem;
  width: 100%;
}

.icon-btn {
  padding: var(--space-xs);
  background-color: transparent;
  border-width: 1.5px;
  line-height: 1;
}

.form-btn {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.form-icon-btn {
  background-color: transparent;
  border-width: 1.5px;
  padding: var(--space-sm);
  line-height: 1.2;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.bluebutton {
  background-color: var(--myBtnBlue);
  color: #fafafa;
  border-color: var(--myBtnBlue);
}

.bluebutton:hover,
.bluebutton:active {
  border-color: var(--myLightBlue);
}

.bluebutton:focus {
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.3);
}

.redbutton {
  background-color: #c53030;
  color: #fafafa;
  border: #c53030;
}

.redbutton:hover,
.redbutton:active {
  border-color: #c53030; /* Red border on hover/active */
}

.redbutton:focus {
  border-color: #9b2c2c; /* Darker red on focus */
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.3); /* Red focus ring */
}

.graybutton {
  background-color: #4a5568;
  color: #fafafa;
  border: #4a5568;
}

.graybutton:hover,
.graybutton:active {
  border-color: #4a5568; /* Gray border on hover/active */
}

.graybutton:focus {
  box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.3); /* Gray focus ring */
}

.icon-btn-red {
  border-color: #dc2626;
  color: #dc2626;
}

.icon-btn-red:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.icon-btn-blue {
  border-color: var(--myblue);
  color: var(--myblue);
}

.icon-btn-blue:hover {
  border-color: var(--myLightBlue);
  color: var(--myLightBlue);
}

.icon-btn-gray {
  border-color: #838a95;
  color: #838a95;
}

.icon-btn-gray:hover {
  border-color: #b9bcc0;
  color: #b9bcc0;
}

/* === Google Login === */
.btn-google {
  background-color: transparent;
  border: 1px solid var(--softFontColor);
  color: #fafafa;
  width: 100%;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
}

.btn-google:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #ffffff;
  color: #ffffff;
}

/* Styles the <img> tag you are using for the logo */
.btn-google img {
  margin-right: var(--space-md);
  width: 18px;
  height: 18px;
}

/* === Toggle Switch Component === */
.switch-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

/* Hide the default checkbox input */
.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider is the track of the switch */
.switch-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mygray);
  border-radius: 34px;
  transition: background-color 0.2s ease;
}

/* The thumb of the switch */
.switch-label::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

/* --- The 'ON' State --- */
.switch-input:checked + .switch-label {
  background-color: var(--myBtnBlue); /* Use your blue for the 'on' state */
}

.switch-input:checked + .switch-label::before {
  transform: translateX(24px); /* Move the thumb to the right */
}

/* --- Accessibility: Focus State --- */
.switch-input:focus-visible + .switch-label {
  outline: 2px solid var(--myblue);
  outline-offset: 2px;
}

.container-block {
  margin-bottom: var(--space-xl);
}

.container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--smallBackgroundColor);
}

.toggle-btn-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.form-container {
  padding: var(--space-md) 0;
}

.form-container label,
.form-container .input-group,
.form-container button {
  display: block;
  margin-bottom: var(--space-md);
}

.form-container label {
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--labelColor);
  font-size: 0.9em;
}

/* --- Inline Form Layout --- */
/* A generic class for creating single-line, flexible forms */
.form-inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* By default, children don't grow or shrink */
.form-inline > * {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* A specific class for the one input that should grow */
.form-inline .input-grow {
  flex-grow: 1;
  min-width: 200px;
}

/* Inputs that should have a fixed or intrinsic width */
.form-inline .input-base,
.form-inline .dropdown-input,
.form-inline .date-input {
  width: auto;
}

/* Ensure our new form-btn aligns perfectly */
.form-inline .form-btn {
  margin-bottom: 0;
}

/* --- Inline Table Edit Form --- */
/* A generic class for a form that exists within a table row */
.table-edit-form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.table-edit-form .form-field,
.table-edit-form .form-field-static {
  flex: 1 1 0;
  min-width: 60px;
}

/* Give the static set number field a fixed width */
.table-edit-form .form-field-static {
  flex-grow: 0;
  flex-basis: 40px;
  text-align: center;
}

/* The final field with the buttons should not grow */
.table-edit-form div:last-child {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-xs);
}

/* --- Input Styles --- */
.input-base {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-sm);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  color: white;
  background-color: var(--smallBackgroundColor);
  /* background-color: transparent; */
  border: 1px solid var(--mygray);
  border-radius: var(--myradius);
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

select.input-base {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0a0a0'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 1.1em 1.1em;
  padding-right: calc(var(--space-sm) * 2 + 1.1em);
}

.input-base:focus {
  outline: none;
  border-color: var(--myblue);
  box-shadow: 0 0 0 3px rgba(var(--myblue-rgb, 96, 165, 250), 0.3);
}

.input-base::placeholder {
  color: var(--mygray);
  opacity: 0.8;
}

.input-base.input-limited {
  max-width: 450px;
  width: 100%;
}

.dropdown-input,
.date-input {
  display: inline-block;
  width: auto;
  min-width: 150px;
  max-width: 220px;
  vertical-align: middle;
}

.number-input {
  display: inline-block;
  width: 90px;
  vertical-align: middle;
  text-align: left;
}

.input-group {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.input-group label {
  margin-bottom: 0;
  flex-shrink: 0;
}
.input-group .input-base {
  margin-bottom: 0;
  flex-grow: 1;
  min-width: 120px;
}
.input-group .number-input,
.input-group .date-input {
  flex-grow: 0;
}

/* Vertical Input Group Styling (for login/signup) */
.input-group.vertical {
  display: block;
  margin-bottom: var(--space-md);
}

.input-group.vertical label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 500;
  color: var(--labelColor);
  font-size: 0.9em;
}

/* Responsive Forms */
@media (max-width: 768px) {
  .input-base,
  select.input-base {
    font-size: 0.95rem;
  }
  .dropdown-input,
  .date-input {
    min-width: 130px;
    max-width: 200px;
  }
  .number-input {
    width: 80px;
  }
  .input-group {
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .input-group {
    flex-direction: column; /* Stack elements in input group */
    align-items: stretch; /* Make them full width */
  }
  .input-group label {
    margin-bottom: var(
      --space-xs
    ); /* Add a small margin below label when stacked */
  }
  .input-group .input-base,
  .input-group .number-input,
  .input-group .date-input {
    width: 100%; /* Inputs take full width when stacked */
  }
}

.card-container,
.metric-card {
  background-color: transparent;
  border-radius: var(--myradius);
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out,
    outline-color 0.2s ease-out;
  outline: 1px solid transparent;
  outline-offset: 2px;
}

.card-container {
  padding: var(--space-md);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.14);
}

.card-container > * {
  min-width: 0;
}

.card-container:hover,
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(var(--myblue-rgb), 0.3);
  outline-color: var(
    --myblue
  ); /* Outline hover effect primarily for metric cards */
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--smallBackgroundColor); /* changed from cardColor */
  margin-bottom: var(--space-md);
}

.card-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: white;
  margin-right: var(--space-sm);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-header-btns {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.card-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Metric Card specific styles */
.metric-card {
  text-align: center;
  padding: var(--space-xs);
}

.metric-card p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.9em;
  color: var(--softFontColor);
  font-weight: 500;
}

.metric-card h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.9em;
  color: white;
  font-weight: 600;
  line-height: 1.1;
}

.metric-card progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: var(--space-sm);
  border: none;
  border-radius: var(--space-xs);
  overflow: hidden;
  background-color: var(--smallBackgroundColor);
}
.metric-card progress::-webkit-progress-bar {
  background-color: var(--smallBackgroundColor);
  border-radius: var(--space-xs);
}
.metric-card progress::-webkit-progress-value {
  background-color: var(--myblue);
  border-radius: var(--space-xs);
  transition: width 0.3s ease-in-out;
}
.metric-card progress::-moz-progress-bar {
  background-color: var(--myblue);
  border-radius: var(--space-xs);
  transition: width 0.3s ease-in-out;
}
.metric-card .progress-label {
  display: block;
  text-align: right;
  margin-top: var(--space-xs);
  font-size: 0.8em;
  color: var(--softFontColor);
}

/* Donut/Line Chart Containers (often within cards) */
.donut-chart-container,
.line-chart-container {
  width: 100%;
  margin: var(--space-sm) auto 0;
  position: relative;
}
.donut-chart-container {
  max-width: 250px; /* Max width for donuts */
  height: 200px; /* Default height */
}
.line-chart-container {
  min-height: 150px; /* Min height for line charts */
  height: 200px; /* Default height, can be overridden by specific card styling */
}

/* Responsive Cards */
@media (max-width: 768px) {
  .card-container,
  .metric-card {
    padding: var(--space-sm);
  }
  .metric-card h3 {
    font-size: 1.7em;
  }
  .metric-card p {
    font-size: 0.85em;
  }
  .donut-chart-container,
  .line-chart-container {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .metric-card h3 {
    font-size: 1.6em;
  }
  .donut-chart-container,
  .line-chart-container {
    height: 160px; /* Slightly smaller charts on very small screens */
  }
}

.sets-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
}

.sets-table th,
.sets-table td,
.data-table th,
.data-table td {
  padding: var(--space-sm);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--smallBackgroundColor);
}

.sets-table th,
.data-table th {
  font-weight: 600;
  color: var(--labelColor);
  letter-spacing: 0.5px;
  background-color: rgba(
    var(--mainBackgroundColor-rgb),
    0.3
  ); /* SUGGESTION: Subtle header background */
}

.sets-table td,
.data-table td {
  color: var(--softFontColor);
}

/* Hover effect for rows in #aw-log-table, excluding rows with input fields */
.data-table tbody tr:not(:has(input)):hover {
  background-color: rgba(var(--myblue-rgb), 0.05);
  /* cursor: pointer; */ /* Optional: Add if rows are clickable */
}

/* Specific column styling for .sets-table */
.sets-table th:nth-child(-n + 4),
.sets-table td:nth-child(-n + 4) {
  text-align: center;
  width: 60px;
}

.sets-table th:nth-child(5),
.sets-table td:nth-child(5),
.sets-table th:nth-child(6),
.sets-table td:nth-child(6) {
  width: 40px;
  padding: var(--space-xs);
  text-align: center;
}
.sets-table th:nth-child(5),
.sets-table th:nth-child(6) {
  visibility: hidden;
}
/* Remove general border for action cells in sets-table to avoid double border */
/* .sets-table thead tr th td:nth-child(5), */
/* .sets-table thead tr th td:nth-child(6) { */
/*   border-bottom: none; */
/* } */

/* Inputs inside the table during edit */
.sets-table td input.input-base,
.data-table td input.input-base {
  /* Apply to general data-table as well if needed */
  padding: var(--space-xs);
  font-size: 0.9em;
  margin: -4px -6px;
  width: calc(100% + 12px);
  border-radius: var(--myradius);
}
.sets-table td input.number-input,
.data-table td input.number-input {
  text-align: center;
}
.sets-table td input.dropdown-input, /* This class was for comment in set-form, may not apply here */
.data-table td input[type="text"] {
  /* Assuming text input for comments in data-table */
  text-align: left;
}

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--mygray) var(--smallBackgroundColor);
  margin-top: var(
    --space-sm
  ); /* SUGGESTION: Add margin if table is directly after a title */
}
.table-wrapper::-webkit-scrollbar {
  height: 8px;
} /* SUGGESTION: Slightly thicker scrollbar */
.table-wrapper::-webkit-scrollbar-track {
  background: var(--smallBackgroundColor);
  border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--mygray);
  border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--myLightGray);
}

/* Responsive Tables */
@media (max-width: 768px) {
  .sets-table,
  .data-table {
    font-size: 0.85rem; /* Smaller font on tablets */
  }
  .sets-table th,
  .sets-table td,
  .data-table th,
  .data-table td {
    padding: var(--space-xs); /* Reduce padding */
    white-space: normal; /* SUGGESTION: Allow text to wrap on smaller screens */
  }
  /* SUGGESTION: For very complex tables, you might need a "card per row" display on mobile,
     but that's a more significant restructure. Horizontal scroll is often the first step. */
}

/* Global Message Area */
.message {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--myradius);
  font-size: 0.9em;
  text-align: center;
  visibility: visible;
  display: block;
  border: 1px solid transparent;
}
.message.error {
  background-color: var(--error-color-bg);
  color: var(--error-color-text-on-dark);
  border-color: var(--error-color-border);
}
.message.success {
  background-color: var(--success-color-bg);
  color: var(--success-color-text);
  border-color: var(--success-color-border);
}
.message.warning {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}
.message.info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}

.message.error,
.message.success,
.message.warning,
.message.info {
  visibility: visible;
  display: block;
}
.message p {
  color: inherit;
  margin: 0;
}

/* Specific Input Error Messages */
.error-message {
  /* This class is typically for errors *under* input fields */
  color: var(--error-color-text-on-dark);
  font-size: 0.85em;
  font-weight: 500;
  min-height: 1.2em;
  margin-top: var(--space-xs);
  padding-left: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin-top 0.3s ease;
}

.error-message.error {
  /* Class 'error' added by JS to show it */
  opacity: 1;
  max-height: 5em;
  margin-top: var(--space-xs);
}

/* Loading Indicator */
.loading-overlay,
.page-loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--mainBackgroundColor-rgb), 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  font-size: 1rem;
  color: var(--softFontColor);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
}
.loading-overlay[style*="display: block"], /* This selector might be fragile if display is set via class */
.page-loading-indicator.is-active {
  /* SUGGESTION: Use a class like .is-active to show/hide */
  visibility: visible;
  opacity: 1;
}
.page-loading-indicator p {
  margin-top: var(--space-sm);
}

.spinner {
  border: 4px solid rgba(var(--myblue-rgb), 0.2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--myblue);
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* Apply the animation to any element with the 'disappear' class */
.disappear {
  /*
   * animation-name: fade-and-hide
   * animation-duration: 5.5s (5s wait + 0.5s fade/collapse)
   * animation-timing-function: ease-in-out (for a smooth effect)
   * animation-fill-mode: forwards (CRITICAL: keeps the element in its final state)
   */
  animation: fade-and-hide 5.5s ease-in-out forwards;
}

.info-message {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--myradius);
  font-size: 0.9em;
  line-height: 1.5;
  text-align: left; /* Messages inside a section usually look better left-aligned */

  /* Styling for a dark theme */
  background-color: var(
    --smallBackgroundColor
  ); /* Use a slightly lighter dark shade */
  color: var(--softFontColor); /* Use your standard soft text color */
  border-left: 4px solid var(--myblue); /* A colored left border makes it stand out */
}

/*
 * Specific styling for the "Your account is connected to Google" message.
 * It inherits from .info-message but adds the icon layout.
*/
.google-managed-message {
  /* Inherits padding, margin, border, etc., from .info-message */
  display: flex;
  align-items: center;
  gap: var(--space-md); /* Adds space between the icon and text */
}

/* 
 * This specifically targets the Google logo image within that message,
 * ensuring it's sized correctly and doesn't shrink.
*/
.google-managed-message img {
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* Prevents the icon from shrinking if text wraps */
}

/*
 * This ensures the text container next to the icon behaves correctly.
 * The `span` in your template will automatically be targeted.
*/
.google-managed-message span {
  flex-grow: 1; /* Allows the text to take up the remaining space */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fade-and-hide {
  /* Start: The element is fully visible */
  0% {
    opacity: 1;
    max-height: 100px; /* Or a value larger than your message will ever be */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
  }
  /* Wait point: It stays visible for almost the entire duration */
  90% {
    opacity: 1;
    max-height: 100px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
  }
  /* End: The element is fully transparent and has no height/padding */
  100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
  }
}

/*
============================================================
  COMPONENT: Sidebar
  Provides a generic, responsive sidebar layout and styles
  for its internal elements.
============================================================
  HTML Structure:
  <div class="sidebar-layout">
    <aside class="sidebar">
      <div class="sidebar-group">
        <h3 class="sidebar-group__title">Navigation</h3>
        <a href="#" class="sidebar-element active">...</a>
        <a href="#" class="sidebar-element">...</a>
      </div>
      <div class="sidebar-group">
        ... another group of elements ...
      </div>
    </aside>
    <main class="sidebar-content">
      ... Main page content
    </main>
  </div>
============================================================
*/

:root {
  /* Default values for the sidebar layout. Can be overridden. */
  --sidebar-width: 260px;
  --sidebar-layout-gap: var(--space-lg);
  --sidebar-sticky-top-offset: var(--space-lg);
}

/*
-------------------------------------
  1. Main Layout Structure
-------------------------------------
*/
.sidebar-layout {
  display: flex;
  gap: var(--sidebar-layout-gap);
  width: 100%;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  position: sticky;
  top: var(--sidebar-sticky-top-offset);
  max-height: calc(100vh - var(--sidebar-sticky-top-offset) * 2);
  overflow-y: auto;

  /* Provides internal spacing for sidebar groups */
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* Space between groups */
  padding: var(--space-lg);

  /* Border for visual separation */
  border-right: 1px solid var(--smallBackgroundColor);
}

.sidebar-content {
  flex-grow: 1;
  min-width: 0;
  padding: var(--space-lg);
}

/*
-------------------------------------
  2. Sidebar Internal Components
-------------------------------------
*/

/* A container for a logical set of elements (e.g., a nav menu) */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* Space between elements in a group */
}

/* An optional title for a group */
.sidebar-group__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--softFontColor);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-sm);
  margin: 0 0 var(--space-xs) 0;
}

/* The style for each individual clickable element in the sidebar */
.sidebar-element {
  position: relative; /* Crucial for the active state's underline */
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--myradius);
  color: var(--labelColor);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background-color: transparent;
  text-align: left;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.sidebar-element:hover {
  color: white;
  background-color: rgba(var(--myblue-rgb), 0.15);
}

/* The active state styling */
.sidebar-element.active {
  color: white;
  font-weight: 600;
  background-color: transparent; /* Override hover background to let underline stand out */
}

/* The underline effect using a pseudo-element for more control */
.sidebar-element.active::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Position it slightly below the element */
  left: var(--space-md);
  right: var(--space-md);
  height: 2px;
  background-color: var(--myblue);
  border-radius: 1px;
}

/* Remove the bullet points and default padding */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*
-------------------------------------
  3. Responsive Adjustments
-------------------------------------
*/
@media (max-width: 900px) {
  .sidebar-layout {
    flex-direction: column;
    gap: 0;
  }

  .sidebar {
    position: static;
    width: 100%;
    max-height: none;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--smallBackgroundColor);
    padding: var(--space-md); /* Adjust padding for mobile view */
    /* On mobile, we might want groups to flow horizontally */
    flex-direction: column; /* Or 'row' if you want a horizontal layout */
    gap: var(--space-lg);

    /* Swap the border from right to bottom on mobile */
    border-right: none;
    border-bottom: 1px solid var(--smallBackgroundColor);
  }

  .sidebar-content {
    padding: var(--space-md);
  }
}

.d3-tooltip,
.chart-tooltip {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 999; /* Might need to be higher than other elements like sticky nav */
  transform: translate(
    -50%,
    -110%
  ); /* Common centering trick for tooltips above cursor */

  background-color: rgba(45, 55, 72, 0.95); /* Consider a CSS variable */
  color: #f0f0f0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--myradius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

  font-family: inherit;
  font-size: 0.85em;
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
}

/* The element that triggers the tooltip on hover */
.tooltip-host {
  position: relative; /* This is crucial for positioning the ::after pseudo-element */
  cursor: help; /* Change the cursor to indicate there's more info */
}

/* The tooltip bubble itself, hidden by default */
.tooltip-host::after {
  content: attr(
    data-tooltip
  ); /* Get the tooltip text from the data-tooltip attribute */
  position: absolute;

  /* Positioning */
  bottom: 110%; /* Position above the host element */
  left: 50%;
  transform: translateX(-50%);

  /* Appearance */
  background-color: #2a2a2a; /* Use your theme's dark background */
  color: var(--labelColor);
  white-space: nowrap;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--myradius);
  font-size: 0.85em;
  font-weight: 500;
  border: 1px solid var(--smallBackgroundColor);
  z-index: 10;

  /* --- Initial hidden state --- */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none; /* The tooltip itself shouldn't be clickable */
}

/* Show the tooltip on hover */
.tooltip-host:hover::after {
  opacity: 1;
  visibility: visible;
}

/* --- Modal Styles for WorkoutOS --- */

/* The Modal Overlay / Backdrop */
/* This is the full-screen, semi-transparent background that dims the page. */
.modal-overlay {
  position: fixed; /* Position relative to the viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Use the RGB version of your background color for the overlay */
  background-color: rgba(var(--mainBackgroundColor-rgb), 0.75);
  backdrop-filter: blur(4px); /* Adds a nice "glass" effect to the background */
  z-index: 1000; /* Ensure it's on top of all other content */

  /* Use Flexbox to center the modal content vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Add a subtle fade-in animation */
  animation: fadeIn 0.3s ease-out;
}

/* The Modal Content Box */
/* This is the actual container for the form. */
.modal-content {
  /* Use your app's darker background for the modal itself */
  background: var(--smallBackgroundColor);
  border: 1px solid var(--mygray); /* A subtle border */
  padding: var(--space-lg);
  border-radius: var(--myradius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* A more pronounced shadow for dark themes */
  position: relative; /* Needed to position the close button inside it */
  max-width: 500px; /* Prevents it from being too wide on large screens */
  width: 90%; /* Responsive for smaller screens */

  /* Handle long content by making the modal scrollable */
  max-height: 90vh; /* vh = viewport height */
  overflow-y: auto;
}

/* The 'X' Close Button */
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--mygray); /* Use your gray color */
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--myLightGray); /* Lighter gray on hover */
}

/* A helper class for organizing sections within the modal */
.modal-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--mainBackgroundColor); /* Use main bg for a subtle separator */
}
.modal-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: #fff; /* Make the title stand out */
  font-weight: 600;
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--labelColor);
  font-size: 1.1rem;
  font-weight: 500;
}

/* Styling for the list of existing templates */
.template-update-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.template-update-item label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--myradius);
  transition: background-color 0.2s ease;
  border: 1px solid transparent;
}

.template-update-item label:hover {
  background-color: var(--mainBackgroundColor);
}

/* Style the radio button itself */
.template-update-item input[type="radio"] {
  /* Use accent-color for modern browsers to style the radio button's dot */
  accent-color: var(--myblue);
  width: 1.2em;
  height: 1.2em;
}

/* Styling for the form within the modal */
.modal-content .form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Ensure buttons inside the modal use your existing styles but maybe with more margin */
.modal-content .btn-base {
  width: 100%; /* Make buttons full-width inside the modal */
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The container that holds the input and the dropdown. `position: relative` is CRITICAL for positioning the absolute dropdown. */
.search-container {
  position: relative;
  max-width: 400px;
}

/* The dropdown menu itself. */
.search-results-dropdown {
  /* Core Positioning */
  position: absolute;
  top: 100%; /* Position it right below the container */
  left: 0;
  right: 0;
  z-index: 1000; /* Ensure it appears on top of other content */

  /* Appearance */
  background-color: var(--smallBackgroundColor);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--myradius);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  color: var(--labelColor);

  /* Sizing & Scrolling */
  max-height: 250px;
  overflow-y: auto;
}

/* The magic visibility rule. The dropdown is hidden by default if it has no content. */
.search-results-dropdown:empty {
  display: none;
}

/* Styling for the items inside the dropdown for a better look. */
.search-results-dropdown .search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results-dropdown .search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  cursor: default; /* It's not a link, the button is the action */
  border-bottom: 1px solid var(--mainBackgroundColor);
  transition: background-color 0.2s ease;
}

.search-results-dropdown .search-item:last-child {
  border-bottom: none;
}

.search-results-dropdown .search-item:hover {
  background-color: rgba(var(--myblue-rgb), 0.1);
}

.search-results-dropdown .info-message {
  padding: var(--space-sm) var(--space-md);
  color: var(--softFontColor);
  font-style: italic;
}

/* --- General LP Adjustments --- */
/* .lp-body { */
/* Uses body styles from styles.css: font-family, background-color, color, line-height */
/* No major overrides needed if styles.css body is suitable */
/* } */

.lp-container {
  width: 90%;
  max-width: 1100px; /* Typical content width for landing pages */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.lp-main-content > section:first-child {
  padding-top: 0; /* Remove top padding from the very first section if header is sticky/fixed */
}

/* --- LP Header --- */
.lp-site-header {
  background-color: rgba(
    var(--mainBackgroundColor-rgb),
    0.85
  ); /* Slightly transparent */
  backdrop-filter: blur(8px);
  padding: var(--space-md) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--smallBackgroundColor);
}

.lp-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.lp-logo img {
  height: 50px;
  width: auto;
}

.lp-logo span {
  font-size: 1.75rem;
  font-weight: 700;
  color: inherit;
  margin: 0;
}

.lp-logo:hover {
  color: var(--myblue);
  text-decoration: none;
}

.lp-main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* Smaller gap for nav items */
}

.lp-main-nav a {
  color: var(--softFontColor);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--myradius);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.lp-main-nav a:not(.btn-base):hover {
  color: #fff;
  text-decoration: none;
}

.lp-main-nav .btn-base {
  margin-left: var(--space-xs); /* Small margin for buttons */
  color: white;
}

/* --- LP Section Base --- */
.lp-section {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.lp-section-title {
  font-size: clamp(2rem, 5vw, 2.75rem); /* Responsive title */
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-lg);
}
.lp-section-title.left-align {
  text-align: left;
}

.lp-section-subtitle {
  font-size: 1.1rem;
  color: var(--labelColor);
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(-1 * var(--space-md)); /* Pull up slightly */
  margin-bottom: var(--space-xl);
}

.lp-text-center {
  text-align: center;
}

/* --- LP Hero Section --- */
.lp-hero-section {
  background-color: var(--mainBackgroundColor); /* Or a subtle gradient/image */
  /* Example gradient:
  background: linear-gradient(160deg, var(--mainBackgroundColor) 60%, var(--smallBackgroundColor) 100%);
  */
  padding-top: calc(var(--space-xxl) * 1.5); /* More top padding for hero */
  padding-bottom: calc(var(--space-xxl) * 2); /* More bottom padding for hero */
  text-align: center;
  overflow: hidden; /* If using angled backgrounds or large visuals */
}

.lp-hero-headline {
  font-size: clamp(2.5rem, 6vw, 3.75rem); /* Larger for hero */
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-md);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.lp-hero-subheadline {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  color: var(--labelColor);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.lp-hero-section .btn-base.large-btn {
  padding: var(--space-md) var(--space-xl);
  font-size: 1.15rem;
}

.lp-hero-visual-placeholder {
  margin-top: var(--space-xxl);
  border-radius: var(--myradius);
  /* background-color: var(--cardColor);
  border: 1px solid var(--smallBackgroundColor);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mygray); */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* If image is inside */
}
.lp-hero-visual-placeholder img {
  display: block;
  width: 100%;
  max-width: 900px; /* Control max size of mockup */
  margin: 0 auto;
  border-radius: var(--myradius);
}

/* --- LP How It Works / Benefits Section --- */
.lp-how-it-works-section {
  background-color: var(--smallBackgroundColor); /* Contrast section */
}

.lp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.lp-benefit-card {
  background-color: var(--cardColor);
  padding: var(--space-lg);
  border-radius: var(--myradius);
  text-align: center;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}
.lp-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.lp-benefit-icon {
  font-size: 2.5rem;
  color: var(--myblue);
  margin-bottom: var(--space-md);
}
.lp-benefit-card h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.lp-benefit-card p {
  color: var(--softFontColor);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* --- LP Features Section --- */
.lp-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: calc(var(--space-xxl) * 1.5);
}
.lp-feature-item:last-child {
  margin-bottom: 0;
}
.lp-feature-item-reverse {
  flex-direction: row-reverse;
}

.lp-feature-image-placeholder,
.lp-feature-image-placeholder-transparent {
  flex: 1 1 48%; /* Takes up about 48% of space */
  background-color: transparent; /* Or var(--cardColor) if you want a bg */
  border-radius: var(--myradius);
  /* min-height: 300px; */ /* Set by image */
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-feature-image-placeholder img {
  border-radius: var(--myradius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 100%;
}
.lp-feature-image-placeholder-transparent img {
  border-radius: var(--myradius);
  max-width: 100%;
}

.lp-feature-content {
  flex: 1 1 52%;
}
.lp-feature-content h3 {
  font-size: 1.75rem;
  color: #fff; /* White for better prominence */
  margin-bottom: var(--space-sm);
}
.lp-feature-content p {
  color: var(
    --labelColor
  ); /* Slightly brighter than softFontColor for body text */
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
}
.lp-learn-more {
  font-weight: 600;
  color: var(--myblue);
  text-decoration: none;
}
.lp-learn-more:hover {
  color: var(--myLightBlue);
  text-decoration: underline;
}

/* --- LP Visual Showcase Section --- */
.lp-showcase-section {
  /* background-color: var(--smallBackgroundColor); */
  background-color: var(--mainBackgroundColor);
}
.lp-showcase-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}
.lp-showcase-item {
  border-radius: var(--myradius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 100%;
  height: auto;
  object-fit: cover; /* Or 'contain' depending on image aspect ratios */
  transition: transform 0.2s ease-in-out;
}
.lp-showcase-item:hover {
  transform: scale(1.03);
}

/* --- LP Testimonials Section --- */
.lp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.lp-testimonial-card {
  background-color: var(--cardColor);
  padding: var(--space-lg);
  border-radius: var(--myradius);
  border-left: 4px solid var(--myblue);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.lp-quote {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--softFontColor);
  margin-bottom: var(--space-md);
  line-height: 1.7;
}
.lp-quote::before {
  content: "“";
  font-size: 2em;
  color: var(--myblue);
  opacity: 0.6;
  margin-right: var(--space-xs);
  line-height: 0;
  position: relative;
  top: 0.1em;
}
.lp-attribution {
  font-weight: 600;
  color: var(--labelColor);
  font-size: 0.95rem;
  text-align: right;
  margin-bottom: 0;
}

/* --- LP Final CTA Section --- */
.lp-final-cta-section {
  background-color: var(--myblue); /* Use a strong accent color */
  /* Or a gradient using your blue:
  background: linear-gradient(135deg, var(--myBtnBlue) 0%, var(--myLightBlue) 100%);
  */
}
.lp-final-cta-section h2 {
  color: #fff;
  margin-bottom: var(--space-sm);
}
.lp-final-cta-section p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}
.lp-final-cta-section .btn-base.bluebutton.large-btn {
  background-color: #fff;
  color: var(--myBtnBlue);
  border-color: #fff;
}
.lp-final-cta-section .btn-base.bluebutton.large-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--myLightBlue);
}

/* --- LP Footer --- */
.lp-site-footer {
  background-color: #1e1e1e; /* Even darker for footer */
  padding: var(--space-lg) 0;
  color: var(--mygray);
  font-size: 0.9rem;
  border-top: 1px solid var(--smallBackgroundColor);
}
.lp-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.lp-footer-nav {
  display: flex;
  gap: var(--space-md);
}
.lp-footer-nav a {
  color: var(--mygray);
  text-decoration: none;
}
.lp-footer-nav a:hover {
  color: var(--myblue);
  text-decoration: underline;
}

/* --- LP Dynamic Border --- */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes lp-rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

/* The <a> tag: Container for the border effect. */
.lp-hero-cta-animated-border {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 0;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* Padding is 0 on <a>; span handles it. */
  padding: 0 !important;

  border-radius: var(--myradius);

  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  box-sizing: border-box; /* Ensure <a> tag is border-box */

  /* If your .large-btn has width: 100%, this might be needed on the <a>
     but usually, for inline buttons, width is determined by content/padding.
     Let's keep it off for now to see if the span can dictate size. */
  /* width: 100%; */
}

/* The inner <span>: This IS your visible button */
.lp-hero-cta-animated-border span {
  display: block; /* Using block to allow width/height to behave predictably */
  box-sizing: border-box; /* CRUCIAL: Ensure padding is included in width/height */

  width: 100%; /* Make span take full width of the <a> container */
  height: 100%; /* Make span take full height of the <a> container */

  /* Replicate styles from .btn-base, .bluebutton, .large-btn */
  background-color: var(--myBtnBlue);
  color: #fafafa;
  font-weight: 500;
  line-height: 1;
  text-align: center;

  /* Padding from .large-btn */
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  padding-left: var(--space-md);
  padding-right: var(--space-md);

  font-size: 1.1rem; /* From .large-btn */

  /* border-radius makes the span fit INSIDE the ::before border. */
  border-radius: calc(
    var(--myradius) - 1px
  ); /* Assuming a 1px border from ::before */

  position: relative;
  z-index: 1;
  border: none;
}

/* The ::before creates the sharp rotating gradient "border line" */
.lp-hero-cta-animated-border::before {
  content: "";
  position: absolute;
  z-index: -1;

  inset: -3px; /* 1px thick visible sharp gradient border */

  border-radius: inherit; /* Inherits var(--myradius) from the <a> tag */
  box-sizing: border-box; /* Good practice for pseudo-elements too */

  background: conic-gradient(
    from var(--gradient-angle),
    var(--myblue),
    var(--myLightBlue),
    #a7caff,
    var(--myLightBlue),
    var(--myblue)
  );

  animation: lp-rotation 4s linear infinite;
}

/* The ::after creates the softer outer glow */
.lp-hero-cta-animated-border::after {
  content: "";
  position: absolute;
  z-index: -2;

  inset: -1px; /* Same as ::before for tightest glow */

  border-radius: inherit;
  box-sizing: border-box; /* Good practice */

  background: conic-gradient(
    from var(--gradient-angle),
    var(--myblue),
    var(--myLightBlue),
    #a7caff,
    var(--myLightBlue),
    var(--myblue)
  );

  animation: lp-rotation 4s linear infinite;
  filter: blur(4px);
}

/* --- LP Responsive Adjustments --- */
@media (max-width: 768px) {
  .lp-header-container {
    flex-direction: column;
    gap: var(--space-md);
  }
  .lp-main-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-feature-item,
  .lp-feature-item-reverse {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
  }
  .lp-feature-image-placeholder {
    margin-bottom: var(--space-md); /* Add space when stacked */
    width: 100%;
    max-width: 450px; /* Limit image size on mobile */
    margin-left: auto;
    margin-right: auto;
  }
  .lp-feature-content h3 {
    font-size: 1.5rem;
  }
  .lp-feature-content p {
    font-size: 1rem;
  }

  .lp-footer-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .lp-hero-headline {
    font-size: 2rem; /* Adjust for very small screens */
  }
  .lp-hero-subheadline {
    font-size: 1rem;
  }
  .lp-section-title {
    font-size: 1.75rem;
  }
  .lp-main-nav a {
    padding: var(--space-xs);
  }
}

/* --- Time Period Selector specific to dashboard page --- */
#time-period-selector {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md); /* SUGGESTION: Space before metric grid */
}
#time-period-selector > div:first-child {
  display: inline-flex;
  align-items: baseline; /* Align its children (label if visible, select) by baseline */
  gap: var(
    --space-xs
  ); /* Space between label and select if label becomes visible */
}
#time-period-selector label {
  /* Make labels visible and style them */
  color: var(--labelColor);
  margin-right: var(--space-xs);
  font-size: 0.9em;
}
#time-period-selector select.input-base {
  /* Specific for dashboard select if needed */
  width: auto; /* Allow select to size by content */
  min-width: 120px;
}

#custom-date-range {
  /* Dashboard custom date range */
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
#custom-date-range label {
  color: var(--labelColor);
  margin-right: var(--space-xs);
  font-size: 0.9em;
}
#custom-date-range .date-input {
  /* Specific date inputs for dashboard */
  min-width: 140px;
}

/* --- Metrics Grid on Dashboard --- */
.metric-grid {
  /* Styles specific to how dashboard lays out .metric-card components */
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: var(--space-sm);
  padding: 0; /* Remove padding, card itself has padding */
}
/* .metric-card styles come from components/cards.css */

/* Dashboard specific heatmap, pr, volume trend positioning */
#workout-heatmap {
  display: flex; /* SUGGESTION: Use flex for internal alignment of wrapper */
  flex-direction: column;
  align-items: center; /* Center the scroll wrapper if it's narrower */
  justify-content: center;
  grid-column: 1 / span 3; /* Original: 1 / 4 - adjust if grid changes */
  grid-row: 2 / span 1; /* Original: 2 - adjust if grid changes */
  padding: var(--space-md); /* More padding for larger heatmap card */
  min-height: 200px; /* SUGGESTION: Larger min-height */
  box-sizing: border-box;
}

/* #workout-heatmap { */
/*   display: grid; */
/*   place-items: center; */
/*   grid-column: 1 / 4; */
/*   grid-row: 2; */
/*   padding: var(--space-xs); */
/*   min-height: 150px; */
/*   box-sizing: border-box; */
/* } */

.heatmap-scroll-wrapper {
  overflow-x: auto;
  max-width: 100%;
  width: 100%; /* Ensure it takes full width of its parent */
  display: block;
  scrollbar-width: thin;
  scrollbar-color: var(--mygray) var(--smallBackgroundColor);
  padding-bottom: var(--space-xs); /* Space for scrollbar */
}
.heatmap-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}
.heatmap-scroll-wrapper::-webkit-scrollbar-track {
  background: var(--smallBackgroundColor);
  border-radius: 3px;
}
.heatmap-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--mygray);
  border-radius: 3px;
}
.heatmap-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--myLightGray);
}

.heatmap-grid {
  display: grid; /* D3.js or JS will set columns/rows for the actual heatmap squares */
  margin: 0 auto; /* Center the grid of squares if it's not full width */
}

/* The container created by JS that holds month labels, grid, and legend */
.heatmap-generated-content {
  display: inline-block; /* Allows it to shrink to content width */
  margin: 0 auto; /* Centers it within the scroll wrapper if wrapper is wider */
  text-align: right;
}

.heatmap-legend {
  display: inline-flex; /* Changed from flex to inline-flex to respect parent text-align */
  /* Or keep display: flex and use margin-left: auto on legendContainer to push it right */
  align-items: center;
  /* justify-content: flex-end; */ /* No longer primary alignment method if using text-align or margin-left: auto */
  margin-top: var(--space-xs); /* Use theme variable */
  font-size: 0.8em; /* Use em for scalability */
  color: var(--labelColor); /* Use theme variable */
  /* padding-right: calc(var(--square-size) / 2); /* This padding might not be needed if aligned correctly */
  width: 100%; /* Make legend container take full width of its parent to use justify-content */
  justify-content: flex-end; /* Then push content within it to the right */
}

.streak-pr-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-sm);
  font-size: 0.9em;
  color: var(--labelColor);
}
.streak-pr-icon {
  color: var(--myblue);
  margin-right: var(--space-xs);
  font-size: 1.1em;
}
.streak-pr-value {
  font-weight: bold;
  color: white;
}

#recent-prs {
  /* This is a .metric-card.list-card */
  grid-column: 1 / span 2;
  grid-row: 3 / span 1; /* Original: 3 */
}

.list-card {
  /* Styles for cards that contain lists, like Recent PRs */
  display: flex;
  flex-direction: column;
  text-align: left;
  min-height: 200px; /* SUGGESTION: Consistent min height. Before 180px */
  padding: var(
    --space-md
  ); /* Consistent padding from .card-container or .metric-card */
}

.list-card > p:first-child {
  /* Title paragraph in list cards */
  text-align: center;
  margin: 0 0 var(--space-md) 0; /* Remove its own margin, rely on card padding */
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--smallBackgroundColor);
  font-weight: 600; /* SUGGESTION: Make title bolder */
  color: white; /* SUGGESTION: Title color white */
  flex-shrink: 0;
  position: relative;
}

/* .list-card p { */
/*   text-align: center; */
/*   margin-bottom: var(--space-sm); */
/*   border-bottom: 1px solid var(--smallBackgroundColor); */
/*   padding-bottom: var(--space-xs); */
/*   flex-shrink: 0; */
/*   position: relative; */
/* } */

#recent-prs p > i.fa-medal {
  color: var(--myblue);
  margin-right: var(--space-sm);
}
#pr-count-value {
  color: white;
  font-weight: 700;
  margin: 0 2px;
}
#recent-prs p > span:not(#pr-count-value) {
  color: white;
}

/* #pr-list { */
/*   list-style: none; */
/*   padding: 0 var(--space-xs); */
/*   margin: 0; */
/*   overflow-y: auto; */
/*   flex-grow: 1; */
/*   min-height: 50px; */
/* } */

#pr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1; /* Allow list to take remaining space in card */
  min-height: 50px; /* Avoid collapse */
  max-height: 12.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--mygray) var(--smallBackgroundColor);
}
#pr-list::-webkit-scrollbar {
  width: 6px;
}
#pr-list::-webkit-scrollbar-track {
  background: var(--smallBackgroundColor);
  border-radius: var(--myradius);
}
#pr-list::-webkit-scrollbar-thumb {
  background: var(--mygray);
  border-radius: var(--myradius);
}
#pr-list::-webkit-scrollbar-thumb:hover {
  background: var(--myLightGray);
}

#pr-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 1px solid var(--smallBackgroundColor);
  font-size: 0.9em;
  gap: var(--space-sm);
}
#pr-list li:last-child {
  border-bottom: none;
}
#pr-list li.no-prs {
  /* This is a .no-data-message essentially */
  display: none; /* JS controlled */
  /* Styles from global .no-data-message should apply */
}

/* #pr-list li.no-prs { */
/*   display: none; */
/*   justify-content: center; */
/*   align-items: center; */
/*   border-bottom: none; */
/*   padding: var(--space-sm); */
/*   height: 100%; */
/*   text-align: center; */
/*   font-style: italic; */
/*   color: var(--softFontColor); */
/* } */

.pr-exercise {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-basis: 40%;
  flex-shrink: 1;
}
.pr-detail {
  color: var(--myblue);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  flex-basis: 40%;
}
.pr-date {
  font-size: 0.9em;
  color: var(--softFontColor);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  flex-basis: 20%;
}

#volume-trend-card {
  /* grid-column: 3 / span 3; */
  /* grid-row: 3 / span 1; */
  /* Originals below */
  grid-column: 4 / span 2;
  grid-row: 3;
}

/* D3 Chart Specific (can be global or scoped if many charts need these) */
.axis path,
.axis line {
  fill: none;
  stroke: var(--softFontColor);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
.axis text {
  fill: var(--softFontColor);
  font-size: 0.85em;
}
.axis-label {
  fill: var(--softFontColor);
  font-size: 0.85em;
  text-anchor: middle;
}
.volume-line {
  fill: none;
  stroke: var(--myblue);
  stroke-width: 2px;
}
.chart-tooltip strong {
  font-weight: 600;
  color: #ffffff;
  margin-right: var(--space-xs);
}

/* Premium Styles (already well-defined, ensure they work with .metric-card base) */
/* ... (Keep .premium-metric-blur, .premium-blur-overlay styles) ... */
.premium-metric-blur > *:not(.premium-blur-overlay) {
  /* Apply blur to direct children EXCEPT the overlay itself */
  filter: blur(4px); /* Adjust blur amount (3px-5px is usually good) */
  /* Optional: Prevent interaction with blurred content */
  pointer-events: none;
  user-select: none; /* Prevent text selection */
  transition: filter 0.2s ease-in-out; /* Smooth transition if class is added/removed */
}

/* The overlay div itself */
.premium-blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    var(--mainBackgroundColor-rgb),
    0.6
  ); /* Semi-transparent background matching theme */
  /* Optional: Frosted glass effect (can impact performance slightly) */
  /* backdrop-filter: blur(1px); */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;

  /* Initially hidden */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
  pointer-events: none;
}

/* Content within the overlay */
.premium-blur-overlay .overlay-content {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.premium-blur-overlay .overlay-content i {
  font-size: 1.8em;
  color: var(--myblue);
}
.premium-blur-overlay .overlay-content span {
  font-size: 0.9em;
  max-width: 80%;
}

.premium-blur-overlay .upgrade-btn {
  /* Use existing button styles */
  margin-top: var(--space-xs);
  pointer-events: auto;
  cursor: pointer;
}

/* Show overlay on hover of the blurred container */
.premium-metric-blur:hover .premium-blur-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Slightly scale up the card on hover for feedback */
.premium-metric-blur:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

/* --- Responsive Adjustments for Dashboard Grid --- */
@media (max-width: 992px) {
  .metric-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(180px, 1fr)
    ); /* SUGGESTION: Slightly wider min for tablet */
  }
  #workout-heatmap,
  #recent-prs,
  #volume-trend-card,
  #muscle-frequency-card,
  #muscle-balance-card,
  #pr-distribution-card {
    min-height: 180px; /* Ensure cards have some height when stacked */
  }
}

@media (max-width: 640px) {
  #time-period-selector,
  #custom-date-range {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  #time-period-selector > div:first-child, /* Container of main select */
  #custom-date-range {
    width: 100%; /* Make each group take full width when stacked */
  }
  #time-period-selector > div,
  #custom-date-range > div,
  #custom-date-range > input {
    width: 100%; /* Make elements in time selector stack nicely */
  }
  #custom-date-range button {
    width: 100%;
    margin-top: var(--space-sm);
  }

  .metric-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(150px, 1fr)
    ); /* SUGGESTION: Or repeat(2,1fr) for definite 2 columns */
  }
  /* Grid item ordering is complex and was specific, keep as is unless it breaks */
}

/* @media (max-width: 992px) { */
/*   .metric-grid { */
/*     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); */
/*     gap: var(--space-sm); */
/*   } */
/*   #workout-heatmap { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 1; */
/*   } */
/*   #recent-prs { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 3; */
/*   } */
/*   #volume-trend-card { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 4; */
/*   } */
/*   #muscle-frequency-card { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 5; */
/*   } */
/*   #muscle-balance-card { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 6; */
/*   } */
/*   #pr-distribution-card { */
/*     grid-column: 1 / -1; */
/*     grid-row: auto; */
/*     order: 7; */
/*   } */
/**/
/*   .metric-card:not(#workout-heatmap):not(#recent-prs):not( */
/*       #volume-trend-card */
/*     ):not(#muscle-frequency-card):not(#muscle-balance-card):not( */
/*       #pr-distribution-card */
/*     ) { */
/*     grid-column: auto / span 1; */
/*     order: 2; */
/*   } */
/**/
/*   .metric-card h3 { */
/*     font-size: 1.7em; */
/*   } */
/* } */
/**/
/* @media (max-width: 640px) { */
/*   #time-period-selector { */
/*     flex-direction: column; */
/*     align-items: stretch; */
/*     gap: var(--space-sm); */
/*   } */
/*   #custom-date-range { */
/*     flex-direction: column; */
/*     align-items: stretch; */
/*     gap: var(--space-xs); */
/*     width: 100%; */
/*   } */
/*   #custom-date-range label { */
/*     margin-top: var(--space-xs); */
/*     margin-bottom: 2px; */
/*   } */
/*   #custom-date-range input[type="date"] { */
/*     width: 100%; */
/*     box-sizing: border-box; */
/*   } */
/*   #custom-date-range button { */
/*     width: 100%; */
/*     margin-top: var(--space-sm); */
/*   } */
/**/
/*   .metric-grid { */
/*     grid-template-columns: repeat(2, 1fr); */
/*     gap: var(--space-sm); */
/*   } */
/**/
/*   .metric-grid > .metric-card { */
/*     grid-column: auto / span 1 !important; */
/*     order: 0 !important; */
/*   } */
/**/
/*   .metric-card { */
/*     padding: var(--space-sm); */
/*   } */
/*   .metric-card h3 { */
/*     font-size: 1.6em; */
/*   } */
/*   .metric-card p { */
/*     font-size: 0.85em; */
/*   } */
/*   .donut-chart-container { */
/*     height: 180px; */
/*   } */
/*   .list-card { */
/*     min-height: 180px; */
/*   } */
/*   #pr-list li { */
/*     font-size: 0.85em; */
/*     gap: var(--space-xs); */
/*   } */
/*   .pr-detail { */
/*     flex-basis: 30%; */
/*   } */
/*   .pr-date { */
/*     flex-basis: 25%; */
/*   } */
/*   .pr-exercise { */
/*     flex-basis: 45%; */
/*   } */
/* } */
/**/

#workout-container {
  /* Main wrapper for the workouts page content */
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* --- Session Creation Form --- */
#session-container.form-container {
  padding-bottom: var(--space-xs); /* Add some bottom padding */
}

#session-form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}

#session-form .input-base {
  /* Inputs within the session form */
  width: auto; /* Allow them to size based on flex properties */
  margin-bottom: 0; /* Remove default margin if from .input-base */
}

#session-form #session-date {
  min-width: 160px; /* SUGGESTION: Slightly more space */
  flex: 1 1 160px; /* Allow to grow a bit but prioritize basis */
}

#session-form #session-name {
  min-width: 200px; /* SUGGESTION: More space for name */
  flex: 2 1 200px; /* Allow to grow more */
}

#session-form #session-comment {
  min-width: 200px;
  flex: 3 1 250px; /* Allow to grow most */
}

/* #session-form #session-date { */
/*   min-width: 150px; */
/*   flex-basis: 180px; */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/* } */
/**/
/* #session-form #session-name { */
/*   min-width: 150px; */
/*   flex-basis: 180px; */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/* } */
/**/
/* #session-form #session-comment { */
/*   flex-grow: 1; */
/*   flex-shrink: 1; */
/*   min-width: 150px; */
/*   flex-basis: auto; */
/* } */

/* #session-form button[type="submit"] { */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/* } */

#session-form button[type="submit"] {
  flex-shrink: 0; /* Prevent button from shrinking */
}

/* --- Sessions List --- */
#sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.session-container {
  /* Individual session card */
  border-radius: var(--myradius);
  padding: var(--space-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.session-header {
  display: flex;
  flex-wrap: wrap; /* Allow header items to wrap */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--smallBackgroundColor);
}

.session-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  flex-grow: 1; /* Allow text content to take available space */
}

.session-name {
  font-weight: 600;
  font-size: 1.25rem;
  color: white;
  line-height: 1.3;
  word-break: break-word; /* SUGGESTION: Allow long names to break */
}

.session-comment {
  display: block;
  font-size: 0.9em;
  color: var(--softFontColor);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.session-header #session-date-span {
  display: inline-block;
  vertical-align: middle;
}

.session-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Editing state for session header */
#sessions-list .session-container.is-editing .session-text-content {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}
#sessions-list .session-container.is-editing .session-name-input,
#sessions-list .session-container.is-editing .session-comment-input,
#sessions-list .session-container.is-editing .session-date-input {
  /* Apply to date input too */
  margin-bottom: 0; /* Remove margin from input-base */
  font-size: 1rem;
  padding: var(--space-xs) var(--space-sm);
}
#sessions-list .session-container.is-editing .session-name-input {
  flex: 1 1 150px;
}
#sessions-list .session-container.is-editing .session-comment-input {
  flex: 2 1 200px;
}
#sessions-list .session-container.is-editing .session-date-input {
  flex: 0 0 160px;
}

/* #sessions-list .session-container.is-editing .session-name-input { */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/*   width: auto; */
/*   min-width: 150px; */
/* } */
/* #sessions-list .session-container.is-editing .session-comment-input { */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/*   width: auto; */
/*   min-width: 150px; */
/* } */
/* #sessions-list */
/*   .session-container.is-editing */
/*   .session-text-content */
/*   > [id^="session-date-"] { */
/*   flex-grow: 0; */
/*   flex-shrink: 0; */
/* } */
/* #sessions-list .session-container.is-editing .session-date-input { */
/*   width: auto; */
/*   min-width: 140px; */
/* } */

/* --- Sets within a Session --- */
.sets-container {
  /* Container for exercise cards within a session */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-md);
  box-sizing: border-box;
  width: 100%;
}
/* .sets-container .card-name refers to .card-container .card-name, handled in cards.css */
/* Styles for select.exercise-edit-select inside .sets-container .card-header are specific enough */
/* .sets-container .card-name { */
/*   font-size: 1rem; */
/*   font-weight: 600; */
/* } */
/* .sets-container .card-header select.input-base { */
/*   /* Exercise edit select */
*/
/*   width: auto; */
/*   flex-grow: 1; */
/*   margin: -4px 0; */
/* } */
/**/
.sets-container .card-header select.exercise-edit-select {
  width: auto;
  min-width: 150px;
  max-width: 250px;
  flex-grow: 1; /* Allow it to take space if card name is short */
  margin: -4px 0;
  /* margin-right: var(--space-sm); */
}

/* Form for adding a new set */
.set-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* Align to bottom for button */
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  background-color: rgba(
    var(--mainBackgroundColor-rgb),
    0.5
  ); /* SUGGESTION: Subtle background */
  border-radius: var(--myradius);
}
.set-form .input-base {
  margin-bottom: 0;
}
.set-form select.dropdown-input {
  min-width: 180px;
  flex: 2 1 180px;
}
.set-form input.number-input {
  width: 80px;
  flex: 0 0 80px;
}
.set-form input.dropdown-input {
  min-width: 150px;
  flex: 1 1 150px;
}
.set-form .add-set-btn {
  flex-shrink: 0;
}

/* Global Edit Mode Button Visibility (already well-defined) */

/* 1. Default State: Hide ALL action buttons */
#sessions-list .set-edit-btn,
#sessions-list .set-delete-btn,
#sessions-list .save-set-btn,
#sessions-list .cancel-set-btn,
#sessions-list [id^="edit-btn-"],
#sessions-list [id^="delete-btn-"],
#sessions-list [id^="save-edit-btn-"],
#sessions-list [id^="cancel-edit-btn-"],
#sessions-list .exercise-set-edit-btn,
#sessions-list .exercise-set-delete-btn,
#sessions-list .save-exercise-btn,
#sessions-list .cancel-exercise-btn {
  display: none;
}

/* 2. Global Edit Mode IS ACTIVE: Show Edit/Delete buttons */
/*    This rule applies UNLESS overridden by rule 3 */
#sessions-list.edit-mode-active .set-edit-btn,
#sessions-list.edit-mode-active .set-delete-btn,
#sessions-list.edit-mode-active [id^="edit-btn-"],
#sessions-list.edit-mode-active [id^="delete-btn-"],
#sessions-list.edit-mode-active .exercise-set-edit-btn,
#sessions-list.edit-mode-active .exercise-set-delete-btn {
  display: inline-block;
}

/* 3. Specific Item IS BEING EDITED (.is-editing is present): */
/*    Hide Edit/Delete for THIS item (overrides rule 2) */
/*    Show Save/Cancel for THIS item (overrides rule 1) */
#sessions-list tr.is-editing .set-edit-btn,
#sessions-list tr.is-editing .set-delete-btn,
#sessions-list .session-container.is-editing [id^="edit-btn-"],
#sessions-list .session-container.is-editing [id^="delete-btn-"],
#sessions-list .card-container.is-editing .exercise-set-edit-btn,
#sessions-list .card-container.is-editing .exercise-set-delete-btn {
  display: none; /* Hide Edit/Delete when editing this item */
}

#sessions-list tr.is-editing .save-set-btn,
#sessions-list tr.is-editing .cancel-set-btn,
#sessions-list .session-container.is-editing [id^="save-edit-btn-"],
#sessions-list .session-container.is-editing [id^="cancel-edit-btn-"],
#sessions-list .card-container.is-editing .save-exercise-btn,
#sessions-list .card-container.is-editing .cancel-exercise-btn {
  display: inline-block; /* Show Save/Cancel when editing this item */
}

/* Ensure the main toggle button and add button are always visible */
#toggle-session-edit-btn-container #toggle-session-edit-btn,
#sessions-list .set-form .add-set-btn {
  display: inline-block;
}

#sessions-list > div:only-child, /* Target the message div when it's the ONLY child */
.sets-container > div:only-child {
  /* Target the message div when it's the ONLY child */
  text-align: center;
  padding: var(--space-xl);
  color: white;
  font-style: italic;
  background-color: transparent;
  box-shadow: none;
}

/* No sessions/sets message (can use global .no-data-message from tables.css or messages.css) */
#sessions-list > .no-data-message, /* Assuming you'd add class .no-data-message */
.sets-container > .no-data-message {
  /* Styles inherited from global .no-data-message */
  padding: var(--space-xl) var(--space-md); /* Override if needed */
}

/* --- Free User Limits Specific to Workouts Page --- */
.save-template-btn {
  /* Assuming this button is specifically on the workouts page */
  position: relative; /* For potential premium badge/tooltip */
}

/* --- Responsive Adjustments for Workouts Page --- */
@media (max-width: 768px) {
  /* Tablet */
  #workout-container {
    gap: var(--space-md);
  }
  #session-form-container {
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
  }
  #session-form {
    gap: var(--space-sm);
  }
  #session-form #session-date,
  #session-form #session-name {
    flex-basis: calc(50% - var(--space-sm) / 2);
    min-width: 140px;
  }
  #session-form #session-comment {
    flex-basis: 100%;
  }

  .session-container {
    padding: var(--space-md);
  }
  .sets-container {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .set-form {
    padding: var(--space-sm);
    gap: var(--space-xs);
  } /* Tighter gap in set form */
}

@media (max-width: 480px) {
  /* Phone */
  #session-form #session-date,
  #session-form #session-name,
  #session-form #session-comment,
  #session-form button[type="submit"] {
    flex-basis: 100%;
    width: 100%;
  }
  #session-form .input-base {
    width: 100%;
  }

  .session-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .session-controls {
    margin-top: var(--space-sm);
    width: 100%;
    justify-content: flex-end;
  }

  .set-form select.dropdown-input,
  .set-form input.number-input,
  .set-form input.dropdown-input {
    /* These are inputs for exercise, reps, weight, comment */
    flex-basis: 100%; /* Stack them in the set form on small phones */
    width: 100%;
  }
  .set-form .add-set-btn {
    width: 100%;
    margin-top: var(--space-sm);
  }
}

/* Container for displaying muscle group cards */
.muscle-group-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-sm);
}

.exercises-list {
  /* List of exercises within a muscle group card */
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 250px; /* SUGGESTION: Limit height and make scrollable if many exercises */
  overflow-y: auto; /* Added */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: var(--mygray) var(--smallBackgroundColor); /* For Firefox */
}
.exercises-list::-webkit-scrollbar {
  width: 6px;
}
.exercises-list::-webkit-scrollbar-track {
  background: var(--smallBackgroundColor);
  border-radius: 3px;
}
.exercises-list::-webkit-scrollbar-thumb {
  background: var(--mygray);
  border-radius: 3px;
}
.exercises-list::-webkit-scrollbar-thumb:hover {
  background: var(--myLightGray);
}

.exercises-list li {
  display: flex;
  align-items: center;
  justify-content: space-between; /* SUGGESTION: Push text and buttons apart */
  gap: var(--space-sm);
  margin-bottom: 2px;
  transition: background-color 0.15s ease;
}

.exercises-list li:not(:has(input[type="text"])):hover {
  /* Avoid hover when input is present */
  background-color: rgba(
    var(--myblue-rgb),
    0.05
  ); /* SUGGESTION: Theme-colored hover */
}

.exercises-list li span {
  /* Exercise name display */
  flex-grow: 1;
  color: var(--labelColor);
  font-size: 0.95rem;
  padding-left: var(--space-xs); /* SUGGESTION: Small indent */
  overflow: hidden; /* For ellipsis */
  text-overflow: ellipsis; /* Added */
  white-space: nowrap; /* Added */
}

/* Edit input styling within card headers or exercise lists */
.card-header .edit-input, /* For MG name editing */
.exercises-list li .edit-input {
  /* For exercise name editing */
  padding: var(--space-xs);
  margin: -2px 0;
  font-size: 0.95rem;
}

.exercises-list li .edit-input {
  /* Exercise name input takes available space */
  flex-grow: 1;
  margin-right: var(--space-xs);
}

.exercises-list li .btn-base {
  /* Action buttons (edit/delete exercise) */
  flex-shrink: 0;
  padding: var(
    --space-xs
  ); /* SUGGESTION: Smaller padding for icon buttons in list */
}

/* --- Limit for free users --- */
#create-mg-btn,
#create-ex-btn {
  position: relative;
}

/* Responsive Adjustments for Exercises Page */
@media (max-width: 768px) {
  /* Tablet */
  #muscle-group-form,
  #exercise-form {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  #muscle-group-form .input-base,
  #exercise-form input[type="text"].input-base,
  #exercise-form select.input-base {
    flex-basis: calc(
      50% - var(--space-sm) / 2
    ); /* Try to fit two inputs per row */
    min-width: 130px;
  }
  #muscle-group-form button, /* Create button */
  #exercise-form button {
    /* Add Exercise button */
    flex-basis: 100%; /* Button takes full width below inputs */
    margin-top: var(--space-sm);
  }

  .muscle-group-container {
    grid-template-columns: 1fr; /* Stack muscle group cards */
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  /* Phone */
  #muscle-group-form .input-base,
  #exercise-form input[type="text"].input-base,
  #exercise-form select.input-base {
    flex-basis: 100%; /* Stack all inputs in forms */
  }
}

/*
============================================================
  PAGE: Analytics
  Contains styles ONLY for components unique to the analytics page.
  General layout and sidebar element styles are in components/sidebar.css.
============================================================
*/

/* 
==============================================
  1. Sidebar Form Styling (Analytics Specific)
==============================================
*/
#analytics-time-period-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#analytics-custom-date-range {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--smallBackgroundColor);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
}
#analytics-custom-date-range label {
  font-size: 0.85em;
}
#analytics-custom-date-range input[type="date"] {
  width: 100%;
  margin-bottom: var(--space-xs);
}
#analytics-custom-date-range button {
  width: 100%;
  margin-top: var(--space-xs);
}

/* 
==============================================
  2. Main Content Area Styling
==============================================
*/
.analytics-section-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* Space between rows of components */
}

/* Generic row for summary metric cards */
.analytics-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

/* Generic row for chart cards */
.analytics-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-md);
}

/* Style for cards containing charts */
.analytics-charts-row .metric-card,
.analytics-charts-row .table-container-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}

/* The container div for the chart itself */
.analytics-chart-container {
  flex-grow: 1; /* Allow chart to take available vertical space */
  width: 100%;
  min-height: 250px;
  position: relative;
}

/* Specific component styling for Exercise selector */
#ae-exercise-selector-container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 450px;
}
#ae-exercise-select {
  flex-grow: 1;
}

/* 
==============================================
  3. Table Specific Styles
==============================================
*/
/* Center-align numeric columns in the workout log table */
#aw-log-table th:nth-child(n + 3),
#aw-log-table td:nth-child(n + 3) {
  text-align: center;
}

/* Generic styles for sortable table headers (re-add here) */
.data-table th[data-sort-key] {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.data-table th[data-sort-key]::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  color: var(--labelColor);
  opacity: 0.4;
}
.data-table th[data-sort-key].sorted-asc::after {
  content: "▲";
  opacity: 1;
}
.data-table th[data-sort-key].sorted-desc::after {
  content: "▼";
  opacity: 1;
}

/* 
==============================================
  4. Responsive Adjustments (Analytics Specific)
==============================================
*/
@media (max-width: 900px) {
  /* Make the time period selector horizontal on mobile */
  #analytics-time-period-selector {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
  }
  #analytics-time-period-selector > div:not(#analytics-custom-date-range) {
    flex-grow: 1;
    min-width: 150px;
  }
  #analytics-custom-date-range {
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: var(--space-sm);
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    width: auto;
  }
  #analytics-custom-date-range label {
    display: none;
  }

  /* Adjust grid layouts for mobile */
  .analytics-metrics-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
  }

  .analytics-charts-row {
    /* Allow charts to stack more easily on smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Container for the inline stats */
.community-stats-inline {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-sm) 0;
}

/* Individual clickable stat link */
.stat-link {
  color: var(--labelColor);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.stat-link:hover {
  color: var(--myblue); /* On hover, highlight with the theme's accent color */
}

/* The text label part (e.g., "Followers:") */
.stat-label-inline {
  color: var(--softFontColor);
}

/* The number part */
.stat-value-inline {
  font-weight: 700;
  color: #fff; /* Make the number stand out */
  margin-left: var(--space-sm); /* Space between the label and the number */
}

/* --- Styles for the Detailed List Page (Keep these as they are) --- */

/* Header for the follower/following list pages */
.community-list-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Container for the user list */
.community-user-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A single user row in the list */
.community-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--myradius);
}

.community-user-item .user-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.community-user-item:hover {
  background-color: rgba(var(--myblue-rgb), 0.05);
}

/* The small "Follows you" badge */
.follows-you-badge {
  background-color: rgba(var(--myblue-rgb), 0.2);
  color: var(--myblue);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

/* Grid for the 5-column metric row */
.public-summary-grid-5-col {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.public-user-heatmap {
  grid-column: 1 / -1;
}

.grid-span-2 {
  grid-column: span 2;
}

/* Grid for the 3-column chart row */
.public-summary-grid-4-col {
  grid-template-columns: repeat(4, minmax(250px, 1fr));
}

/* Style for non-clickable private usernames */
.private-username {
  color: var(--softFontColor);
  font-weight: 600;
}

#user-profile-page {
  /* Main container for the user profile content */
  max-width: 800px; /* SUGGESTION: Slightly narrower for better readability */
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-lg) 0; /* SUGGESTION: Add vertical padding */
}

.profile-section {
  /* Each distinct section like "Account Info", "Change Password" */
  padding: var(--space-xl); /* SUGGESTION: More padding */
  border-radius: var(--myradius);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--smallBackgroundColor);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* SUGGESTION: Subtle shadow */
}

.profile-section h3 {
  margin-top: 0;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--smallBackgroundColor);
  color: white;
  font-weight: 600;
  font-size: 1.35rem; /* SUGGESTION: Slightly larger */
}

.profile-section h4 {
  color: white;
  font-weight: 500;
  font-size: 1.1rem;
}

/* Displaying profile info (non-edit mode) */
.profile-info {
  /* For the value part */
  font-weight: 500;
  color: white;
  line-height: 1.5;
  word-break: break-all; /* For long email or username */
  flex: 1 1 200px; /* Allow value to take space and wrap */
}

/* Form groups for editing profile information */
.form-group-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  position: relative;
}

.form-group-profile label {
  flex: 0 0 130px; /* SUGGESTION: Slightly wider label */
  text-align: left; /* Keep left aligned */
  /* padding-right: var(--space-sm); */ /* Gap handles spacing now */
  margin-bottom: 0;
  color: var(--labelColor);
  font-weight: 500;
}

.form-group-profile .display-value, /* Value shown when not editing */
.form-group-profile .edit-area {
  /* Container for input + buttons when editing */
  flex: 1 1 250px; /* Allow to grow and shrink, give it a good base, 1 1 auto */
  min-width: 200px;
}

.form-group-profile .edit-area {
  /* Styles for the editing state */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.form-group-profile .edit-area .input-base {
  flex-grow: 1; /* Input takes most space */
  margin-bottom: 0; /* Override default input margin */
}

.form-group-profile .edit-area button {
  /* Save/Cancel buttons */
  flex-shrink: 0;
  margin-bottom: 0; /* Override default button margin */
}

.form-group-profile .icon-btn {
  /* Edit icon button */
  flex-shrink: 0;
  margin-left: var(--space-sm);
  /* Styles for icon-btn should be in buttons.css */
}

/* Error message positioning within a form-group-profile */
.form-group-profile .error-message.full-width {
  /* Assumes error applies to the input in this group */
  flex-basis: 100%;
  order: 3;
  margin-left: calc(130px + var(--space-md));
  margin-top: var(--space-xs);
  padding-right: 0; /* No extra padding needed on right */
  text-align: left;
}

/* --- Profile Picture Section Styles --- */

.profile-picture-layout {
  display: flex;
  align-items: center; /* Vertically align image and controls */
  gap: var(--space-xl);
  flex-wrap: wrap; /* Allow stacking on small screens */
}

.profile-picture-preview {
  flex-shrink: 0; /* Prevent the image from shrinking */
}

.profile-page-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Perfect circle */
  object-fit: cover; /* Prevents image stretching */
  border: 4px solid var(--smallBackgroundColor);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: block; /* Removes any extra space below the image */
}

.profile-picture-actions {
  flex-grow: 1; /* Let the controls take up remaining space */
  display: flex;
  flex-direction: column; /* Stack controls vertically */
  align-items: flex-start; /* Align to the left */
  gap: var(--space-md);
}

.profile-picture-actions .info-message-small {
  font-size: 0.9rem;
  color: var(--labelColor);
  margin: 0;
}

.profile-picture-actions .input-group label {
  /* Style the "Choose Image" button */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

/* This is the hidden default file input */
.input-file {
  display: none;
}

.profile-picture-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Style for the upload indicator spinner */
.profile-picture-actions .htmx-indicator {
  color: var(--labelColor);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Responsive User Profile */
@media (max-width: 768px) {
  /* Tablet */
  .profile-section {
    padding: var(--space-lg);
  }
  .form-group-profile {
    gap: var(--space-sm);
  }
  .form-group-profile label {
    flex-basis: 100px; /* Slightly narrower label */
  }
  .form-group-profile .error-message.full-width {
    margin-left: calc(100px + var(--space-sm));
  }
}

@media (max-width: 600px) {
  /* Phone */
  #user-profile-page {
    padding: var(--space-md) 0; /* Less vertical padding for the page */
  }
  .profile-section {
    padding: var(--space-md);
  }
  .form-group-profile {
    flex-direction: column; /* Stack label and input area */
    align-items: stretch; /* Make them full width */
  }
  .form-group-profile label {
    flex-basis: auto; /* Reset basis */
    margin-bottom: var(--space-xs); /* Space below label when stacked */
    text-align: left;
  }
  .form-group-profile .display-value,
  .form-group-profile .edit-area {
    width: 100%;
  }
  .form-group-profile .edit-area .input-base {
    min-width: 0; /* Allow input to be smaller if needed */
  }
  .form-group-profile .error-message.full-width {
    margin-left: 0; /* No indent when stacked */
    order: 2; /* Error message right below input area */
  }
  .profile-info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-info-item strong {
    flex-basis: auto;
    margin-bottom: var(--space-xs);
  }

  .profile-picture-layout {
    flex-direction: column; /* Stack image and controls */
    align-items: center; /* Center everything when stacked */
    gap: var(--space-lg);
  }

  .profile-picture-actions {
    align-items: center; /* Center the buttons below the image */
    width: 100%;
  }

  .profile-picture-controls {
    justify-content: center;
  }
}

#pricing-container {
  padding: var(--space-xl) var(--space-md);
  max-width: 960px; /* SUGGESTION: Slightly wider max-width for 3 cards side-by-side */
  margin: 0 auto;
  text-align: center;
}

#pricing-container h2 {
  margin-bottom: var(--space-sm);
  font-size: 2.2rem; /* SUGGESTION: Larger heading */
  color: #fff;
}

#pricing-container .subtitle {
  margin-bottom: var(--space-xl);
  color: var(--softFontColor);
  font-size: 1.1em;
  max-width: 600px; /* SUGGESTION: Limit width for readability */
  margin-left: auto; /* Added */
  margin-right: auto; /* Added */
}

.plan-cards-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.plan-card {
  background-color: var(--cardColor);
  border-radius: var(--myradius);
  padding: var(--space-lg);
  border: 1px solid var(--smallBackgroundColor); /* SUGGESTION: Subtle border */
  flex: 1 1 300px;
  max-width: 350px; /* SUGGESTION: Adjust max-width for 3-up or 2-up */
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  position: relative;
  text-align: left; /* SUGGESTION: Align content left within card */
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.plan-card.premium {
  /* This class highlights the recommended plan */
  border-color: var(--myblue);
  box-shadow: 0 5px 15px rgba(var(--myblue-rgb), 0.2);
}
.plan-card.premium:hover {
  transform: scale(1.03) translateY(-5px); /* Combine hover effect */
}

.plan-card h3 {
  /* Plan name, e.g., "Free", "Premium" */
  margin-bottom: var(--space-sm); /* SUGGESTION: More space */
  font-size: 1.5rem; /* SUGGESTION: Adjusted size */
  color: #fff;
  text-align: center; /* Center plan name */
}

.plan-price {
  font-size: 1.2em;
  color: white;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.plan-price-split {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: var(--space-lg);
  width: 100%;
  border-bottom: 1px solid var(--smallBackgroundColor); /* SUGGESTION: Separator */
  padding-bottom: var(--space-md); /* Added */
}

.price-amount {
  font-size: 2.8rem; /* SUGGESTION: Larger price */
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-align: right;
}

.price-period {
  font-size: 1rem;
  color: var(--softFontColor); /* SUGGESTION: Softer color. Before white */
  font-weight: 500;
  margin-left: var(--space-xs); /* Space between amount and period */
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg) 0; /* Push button to bottom, consistent margin */
  text-align: left;
}

.features-list li {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
  color: var(--softFontColor);
  font-size: 0.95em;
  line-height: 1.4; /* SUGGESTION: Improve readability of feature list */
}

.feature-text-premium {
  color: white; /* Or var(--labelColor) for slightly softer */
  font-weight: 500; /* SUGGESTION */
}

.feature-icon {
  width: 20px;
  margin-right: var(--space-md); /* SUGGESTION: More space for icon */
  font-size: 1.1em;
  color: var(
    --myblue
  ); /* SUGGESTION: Use theme color for check/positive icons */
}
.icon-minus {
  color: var(--mygray); /* Use consistent grey for unavailable features */
}
.icon-cross {
  color: #ef4444;
}

.plan-button-area {
  margin-top: auto; /* Pushes this to the bottom of the flex column */
  padding-top: var(--space-lg); /* Space above button */
}
/* Button itself uses global .bluebutton or .btn-base styles from buttons.css */

.current-plan-label {
  display: block; /* SUGGESTION: Make it block */
  text-align: center; /* Center it */
  margin-top: var(--space-md); /* Adjust spacing */
  color: var(--labelColor);
  font-style: italic;
  font-size: 0.9em;
}

/* .current-plan-label { */
/*   display: inline-block; */
/*   margin-top: var(--space-lg); */
/*   color: var(--labelColor); */
/*   font-style: italic; */
/*   font-size: 0.9em; */
/* } */

.badge {
  /* "Most Popular" type badge */
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--myBtnBlue);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: 15px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* SUGGESTION: Add shadow to badge */
}

/* Responsive adjustments for Pricing */
@media (max-width: 768px) {
  /* Tablet */
  .plan-cards-container {
    flex-direction: column;
    align-items: center;
  }
  .plan-card {
    flex-basis: calc(
      50% - var(--space-lg) / 2
    ); /* Two cards per row on tablet */
    max-width: none; /* Allow flex basis to control width */
    /* width: 90%; */ /* Remove if using flex-basis */
    /* max-width: 450px; */
  }
  .plan-card.premium {
    transform: scale(1.01); /* Slightly less pronounced scale on tablet */
  }
}
@media (max-width: 600px) {
  /* Phone */
  .plan-card {
    flex-basis: 100%; /* Stack cards on phone */
  }
  .plan-card.premium {
    transform: scale(1); /* No extra scaling on phone if stacked */
  }
}

/* Subscribe Button Shine Effect */
#subscribe-btn {
  position: relative;
  overflow: hidden;
  background-color: var(--myBtnBlue);
  z-index: 1; /* Ensure button content is below the shine pseudo-element */
}

#subscribe-btn::before {
  content: "";
  position: absolute;
  top: 0;
  /* Start off-screen to the left, rotate for diagonal */
  left: -75%; /* Adjust as needed based on width/skew */
  width: 50%; /* Width of the shine element */
  height: 100%;

  /* The shine gradient */
  background: linear-gradient(
    110deg,
    /* Angle of the shine */ rgba(255, 255, 255, 0) 20%,
    /* Start transparent */ rgba(255, 255, 255, 0.4) 50%,
    /* Middle semi-transparent white */ rgba(255, 255, 255, 0) 80%
      /* End transparent */
  );

  /* Skew makes it look more dynamic */
  transform: skewX(-25deg);

  /* Link to the animation */
  animation: shine-effect 5s infinite linear; /* name duration timing-function iteration-count */
  animation-delay: 1s; /* Initial delay before first shine */

  /* Ensure shine is below text but above background */
  z-index: -1; /* Set behind the button's text content */
}

/* Define the animation */
@keyframes shine-effect {
  0% {
    left: -75%; /* Start off-screen left */
  }
  25% {
    /* Move across the button over ~1.25 seconds (25% of 5s) */
    left: 125%; /* End off-screen right */
  }
  100% {
    /* Stay off-screen right for the rest of the duration (the pause) */
    left: 125%;
  }
}

/* Optional: Slightly enhance button on hover */
#subscribe-btn:hover {
  filter: brightness(1.1);
}

/* Ensure button text is above the shine */
#subscribe-btn span, /* If button text is in a span */
#subscribe-btn {
  /* Or directly on the button text if no span */
  position: relative;
  z-index: 2;
}

#payment-result-container {
  max-width: 600px;
  margin: var(--space-xxl) auto;
  padding: var(--space-xl) var(--space-xxl); /* SUGGESTION: More horizontal padding */
  text-align: center;
  background-color: var(--cardColor);
  border-radius: var(--myradius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* SUGGESTION: Slightly darker shadow */
}

#payment-result-container h2 {
  color: #fff;
  margin-bottom: var(--space-md); /* SUGGESTION: More space */
  font-size: 2.2rem; /* SUGGESTION: Larger */
}

#payment-result-container .subtitle {
  font-size: 1.1em;
  color: var(--labelColor);
  margin-bottom: var(--space-lg);
  line-height: 1.5; /* SUGGESTION: Add line height for readability */
}

#payment-result-container .details {
  font-size: 1rem; /* SUGGESTION: Slightly larger */
  color: var(--softFontColor);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.result-icon {
  font-size: 4.5em; /* SUGGESTION: Larger icon */
  margin-bottom: var(--space-lg); /* SUGGESTION: More space */
}

.result-icon.success i {
  color: var(--success-color-text);
}

.result-icon.cancel i {
  color: var(--error-color-text-on-dark);
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg); /* SUGGESTION: More gap */
  flex-wrap: wrap;
  margin-top: var(--space-lg); /* SUGGESTION: Add margin top */
}
/* Buttons use global .btn-base or .bluebutton styles */

/* Responsive Payment Result Page */
@media (max-width: 600px) {
  /* Phone */
  #payment-result-container {
    padding: var(--space-lg) var(--space-md);
    margin: var(--space-xl) auto; /* Less vertical margin */
  }
  #payment-result-container h2 {
    font-size: 1.8rem;
  }
  .result-icon {
    font-size: 3.5em;
  }
  .result-actions {
    flex-direction: column; /* Stack buttons */
    gap: var(--space-md);
  }
  .result-actions button {
    width: 100%; /* Full width buttons */
  }
}

/* Styles for Reset Password Form (reused by resetPassword.html) */
/* #reset-password-page-container already styled in layout/auth-layout.css */
/* .reset-password-panel and its h2, p also in layout/auth-layout.css */

.password-requirements {
  /* Specific to reset password form content */
  font-size: 0.9em; /* SUGGESTION: Slightly larger */
  color: var(--softFontColor);
  margin-bottom: var(--space-lg);
  text-align: left;
  padding-left: var(--space-sm);
}

.password-requirements p {
  margin-bottom: var(--space-xs); /* Less space */
  font-weight: 500; /* SUGGESTION */
  color: var(--labelColor); /* SUGGESTION */
}

.password-requirements ul {
  list-style-position: inside; /* SUGGESTION: Keep bullets inside padding */
  padding-left: 0; /* Remove default padding */
  margin-top: var(--space-xs);
  margin-bottom: 0; /* Remove bottom margin from ul */
}

/* .password-requirements ul { */
/*   list-style-position: outside; */
/*   padding-left: var(--space-md); */
/*   margin-top: 0; */
/* } */

.password-requirements li {
  margin-bottom: var(--space-xs);
  line-height: 1.4; /* SUGGESTION */
}

/* Message styling within .reset-password-panel (error, success) */
/* General .message styles from components/messages.css will apply. */
/* These provide context if specific overrides are needed. */
.reset-password-panel .message {
  margin-bottom: var(--space-md);
}

/* Styles for Email Verification Page */
.verify-email-container {
  /* Specific container for verifyEmail.html */
  text-align: center;
  padding: var(--space-xl) var(--space-lg); /* SUGGESTION: More padding */
  max-width: 600px;
  margin: var(--space-xl) auto;
  color: var(--softFontColor);
  border-radius: var(--myradius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.verify-email-container h2 {
  color: #fff;
  margin-bottom: var(--space-lg);
  font-size: 1.8rem; /* SUGGESTION */
}
.verify-email-container p {
  /* General paragraph styling within this container */
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
/* .spinner is styled in components/messages.css */
#verification-redirect {
  /* Link to login/dashboard after verification */
  margin-top: var(--space-lg);
  font-size: 1rem; /* SUGGESTION */
}

/* Responsive for Verification/Reset Password sections */
@media (max-width: 600px) {
  /* Phone */
  .password-requirements {
    font-size: 0.85em;
    padding: var(--space-sm);
  }
  .verify-email-container {
    padding: var(--space-lg) var(--space-md);
  }
  .verify-email-container h2 {
    font-size: 1.6rem;
  }
}

/* === Static Content Pages (Privacy, Terms, etc.) === */
.static-content-page {
  max-width: 800px;
  margin: var(--space-lg) auto; /* Center the content and add vertical space */
  padding: var(--space-lg) var(--space-xl);
  background-color: var(--smallBackgroundColor);
  border-radius: var(--myradius);
  border: 1px solid rgba(var(--myblue-rgb), 0.1);
}

.static-content-page h1 {
  font-size: 1.75rem; /* 28px */
  color: #fff; /* White for main titles */
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--myblue);
}

.static-content-page h2 {
  font-size: 1.375rem; /* 22px */
  color: #f0f0f0;
  margin-top: var(--space-xl);
}

.static-content-page h3 {
  font-size: 1.125rem; /* 18px */
  color: #e0e0e0;
  margin-top: var(--space-lg);
}

.static-content-page p,
.static-content-page li {
  color: var(--softFontColor); /* Use your soft font color for body text */
  margin-bottom: var(--space-md);
}

.static-content-page strong,
.static-content-page b {
  color: var(--labelColor); /* Use your brighter label color for emphasis */
}

.static-content-page ul {
  list-style-type: disc;
  margin-left: var(--space-lg);
  padding-left: var(--space-sm);
}

/* Links will inherit the global 'a' style which is already themed */

.static-content-page .summary-point {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid rgba(var(--myblue-rgb), 0.3);
}

.static-content-page .summary-question {
  font-weight: bold;
  color: var(--labelColor);
}

.static-content-page .in-short {
  font-style: italic;
  color: var(--myLightGray);
  margin-bottom: var(--space-sm);
}

/* static/css/lib/flatpickr-overrides.css */
/* These are overrides for the flatpickr library using your theme variables. */
/* Responsiveness is generally handled by Flatpickr itself, these ensure consistent look & feel. */

.flatpickr-calendar {
  background: var(--mainBackgroundColor) !important;
  color: var(--labelColor) !important;
  border: 1px solid var(--smallBackgroundColor) !important;
  border-radius: var(--myradius) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
  font-family: var(--font-sans) !important;
  transform: scale(0.8) !important;
  transform-origin: top left; /* SUGGESTION: Better origin for scaling if positioned near input */
  z-index: 1001; /* SUGGESTION: Ensure it's above most content but below main nav overlay */
}

.flatpickr-month,
.flatpickr-current-month {
  background: var(--mainBackgroundColor) !important;
  color: var(--labelColor) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  /* Ensure dropdown text is visible */
  background: var(--mainBackgroundColor) !important;
  color: var(--labelColor) !important;
}
.flatpickr-current-month input.cur-year {
  /* Ensure year input text is visible */
  color: var(--labelColor) !important;
  background: var(
    --smallBackgroundColor
  ) !important; /* Give year input a background */
}

.flatpickr-weekdays {
  background: var(--smallBackgroundColor) !important;
  height: 30px; /* SUGGESTION: Explicit height */
}

.flatpickr-weekday {
  color: var(--labelColor) !important;
  font-weight: 500 !important;
  line-height: 30px; /* SUGGESTION: Vertically center weekday text */
}

.flatpickr-day {
  color: var(--labelColor) !important;
  transform: scale(0.8) !important;
  font-size: 125% !important;
}

.flatpickr-day:hover {
  background: var(--mygray) !important;
  transform: scale(0.8);
  font-size: 125% !important;
}

.flatpickr-day.has-workout {
  background: var(--myblue) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 600 !important;
  transform: scale(0.8);
  font-size: 125% !important;
}
.flatpickr-day.has-workout:hover {
  background: var(--myLightBlue) !important;
}

.flatpickr-day.today {
  background: transparent !important;
  color: var(--myLightGray) !important;
  border: 1px solid var(--myblue) !important; /* SUGGESTION: Highlight today with a border. Before none */
  position: relative !important;
  transform: scale(0.8);
  font-size: 125% !important;
}
.flatpickr-day.today::after {
  /* Dot for today, keep if desired */
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: var(--myblue);
  border-radius: 50%;
  position: absolute;
  bottom: 2px; /* Adjusted for taller cell */
  left: 50%;
  transform: translateX(-50%);
}
.flatpickr-day.today:hover {
  border: 1px solid white;
  background: var(--mygray) !important;
  transform: scale(0.8);
  font-size: 125% !important;
}
.flatpickr-day.today.has-workout::after,
.flatpickr-day.today.selected::after {
  display: none !important;
}

.flatpickr-day.selected {
  border: 2px solid var(--myblue) !important;
  background: transparent !important;
  color: var(--labelColor) !important;
  transform: scale(0.8);
  font-size: 125% !important;
}
.flatpickr-day.selected:hover {
  background: transparent !important;
  border: 2px solid var(--myLightBlue) !important;
}

.flatpickr-day:not(.disabled):not(.selected):not(.has-workout):not(
    .today
  ):hover {
  /* Specificity for non-special days */
  background: #444 !important;
  color: #e0e0e0 !important;
}

/* Input linked to flatpickr (already styled by .input-base, these are specific states) */
/* .flatpickr-input.active, .flatpickr-input[readonly] { ... } */ /* Handled by general .input-base:focus */

.flatpickr-prev-month,
.flatpickr-next-month {
  fill: var(--mygray) !important;
  color: var(--mygray) !important;
  height: 40px; /* Match month header height */
  top: 0; /* Align with top of month header */
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: var(--myLightGray) !important;
  color: var(--myLightGray) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: inherit !important;
  width: 12px; /* SUGGESTION: Slightly smaller arrows */
  height: 12px;
}