/* css/07_drag_drop.css */

/* --- Drag Source --- */
.task-item.dragging {
    opacity: 0.5;
    background-color: #ffe0b2;
    border-color: #fb8c00; 
}

.task-item.dragging > .task-content {
    background-color: transparent !important;
}

/* --- Global Mode --- */
.task-list-root.dragging-mode {
    cursor: grabbing;
}

/* --- DRAG GHOST IMAGE (The small circle) --- */
#drag-ghost-circle {
    position: absolute;
    top: -9999px; /* Off-screen */
    left: -9999px;
    width: 20px;
    height: 20px;
    background-color: var(--color-accent);
    border: 2px solid white;
    border-radius: 50%;
    z-index: 9999;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    display: block; 
}

/* --- DROP TARGET VISUALS (3 Zones) --- */

.task-item.drop-target-active {
    z-index: 10;
}

/* Setup the Guide/Highlight Container 
   We use ::after on task-content to ensure it doesn't spill into subtasks 
   and respects the max-width logic.
*/
.task-item.drop-target-active > .task-content {
    position: relative; 
}

.task-item.drop-target-active > .task-content::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 100%;
    max-width: 800px; /* STRICT LIMIT: Logic stops here, so visuals must too. */
    
    /* Default (Passive) Guide: Faint 3 Zones with Dividers */
    background: linear-gradient(to right, 
        /* Zone 1: Before (Blue Tint) */
        rgba(33, 150, 243, 0.05) 0%, 
        rgba(33, 150, 243, 0.05) 33.2%, 
        
        /* Divider 1 */
        rgba(0,0,0,0.2) 33.2%,
        rgba(0,0,0,0.2) 33.5%,
        
        /* Zone 2: Nested (Green Tint) */
        rgba(76, 175, 80, 0.08) 33.5%, 
        rgba(76, 175, 80, 0.08) 66.4%, 
        
        /* Divider 2 */
        rgba(0,0,0,0.2) 66.4%,
        rgba(0,0,0,0.2) 66.8%,

        /* Zone 3: After (Blue Tint) */
        rgba(33, 150, 243, 0.05) 66.8%,
        rgba(33, 150, 243, 0.05) 100%
    );
    
    pointer-events: none;
    z-index: 0; /* Behind text */
    
    /* Right border for the 800px limit visualization */
    border-right: 1px dashed rgba(0,0,0,0.2);
}

/* --- ACTIVE ZONE OVERRIDES (Applied to the SAME ::after element) --- */
/* This ensures the "Active" color is also clamped to 800px */

/* Zone 1 Active: Strong Blue on Left */
.task-item.drop-indicator-before > .task-content::after {
    background: linear-gradient(to right, 
        rgba(33, 150, 243, 0.25) 0%,   /* Stronger Blue */
        rgba(33, 150, 243, 0.25) 33.2%, 
        
        rgba(0,0,0,0.2) 33.2%, rgba(0,0,0,0.2) 33.5%, /* Divider */
        
        rgba(76, 175, 80, 0.08) 33.5%, rgba(76, 175, 80, 0.08) 66.4%, /* Faint Green */
        rgba(0,0,0,0.2) 66.4%, rgba(0,0,0,0.2) 66.8%, /* Divider */
        rgba(33, 150, 243, 0.05) 66.8%, rgba(33, 150, 243, 0.05) 100% /* Faint Blue */
    );
    /* Add Top Border to the 800px box */
    border-top: 4px solid #2196F3;
}

/* Zone 2 Active: Strong Green in Middle */
.task-item.drop-indicator-nested > .task-content::after {
    background: linear-gradient(to right, 
        rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.05) 33.2%, /* Faint Blue */
        rgba(0,0,0,0.2) 33.2%, rgba(0,0,0,0.2) 33.5%, 
        
        rgba(76, 175, 80, 0.25) 33.5%, /* Stronger Green */
        rgba(76, 175, 80, 0.25) 66.4%, 
        
        rgba(0,0,0,0.2) 66.4%, rgba(0,0,0,0.2) 66.8%, 
        rgba(33, 150, 243, 0.05) 66.8%, rgba(33, 150, 243, 0.05) 100% /* Faint Blue */
    );
    /* Dashed Border around the 800px box */
    border: 2px dashed #4CAF50;
}

/* Zone 3 Active: Strong Blue on Right */
.task-item.drop-indicator-after > .task-content::after {
    background: linear-gradient(to right, 
        rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.05) 33.2%, /* Faint Blue */
        rgba(0,0,0,0.2) 33.2%, rgba(0,0,0,0.2) 33.5%, 
        rgba(76, 175, 80, 0.08) 33.5%, rgba(76, 175, 80, 0.08) 66.4%, /* Faint Green */
        
        rgba(0,0,0,0.2) 66.4%, rgba(0,0,0,0.2) 66.8%, 
        
        rgba(33, 150, 243, 0.25) 66.8%, /* Stronger Blue */
        rgba(33, 150, 243, 0.25) 100%
    );
    /* Bottom Border to the 800px box */
    border-bottom: 4px solid #2196F3;
}

/* Cleanup: Remove any styling from the main element to prevent 100% width issues */
.task-item.drop-indicator-before > .task-content,
.task-item.drop-indicator-nested > .task-content,
.task-item.drop-indicator-after > .task-content {
    background: transparent !important;
    border-color: transparent !important;
}


/* --- Emoji Bar Targets --- */
.project-emoji-item.drag-over {
    transform: scale(1.2);
    background-color: var(--color-selection);
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: 2px solid var(--color-accent);
}