/* miniCycle Lite — polish overlay
   Loaded AFTER miniCycle-lite-styles.css so these win on conflict.
   Ported from chrome/lite/popup.css (visual polish + focus mode).
   Popup-specific dimensions intentionally NOT included so web/lite stays responsive. */

/* ─── z-index click-fixes ────────────────────────────────────────────
   The lite app's #task-view (position:fixed) was eating clicks on the
   footer-area buttons (Tasks/Stats pill, Undo). */
#footer-container {
  z-index: 200 !important;
}

#quick-help-toggle,
#quick-dark-toggle {
  z-index: 250 !important;
}

/* ─── Focus mode ─────────────────────────────────────────────────────
   Progress bar + focus toggle live in a flex row so the button is
   naturally in line with the progress bar — no JS measurement. */
.progress-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  width: 100%;
}

/* Invisible spacer mirrors the focus-toggle's width so the progress
   bar stays centered (symmetric flex layout). */
.progress-row::before {
  content: '';
  display: block;
  width: 36px;
  flex-shrink: 0;
}

body.focus-mode .progress-row::before {
  display: none;
}

.progress-row .progress-container {
  margin: 0 !important;
  margin-top: 0 !important;
}

#focus-toggle {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

#focus-toggle:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: #ffffff;
  transform: scale(1.05);
}

body.dark-mode #focus-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Icon swap — show expand by default, collapse only in focus mode */
#focus-toggle .focus-icon-collapse { display: none; }
body.focus-mode #focus-toggle .focus-icon-expand { display: none; }
body.focus-mode #focus-toggle .focus-icon-collapse { display: inline-block; }

/* Hide ALL chrome in focus mode — leave only the title, task list,
   progress bar, complete button, and the focus toggle itself. */
body.focus-mode .mini-cycle-header-row,
body.focus-mode .mobile-mode-selector-wrapper,
body.focus-mode #quick-help-toggle,
body.focus-mode #quick-dark-toggle,
body.focus-mode .footer-links,
body.focus-mode .add-task-button-container,
body.focus-mode .navigation-dots,
body.focus-mode .undo-container,
body.focus-mode #footer-container {
  display: none !important;
}

body.focus-mode {
  padding: 0 !important;
}

/* Pin app-container to viewport edges; flex-column so task list grows. */
body.focus-mode #app-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding-top: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 50;
}

body.focus-mode .mini-cycle-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

/* The lite stylesheet centers #task-view via top:50% + translate(-50%,-50%)
   and caps it at max-height:75% — undo that so it fills the focus area.
   Scoped to :not(.hide) so the slide-out transform applied during
   swipe-to-stats can still take effect (see the .hide rule below). */
body.focus-mode #task-view:not(.hide) {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}

/* Preserve the swipe-to-stats slide animation while in focus mode.
   Without this, the focus-mode rule above wins on specificity over
   #task-view.hide and clamps transform back to none — the task list
   sits still as the stats panel slides in over it. Use translateX
   only (no Y shift) since in focus mode the task-view fills the
   panel and isn't vertically centered. */
body.focus-mode #task-view.hide {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  -webkit-transform: translateX(-200%) !important;
  -ms-transform: translateX(-200%) !important;
  transform: translateX(-200%) !important;
}

body.focus-mode .task-list-container {
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  width: 96% !important;
  /* Cap to ~task-list width + a little breathing room. The inner
     .task-list maxes at 800px and individual .task at 760px (see
     the @media (min-width: 1024px) block in miniCycle-lite-styles.css);
     a 96% / 840px cap keeps the container's background hugging the
     content on desktop instead of sprawling to viewport width. */
  max-width: 840px !important;
}

body.focus-mode .mini-cycle-title {
  width: 96% !important;
  max-width: 840px !important;
}

body.focus-mode .progress-container {
  width: 80% !important;
  /* Narrower than the .task max-width (760px) on desktop — the
     progress bar reads as a slim indicator rather than competing
     visually with the task list above it. */
  max-width: 720px !important;
}

body.focus-mode .complete-all-and-help-window-container {
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

/* Pin the focus toggle bottom-right when active. */
body.focus-mode #focus-toggle {
  position: fixed !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 250 !important;
}

/* ─── Feedback modal — error block ───────────────────────────────── */
#thank-you-message.feedback-error-block {
  text-align: center;
  padding: 20px 18px;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 10px;
  color: #842029;
  margin: 8px 4px;
}

#thank-you-message.feedback-error-block .feedback-error-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 8px;
}

#thank-you-message.feedback-error-block .feedback-error-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #b02a37;
}

#thank-you-message.feedback-error-block .feedback-error-body {
  font-size: 12px;
  line-height: 1.4;
  color: #842029;
  opacity: 0.9;
}

body.dark-mode #thank-you-message.feedback-error-block {
  background: rgba(220, 53, 69, 0.15);
  border-color: rgba(255, 120, 130, 0.45);
  color: #ffd5d8;
}

body.dark-mode #thank-you-message.feedback-error-block .feedback-error-title {
  color: #ff8b94;
}

