/* ==================================================
   Spark Mood Tracker CSS (merged & updated)
   ==================================================
*/

/* ===== Base Reset ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #FCFCFC

}

p {
  font-family: "Plus Jakarta Sans", sans-serif;
}

header {
  position: relative;
}

#top-profile-pic {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #fff;  /* or whatever border you prefer */
  background-color: #fff;
}

/** Profile Header **/
.profile-btn {
  height: 4em;
  width: 10em;
  font-size: 12px;
  margin: 10px;
}

.profile-header {
  width: 10vw;
  background-color: #f3f3f3;
}
/* ===== Login Page: Angled Card Layout ===== */
.login-container {
  display: flex;
  height: 100vh;
  max-width: 100%;
  background-image: linear-gradient(135deg, #6C00FF 0%, #FF00C8 100%);
}

.splash-img img {
  position: relative;
  flex: 1;
  display: flex;
  height: 60vh;
  top: 20%;
}

.form-card h1 {
  margin-bottom: 1.5rem;
  color: #6C00FF;
  font-size: 1.75rem;
  text-align: center;
}

.form-card, .auth-container {
  background-color: #fff;
  padding: 2em;
  margin: 2em;
  margin-left: 10em;
  border-radius: 20px;
}

.form-card .type-input,
.form-card input:not(input[type="checkbox"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 100px;
  font-family: "Plus Jakarta Sans", sans-serif;
}


.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.options-row label,
.options-row a {
  font-size: 0.875rem;
}

.options-row a {
  color: #6C00FF;
  text-decoration: none;
}

/* Primary and Secondary Buttons */
.primary-btn,
button {
  width: 100%;
  padding: 0.75rem;
  background: #6C00FF;
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 1rem;
  margin: 1.5rem 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

.primary-btn:hover {
  background: #8630ff;
  transition: background 300ms ease-in;
}

.secondary-btn {
  background: none;
  border: 2px solid #6C00FF;
  color: #6C00FF;
  padding: 0.75rem;
  border-radius: 100px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

#clear-collage {
  width: 20vw;
}

#delete-entry {

}

.delete-btn {
  min-width: 3rem;
  max-width: 3rem;
  min-height: 3rem;
  margin: 0 100px;
  background-color: #f5f5f5;
  color: #6C00FF;
}

.secondary-btn:hover {
  color: #fff;
  background: #6C00FF;
  transition: background 300ms ease-in;
}

#collage-btn {
  width: 20vw;
}

.back-btn {
  max-width: 10vw;
  float: left;
  margin-left: 1em;
  color: #6C00FF;
  background-color: #f5f5f5;

}

.signup-link {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

/* Hide social login remnants */
.social-login,
.social-login span,
.social,
.signup-link .link-btn {
  display: none;
}

.delete-entry-btn {
  max-width: min-content;
}
/* ===== Shared Header for App Pages ===== */
header {
  text-align: center;
  margin: 1rem;
}

header h1 {
  color: #303030;
  font-size: 1.75rem;
  margin: 1em;
  font-weight: 400;
}

/* dashboard header tweaks */
header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.user-info #user-display {
  font-weight: 600;
  color: #6C00FF;
}
#logout-btn {
  background: none;
  border: 2px solid #6C00FF;
  border-radius: 100px;
  color: #6C00FF;
  cursor: pointer;
}
#logout-btn:hover {
  background: #6C00FF;
  color: #fff;
  transition: background 200ms ease-in;
}


/* ===== Sections: Forms & Content ===== */
section,
.auth-container {
  background: #fff;
  margin: 1em;
  padding: 1em;
  border-radius: 12px;
}

h1 {
  color: #6C00FF;
  margin: 0.75em;
  font-weight: 400;
  text-align: center;
  padding-top: 10vh;
}



h2 {
  color: #303030;
  font-weight: 400;
  margin: 1em 0;
}

.create-h2, .create-h2 + h3 {
  text-align: center;
  margin: 1.5em;
  color: #303030;
}


/* Range Sliders */
input[type="range"] {
  width: 100%;
  margin: 0.5em 0;
}

