/* Base layout & typography */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: radial-gradient(circle at top, #f8f6ff, #f1f5f9);
  color: #111827;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body[data-theme="dark"] {
  background: radial-gradient(circle at top, #020617, #020617);
  color: #e5e7eb;
}

.app {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* Splash screen styles */
.splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #f8f6ff, #f1f5f9);
  z-index: 60;
}

.splash .splash-content {
  text-align: center;
  padding: 1.5rem;
}

body[data-theme="dark"] .splash {
  background: radial-gradient(circle at top, #020617, #020617);
}

.splash .subtitle { margin-top: 0.5rem; color: #6b7280; }
body[data-theme="dark"] .splash .subtitle { color: #9ca3af; }

.splash.hidden { display: none; }
/* fade helpers */
.splash {
  opacity: 1;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.splash.fade-out {
  opacity: 0;
  visibility: hidden;
}

.app.fade-in {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.app.fade-in {
  opacity: 1;
}

@media (min-width: 768px) {
  .app {
    padding: 2rem 1.5rem 4rem;
  }
}

/* Header */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* keep left and right menus vertically aligned */
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.app-header h1 {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: 0.03em;
}

.subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

body[data-theme="dark"] .subtitle {
  color: #9ca3af;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Icon-only buttons in header */

.icon-btn {
  border-radius: 50%;
  border: 1px solid #d1d5db;
  padding: 0.2rem;
  width: 28px;
  height: 28px;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background-color: #e5e7eb;
}

body[data-theme="dark"] .icon-btn {
  border-color: #374151;
  color: #e5e7eb;
}

body[data-theme="dark"] .icon-btn:hover {
  background-color: #111827;
}

/* View toggle – now at bottom */

.view-toggle {
  display: inline-flex;
  padding: 0.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  margin-top: 1.5rem;
}

body[data-theme="dark"] .view-toggle {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border: 1px solid #1f2937;
}

/* When the view toggle is placed in the header (top-left), remove the
   extra top margin and soften the visual weight so it aligns with header
   icon buttons. */
.header-left .view-toggle {
  margin-top: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.header-left .view-btn {
  padding: 0.15rem 0.55rem;
  font-size: 0.95rem;
  color: inherit;
}

/* Make active view button visually similar to header icons */
.header-left .view-btn.active {
  background: transparent;
  color: inherit;
}

.view-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: #6b7280;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.view-btn.active {
  background: #111827;
  color: #f9fafb;
}

body[data-theme="dark"] .view-btn {
  color: #9ca3af;
}

/* Sections */

.tiles-section,
.reel-section {
  margin-top: 0.25rem;
}

.calendar-section {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
}

/* Tiles grid */

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}

@media (min-width: 600px) {
  .tiles-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Very small devices: force single column to avoid cramped tiles */
@media (max-width: 420px) {
  .tiles-grid {
    grid-template-columns: 1fr;
  }
}

/* Add entry tile */

.add-tile {
  border-radius: 6px;
  border: 1px dashed #d1d5db;
  background: rgba(255, 255, 255, 0.9);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: #6b7280;
  flex-direction: column;
  gap: 0.25rem;
}

.add-tile-icon {
  font-size: 1.4rem;
}

body[data-theme="dark"] .add-tile {
  background: rgba(15, 23, 42, 0.95);
  border-color: #374151;
  color: #9ca3af;
}

/* Individual tile */

.tile {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12);
}

body[data-theme="dark"] .tile {
  background: #020617;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border: 1px solid #111827;
}

/* Colour band at top of tile */

.tile-color-band {
  position: relative;
  height: 72px;
  background: var(--tile-color, #e5e7eb);
}

/* Tile content */

.tile-content {
  padding: 0.5rem 0.7rem 0.65rem;
}

.tile-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

body[data-theme="dark"] .tile-date {
  color: #6b7280;
}

.tile-metaphor-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 0.1rem;
}

body[data-theme="dark"] .tile-metaphor-label {
  color: #9ca3af;
}

.tile-metaphor-text {
  font-size: 0.9rem;
  line-height: 1.3;
  color: #111827;
}

body[data-theme="dark"] .tile-metaphor-text {
  color: #e5e7eb;
}

/* Delete button – subtle */

.tile-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.25);
  color: #f9fafb;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.tile:hover .tile-delete-btn {
  opacity: 1;
}

.tile-delete-btn:hover {
  background: rgba(15, 23, 42, 0.6);
}

/* Empty state */

.empty-state {
  padding: 1.1rem 1rem;
  border-radius: 6px;
  border: 1px dashed #d1d5db;
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280;
  background: rgba(255, 255, 255, 0.7);
}

body[data-theme="dark"] .empty-state {
  border-color: #374151;
  background: rgba(15, 23, 42, 0.9);
  color: #9ca3af;
}

/* Calendar view */

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.calendar-month-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #374151;
}

body[data-theme="dark"] .calendar-month-label {
  color: #e5e7eb;
}

.calendar-nav-btn {
  border-radius: 50%;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: #e5e7eb;
  color: #374151;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-nav-btn:hover {
  background: #d1d5db;
}

body[data-theme="dark"] .calendar-nav-btn {
  background: #111827;
  color: #e5e7eb;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.16rem; /* match calendar grid gap for pixel alignment */
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

body[data-theme="dark"] .calendar-weekdays {
  color: #6b7280;
}

.calendar-weekdays > div {
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.16rem; /* consistent with .calendar-weekdays */
}

/* Larger screens: make calendar cells smaller so 6 rows fit without page scroll */
/* On typical laptop widths (and larger) make calendar narrower and shorter so
   the full month fits without vertical scrolling. We set a max-width and use
   fixed row heights (grid-auto-rows) to guarantee 6 rows fit. */
@media (min-width: 800px) {
  /* Use fixed pixel width and gap at laptop sizes to avoid subpixel rounding
     differences between the weekday header and grid. Compute an explicit
     column width so both header and grid align exactly. */
  :root {
    --calendar-width: 760px;
    --calendar-gap: 4px;
    --calendar-col-width: calc(
      (var(--calendar-width) - (6 * var(--calendar-gap))) / 7
    );
  }

  /* Weekday header uses the same width, columns, and gap as the grid */
  .calendar-weekdays {
    width: var(--calendar-width);
    margin: 0 auto 0.25rem;
    display: grid;
    grid-template-columns: repeat(7, var(--calendar-col-width));
    gap: var(--calendar-gap);
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }

  .calendar-grid {
    gap: var(--calendar-gap);
    width: var(--calendar-width);
    margin: 0 auto;
    grid-template-columns: repeat(7, var(--calendar-col-width));
    grid-auto-rows: 72px; /* larger rows so calendar fills more vertical space */
    box-sizing: border-box;
  }

  .calendar-day {
    aspect-ratio: auto; /* let grid-auto-rows control height */
    padding: 3px 4px;
    font-size: 0.72rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
  }

  .calendar-day .calendar-day-number {
    font-size: 0.72rem;
  }
}

/* Ensure weekdays header lines up with the centered calendar grid */
.calendar-weekdays {
  /* Desktop-specific precise layout is set inside the media query.
     On small screens keep the flexible 1fr columns declared earlier. */
  margin: 0 auto 0.25rem;
  box-sizing: border-box;
  padding-left: 0; /* ensure no extra offset */
  padding-right: 0;
}

.calendar-weekdays > div {
  text-align: center;
  font-size: 0.72rem;
  padding: 6px 0; /* slightly taller weekday header to visually balance larger cells */
}

/* Popup used on touch/click to reveal entries for a day */
.calendar-popup {
  position: absolute;
  z-index: 80;
  background: #ffffff;
  color: #111827;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.2);
  padding: 0.6rem 0.75rem;
  max-width: 260px;
  font-size: 0.9rem;
}

body[data-theme="dark"] .calendar-popup {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #1f2937;
}

.calendar-popup .popup-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.calendar-popup.hidden { display: none; }

/* Make the grid grow and scroll internally to avoid the whole page scrolling */
.calendar-grid {
  flex: 1 1 auto;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
}

.calendar-day {
  position: relative;
  border-radius: 6px;
  background: #f3f4f6;
  font-size: 0.78rem;
  color: #4b5563;
  padding: 3px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden; /* prevent content from spilling out and overlapping rows */
  min-height: 0;
}

body[data-theme="dark"] .calendar-day {
  background: #020617;
  border: 1px solid #0f172a;
}

.calendar-day.has-entry {
  color: #111827;
  cursor: pointer;
}

.calendar-day-number {
  position: relative;
  z-index: 1;
}

.calendar-day.has-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--day-color, #e5e7eb);
}

/* Keep day number legible on bright colours */

.calendar-day.has-entry .calendar-day-number {
  position: relative;
  z-index: 1;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.calendar-day.empty {
  background: transparent;
  border: none;
}

/* In dark mode we keep leading/ending empty calendar placeholders invisible
   so only days belonging to the month are visible. They remain in the grid
   layout but are not rendered. */
body[data-theme="dark"] .calendar-day.empty {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
  visibility: hidden; /* keeps the grid placement but hides the cell */
}


/* Make footer occupy full width and prevent wrapping of children */
/* calendar footer styles removed — calendar header (top) is used instead */

/* On narrow screens, constrain calendar height and use internal scrolling so the
   whole page doesn't overflow. On larger screens (laptop) the calendar will
   expand naturally to avoid nested scroll boxes. */
@media (max-width: 900px) {
  .calendar-section {
    /* limit height to viewport to avoid page scroll; tuned for typical header/footer heights */
    max-height: calc(100vh - 8rem);
    min-height: 0;
    overflow: hidden;
  }

  .calendar-grid {
    overflow: auto;
    overflow-x: hidden;
  }
}

/* Reel view */

.reel-inner {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.reel-nav-btn {
  border-radius: 50%;
  border: 1px solid #d1d5db;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: #f9fafb;
  color: #4b5563;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.reel-nav-btn:hover {
  background-color: #e5e7eb;
}

body[data-theme="dark"] .reel-nav-btn {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

body[data-theme="dark"] .reel-nav-btn:hover {
  background: #111827;
}

.reel-card {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
  min-height: 200px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

body[data-theme="dark"] .reel-card {
  background: #020617;
  border: 1px solid #111827;
  box-shadow: none;
}

.reel-card-color {
  height: 140px;
  background: var(--reel-color, #e5e7eb);
}

.reel-card-body {
  padding: 0.75rem 0.9rem 0.9rem;
}

.reel-card-date {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
  margin-bottom: 0.35rem;
}

body[data-theme="dark"] .reel-card-date {
  color: #6b7280;
}

.reel-card-metaphor {
  font-size: 1rem;
  line-height: 1.4;
}

.reel-empty-text {
  margin: auto;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #6b7280;
}

/* Fullscreen-ish reel on small screens */

@media (max-width: 640px) {
  .reel-section {
    min-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
  }

  .reel-inner {
    flex: 1;
    align-items: stretch;
    justify-content: center; /* center card horizontally when nav buttons hidden */
    padding: 0 0.5rem;
  }

  .reel-card {
    align-self: center;
    width: 100%;
    max-width: 720px;
    height: calc(100vh - 8rem); /* fit viewport without overflowing */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
  }

  .reel-card-color {
    height: min(50vh, 60%);
    flex: 0 0 auto;
  }

  .reel-card-body {
    overflow: auto; /* allow inner scrolling if needed, rather than page scroll */
  }

  .reel-nav-btn {
    display: none; /* swipe instead of arrows on phone */
  }
}

/* Equal horizontal gutters on small screens so the app appears centered */
@media (max-width: 640px) {
  .app {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }

  /* ensure reel inner spacing matches app gutters */
  .reel-inner {
    padding-left: 0;
    padding-right: 0;
  }

  /* make reel card respect the app gutters so it is visually centered */
  .reel-card {
    max-width: calc(100% - 2rem);
  }

  /* calendar grid should also respect the gutters */
  .calendar-grid, .calendar-weekdays {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    box-sizing: border-box;
  }
}

/* Modal (shared styles) */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.modal-content {
  position: relative;
  z-index: 41;
  max-width: 420px;
  width: calc(100% - 2.5rem);
  background: #ffffff;
  border-radius: 6px;
  padding: 1rem 1rem 1.1rem;
  /* Keep modal content within viewport and allow internal scrolling */
  max-height: calc(100vh - 4rem);
  overflow: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
  font-size: 0.9rem;
}

body[data-theme="dark"] .modal-content {
  background: #020617;
  color: #e5e7eb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid #1f2937;
}

.modal-title {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.modal-content p {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.modal-content ul {
  margin-top: 0.25rem;
  padding-left: 1.2rem;
}

/* Collapsible details within modals */
details {
  margin-bottom: 0.5rem;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  margin-top: 0.5rem;
  outline: none;
}

details p,
details ul {
  margin: 0.45rem 0 0.8rem 0;
}

.modal-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  border-radius: 50%;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: #6b7280;
}

body[data-theme="dark"] .modal-close-btn {
  color: #9ca3af;
}

/* Entry modal specific */

.entry-modal-content {
  max-width: 460px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

@media (min-width: 520px) {
  .form-row {
    flex-direction: row;
  }
}

.form-col {
  flex: 1;
}

.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.small-label {
  font-size: 0.76rem;
}

body[data-theme="dark"] .field-label {
  color: #9ca3af;
}

input[type="text"],
input[type="date"] {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  outline: none;
  background-color: #f9fafb;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

input[type="text"]:focus,
input[type="date"]:focus {
  border-color: #4b5563;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(75, 85, 99, 0.18);
}

body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="date"] {
  background-color: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

body[data-theme="dark"] input[type="text"]:focus,
body[data-theme="dark"] input[type="date"]:focus {
  border-color: #cbd5f5;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4);
}

#colorInput {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.1rem;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

#colorInput::-webkit-color-swatch-wrapper {
  padding: 0;
}

#colorInput::-webkit-color-swatch {
  border-radius: 4px;
  border: none;
}

body[data-theme="dark"] #colorInput {
  border-color: #1f2937;
}

/* Buttons inside modal */

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.primary-btn,
.secondary-btn {
  border-radius: 4px;
  border: 1px solid #d1d5db;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: #f9fafb;
  color: #111827;
}

.primary-btn:hover,
.secondary-btn:hover {
  background-color: #f3f4f6;
}

body[data-theme="dark"] .primary-btn,
body[data-theme="dark"] .secondary-btn {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

body[data-theme="dark"] .primary-btn:hover,
body[data-theme="dark"] .secondary-btn:hover {
  background: #111827;
}

/* Validation shake */

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.3s;
}

/* Utils */

.hidden {
  display: none;
}