/* To-Do page styles (migrated from css/components/todo.css) */

/* Tag color palette moved to components/blog_items.css for shared use */

/* Stage badges (consistent look across views) */
.stage-badge { font-weight: 600; border: 1px solid transparent; }
/* Subtle, same-hue borders per stage */
.stage-badge.stage-wondering { border-color: color-mix(in srgb, var(--stage-color-wondering), transparent 60%); }
.stage-badge.stage-planning { border-color: color-mix(in srgb, var(--stage-color-planning), transparent 60%); }
.stage-badge.stage-in_progress { border-color: color-mix(in srgb, var(--stage-color-in_progress), transparent 60%); }
.stage-badge.stage-paused { border-color: color-mix(in srgb, var(--stage-color-paused), transparent 60%); }
.stage-badge.stage-gave_up { border-color: color-mix(in srgb, var(--stage-color-gave_up), transparent 60%); }
.stage-badge.stage-done { border-color: color-mix(in srgb, var(--stage-color-done), transparent 60%); }
.stage-wondering { background: rgba(108, 117, 125, .12); color: var(--bs-secondary-text, #495057); }
.stage-planning { background: rgba(13, 202, 240, .14); color: #055160; }
.stage-in_progress { background: rgba(13, 110, 253, .12); color: #084298; }
.stage-paused { background: rgba(255, 193, 7, .16); color: #664d03; }
.stage-gave_up { background: rgba(220, 53, 69, .12); color: #842029; }
.stage-done { background: rgba(25, 135, 84, .14); color: #0f5132; }
body.dark-mode .stage-wondering { background: rgba(108, 117, 125, .22); color: #ced4da; }
body.dark-mode .stage-planning { background: rgba(13, 202, 240, .18); color: #b6effb; }
body.dark-mode .stage-in_progress { background: rgba(13, 110, 253, .18); color: #9ec5fe; }
body.dark-mode .stage-paused { background: rgba(255, 193, 7, .22); color: #ffe69c; }
body.dark-mode .stage-gave_up { background: rgba(220, 53, 69, .18); color: #f1aeb5; }
body.dark-mode .stage-done { background: rgba(25, 135, 84, .18); color: #a3cfbb; }
/* Slightly stronger same-hue status borders in dark mode */
body.dark-mode .stage-badge.stage-wondering { border-color: color-mix(in srgb, var(--stage-color-wondering), transparent 45%); }
body.dark-mode .stage-badge.stage-planning { border-color: color-mix(in srgb, var(--stage-color-planning), transparent 45%); }
body.dark-mode .stage-badge.stage-in_progress { border-color: color-mix(in srgb, var(--stage-color-in_progress), transparent 45%); }
body.dark-mode .stage-badge.stage-paused { border-color: color-mix(in srgb, var(--stage-color-paused), transparent 45%); }
body.dark-mode .stage-badge.stage-gave_up { border-color: color-mix(in srgb, var(--stage-color-gave_up), transparent 45%); }
body.dark-mode .stage-badge.stage-done { border-color: color-mix(in srgb, var(--stage-color-done), transparent 45%); }

.todo-item.done .todo-title {
  text-decoration: line-through;
  opacity: 0.7;
}

.todo-item.paused {
  opacity: 0.6;
}

.todo-item.gave_up {
  opacity: 0.5;
  font-style: italic;
}

.todo-item.in_progress {
  border-left: 4px solid var(--bs-primary);
}

.todo-item.planning {
  border-left: 4px solid var(--bs-info);
}

.todo-item.wondering {
  border-left: 4px solid var(--bs-secondary);
}

.todo-item.done {
  border-left: 4px solid var(--bs-success);
}

.todo-item.gave_up {
  border-left: 4px solid var(--bs-danger);
}

.todo-item.paused {
  border-left: 4px solid var(--bs-warning);
}

.todo-item { border-left: none; }

.todo-filters .form-select,
.todo-filters .form-control {
  font-size: .85rem;
}

/* Grid rules unified in components/blog_items.css */

/* Card-like shared styling moved to components/blog_items.css */

/* Stage color variables (used for borders and dots) */
:root {
  --stage-color-wondering: #6c757d; /* secondary */
  --stage-color-planning: #0dcaf0;  /* info */
  --stage-color-in_progress: #0d6efd; /* primary */
  --stage-color-paused: #ffc107;    /* warning */
  --stage-color-gave_up: #dc3545;   /* danger */
  --stage-color-done: #198754;      /* success */
}
body.dark-mode {
  /* Keep strong, readable colors in dark mode */
  --stage-color-wondering: #8b96a0;
  --stage-color-planning: #39d6f3;
  --stage-color-in_progress: #3c8bff;
  --stage-color-paused: #ffd058;
  --stage-color-gave_up: #f06b7a;
  --stage-color-done: #34c787;
}

/* Reinstate left accent border AFTER card border so it's not overridden */
.todo-item.wondering { border-left: 4px solid var(--stage-color-wondering) !important; }
.todo-item.planning { border-left: 4px solid var(--stage-color-planning) !important; }
.todo-item.in_progress { border-left: 4px solid var(--stage-color-in_progress) !important; }
.todo-item.paused { border-left: 4px solid var(--stage-color-paused) !important; }
.todo-item.gave_up { border-left: 4px solid var(--stage-color-gave_up) !important; }
.todo-item.done { border-left: 4px solid var(--stage-color-done) !important; }

/* Small colored dots for stage menu */
.stage-dot {
  display: inline-block;
  width: .66em;
  height: .66em;
  border-radius: 50%;
  margin-right: .4rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.stage-dot-all { background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%); }
.stage-dot-wondering { background: var(--stage-color-wondering); }
.stage-dot-planning { background: var(--stage-color-planning); }
.stage-dot-in_progress { background: var(--stage-color-in_progress); }
.stage-dot-paused { background: var(--stage-color-paused); }
.stage-dot-gave_up { background: var(--stage-color-gave_up); }
.stage-dot-done { background: var(--stage-color-done); }

/* Title hover cue unified in components/blog_items.css */

/* Category and due badges: no transition (instant feedback) */
/* Disable hover effect on categories; keep on due */
.todo-item .todo-due:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb), .28);
  filter: saturate(1.05);
  opacity: .95;
}

.view-selector {
  min-width: 170px;
}

.view-select-pop {
  width: 200px;
  z-index: 30;
}

.view-toggle-heading {
  font-size: 1.05rem;
}

@media (max-width:575.98px) {
  .view-toggle-heading {
    font-size: 1rem;
  }
}

@media (max-width:425px) {
  .todo-page-header {
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
  }

  /* Keep heading size consistent with Diary (no extra downscaling here) */
  .todo-page-header .heading-responsive {
    font-size: inherit;
  }

  .todo-page-header .heading-responsive .heading-extra {
    display: none;
  }

  /* Match Diary's top button (Bootstrap .btn-sm defaults) */
  #btnNewTodoTop {
    font-size: .875rem;
    padding: .25rem .5rem;
  }

  .todo-toolbar {
    flex-wrap: wrap;
    gap: .55rem !important;
    align-items: center !important;
  }

  .todo-toolbar-right {
    flex-wrap: wrap;
    gap: .55rem !important;
  }

  #activeFiltersBar {
    order: 3;
    flex: 1 1 100%;
  }

  #btnSortMenu {
    white-space: nowrap;
  }

  #btnSortMenu .d-none.d-md-inline,
  #currentSortLabel {
    display: none !important;
  }

  #btnTodoFilterToggle span {
    display: none !important;
  }

  #btnTodoFilterToggle {
    padding: .45rem .65rem;
  }

  /* Blog grid handles responsive columns; keep only item-level tweaks */

  .todo-item.card {
    padding: .55rem .6rem;
  }

  .todo-item .todo-desc {
    font-size: .78rem;
  }

  .todo-item .todo-stage-select-inline {
    font-size: .72rem;
  }

  .stage-header-toggle {
    font-size: 1rem;
  }
}

/* Stage header toggle */
.stage-header-toggle {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.1;
  padding: 4px 6px;
  border-radius: 4px;
}

.stage-header-toggle:focus {
  outline: none;
  box-shadow: none;
}

.stage-header-toggle:hover {
  background: var(--bs-light-bg-subtle, rgba(0, 0, 0, 0.04));
}

body.dark-mode .stage-header-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.stage-header-toggle i.bi-kanban {
  opacity: .85;
}

/* Detail modal & comments */
#todoDetailModal .modal-body {
  font-size: .9rem;
}

#todoDetailModal [data-todo-comments] img {
  max-width: 100%;
  height: auto;
}

#todoDetailModal [data-todo-comments] .border {
  background: var(--bs-body-bg);
}

body.dark-mode #todoDetailModal [data-todo-comments] .border {
  background: rgba(255, 255, 255, 0.03);
}

