.taskflow-container{display:flex;background-color:#82A29F;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.content{flex-grow:1;padding:20px;margin-left:250px}.taskflow-title{color:#24555A;font-size:32px;font-weight:700;margin-bottom:30px}.task-table{width:100%;border-collapse:collapse;background:#84A4A1;border-radius:8px;border:2px solid #24555a;color:#24555A;box-shadow:0 4px 8px rgba(0,0,0,.1)}.task-table td,.task-table th{padding:10px;text-align:left;border-bottom:1px solid #24555a;border-right:1px solid #24555a}.task-table td:last-child,.task-table th:last-child{border-right:none}.task-table th{background-color:#C2D2D1;color:#24555A;font-weight:700}.editable{outline:none;color:#24555A}.add-task-row{text-align:center;cursor:pointer;font-size:18px;font-weight:700;padding:15px;transition:background-color .3s ease}.add-task-row:hover{background-color:#C2D2D1}.status-dropdown{position:relative;display:inline-block}.status-btn{border:none;padding:8px 12px;border-radius:20px;cursor:pointer;color:#FFFFFF;font-weight:700;text-align:center;display:block;width:120px}.status-btn.not-started{background-color:#733534}.status-btn.in-progress{background-color:#284B61}.status-btn.done{background-color:#27593E}.dropdown-menu{width:120px}.status-option{border:none;padding:8px 12px;border-radius:20px;cursor:pointer;color:white;font-weight:700;width:100%}.date-picker-container{position:relative;display:flex;align-items:center}.date-display{display:inline-block;padding:8px;margin-right:8px}.hidden-date-picker{width:1px;height:1px;overflow:hidden}.due-date-cell{position:relative;cursor:pointer}.priority-dropdown{position:relative;display:inline-block}.priority-btn{border:none;padding:8px 12px;border-radius:20px;cursor:pointer;color:white;font-weight:700;text-align:center;display:block;width:100px}.priority-btn.low{background-color:#27593E}.priority-btn.medium{background-color:#8A6430}.priority-btn.high{background-color:#733534}.dropdown-menu{position:absolute;top:40px;left:0;background:white;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:10;display:flex;flex-direction:column;gap:5px;padding:5px;min-width:120px}.priority-option,.status-option{border:none;padding:8px 12px;border-radius:20px;cursor:pointer;color:white;font-weight:700;width:100%;text-align:center}.priority-option.low{background-color:#27593E}.priority-option.medium{background-color:#8A6430}.priority-option.high{background-color:#733534}.status-option.in-progress{background-color:#284B61}.status-option.done{background-color:#27593E}.status-option.not-started{background-color:#733534}.progress-section{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:30px}.task-progress-card{background:#E8E8E0;border-radius:16px;padding:20px 15px;width:200px;height:280px;text-align:center;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 8px rgba(36,85,90,.15);position:relative}.task-progress-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(36,85,90,.2)}.card-details{text-align:center;margin-bottom:10px;width:100%}.amount-text,.limit-text{margin:2px 0;font-weight:700;color:#24555A;font-size:16px}.progress-circle{position:relative;width:140px;height:140px;margin:5px auto}.progress-bg{fill:none;stroke:#D4D9D8;stroke-width:8}.progress-bar{fill:none;stroke:#24555A;stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px}.progress-text,.task-name{font-weight:700;color:#24555A}.task-name{margin-top:15px;font-size:18px;max-width:180px;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#E4ECEB;padding:30px;border-radius:16px;text-align:center;width:400px;box-shadow:0 8px 24px rgba(0,0,0,.2)}.modal-title{font-size:28px;color:#24555A;margin-bottom:15px;font-weight:700}.progress-container{position:relative;width:180px;height:180px;margin:0 auto 20px}.progress-slider{width:100%;margin:25px 0;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#C2D2D1;border-radius:10px;outline:none}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#24555A;cursor:pointer}.progress-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#24555A;cursor:pointer}.close-modal{background:#24555A;color:white;padding:12px 24px;margin-top:20px;border-radius:8px;cursor:pointer;font-weight:700;border:none;transition:background-color .3s ease}.close-modal:hover{background:#1a3e42}.custom-date-picker{display:flex;align-items:center;gap:8px;padding:8px;background-color:#C2D2D1;border-radius:20px;cursor:pointer;transition:background-color .3s ease;width:-moz-fit-content;width:fit-content}.custom-date-picker:hover{background-color:#a8bab9}.date-display{color:#24555A;font-weight:700;margin-right:5px}.calendar-icon{color:#24555A;transition:transform .2s ease-in-out}.calendar-icon:hover{transform:scale(1.1)}.hidden-date-picker{position:absolute;opacity:0;width:0;height:0}.date-cell,.date-picker{position:relative}.date-picker{display:flex;align-items:center}.calendar-icon{margin-right:10px;color:#235055;cursor:pointer}.calendar-icon:hover{color:#3a7b83}.formatted-date{color:#235055}.custom-calendar{position:absolute;top:100%;left:0;z-index:100;background:white;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15);width:280px;margin-top:10px;padding:15px;transform:translateY(0)}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.calendar-title{font-weight:600;color:#235055}.calendar-nav{background:none;border:none;color:#235055;font-size:16px;cursor:pointer;padding:5px 10px;border-radius:50%;transition:background-color .2s}.calendar-nav:hover{background-color:rgba(35,80,85,.1)}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:500;color:#235055;margin-bottom:10px}.calendar-weekdays div{padding:5px}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:5px;gap:5px}.calendar-day{height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:background-color .2s}.calendar-day.active:hover{background-color:rgba(35,80,85,.1)}.calendar-day.empty{cursor:default}