/*
 * Design System - Task Components
 *
 * Task lists, wizard, grooming carousel, suggestions, and related components
 */

/* ============================================
   Task Lists
   ============================================ */

.tasks-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.tasks-header {
  margin-bottom: var(--space-lg);
}

.tasks-header h1 {
  margin-bottom: var(--space-base);
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.simple-task-list-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.task-main {
  margin-bottom: var(--space-sm);
}

.task-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-sm) 0;
  color: var(--ink-dark);
}

.task-meta {
  display: flex;
  gap: var(--space-base);
  align-items: center;
}

.task-estimate {
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
}

.task-priority {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.9);
}

.task-priority.have_to {
  border-width: 2px;
  border-color: var(--ink-dark);
}

.task-priority.want_to {
  border-color: var(--parchment);
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.task-actions,
.chore-actions {
  display: flex;
  gap: var(--space-base);
  padding-top: var(--space-sm);
}

.task-actions label,
.chore-actions label {
  margin-left: var(--space-xs);
  margin-right: var(--space-base);
}

.tags-section {
  margin-bottom: var(--space-xl);
}

.tags-section h2 {
  margin-bottom: var(--space-base);
}

.tags-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================
   Wizard Component
   ============================================ */

.wizard-container {
  max-width: 800px;
  margin: 0 auto;
}

.wizard-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--parchment);
  position: relative;
}

/* Decorative flourish above header */
.wizard-header::before {
  content: '✦  ·  ✦  ·  ✦';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--dusty-rose);
  letter-spacing: 8px;
  opacity: 0.6;
}

/* Decorative element below border */
.wizard-header::after {
  content: '✦';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: var(--terra-cotta);
  background: var(--paper-bg);
  padding: 0 var(--space-md);
}

.wizard-header h1 {
  font-family: var(--font-accent);
  font-size: 48px;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
  color: var(--ink-dark);
}

.wizard-header p {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  color: var(--ink-medium);
}

/* Progress bar */
.grooming-progress {
  margin-bottom: var(--space-lg);
}

.progress-text {
  font-family: var(--font-accent);
  font-size: var(--font-size-lg);
  color: var(--ink-dark);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

/* Progress bar containers (consolidated) */
.wizard-progress,
.progress-bar-container {
  height: var(--size-checkbox);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 237, 0.9) 100%);
  border: 2px solid var(--parchment-dark);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Wizard progress specific */
.wizard-progress {
  margin-bottom: var(--space-base);
}

/* Progress bar container specific */
.progress-bar-container {
  width: 100%;
}

/* Subtle paper texture on track */
.wizard-progress::before,
.progress-bar-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
  z-index: 1;
}

/* Progress bar fills */
.wizard-progress-bar,
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--ui-green) 0%, var(--ui-green-dark) 100%);
  transition: width var(--transition-slow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    1px 0 2px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}

/* Striped pattern on fill */
.wizard-progress-bar::after,
.progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.1) 8px,
    rgba(255, 255, 255, 0.1) 16px
  );
}

/* Step indicators */
.wizard-steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-base);
  margin-bottom: var(--space-2xl);
}

.wizard-step {
  flex: 0 0 auto;
  text-align: center;
  padding: var(--space-sm);
  position: relative;
  transition: transform var(--transition-base);
}

.wizard-step.active {
  transform: scale(1.05);
}

.wizard-step.completed {
  opacity: 0.8;
}

.wizard-step:not(.active):not(.completed) {
  opacity: 0.4;
}

.wizard-step-number {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  margin: 0 auto var(--space-sm);
  border: 3px solid var(--parchment);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-size: var(--size-icon);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  background: var(--paper-bg);
  background-clip: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
  position: relative;
}

.wizard-step.active .wizard-step-number {
  border-color: var(--ui-green-accent);
  background: var(--ui-green);
  background-clip: border-box;
  color: var(--ink-dark);
}

.wizard-step.completed .wizard-step-number {
  border-color: var(--parchment-dark);
  background: var(--paper-bg);
  color: transparent;
}