.todo-item .todo-desc {
  max-height: 5.5em;
  overflow: hidden;
}

/* Enhanced styling for To-Do detail view */

/* Buttons */
/* #todoDetailModal .btn {
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: background-color 0.3s, box-shadow 0.3s;
}
#todoDetailModal .btn:hover {
  background-color: var(--bs-primary-hover, #0056b3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} */

/* Comments */

/* Detail header & actions */
#todoDetailModal .todo-detail-header {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .6rem;
}

#todoDetailModal .todo-detail-header .left {
  display: flex;
  gap: .6rem;
  align-items: center;
  min-width: 0;
}

/* Title should ellipsize to avoid pushing actions off-screen */
#todoDetailModal .todo-detail-header .left .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

#todoDetailModal .todo-detail-header .meta {
  font-size: .82rem;
  color: var(--text-secondary, #6c757d);
}

/* Ensure actions wrap under the title when there isn't enough horizontal space */
#todoDetailModal .todo-detail-actions {
  flex-shrink: 0;
}

/* Action buttons aligned to the right, using site button styles */
#todoDetailModal .todo-detail-actions {
  display: flex;
  gap: .45rem;
  align-items: center;
}

#todoDetailModal .todo-detail-actions .btn {
  padding: .45rem .75rem;
  font-size: .88rem;
}

