/* Layout Grid */
.layout-grid {
    display: flex;
    gap: 3rem;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
}

.main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    min-width: 0;
    /* Prevent flex overflow */
}

/* Side Columns */
.side-column,
.left-column,
.right-column {
    width: 440px;
    flex-shrink: 0;
    animation: fadeIn 1s ease-out 0.4s backwards;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.todo-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 80vh;
}

.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todo-header h3 {
    font-size: 1.1rem;
    color: var(--accent-color);
}

/* Progress Bar */
.todo-progress-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}


.todo-input-wrapper {
    display: flex;
    gap: 0.5rem;
}

.todo-input-wrapper input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small);
    padding: 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.todo-input-wrapper input:focus {
    border-color: var(--accent);
}

.todo-input-wrapper button {
    background: var(--accent);
    color: var(--color-1);
    border: none;
    border-radius: var(--radius-small);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.todo-input-wrapper button:hover {
    background: var(--accent-secondary);
}

.todo-list {
    list-style: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.5rem;
    /* Space for scrollbar */
    min-height: 100px;
    /* Dropzone area */
}

/* Scrollbar styling for todo list */
.todo-list::-webkit-scrollbar {
    width: 4px;
}

.todo-list::-webkit-scrollbar-track {
    background: transparent;
}

.todo-list::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 4px;
}

.todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Ensure content and drag handle spacing */
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-small);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

/* Container for checkbox and text */
.todo-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* Status Indicator */
.todo-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--transition);
}

/* Status Colors */
.status-todo .todo-status-indicator {
    background: #38bdf8;
}

.status-in_progress .todo-status-indicator {
    background: #fbbf24;
}

.status-blocked .todo-status-indicator {
    background: #ef4444;
}

.status-done .todo-status-indicator {
    background: #10b981;
}

/* Dragging Styles */
.todo-item.draggable {
    cursor: grab;
}

.todo-item.dragging {
    opacity: 0.5;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border: 1px dashed var(--accent-color);
}

.todo-item.drag-over-top {
    border-top: 2px solid var(--accent-color);
}

.todo-item.drag-over-bottom {
    border-bottom: 2px solid var(--accent-color);
}

.todo-item.drag-over-center {
    background: color-mix(in srgb, var(--accent-color), transparent 80%);
    border: 1px solid var(--accent-color);
}

.todo-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.todo-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-secondary);
    border-radius: var(--radius-small);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: var(--transition);
}

.todo-checkbox:checked {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.todo-checkbox:checked::after {
    content: '✔';
    position: absolute;
    color: var(--color-1);
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

.todo-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    word-break: break-word;
}

.todo-checkbox:checked~.todo-text {
    text-decoration: line-through;
    color: var(--text-secondary);
    opacity: 0.7;
}

.todo-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: var(--transition);
}

.todo-item:hover .todo-actions {
    opacity: 1;
}

.todo-edit,
.todo-delete {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-edit {
    color: var(--accent-color);
}

.todo-edit:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.todo-delete {
    color: #ef4444;
}

.todo-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

.todo-edit-input {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-small);
    padding: 0.25rem 0.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: var(--font-main);
    outline: none;
}

/* Subtasks */
.sub-tasks {
    list-style: none;
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid var(--card-border);
    margin-top: 0.5rem;
    width: 100%;
    display: none;
    /* Hidden if empty, handled by JS usually */
}

.sub-tasks:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.todo-item-container {
    display: flex;
    flex-direction: column;
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 1rem;
    font-style: italic;
    opacity: 0.6;
}

@media (max-width: 900px) {
    .layout-grid {
        flex-direction: column;
        align-items: center;
    }

    .side-column,
    .left-column,
    .right-column {
        width: 100%;
        max-width: 600px;
        order: 2;
        /* Put sidebars below content on mobile? Or above?
                   Usually main content first.
                   Assuming default order is fine if we just stack.
                   The user didn't specify order on mobile, but typically secondary content goes below.
                   I will set `order: 2` for sidebars and `order: 1` for main if needed, 
                   but let's just use flex-direction: column. 
                   If the DOM order is Left -> Main -> Right, 
                   Column layout will be Left -> Main -> Right.
                   Usually people want Main first on mobile.
                */
    }

    .main-column {
        width: 100%;
    }
}

/* Scratchpad Widget */
.scratchpad-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    transition: var(--transition);
}

.scratchpad-widget:focus-within {
    border-color: var(--accent-color);
}

.scratchpad-header h3 {
    font-size: 1.1rem;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#scratchpadContent {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-small);
    padding: 1rem;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 450px;
    outline: none;
    transition: var(--transition);
}

#scratchpadContent:focus {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--accent-secondary);
}

#scratchpadContent::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
    font-style: italic;
}

/* Scratchpad Editor Styles */
.scratchpad-editor {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
}

.scratchpad-editor .sp-line {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
    padding: 0.5rem 0;
    line-height: 1.6;
    word-wrap: break-word;
}

.scratchpad-editor .sp-line.preview {
    cursor: text;
}

.scratchpad-editor .sp-line.editing {
    cursor: text;
    outline: 1px solid var(--accent-color);
    border-radius: var(--radius-small);
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.scratchpad-editor .sp-line.preview:hover {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}