/* Checkmark for completed steps */
.wizard-step.completed .wizard-step-number::before {
  content: '✓';
  position: absolute;
  font-size: var(--size-icon);
  color: var(--ui-green-dark);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wizard-step-label {
  font-family: var(--font-accent);
  font-size: var(--font-size-base);
  letter-spacing: 0.5px;
  color: var(--ink-dark);
}

/* Content area */
.wizard-content {
  min-height: 400px;
  padding: var(--space-lg);
  border: 2px solid var(--parchment);
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 237, 0.9) 100%);
  margin-bottom: var(--space-base);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

.wizard-step-content h2 {
  font-family: var(--font-accent);
  font-size: 36px;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-lg);
}

.wizard-step-content h3 {
  font-family: var(--font-accent);
  font-size: 28px;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-base);
}

/* Errors */
.wizard-errors {
  padding: var(--space-base);
  margin-bottom: var(--space-base);
  border: 2px solid var(--ink-dark);
  border-radius: var(--border-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink-dark);
  font-weight: var(--font-weight-bold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wizard-errors.hidden {
  display: none;
}

/* Finalized view */
.wizard-finalized {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  border: 2px solid var(--parchment-dark);
  border-radius: var(--border-radius-xl);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 237, 0.9) 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

/* Decorative corner accents */
.wizard-finalized::before {
  content: '✦';
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 20px;
  color: var(--terra-cotta);
  opacity: 0.3;
}

.wizard-finalized::after {
  content: '✦';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 20px;
  color: var(--dusty-rose);
  opacity: 0.3;
}

.wizard-finalized-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-lg);
  border: 3px solid var(--ui-green-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(135deg, var(--ui-green) 0%, var(--ui-green-dark) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wizard-finalized-title {
  font-family: var(--font-accent);
  font-size: 42px;
  letter-spacing: 1px;
  margin-bottom: var(--space-base);
  color: var(--ink-dark);
}

.wizard-finalized-message {
  font-size: var(--font-size-lg);
  color: var(--ink-medium);
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.wizard-finalized-actions {
  margin-top: var(--space-xl);
}

/* Controls */
.wizard-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-base);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

.wizard-controls-left,
.wizard-controls-right {
  display: flex;
  gap: var(--space-sm);
}

/* Wizard actions (skip all, etc.) */
.wizard-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-lg);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  border: 2px solid var(--parchment);
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 237, 0.9) 100%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Prompt answer list */
.prompt-answers-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.prompt-answer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-base);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--parchment);
  border-radius: var(--border-radius);
}

.prompt-answer-text {
  flex: 1;
  font-size: var(--font-size-base);
}

.prompt-answer-delete {
  background: none;
  border: none;
  color: var(--ink-medium);
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-sm);
  margin-left: var(--space-sm);
}

.prompt-answer-delete:hover {
  color: var(--ink-dark);
}

.prompt-item {
  border-bottom: 1px solid var(--parchment);
  padding-bottom: var(--space-lg);
}

.prompt-item:last-child {
  border-bottom: none;
}

.task-review-item {
  border-radius: var(--border-radius);
}

.summary-stats {
  display: flex;
  justify-content: space-around;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.stat {
  text-align: center;
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
}

.next-steps {
  text-align: center;
}

.next-steps ul {
  text-align: left;
  display: inline-block;
}

.unscheduled-tasks-notice {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--parchment-dark);
  padding: var(--space-base);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-base);
}

.unscheduled-tasks-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.unscheduled-task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-base);
  border-bottom: 1px solid var(--parchment-light);
}

.unscheduled-task-item:last-child {
  border-bottom: none;
}

.unscheduled-task-item .task-title {
  flex: 1;
}

.unscheduled-task-item .task-estimate {
  font-size: var(--font-size-sm);
  margin-left: var(--space-base);
}

.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--parchment);
}

.metric-label {
  font-weight: var(--font-weight-bold);
}

.metric-value {
  font-size: var(--font-size-lg);
}