/* Ensure high-contrast hover for outline secondary action buttons in modal (light mode) */
:root:not([data-theme="dark"]) body:not(.dark-mode) #todoDetailModal .todo-detail-actions .btn-outline-secondary:hover,
:root:not([data-theme="dark"]) body:not(.dark-mode) #todoDetailModal .todo-detail-actions .btn-outline-secondary:focus,
:root:not([data-theme="dark"]) body:not(.dark-mode) #todoDetailModal .todo-detail-actions .btn-outline-secondary:active {
  background-color: var(--bs-secondary, #6c757d);
  color: #fff;
  border-color: var(--bs-secondary, #6c757d);
}

/* Description area: allow long content but keep modal tidy */
#todoDetailModal .todo-detail-description-wrap {
  max-height: 42vh;
  /* keeps modal from growing too tall */
  overflow: auto;
  padding: .6rem .65rem;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  margin-bottom: .8rem;
}

#todoDetailModal .todo-detail-card-title h4 {
  font-size: 1.25rem;
  margin: 0;
  word-break: break-word;
  color: var(--text-primary);
  font-weight: 700;
}

#todoDetailModal .todo-detail-card-title .small {
  color: var(--text-secondary);
}

#todoDetailModal .card[data-todo-detail-title-body],
#todoDetailModal .card {
  border-radius: 10px;
}

@media (max-width:575.98px) {
  #todoDetailModal .todo-detail-card-title h4 {
    font-size: 1.05rem;
  }

  #todoDetailModal .todo-detail-card-actions {
    display: none;
  }
}

/* Section headings inside modal (Description, Stage History, Comments) */
#todoDetailModal h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1rem;
}

#todoDetailModal h6 {
  font-size: 1rem;
  font-weight: 600;
}

#todoDetailModal .todo-detail-description-wrap pre {
  white-space: pre-wrap;
}

/* Comments list */
/* Comment media/background handled by shared blog_detail.css */

[data-todo-paste-hint] {
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: default;
  border: none;
  background: transparent;
  padding: 0;
}

[data-todo-paste-hint]:hover {
  color: var(--text-primary);
}

.file-input-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

.file-input-wrapper input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.file-input-wrapper .btn-icon {
  cursor: pointer;
}

/* Make action buttons icon-only on narrow screens */
@media (max-width:575.98px) {
  .todo-detail-actions .btn span {
    display: none !important;
  }

  .todo-detail-actions .btn {
    padding: .32rem .45rem;
  }

  #todoDetailModal .btn-sm {
    padding: .28rem .48rem;
  }
}

/* Comment form */
.todo-comment-form {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.todo-comment-form textarea {
  flex: 1 1 auto;
  min-height: 64px;
  resize: vertical;
  padding: .6rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.todo-comment-form .btn {
  align-self: flex-end;
  margin-left: auto;
}

/* Smaller screens adjustments */
@media (max-width:575.98px) {
  #todoDetailModal .todo-detail-header {
    flex-direction: row;
    align-items: center;
    gap: .45rem;
  }

  /* place actions on a new row when necessary */
  #todoDetailModal .todo-detail-header .left {
    flex: 1 1 auto;
  }

  #todoDetailModal .todo-detail-actions {
    flex: 0 0 auto;
  }

  /* reduce title max width to allow actions to sit alongside */
  #todoDetailModal .todo-detail-header .left .modal-title {
    max-width: 46vw;
  }

  #todoDetailModal .todo-detail-description-wrap {
    max-height: 30vh;
  }
}

/* Dark mode tweaks */
body.dark-mode #todoDetailModal .todo-detail-description-wrap {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.04);
}

.action-btn {
  padding: .28rem .48rem;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* circular icon button for three-dot menu */
/* .btn-icon defined globally in components/buttons.css */

.action-btn i {
  font-size: 1rem;
}


/* Fix misalignment */
span[data-todo-detail-category], span.todo-category {
  display: contents;
}