/* checklist-styles.css - Styles for Trello Checklists within Board Cards */

/* Container for all checklists within a card */
.checklists-container {
    margin-top: 0.75rem; /* mt-3 */
    padding-top: 0.5rem; /* pt-2 */
    border-top: 1px solid #e2e8f0; /* Example border, adjust as needed */
    space-y: 0.75rem; /* space-y-3 */
  }
  
  /* Container for a single checklist */
  .checklist {
    margin-bottom: 0.75rem; /* Add space between multiple checklists */
  }
  
  /* Checklist Title */
  .checklist-title {
    font-size: 0.8em; /* text-xs */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.25rem; /* mb-1 */
    color: #475569; /* slate-600 */
    text-transform: uppercase; /* Optional: make title stand out */
    letter-spacing: 0.05em; /* Optional */
  }
  
  /* Container for all items within a checklist */
  .checklist-items {
    space-y: 0.25rem; /* space-y-1 */
  }
  
  /* Container for a single checklist item (checkbox + text) */
  .checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    padding: 0.1rem 0; /* Small vertical padding */
    font-size: 0.9em; /* Slightly smaller than card title */
  }
  
  /* Checklist item checkbox */
  .checklist-item input[type="checkbox"] {
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    cursor: pointer;
    accent-color: #007bff; /* Color for the checkmark, adjust theme */
    border-radius: 3px; /* Slightly rounded */
    border: 1px solid #adb5bd; /* Default border */
  }
  
  /* Checklist item text */
  .checklist-item-text {
    color: #334155; /* slate-700 */
    line-height: 1.3;
    transition: color 0.2s, text-decoration 0.2s;
    flex-grow: 1; /* Allow text to take remaining space */
  }
  
  /* Styling for completed items */
  .checklist-item.completed .checklist-item-text {
    color: #64748b; /* slate-500 */
    text-decoration: line-through;
    opacity: 0.8;
  }
  
  /* --- Theme Adjustments --- */
  
  /* Dark Mode */
  body.dark-mode .checklists-container {
    border-top-color: #454c54;
  }
  body.dark-mode .checklist-title {
    color: #a6b3be;
  }
  body.dark-mode .checklist-item input[type="checkbox"] {
     border-color: #6a7178;
     accent-color: #4dabf7; /* Lighter blue for dark mode */
  }
  body.dark-mode .checklist-item-text {
    color: #d1d9e0;
  }
  body.dark-mode .checklist-item.completed .checklist-item-text {
    color: #8698a7; /* Adjusted for dark mode */
    text-decoration: line-through;
    opacity: 0.7;
  }
  
  /* Ty Mode (Example - adjust colors as needed) */
  body.ty-mode .checklists-container {
    border-top-color: #5a5a7a;
  }
  body.ty-mode .checklist-title {
    color: #b8b8e8;
  }
  body.ty-mode .checklist-item input[type="checkbox"] {
     border-color: #8a8aac;
     accent-color: #8c8cff; /* Ty mode accent */
  }
  body.ty-mode .checklist-item-text {
    color: #d8d8f8;
  }
  body.ty-mode .checklist-item.completed .checklist-item-text {
    color: #a8a8d8; /* Adjusted for ty mode */
    text-decoration: line-through;
    opacity: 0.7;
  }
  
  
  /* Modern Mode (Example - adjust colors as needed) */
  body.modern-mode .checklists-container {
    border-top-color: #e2e8f0;
  }
  body.modern-mode .checklist-title {
    color: #4f46e5; /* Indigo title */
    font-size: 0.75em;
  }
  body.modern-mode .checklist-item input[type="checkbox"] {
     border-color: #cbd5e1;
     accent-color: #6366f1; /* Modern mode accent */
     border-radius: 4px; /* Match other modern elements */
  }
  body.modern-mode .checklist-item-text {
    color: #334155;
  }
  body.modern-mode .checklist-item.completed .checklist-item-text {
    color: #94a3b8; /* Slate */
    text-decoration: line-through;
    opacity: 0.8;
  }