.focus-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#energy-range, #mood-range {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 100px;
  background: #D8CAFF;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#energy-range::-moz-range-thumb, #mood-range::-moz-range-thumb, #energy-range::-webkit-slider-thumb, #mood-range::-webkit-slider-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #6C00FF; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100px;
  border: none;
}

#mood-icons {
  display: flex;
  justify-content: space-between; /* spread them out */
  width: 100%;                    /* fill the container */
  margin: 1em 0;
}

#mood-icons span {
  flex: 1;              /* each icon gets equal space */
  text-align: center;   /* center it in its slot */
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: background 200ms;
}

/* bump the size of the SVG inside, if needed */
#mood-icons span svg {
  width: 2em;
  height: 2em;
}

/* selection styling */
#mood-icons span.selected {
  background: #F5F5F5;
  width: auto;  /* let flex size handle it */
}

#mood-icons span.selected::after {
  content: '×';
  position: absolute;
  top: 2px;
  right: 2px;
  background: #FFDEFF;
  color: #333;
  width: 1em;
  height: 1em;
  font-size: 0.75em;
  line-height: .75em;
  text-align: center;
  border-radius: 100%;
}


#tags-input {
  border-radius: 100px;
  border: 1px #ddd solid;
  margin: 1em;
  padding: .75em 1em;
}

.tags-entry {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
#add-feeling-btn {
  margin: 1em;
  padding: .75em 1em;
  font-size: 0.9rem;
  background: #6C00FF;
  color: white;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}
#add-feeling-btn:hover {
  background: #8630FF;
}


#suggested-tags {
  margin-top: 0.75rem;
}





.suggested-tag {
  display: inline-block;
  background: #FFDEFF;
  color: #333;
  padding: 0.3em 0.75em;
  margin: 0.3em;
  border-radius: 100px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 200ms ease-in-out;
}

.suggested-tag:hover {
  opacity: 1;
}

@media (max-width: 400px) {
  #tags-input {
    max-width: 120px;
    padding: 0.3em 0.6em;
  }
}

/* Tag Bubbles */
#tags-container .tag {
  display: inline-block;
  background: #FF8EFF;
  color: #333;
  padding: 0.3em 0.75em;
  margin: 0.3em;
  border-radius: 100px;
  cursor: pointer;
  font-weight: 600;
}

#tags-container .tag::after {
  content: "✔";
  padding-left: 10px;
}

/* To-Do List */
#todo-list {
  list-style: none;
  margin-top: 0.5em;
}

#todo-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.3em;
  color: #303030;
}

#todo-list select {
  border-radius: 100px;
  padding: .5rem .75rem;
  margin: 0 .5rem;
  border: 1px solid #6C00FF70;
  background-color: #f5f5f5;
  color: #303030;

}

#todo-list input[type="checkbox"] {
  margin-right: 0.5em;
}

#todo-input {
  border-radius: 100px;
  border: 1px #ddd solid;
  margin: 1em 0;
  padding: 1em 1em;
  width: 100%;
}

/* Profile Section */
.profile-section {
  max-width: 500px;
  margin: 0 auto 1em;
  background: #fff;
  padding: 1em;
  border-radius: 12px;
}

.profile-section h3 {
  margin: 1em 0;
}

.profile-section input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 100px;
}

/* Password Button */
#change-password-btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: #6C00FF;
  color: #fff;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

/* ===== Bottom Navigation Bar ===== */
.bottom-nav {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 2rem);
  max-width: 500px;
  padding: 0.5rem 1rem;
  background: #6C00FF90;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.bottom-nav a {
  text-decoration: none;
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-nav .nav-icon {
  font-size: 1.5rem;
  margin: 0 1rem;
}


/* ===== Responsive Breakpoint ===== */
@media (min-width: 600px) {
  .login-container,
  section,
  .auth-container {
    /*! max-width: 900px; */
    /*! margin: 2em auto; */
    padding: 1em 2em;
  }
}

