/* BASIC RESET */
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.35;background:var(--bg);color:var(--fg)}
:root{
  --bg:#0f1216; --panel:#161a20; --elev:#1d222a; --fg:#eef2f7; --muted:#9aa7b5;
  --accent:#5ab3ff; --accent-2:#7c4dff; --danger:#ff6b6b; --ok:#61d095;
  --border:#26303a; --shadow:0 8px 24px rgba(0,0,0,.35);
}
:root.light{
  --bg:#f5f7fb; --panel:#ffffff; --elev:#ffffff; --fg:#101318; --muted:#5b6572;
  --accent:#2563eb; --accent-2:#7c3aed; --danger:#dc2626; --ok:#16a34a; --border:#e5e7eb;
}

.muted{color:var(--muted)}
.icon-btn{border:1px solid var(--border); background:transparent; color:var(--fg); padding:.4rem .6rem; border-radius:.8rem; cursor:pointer}
.icon-btn:hover{background:var(--elev)}
.only-mobile{display:none}
@media (max-width: 920px){ .only-mobile{display:inline-flex} }

/* LAYOUT */
.app{display:grid; grid-template-columns:280px 1fr 0; grid-template-areas:'sidebar main details'; height:100vh}
.sidebar{grid-area:sidebar; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; gap:1rem; padding:1rem; overflow:auto}
.main{grid-area:main; display:flex; flex-direction:column; overflow:auto; min-width:0}
.details{grid-area:details; border-left:1px solid var(--border); background:var(--panel); width:360px; transition:transform .25s ease; transform:translateX(0); box-shadow:var(--shadow)}
.details[aria-hidden="true"]{transform:translateX(100%)}

@media (max-width: 1200px){
  .app{grid-template-columns:280px 1fr}
  .details{position:fixed; right:0; top:0; bottom:0; z-index:20}
}

@media (max-width: 920px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; inset:0 auto 0 0; width:82%; max-width:320px; z-index:30; transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .main{padding-left:0}
}

/* SIDEBAR */
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem}
.logo{width:22px; height:22px; filter:grayscale(1) brightness(1.2)}
.search-wrap{position:relative}
.input{background:var(--elev); border:1px solid var(--border); color:var(--fg); padding:.65rem .8rem; border-radius:.8rem; width:100%; outline:none}
.input:focus{border-color:var(--accent)}
.quick{display:grid; gap:.35rem}
.nav-btn{display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border:1px solid var(--border); background:var(--elev); color:var(--fg); border-radius:.7rem; cursor:pointer}
.nav-btn:hover{background:linear-gradient(0deg, var(--elev), var(--panel))}
.nav-btn .count{margin-left:auto; color:var(--muted); background:transparent; padding:.1rem .45rem; border-radius:.6rem; border:1px solid var(--border); font-size:.8rem}

.lists{display:flex; flex-direction:column; gap:.5rem}
.lists-head{display:flex; justify-content:space-between; align-items:center; font-weight:600; margin-top:.2rem}
#lists{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; max-height:40vh; overflow:auto}
#lists li{display:flex; align-items:center; gap:.6rem; padding:.45rem .55rem; border-radius:.6rem; cursor:pointer}
#lists li:hover{background:var(--elev)}
#lists li.active{background:linear-gradient(0deg, var(--elev), var(--panel)); outline:1px solid var(--border)}
#lists li .dot{width:10px; height:10px; border-radius:2px; background:var(--accent)}

.sidebar-footer{margin-top:auto; display:grid; gap:.5rem}
.pill{padding:.5rem .75rem; border:1px solid var(--border); border-radius:999px; background:var(--elev); color:var(--fg); cursor:pointer}
.file-label{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer}

/* MAIN */
.main-header{display:flex; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--panel); z-index:10}
.add-task{display:flex; gap:.5rem; padding:1rem; border-bottom:1px solid var(--border); background:var(--panel)}
.add-task .btn{white-space:nowrap}
.btn{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#fff; border:none; padding:.65rem .9rem; border-radius:.8rem; cursor:pointer; box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn.danger{background:linear-gradient(180deg, var(--danger), #b91c1c)}

.tasks{padding:1rem; display:flex; flex-direction:column; gap:.35rem}
.task{display:grid; grid-template-columns:auto 1fr auto auto; gap:.6rem; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:.8rem; padding:.55rem .6rem}
.task.dragging{opacity:.5; outline:1px dashed var(--accent)}
.task-title{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.task-meta{font-size:.85rem; color:var(--muted); display:flex; gap:.7rem; flex-wrap:wrap}
.star{font-size:1.1rem}
.task.overdue .task-title{color:var(--danger)}
.task .badge{padding:.08rem .45rem; border:1px solid var(--border); border-radius:.5rem}
.task .badge.ok{border-color:transparent; background:rgba(22, 163, 74,.15); color:var(--ok)}
.checkbox{position:relative; display:inline-flex; align-items:center}
.checkbox input{appearance:none; width:18px; height:18px; border:2px solid var(--border); border-radius:.35rem; margin:0}
.checkbox input:checked{background:var(--ok); border-color:var(--ok)}
.checkbox span{display:inline-block; width:0; height:0; overflow:hidden}

.empty{padding:3rem 1rem; text-align:center; color:var(--muted)}

/* DETAILS */
.details-header{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid var(--border)}
.details-body{display:grid; gap:.8rem; padding:1rem}
.field{display:grid; gap:.35rem}
.field.row{grid-auto-flow:column; grid-auto-columns:1fr; align-items:center}
.details-actions{display:flex; justify-content:flex-end}

/* UTIL */
.grow{flex:1}
.row{display:flex; align-items:center; gap:.5rem}
.spacer{flex:1}
.hidden{display:none}