/* --- Todo panel: fixed right-side drawer (desktop), offcanvas (mobile) ---
 *
 * The panel lives below the navbar (--navbar-h is measured at runtime by
 * todo-panel.js) so that opening it does not reflow or resize the header.
 */

:root {
  --todo-panel-width: 300px;
  --navbar-h: 56px; /* fallback; overridden by JS once navbar is measured */
}

.todo-panel {
  position: fixed;
  top: var(--navbar-h);
  right: 0;
  width: var(--todo-panel-width);
  height: calc(100vh - var(--navbar-h));
  background: var(--bg-secondary, #1f1f2a);
  border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.25);
  z-index: 1020; /* below sticky navbar (1030) */
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.todo-panel.is-collapsed {
  transform: translateX(100%);
}

.todo-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  font-weight: 600;
}

.todo-panel-header .todo-panel-title i {
  margin-right: 0.4rem;
}

.todo-panel-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.7;
}
.todo-panel-close:hover { opacity: 1; }

.todo-panel-create {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.todo-panel-create-row {
  display: flex;
  gap: 0.4rem;
}

.todo-panel-create input[type="text"],
.todo-panel-create input[type="date"],
.todo-panel-create select {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary, #14141c);
  color: inherit;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
}

.todo-panel-create button {
  background: var(--accent-color, #667eea);
  color: #fff;
  border: 0;
  border-radius: 4px;
  width: 34px;
  font-size: 1.1rem;
  cursor: pointer;
}
.todo-panel-create button:hover { filter: brightness(1.1); }
.todo-panel-create button:disabled { opacity: 0.4; cursor: not-allowed; }

.todo-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.todo-panel-empty {
  text-align: center;
  color: var(--text-secondary, rgba(255, 255, 255, 0.5));
  font-size: 0.85rem;
  padding: 1.2rem 0.8rem;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}
.todo-item:last-child { border-bottom: 0; }

.todo-item input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--accent-color, #667eea);
}

.todo-item .todo-body {
  flex: 1;
  min-width: 0;
}

.todo-item .todo-statement {
  font-size: 0.88rem;
  word-break: break-word;
}

.todo-item .todo-deadline {
  font-size: 0.75rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  margin-top: 0.15rem;
}

.todo-item .todo-deadline.is-overdue {
  color: #e07a7a;
  font-weight: 500;
}

.todo-item .todo-recurrence {
  font-size: 0.72rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  margin-top: 0.1rem;
}

.todo-item .todo-delete {
  background: transparent;
  border: 0;
  color: var(--text-secondary, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.todo-item:hover .todo-delete { opacity: 1; }
.todo-item .todo-delete:hover { color: #e07a7a; }

/* Floating toggle button (always visible, sits just below the navbar) */
.todo-panel-toggle {
  position: fixed;
  top: calc(var(--navbar-h) + 1rem);
  right: 1rem;
  z-index: 1019; /* below navbar */
  background: var(--accent-color, #667eea);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.todo-panel-toggle:hover { filter: brightness(1.1); }
.todo-panel-toggle .todo-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e07a7a;
  color: #fff;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
}
.todo-panel-toggle .todo-badge.is-visible { display: inline-flex; }

/* Main content wrapper rendered by layout.pug. Defined here (rather than
 * inline on the element) so the rule below can override its right padding
 * when the panel opens — inline styles win over external CSS. */
.app-content {
  padding: 1rem;
  max-width: 100%;
}

/* Desktop: compress the main content (and footer) so the panel never overlays
 * the page. The navbar is intentionally untouched and keeps full width. */
@media (min-width: 992px) {
  body.todo-panel-open > .app-content,
  body.todo-panel-open > footer {
    padding-right: calc(var(--todo-panel-width) + 1rem);
    transition: padding-right 0.25s ease;
  }
}

/* Help mode applies `position: relative` to every [data-help] element so its
 * outline can sit above the backdrop. The panel and its toggle are already
 * `position: fixed` — restore that so they don't snap back into the document
 * flow (which would visibly drop them on the left side of the page). */
body.help-mode #todo-panel,
body.help-mode #todo-panel-toggle {
  position: fixed !important;
  z-index: 1029; /* matches help-overlay's data-help z-index, above its backdrop */
}

/* Mobile: panel takes full width minus a margin */
@media (max-width: 767.98px) {
  :root { --todo-panel-width: 90vw; }
  .todo-panel { box-shadow: -6px 0 20px rgba(0, 0, 0, 0.5); }
}

.todo-panel-zulip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  user-select: none;
}

.todo-item .todo-zulip-toggle {
  background: none;
  border: 0;
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.9rem;
}
.todo-item .todo-zulip-toggle.is-on { color: var(--accent-color, #667eea); }
.todo-item .todo-zulip-toggle:hover { filter: brightness(1.2); }