/* ============================================
   Block Suggestions
   ============================================ */

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.suggestion-card {
  border: 1px solid var(--parchment);
  padding: var(--space-base);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-radius: var(--border-radius);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--parchment);
}

.suggestion-meta {
  color: var(--ink-medium);
  font-size: var(--font-size-sm);
}

.suggestion-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}

.suggestion-task-item {
  padding-left: var(--space-base);
  position: relative;
}

.suggestion-task-item::before {
  content: "·";
  position: absolute;
  left: 0;
  font-weight: var(--font-weight-bold);
}

.suggestion-task-more {
  padding-left: var(--space-base);
  color: var(--ink-medium);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.suggestion-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--parchment);
}

/* Selected groups */
.selected-groups {
  padding: var(--space-base);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--parchment);
  border-radius: var(--border-radius);
}

.selected-group-card {
  background: rgba(255, 255, 255, 0.8);
  padding: var(--space-base);
  border: 1px solid var(--parchment);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
}

.selected-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--parchment);
}

.selected-group-tasks {
  list-style: disc;
  padding-left: var(--space-lg);
  margin: 0;
}

.selected-group-tasks li {
  padding: var(--space-xs) 0;
}

/* ============================================
   Task Grooming Carousel
   ============================================ */

.task-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.task-grooming-card {
  padding: var(--space-lg);
  border: 2px solid var(--parchment);
  margin-bottom: var(--space-base);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 237, 0.9) 100%);
  transition: opacity var(--transition-base), filter var(--transition-base), border-color var(--transition-base);
  border-radius: var(--border-radius-lg);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: visible;
}

/* Decorative corner accent */
.task-grooming-card.is-active::before {
  content: "✦";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 16px;
  color: var(--terra-cotta);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Active task */
.task-grooming-card.is-active {
  opacity: 1;
  border-color: var(--parchment-dark);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 237, 0.95) 100%);
}

/* Previous and upcoming tasks */
.task-grooming-card.is-previous,
.task-grooming-card.is-upcoming {
  opacity: 0.4;
  pointer-events: none;
}

.task-grooming-card.is-previous .task-grooming-header h3,
.task-grooming-card.is-upcoming .task-grooming-header h3 {
  color: var(--ink-medium);
}

/* Hide form fields for non-active tasks */
.task-grooming-card:not(.is-active) .task-grooming-fields {
  display: none;
}

.task-grooming-header h3 {
  font-family: var(--font-accent);
  font-size: 28px;
  font-weight: var(--font-weight-regular);
  margin: 0;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.carousel-controls {
  display: flex;
  gap: var(--space-base);
  justify-content: space-between;
  padding-top: var(--space-base);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

.carousel-controls .btn {
  flex: 1;
}

.carousel-controls .btn:first-child,
.carousel-controls .btn:last-child {
  flex: 0 0 auto;
  min-width: 120px;
}

/* ============================================
   Category Selector
   ============================================ */

/* Category radio buttons - colored when selected, match priority aesthetic */
.radio-label:has(input[value="admin"]:checked) {
  background: linear-gradient(135deg, var(--cat-4-tint-1) 0%, var(--cat-4-tint-1-dark) 100%);
  border-color: var(--cat-4-accent);
}

.radio-label:has(input[value="creative"]:checked) {
  background: linear-gradient(135deg, var(--cat-5-tint-1) 0%, var(--cat-5-tint-1-dark) 100%);
  border-color: var(--cat-5-accent);
}

.radio-label:has(input[value="personal"]:checked) {
  background: linear-gradient(135deg, var(--cat-2-tint-1) 0%, var(--cat-2-tint-1-dark) 100%);
  border-color: var(--cat-2-accent);
}

.radio-label:has(input[value="household"]:checked) {
  background: linear-gradient(135deg, var(--cat-3-tint-1) 0%, var(--cat-3-tint-1-dark) 100%);
  border-color: var(--cat-3-accent);
}

.radio-label:has(input[value="urgent"]:checked) {
  background: linear-gradient(135deg, var(--ui-amber) 0%, var(--ui-amber-dark) 100%);
  border-color: var(--ui-amber-accent);
}

.radio-label:has(input[value="upcoming"]:checked) {
  background: linear-gradient(135deg, var(--ui-green) 0%, var(--ui-green-dark) 100%);
  border-color: var(--ui-green-accent);
}

.badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
}

/* ============================================
   Tag Cloud
   ============================================ */

.tag-cloud {
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--parchment-light);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-xs);
}

