/* ═══════════════════════════════════
   FLOWBOARD — Task Manager
   style.css
═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:        #0d0e14;
  --panel:     #14151f;
  --card:      #1a1b27;
  --border:    rgba(255,255,255,.08);
  --text:      #e4e5f1;
  --muted:     #6e7090;
  --accent:    #6366f1;
  --accent-2:  #22d3ee;
  --high:      #f43f5e;
  --medium:    #f59e0b;
  --low:       #22c55e;
  --r: 14px;
  --font: 'Manrope', sans-serif;
}

body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit;}
input,select{font-family:inherit;}

.app-shell{display:flex;min-height:100vh;}

/* ── SIDEBAR ── */
.sidebar{
  width:280px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);
  padding:2rem 1.4rem;display:flex;flex-direction:column;gap:2rem;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:.6rem;}
.brand i{color:var(--accent);}

.stats-mini{display:flex;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem .5rem;}
.stat-mini{text-align:center;flex:1;}
.sm-num{display:block;font-size:1.4rem;font-weight:800;color:#fff;}
.sm-label{font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:.04em;}

.progress-block{}
.progress-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:.6rem;font-weight:600;}
.progress-track{height:8px;background:var(--card);border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .5s ease;}

.cat-nav{display:flex;flex-direction:column;gap:.4rem;}
.cat-heading{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;}
.cat-btn{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;border-radius:10px;
  font-size:.88rem;font-weight:600;color:var(--muted);text-align:left;transition:background .2s,color .2s;
}
.cat-btn:hover{background:var(--card);color:var(--text);}
.cat-btn.active{background:rgba(99,102,241,.15);color:var(--accent-2);}
.cat-btn i{width:16px;}
.cat-btn .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.dot.high{background:var(--high);}
.dot.medium{background:var(--medium);}
.dot.low{background:var(--low);}

.clear-btn{
  margin-top:auto;display:flex;align-items:center;gap:.6rem;justify-content:center;
  padding:.8rem;border-radius:10px;border:1px solid var(--border);color:var(--muted);
  font-size:.85rem;font-weight:600;transition:border-color .2s,color .2s;
}
.clear-btn:hover{border-color:var(--high);color:var(--high);}

/* ── MAIN AREA ── */
.main-area{flex:1;padding:2.5rem 3rem;max-width:880px;margin:0 auto;}
.main-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;}
.main-head h1{font-size:2rem;font-weight:800;margin-bottom:.3rem;}
.main-head p{color:var(--muted);font-size:.9rem;}
.burger{display:none;font-size:1.3rem;color:var(--text);}

/* ── ADD TASK FORM ── */
.add-task-form{
  display:flex;gap:.7rem;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:.7rem;margin-bottom:1.6rem;flex-wrap:wrap;
}
.add-task-form input[type="text"]{
  flex:1;min-width:180px;background:none;border:none;outline:none;color:var(--text);
  font-size:.95rem;padding:.5rem .6rem;
}
.add-task-form input[type="text"]::placeholder{color:var(--muted);}
.add-task-form select, .add-task-form input[type="date"]{
  background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:.85rem;padding:.5rem .7rem;outline:none;
}
.add-btn{
  display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-weight:700;font-size:.88rem;padding:.65rem 1.3rem;border-radius:9px;
  transition:transform .2s,opacity .2s;
}
.add-btn:hover{transform:translateY(-2px);opacity:.92;}

/* ── TASK LIST ── */
.task-list{display:flex;flex-direction:column;gap:.7rem;}
.task-item{
  display:flex;align-items:center;gap:1rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;
  transition:border-color .2s,transform .2s;animation:taskIn .35s ease;
}
@keyframes taskIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.task-item:hover{border-color:rgba(99,102,241,.3);}
.task-item.completed{opacity:.55;}
.task-item.completed .task-title{text-decoration:line-through;}

.task-check{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;
}
.task-check.checked{background:var(--low);border-color:var(--low);color:#fff;font-size:.7rem;}

.task-body{flex:1;min-width:0;}
.task-title{font-weight:600;font-size:.94rem;margin-bottom:.25rem;word-break:break-word;}
.task-meta{display:flex;gap:.8rem;align-items:center;font-size:.76rem;color:var(--muted);flex-wrap:wrap;}
.priority-tag{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;padding:.15rem .55rem;border-radius:99px;}
.priority-tag.high{background:rgba(244,63,94,.15);color:var(--high);}
.priority-tag.medium{background:rgba(245,158,11,.15);color:var(--medium);}
.priority-tag.low{background:rgba(34,197,94,.15);color:var(--low);}
.due-date{display:flex;align-items:center;gap:.3rem;}
.due-date.overdue{color:var(--high);font-weight:600;}

.task-actions{display:flex;gap:.4rem;flex-shrink:0;}
.task-actions button{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .2s,color .2s;
}
.task-actions button:hover{background:var(--bg);}
.delete-btn:hover{color:var(--high);}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:4rem 1rem;color:var(--muted);}
.empty-state i{font-size:2.6rem;margin-bottom:1rem;opacity:.5;}
.empty-state h3{color:var(--text);font-size:1.1rem;margin-bottom:.4rem;}
.empty-state p{font-size:.88rem;}

.hidden{display:none !important;}

/* ── MOBILE ── */
.sidebar-overlay{display:none;}
@media (max-width:900px){
  .burger{display:block;}
  .sidebar{
    position:fixed;left:0;top:0;height:100vh;z-index:200;
    transform:translateX(-100%);transition:transform .3s;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .sidebar-overlay.open{opacity:1;pointer-events:auto;}
  .main-area{padding:1.6rem 1.2rem;}
}
@media (max-width:520px){
  .add-task-form{flex-direction:column;}
  .add-task-form select,.add-task-form input[type="date"]{width:100%;}
  .add-btn{width:100%;justify-content:center;}
  .task-item{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}