/* Task Design Container */
.task-design-container {
    margin: 10px 0;
}

/* Task Tracker Task Container - New Design */





.task_tracker_task_container:hover .task_tracker_floating_icons {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    display: flex ;
   
}

/* Floating action icons */
.task_tracker_floating_icons {
    position: absolute;
    top: -15px;
    right: 10px;
    display: flex ;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index:50 ;
    pointer-events: auto ;
}

.task_tracker_icon_btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #282D3B ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    pointer-events: auto ;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.task_tracker_icon_btn:hover {
    background: #007bff ;
    transform: scale(1.1) ;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) ;
}

.task_tracker_icon_btn:active {
    transform: scale(0.95);
}

/* Left vertical bar */
.task_tracker_task_container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: #EF9A9A;
    border-radius: 10px 0 0 10px;
}

/* Priority-based color classes */
.task_tracker_task_container.priority-iu::before {
    background: #EF9A9A; /* Important & Urgent - Red */
}

.task_tracker_task_container.priority-inu::before {
    background: #90CAF9; /* Important & Not Urgent - Blue */
}

.task_tracker_task_container.priority-niu::before {
    background: #FFCC80; /* Not Important & Urgent - Orange */
}

.task_tracker_task_container.priority-ninu::before {
    background: #E0E0E0; /* Not Important & Not Urgent - Gray */
}

.task_tracker_task_container.priority-none::before {
    background: #FFFFFF; /* No priority set - White */
}

/* Executor role background gradient */
.task_tracker_task_container.has-executor-role {
    background: linear-gradient(135deg, #e9f2f9 0%, #dde1ff 100%) !important;
}

/* Task metadata section */
.task_tracker_task_metadata {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #282D3B;
}

.task_tracker_task_category {
    font-weight: 600;
    color: #282D3B;
}

.task_tracker_task_times {
    color: #4E5F8C;
    font-weight: 500;
}

.task_tracker_task_dates {
    display: flex;
    gap: 15px;
    font-size: 12px;
    justify-content: flex-start;
}

.task_tracker_task_date_item {
    color: #282D3B;
    font-weight: 600;
}

.task_tracker_task_date_value {
    color: #4E5F8C;
    margin-left: 5px;
}

/* Publication status */
.task_tracker_publication_status {
    font-size: 1.2rem;
    font-weight: 500;
    color: #666;
    text-align: right;
    margin-bottom: 8px;
}

/* Task title */
.task_tracker_task_title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #282D3B;
    line-height: 1;
    margin-top: 10px;
}

/* Project Progress Bar Styles */
.project_progress_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

.project_progress_bar {
    width: 40%; /* 2/5 of the block width */
    height: 8px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.project_progress_fill {
    height: 100%;
    background-color: #282D3B;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.project_progress_text {
    margin-top: 0.5rem;
    font-size: 14px;
    color: #282D3B;
    font-weight: 500;
}

/* Task hashtags */
.task_tracker_task_hashtags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.task_tracker_task_hashtag_icon {
    width: 16px;
    height: 16px;
    fill: #4E5F8C;
}

.task_tracker_task_hashtag_text {
    color: #4E5F8C;
    font-size: 14px;
    font-weight: 500;
}

/* Mobile support for floating icons */
@media (max-width: 768px) {
    .task_tracker_floating_icons {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
    }
    
    .task_tracker_task_container:hover .task_tracker_floating_icons,
    .task_tracker_task_container.mobile-tap .task_tracker_floating_icons {
        opacity: 1 ;
        transform: translateY(0) ;
        visibility: visible ;
        display: flex ;
    }
    
    .task_tracker_icon_btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .task_tracker_task_container {
        padding: 12px 15px 12px 30px; /* Added left padding for mobile too */
        margin: 8px 0;
    }
    
    .task_tracker_task_metadata {
        flex-wrap: wrap;
        gap: 3px;
    }
    
    .task_tracker_task_dates {
        gap: 10px;
    }
    
    .task_tracker_task_title {
        font-size: 1rem;
    }
}

/* Dropdown/submenu styles moved to task_tracker_dropdown.css */

/* ============================================================================
   TIME SLOT VIEW COMPONENT STYLES
   Moved to timeslot_public_card.css except for shared rules below.
   ============================================================================ */
   .task_tracker_task_container {
    display: block;
    background: linear-gradient(135deg, #E8E8E8 0%, #c4c4c4 100%);
   
    border-radius: 10px;
    padding: 8px 20px 8px 35px; /* Added left padding to avoid overlap with line */
    margin: 10px 0;
    position: relative;
    border: 1px solid #c4c4c4;
}

.task_tracker_task_container:hover, .pubview-card-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   
}

/* TimeSlot public card styles moved to timeslot_public_card.css */