/* ---- Dashboard Desktop Grid ---- */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fff;
  margin: 1em;
  border-radius: 12px;
}
.dashboard-header .header-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1em;
}
/* Each card styling */
.dashboard-grid .card {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.average-score {
  font-size: 2rem;
  font-weight: bold;
}
.stats-count {
  font-size: 2rem;
  font-weight: bold;
}
.best-day-date {
  font-size: 1.5rem;
  font-weight: bold;
}
/* Comments list */
.comments-list {
  list-style: none;
  margin-top: 0.5rem;
}
.comments-list li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.comments-list p {
  margin: 0;
  color: #666;
}
.show-all {
  display: block;
  margin-top: 0.5rem;
  color: #6C00FF;
  text-decoration: none;
  font-size: 0.875rem;
}

/* Bottom nav stays */

@media (min-width: 768px) {
  /* On desktop: two columns grid */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Position the large chart and comments to span both columns if desired */
  .dashboard-grid .comments-card {
    grid-column: 2; /* comments in right column */
  }
  .dashboard-grid .card:nth-child(4) {
    /* the chart */
    grid-column: 1;
  }
}

/* Recent Entries cards */
#recent-entries-section {
  margin: 1em;
}

#recent-entries-section h2 {
  color: #6C00FF;
  margin-bottom: 0.5em;
}

#recent-entries {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.entry-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Header row: date + edit button */
.entry-card .entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.entry-card .entry-date {
  font-style: italic;
  color: #666;
}
.entry-card .edit-entry-btn {
  background: #f5f5f5;
  max-width: min-content;
  float: right;
  color: #303030;
  font-weight: 200;
  padding: 10px 20px;
}

.delete-entry-btn {
  background: #FF474C ;
  max-width: min-content;
  float: right;
  color: #fff;
  font-weight: 200;
  padding: 10px 20px;
}

/* Slider rows */
.entry-card label {
  display: block;
  color: #6C00FF;
  margin-bottom: 0.25rem;
}
.entry-card input[type="range"] {
  width: 100%;
  margin-bottom: 1rem;
}

/* Mood icon */
.entry-card .mood-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

/* Tag pills (optional if you still keep tags) */
.entry-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.entry-card .tags .tag {
  display: inline-block;
  background: #FF8EFF;
  color: #333;
  padding: 0.6em 1em;
  margin: 0.5em;
  border-radius: 100px;
}

/* ---- Focus Page ---- */
.focus-hero {
  text-align: center;
  margin: 2em 0;
  background: #fff0;
}

.creature {
  width: 150px;
  transition: transform 0.3s ease;
}
/* bounce animation */
@keyframes bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.creature.happy {
  animation: bounce 0.5s;
}

/* Task list styling */
#focus-tasks {
  margin: 1em;
  background: #fff;
  padding: 1em;
  border-radius: 12px;
}
#focus-tasks h2 {
  color: #6C00FF;
  margin-bottom: 0.5em;
}
#focus-task-list {
  list-style: none;
  margin-bottom: 1em;
  padding: 0;
}
#focus-task-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}
#focus-task-list li input[type="checkbox"] {
  margin-right: 0.5em;
  transform: scale(1.2);
}

/* Add task row */
.focus-add {
  display: flex;
  gap: 0.5rem;
}
.focus-add input {
  flex: 1;
  padding: 0.6em 1em;
  border: 1px solid #ddd;
  border-radius: 100px;
}

.chart-btn {
  background: #F5F5F5;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6C00FF;
}
.chart-btn:disabled {
  visibility: hidden;
  cursor: default;
}
.chart-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.chart-indicators .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #D9D2FC;    /* light purple */
  cursor: pointer;
  transition: background 200ms;
}

.chart-indicators .dot.active {
  background: #6C00FF;    /* darker purple */
}

#next-chart svg, #prev-chart svg {
  height: 1em;
  padding: .1em;
}

#next-chart, #prev-chart {
   height: 50px;
   width: 50px;
}

/* Timer section */
#focus-timer {
  margin: 1em;
  background: #fff;
  padding: 1em;
  border-radius: 12px;
}
#focus-timer h2 {
  color: #6C00FF;
  margin-bottom: 0.75em;
}
.timer-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
#timer-input {
  flex: 1;
  padding: 0.6em 1em;
  border: 1px solid #ddd;
  border-radius: 100px;
}
#timer-display {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 1rem;
}
.hidden {
  display: none;
}
#timer-suggestions h3 {
  color: #6C00FF;
  text-align: center;
  margin-bottom: 0.5em;
}
.break-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#focus-add-btn, #timer-start-btn {
  margin: 0;
}