.tag-cloud-label {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
  color: var(--ink-medium);
  font-size: var(--font-size-xs);
}

.tag-cloud-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tag-cloud-chip {
  padding: 4px 12px;
  border: 2px solid var(--parchment);
  border-radius: var(--border-radius-xl);
  background: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  font-weight: var(--font-weight-regular);
  color: var(--ink);
}

.tag-cloud-chip:hover {
  border-color: var(--parchment-dark);
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag-cloud-chip:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ============================================
   Task Title Editor (Grooming)
   ============================================ */

.task-title-display {
  cursor: pointer;
}

.task-title-text {
  display: inline;
}

.task-title-edit-btn {
  opacity: 0.6;
  margin-left: var(--space-xs);
}

/* ============================================
   Simple Task Display (Checkbox & List variants)
   ============================================ */

/* Base styles for simple task display */
.simple-task {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--border-radius);
  transition: all var(--transition-base);
}

.simple-task-title {
  font-size: var(--font-size-base);
  color: var(--ink-dark);
  font-weight: var(--font-weight-medium);
}

.simple-task-duration {
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.simple-task-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* Rich text preview — clipped to ~4 lines with gradient fadeout */
.simple-task-description {
  position: relative;
  max-height: calc(4 * var(--line-height-normal) * var(--font-size-sm));
  overflow: hidden;
  font-size: var(--font-size-sm);
  color: var(--ink-medium);
  line-height: var(--line-height-normal);
}

.simple-task-description::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(1.5 * var(--font-size-sm) * var(--line-height-normal));
  background: linear-gradient(to bottom, transparent, var(--paper-bg));
  pointer-events: none;
}

/* Checkbox variant */
.simple-task-checkbox {
  cursor: pointer;
  border: 1px solid transparent;
}

.simple-task-checkbox:hover {
  border-color: rgba(0, 0, 0, 0.1);
  transform: translateX(2px);
}

/* List variant */
.simple-task-list {
  list-style: none;
  border-left: 3px solid transparent;
  margin-left: calc(-1 * var(--space-base));
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.simple-task-list:hover {
  border-left-color: rgba(0, 0, 0, 0.2);
}

.simple-task-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Category color backgrounds for simple tasks are generated dynamically in _color_family_styles.html.erb */

/* Styled checkbox */
.simple-task-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--parchment-dark);
  border-radius: 3px;
  background: var(--bg-white-full);
  position: relative;
  transition: all var(--transition-base);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.simple-task-checkbox input[type="checkbox"]:hover {
  border-color: var(--ink-medium);
}

.simple-task-checkbox input[type="checkbox"]:checked {
  background: var(--ui-green-accent);
  border-color: var(--ui-green-accent);
}

.simple-task-checkbox input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */

@media (max-width: 768px) {
  /* Task cards - more compact */
  .task-card {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .task-card-title {
    font-size: var(--font-size-sm);
  }

  .task-card-meta {
    font-size: var(--font-size-xs);
  }

  /* Task list items - more compact */
  .task-list-item {
    padding: var(--space-xs);
  }

  /* Task actions - always visible on mobile */
  .task-actions {
    opacity: 1;
  }

  /* Task estimate badges - smaller */
  .task-estimate {
    font-size: var(--font-size-xs);
    padding: var(--space-2xs) var(--space-xs);
  }

  /* Tag chips - smaller */
  .tag-chip {
    font-size: var(--font-size-xs);
    padding: var(--space-2xs) var(--space-xs);
  }
}