/* Scope to weekly-task-page to avoid clashes (mirrors daily-task-page styles) */
.weekly-task-page .task-date{
    color:#667085;
    margin-top:-6px;
}

.weekly-task-page .week-filter-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}
.weekly-task-page .week-dates{
    display:flex; align-items:center; gap:8px;
}
.weekly-task-page .week-dates .tilde{ opacity:.6; }

.weekly-task-page .filters-button-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.weekly-task-page .btn-chip{
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:8px;
    padding:8px 14px;
    font-weight:700;
    color:#5581FA;
    cursor:pointer;
}
.weekly-task-page .btn-chip.active{
    background:#5581FA;
    color:#FFFFFF;
    border-color:#C7D2FE;
}

/* List & card */
.weekly-task-page .task-list-wrapper{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-top:8px;
    max-height:58vh;
    overflow-y:auto;
}

.weekly-task-page .task-card{
    background:#fff;
    border:1px solid rgba(0,0,0,0.06);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.04);
    padding:14px;
}

.weekly-task-page .task-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.weekly-task-page .shift-and-user{
    display:flex;
    align-items:center;
    gap:8px;
}
.weekly-task-page .task-row .icon{ margin-right:5px; }
.weekly-task-page .task-row .started{ color:#5581FA; }
.weekly-task-page .task-row .completed{ color:#00A63E; }
.weekly-task-page .task-row .grey{ color:#717182; }
.weekly-task-page .task-row .text{ margin-right:5px; font-size:14px; }

.weekly-task-page .reason-reject{ display:flex; flex-direction:column; gap:10px; }
.weekly-task-page .reject-text{
    background:#F6F6F6;
    border-radius:8px;
    padding:5px;
    color:#4E4E4E;
    font-size:14px;
}
.weekly-task-page .reason-reject .task-title{ margin-top:10px; }

.weekly-task-page .current-time{
    display:flex; flex-direction:column; gap:5px; padding:10px; background:#ECECF080;
}
.weekly-task-page .time-title{ font-size:16px; color:#717182; font-weight:400; align-items:center; }
.weekly-task-page .time-container{ display:flex; align-items:center; justify-content:center; }
.weekly-task-page .time-box{
    border-radius:8px; background:#FFFFFF; border:1px solid #CACACA;
    font-size:18px; font-weight:900; color:#717182; padding:5px;
}

.weekly-task-page .avatar{ width:18px; height:18px; opacity:.8; }
.weekly-task-page .icon{ width:18px; height:18px; opacity:.8; }
.weekly-task-page .title-line{ display:flex; align-items:baseline; gap:6px; font-weight:700; }
.weekly-task-page .task-title{ font-size:16px; font-weight:900; color:#3a3f58; }
.weekly-task-page .dash{ opacity:.5; }

/* Status pills */
.weekly-task-page .status-pill{ display:inline-block; font-size:13px; font-weight:600; line-height:1.2; padding:4px 8px; border-radius:6px; text-transform:capitalize; color:#333; }
.weekly-task-page .status-new{ background:#EEEEEE; color:#707070; }
.weekly-task-page .status-done{ background:#DCFCE7; color:#016630; }
.weekly-task-page .status-pending{ background:#FFF1BD; color:#D4A600; }
.weekly-task-page .status-approved{ background:#DCFCE7; color:#016630; }
.weekly-task-page .status-rejected{ background:#FFD8D8; color:#FF0000; }
.weekly-task-page .status-in-progress{ background:#DBEAFE; color:#193CB8; }

/* Actions */
.weekly-task-page .task-card-actions{
    display:flex; justify-content:flex-end; gap:12px; margin-top:8px;
}
.weekly-task-page .btn-outline-danger{
    background:#fff; border:1.5px solid #ff5a5a; color:#ff5a5a; border-radius:10px; padding:10px 16px; font-weight:700;font-size:14px;
}
.weekly-task-page .btn-primary{
    background:#5581FA; border:1.5px solid #5581FA; color:#fff; border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px;
}
.weekly-task-page .btn-neutral{
    background:#EEEEEE; border:1.5px solid #EEEEEE; color:#707070; border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px;
}
.weekly-task-page .btn-redo-task{
    background:#FFD8D8; border:1.5px solid #FFD8D8; color:#FF0000; border-radius:10px; padding:10px 16px; font-weight:700;font-size:14px;
}
.weekly-task-page .btn-finish-redo{
    background:#FFFFFF; border:1.5px solid #FA5555; color:#FF0000; border-radius:10px; padding:10px 16px; font-weight:700;font-size:14px;
}
.weekly-task-page .btn-outline{
    background:#FFFFFF; border:1.5px solid #5581FA; color:#5581FA; border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px;
}
.weekly-task-page .main-task-wrapper .status-container{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.weekly-task-page .wk-modal-body .status-container{
    display: flex;
    flex-direction: row;
    gap: 3px;
    margin-left: auto;
}
.weekly-task-page .wk-modal-body .text-container{
    display: flex;
    flex-direction: row;
    gap: 3px;
}
/* Modal */
.weekly-task-page .wk-modal-backdrop{
    position:fixed; inset:0; background:rgba(21,25,36,.45); backdrop-filter:blur(1px); z-index:900;
}
.weekly-task-page .wk-modal{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px, calc(100vw - 40px));
    background:#fff; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.18); z-index:901;
    display:flex; flex-direction:column;
}
.weekly-task-page .wk-modal-body{ padding:8px 18px 0 18px; gap:10px; display:flex; flex-direction:column; }
.wk-modal-body .task-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Mulish;
    font-size: 16px;
}
.wk-modal-body .avatar{
    margin-right: 5px;
}
.weekly-task-page .wk-modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 18px 18px 18px; }
.weekly-task-page .task-row .status-pill{ margin-left:auto; }

@media (max-width:768px){
    .weekly-task-page .task-list-wrapper{ max-height:unset; }
    .weekly-task-page .btn-outline-danger, .weekly-task-page .btn-primary{ width:100%; font-size:14px; }
    .weekly-task-page .task-card-actions{ flex-direction:column; align-items:stretch; }
    .weekly-task-page .wk-modal{ width: calc(100vw - 24px); }
}