/** Create **/
/* Hidden helper */
.hidden {
  display: none;
}

/* Break‐cards grid */
.break-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1em;
}
.break-card {
  flex: 1 1 45%;
  background: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 12px;
  text-decoration: none;
  color: #6C00FF;
  font-weight: 600;
  height: 8rem;
  align-content: center;
  border: 2px blue solid;
}

.break-card p {
 font-weight: 400;
  color: #303030;
}

/* Coloring Page */
#coloring-section {
  margin: 1em;
  background: #fff;
  padding: 1em;
  border-radius: 12px;
}
#coloring-section h2 {
  color: #6C00FF;
  margin-bottom: 0.75em;
}
.canvas-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.canvas-controls label {
  font-size: 0.9rem;
  color: #333;
}
.canvas-controls input[type="color"],
.canvas-controls input[type="range"] {
  margin-left: 0.5rem;
}
#clear-canvas {
  margin-left: auto;
}

#color-picker {
  border-radius: 400px;
  border: 2px solid #fff;
  padding: 0;
  margin: 0;
  width: 30px;
  height: 30px;
}

/* Make canvas fill its container */
#color-canvas {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 12px;
  touch-action: none; /* for pointer drawing */
  background: #fff;
}

#book-color-picker {
  display: none;
  position: absolute;
  top: 2.5rem;
  left: 0;
}
#book-color-picker.show {
  display: block;
}

#book-canvas {
  width: 100%;
  height: auto;        /* preserve aspect ratio */
  border: 1px solid #ddd;
  border-radius: 12px;
}

.profile-page, .create-page {
  background-image: none;
  background-color: #fff;
}

/* ===== Profile Section ===== */
#profile-section {
  max-width: 400px;
  margin: 2rem auto;
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#profile-section h2 {
  color: #6C00FF;
  margin-bottom: 1rem;
  text-align: center;
}

#profile-section h3 {
  margin: 1em 0;
}

#profile-pic-section {
  text-align: center;
  margin-bottom: 1.5rem;
}

#profile-pic {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #6C00FF;
  display: inline-block;
}

#profile-icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

#profile-icon-list img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 200ms ease-in-out;
}

#profile-icon-list img:hover,
#profile-icon-list img.selected {
  border-color: #6C00FF;
}

/* Inputs & Buttons */
#profile-section input {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: 100px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

#profile-section .primary-btn,
#profile-section .secondary-btn {
  width: 100%;
  margin-top: 1rem;
}

#profile-icon-list {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#profile-icon-list img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#profile-icon-list img:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#profile-icon-list img.selected {
  border: 3px solid #6a11cb;
}

/* ==========================
   Mobile Login Page Overrides
   ========================== */
   @media (max-width: 700px) {
    /* Stack top-to-bottom */
    .login-container {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      height: 80vh;
      padding: 0;
      background-image: linear-gradient(135deg, #6C00FF 0%, #FF00C8 100%);
    }

    /* Splash image takes about 60% of viewport height */
    .splash-img {
      width: 100%;
      margin: 0;
      position: absolute;
      top: 0;

    }
    .splash-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Form card pinned to bottom, full‐width, rounded top */
    .form-card {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
      height: 70vh;
      padding: 2rem 1.5rem;
      border-radius: 24px 24px 0 0;
      background: #fff;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
      transform: translateY(0);
    }

    /* Inputs & buttons a bit larger/tappable */
    .form-card .type-input,
    .form-card input:not([type="checkbox"]) {
      font-size: .75rem;
      padding: 0;
    }
    .primary-btn,
    .secondary-btn {
      font-size: 1.rem;
      margin:0.3rem;
    }

     .form-card h1 {
       font-size: 1.25em;
       margin-top: 0;
     }

    /* Remove any leftover horizontal margins */
    .form-card,
    .auth-container {
      border-radius: 75px 75px 0 0;
      margin-left: 0;
      margin-right: 0;
    }

  }

  /* … your existing CSS … */

/* Replace all occurrences of .auth-container with .form-card */
.form-card, .form-card .type-input {
  /* already in your stylesheet: */
  background-color: #fff;
  padding: 2em;
  /*! margin: 2em; */
  border-radius: 20px;
}

/** flashcards **/
/* Flashcards */
#flashcards-nav {
  display: flex;
  gap: 1rem;
  margin: 1em;
}
#manage-section, #study-section {
  margin: 1em;
}
.flashcard-form input {
  width: calc(50% - 1rem);
  margin-right: 1rem;
  padding: 0.5em 1em;
  border: 1px solid #ddd;
  border-radius: 100px;
}
#card-list li {
  margin-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flashcard {
  text-align: center;
  margin: 2em 0;
  padding: 1em;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.study-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2em;
}