body.dark-mode #thank-you-message.feedback-error-block .feedback-error-body {
  color: #ffd5d8;
}

/* ─── Stats panel polish (internal spacing only — not dimensions) ── */
#stats-panel.stats-panel {
  padding: 12px 14px !important;
  overflow-x: hidden !important;
}

#stats-panel.stats-panel::-webkit-scrollbar { width: 0; height: 0; }

#stats-panel h2 {
  margin: 0 0 6px 0 !important;
  font-size: 14px !important;
}

#stats-panel .stats-grid {
  margin-bottom: 6px !important;
  padding: 4px !important;
  gap: 2px !important;
}

#stats-panel .stats-grid p {
  padding: 5px 9px !important;
}

#stats-panel .stats-section {
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
}

#stats-panel .stats-section:last-of-type {
  margin-bottom: 0 !important;
}

#stats-panel .stats-section-header {
  margin-bottom: 4px !important;
  padding-bottom: 4px !important;
}

#stats-panel .badges {
  padding: 3px 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

#stats-panel .stats-count {
  margin-top: 4px !important;
  padding-top: 4px !important;
}

/* ─── Tasks/Stats pill (replaces nav dots — visual only) ───────────
   The main lite stylesheet centers .navigation-dots via width: 100%
   + justify-content: center. We override width to auto (pill should
   only be as wide as its content), so we have to re-center it
   explicitly with left: 50% + translateX(-50%) — the same pattern
   .undo-container already uses. Without this, position: absolute
   leaves the pill at its static position (~viewport center as the
   *start* of the inline element, not the middle), shifting it
   right of center by half its own width. */
.navigation-dots {
  display: inline-flex !important;
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  -webkit-transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  gap: 4px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.navigation-dots button.dot {
  width: auto !important;
  height: auto !important;
  padding: 5px 14px !important;
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  background-color: rgba(0, 0, 0, 0.28) !important;
  background-clip: border-box !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  transform: none !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  pointer-events: auto !important;
}

.navigation-dots button.dot[data-view="tasks"]::before { content: "Tasks"; }
.navigation-dots button.dot[data-view="stats"]::before { content: "Stats"; }

.navigation-dots button.dot:hover {
  background-color: rgba(0, 0, 0, 0.42) !important;
  border-color: #ffffff !important;
  transform: none !important;
}

.navigation-dots button.dot.active,
.navigation-dots button.dot.active:hover {
  background-color: #ffffff !important;
  color: #1a1f4a !important;
  border-color: #ffffff !important;
  transform: none !important;
}

/* ─── Mobile non-focus: tighter task container ────────────────────
   The base lite stylesheet lets .task-list-container fill the full
   #task-view width (95% of viewport on mobile), which makes the
   container hug the viewport edges and reads as too wide / not
   centered relative to the narrower .task max-width (360px).
   Cap the width so the container has visible breathing room on the
   sides, and trim max-height so it doesn't take up most of the
   viewport vertically. Focus-mode rules above override this with
   their own width: 96% / max-width: 840px. */
@media (max-width: 480px) {
  body:not(.focus-mode) .task-list-container {
    max-width: 380px !important;
    /* Aggressive cap so the container is visibly shorter — the
       previous 50vh wasn't visibly changing the layout because the
       natural content height didn't reach it. 280px shows roughly
       3 tasks before scrolling kicks in. */
    max-height: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body:not(.focus-mode) .mini-cycle-title {
    max-width: 380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Push undo/redo above the Tasks/Stats pill. The base lite mobile
     override puts undo at bottom: 50px; the pill sits at bottom: 25px
     with ~23px height, so undo overlapped the pill by ~2px. 60px
     leaves a small ~12px gap — close enough to feel grouped without
     touching. */
  body:not(.focus-mode) .undo-container {
    bottom: 60px !important;
  }
  /* Keep "Undo (1)" / "Redo (1)" on a single line. Without this the
     "(1)" badge wrapped to a second line on narrow viewports, making
     each button ~46px tall instead of ~28px. */
  body:not(.focus-mode) .undo-redo-btn {
    white-space: nowrap !important;
  }
  /* Shrink task pills on mobile — base lite .task uses min-height: 50px
     which rendered at ~56px including the 24px checkbox. Drop to 34px
     for a more compact list. box-sizing: border-box is required: the
     base .task uses content-box, so width: 100% + padding overflows
     the parent .task-list by ~20px (visibly off-center, edge-hugging).
     max-width: 280px ensures visible breathing room inside the
     container even on the narrowest viewports (<400px). */
  body:not(.focus-mode) .task-list .task,
  body:not(.focus-mode) .task-list li {
    box-sizing: border-box !important;
    min-height: 34px !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
    max-width: 280px !important;
  }
  /* The three-dots options button defaults to 44px tall (WCAG tap
     target), which forced the task pill to ~52px even with min-height
     above. Trim padding to bring the button closer to ~32px while
     still being comfortably tappable. */
  body:not(.focus-mode) .task-list .three-dots-btn {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
  }
}