/* wrapper */
.timeline-section .events {
  position: relative;
  height: 120px;
  margin-top: 1rem;
}

/* current‑time marker */
.timeline-section .current-time-marker {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background-color: #6C00FF;
}

/* each study block */
.timeline-section .event {
  position: absolute;
  top: 8px;
  height: 24px;
  background-color: #6C00FF;
  border-radius: 4px;
  color: #fff;
  padding: 0 6px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* timestamp inside each block */
.timeline-section .event span {
  font-size: 0.7rem;
  opacity: 0.8;
}



/* Mobile override, same as login page */
@media (max-width: 700px) {
  .login-container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100vh;
    padding: 0;
  }



  .form-card {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    margin: 0;
    padding: 2rem 1.5rem;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
    transform: translateY(0);
  }

  .form-card h1 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: #6C00FF;
    text-align: center;
  }

  .form-card .type-input {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 100px;
    font-size: 0.9rem;
  }

  .primary-btn {
    font-size: 1rem;
    margin: 1rem 0;
  }

  .signup-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
  }
}

  /* kill the sidebar and expand main to 100% */
  .desktop-sidebar {
    display: none;
  }
  .app-container {
    /* just one column instead of 240px + 1fr */
    grid-template-columns: 1fr !important;
  }


/* desktop only */

/* feature banner */
.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}

.feature-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.feature-content h2 {
  font-size: 1.5rem;
}

.feature-content p {
  color: #6B7280;
}

.feature-img {
  width: 100%;
  object-fit: cover;
}

/* buttons */
.btn {
  font-weight: 600;
  cursor: pointer;
}

.btn--primary {
  background-color: #6C00FF;
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
}

/* stats row */
.stats-section {
  gap: 1rem;
}

.stat-card {
  background-color: #FFFFFF;
  border-radius: 5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5rem;
  text-align: center;
  margin: 1rem 0;
}

 .stat-card:nth-child(1), .stat-card:nth-child(1) p  {
    background-color: #6C00FF;
    color: #fff;
  }

.stat-card:nth-child(2) {
    background-color: #EBE4FF;
  }

.stat-card h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.stat-card p {
  color: #6B7280;
}

/* charts section */
.charts-section {
  background-color: #FFFFFF;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.chart-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chart-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6B7280;
  cursor: pointer;
}

.chart-indicators {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #EBE4FF;
  border-radius: 50%;
}

.dot.active {
  background-color: #6C00FF;
}

.today-entry-cta p {
  color: #6B7280;
  text-align: center;
  margin: 1em;
}

/* timeline section */
.timeline-section {
  background-color: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1rem;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.activity-header h2 {
  font-size: 1.25rem;
}

.activity-header input[type="date"] {
  padding: 0.5rem 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.75rem;
}

.time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6B7280;
}

.events {
  position: relative;
  height: 120px;
  margin-top: 1rem;
}

.event {
  position: absolute;
  background-color: #FFFFFF;
  padding: 0.75rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 0.75rem;
}

.current-time-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #6C00FF;
}

/* bottom nav (mobile) — keep your exact HTML here */
.bottom-nav {
  position: fixed;
  height: 5rem;
  background-color: #6C00FF80;
  background-blend-mode: blur(10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-nav .nav-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.bottom-nav .nav-label {
  margin-top: .75rem;
}

.dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

/* 1) Container + grid setup */
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: auto;
  padding: 1rem;
}

.profile-sidebar,
.profile-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 2) Card styling for each section */
.profile-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1rem;
}

.profile-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  color: #333;
}

/* 3) Inputs & textareas */
.profile-section input[type="text"],
.profile-section input[type="password"],
.profile-section textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}

/* 4) File inputs as block */
.profile-section input[type="file"] {
  display: block;
  margin-bottom: 0.75rem;
}

/* 5) Buttons */
.profile-section button,
button.danger {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  background: #6C00FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0.5rem;
}

.profile-section button:hover,
button.danger:hover {
  background: #5500cc;
}

button.danger {
  background: #ff3b30;
}

/* 6) Avatar image */
#avatar-preview {
  display: block;
  margin: 0 auto 1rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* 7) Feed cards */
#feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1rem;
}

.post-card p {
  margin: 0 0 0.5rem;
}

.post-card .time {
  color: #888;
  font-size: 0.875rem;
}

.post-card img.post-img {
  width: 100%;
  border-radius: 8px;
  margin-top: 0.5rem;
}


/* desktop: two columns */
@media (min-width: 1024px) {
  .sections-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .sections-wrapper .panel {
    /* two panels per row, minus gap */
    flex: 1 1 calc(50% - 1rem);
    /* optional max-width to avoid overly wide panels */
    max-width: calc(50% - 1rem);
  }
}
/* keep your existing mobile look */
section {
  margin: 1em 0;    /* vertical spacing only */
  padding: 1em;
  border-radius: 12px;
  background: #fff;
}

#collage-controls {
  margin-left: 30vw;
}

/* inside a flex parent we’ll use gap for spacing */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;        /* vertical gap on mobile */
  margin: 2em;
}

/* desktop: turn into two‑column panels */
@media (min-width: 1024px) {
  .main-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;      /* both row & column gap */
    margin: 2em;
  }
  .main-content > section {
    flex: 1 1 calc(50% - 2rem);  /* two per row accounting for gap */
    margin: 0;                   /* clear the old 1em margin */
    min-width: 300px;
    height: min-content;/* prevent them from getting too narrow */
  }

}

/* base: stack on mobile */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem;
}

/* desktop: switch to 2‑column grid */
@media (min-width: 1024px) {
  .main-content {
    display: grid;
    /*! grid-template-columns: 2fr 1fr; */     /* left column twice as wide as right */
    grid-auto-rows: min-content;        /* each row height fits its content */
    grid-gap: 2rem;                     /* gutter between panels */
    grid-auto-flow: dense;              /* fill holes if any */
  }

  /* make the big “daily check‑in” span two rows in the left column */
  #daily-checkin {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
    max-width: 50vw;
  }

  /* all other sections go into the right column automatically */
  .main-content > section:not(#daily-checkin) {
    grid-column: 2 / 3;
    /* grid-row is auto, so they stack one after the other */
  }
    .charts-section canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  .stats-section {
    margin-top: -75vh !important;
  }

}



/* --- layout --- */
.profile-container {
  display: flex;
  max-width: min-content;
  margin: 2rem auto;
  padding: 0 1rem;
  float: left;
}

.profile-sidebar {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  /*! box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
}

.profile-main {
  flex: 1;
}

/* --- profile card --- */
.profile-card {
  margin-bottom: 2rem;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
  margin-bottom: 1rem;
}

.profile-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.profile-role {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.25rem;
}

/* --- nav links --- */
.profile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-nav li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  cursor: pointer;
  color: #333;
  transition: color 0.2s;
}

.profile-nav li:hover {
  color: #6C00FF;
}

#nav-settings, #nav-logout {
  background-color: #fff;
  border-radius: 200px;
  margin-bottom: 20px;
  padding: 10px;
  color: #6C00FF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);;
}

.nav-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  /*! stroke-width: 2; */
}

/* optional: highlight the active page */
.profile-nav li.active {
  color: #6C00FF;
  font-weight: 500;
}
.profile-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.profile-sidebar {
  width: 250px;
  background: #ffffff00;
  border-radius: 12px;
  padding: 1.5rem;
  /*! box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
  flex-shrink: 0;
}

.profile-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bottom-nav .nav-icon svg {
  width: 24px;
  height: 24px;
}

.chart-label {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 1.1rem;
  font-weight: 600;
  color: #6C00FF;
}
canvas {
  width: 100% !important;
  height: auto !important;
}
.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entry-header-buttons {
  display: flex;
  gap: 0.5rem;
}