/* dashboard and board */
.dashboard{
  flex-grow:1;
  padding:2rem;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding-bottom:120px;
}
.top-row-container{
  display:flex;
  gap:1.5rem;
  width:100%;
  flex-wrap:nowrap;
}
.top-left-group{
  flex:2;
  display:flex;
  gap:1.5rem;
  min-width:0;
}
.pages-widget{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.8rem 1.2rem;
  min-width:0;
}

/* weather card */
.weather-card{
  flex:0 0 260px;
  height:100px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.weather-animate-bg{
  background:linear-gradient(135deg,var(--blob-1)0%,var(--blob-2)100%);
  background-size:200% 200%;
  animation:skyMove 10s ease infinite;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.3);
}
@keyframes skyMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.weather-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0 1.4rem;
  z-index:2;
  white-space:nowrap;
}
.weather-text{display:flex;flex-direction:column;min-width:0;}
.temp{
  font-size:2.5rem;
  font-weight:700;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.2);
}
.desc{
  font-size:1rem;
  opacity:.9;
  font-weight:600;
}

/* weather animated icon styles */
.weather-icon-base {
  font-size: 3rem;
  transition: all 0.5s ease;
}

/* clear / sun */
.weather-anim-sun {
  color: #FFD60A;
  filter: drop-shadow(0 0 15px rgba(255, 230, 0, 0.8));
  animation: spin 20s linear infinite;
}

/* cloudy */
.weather-anim-cloud {
  color: #e0e0e0;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  animation: floatCloud 6s ease-in-out infinite;
}

/* rain */
.weather-anim-rain {
  color: #4facfe;
  filter: drop-shadow(0 0 15px rgba(79, 172, 254, 0.6));
  animation: rainBob 2s ease-in-out infinite;
}

/* snow */
.weather-anim-snow {
  color: #fff;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  animation: snowSway 4s ease-in-out infinite;
}

/* thunder */
.weather-anim-thunder {
  color: #bd00ff;
  filter: drop-shadow(0 0 20px rgba(189, 0, 255, 0.8));
  animation: thunderFlash 3s infinite;
}

/* fog */
.weather-anim-fog {
  color: #b0b0b0;
  filter: blur(2px) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
  opacity: 0.8;
  animation: floatCloud 8s ease-in-out infinite;
}

/* weather keyframes */
@keyframes spin {
  100% { transform: rotate(360deg); }
}
@keyframes floatCloud {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}
@keyframes rainBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes snowSway {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
@keyframes thunderFlash {
  0%, 90%, 100% {
    filter: drop-shadow(0 0 20px rgba(189, 0, 255, 0.8)) brightness(1);
    color: #bd00ff;
  }
  92% {
    filter: drop-shadow(0 0 50px rgba(255, 255, 0, 1)) brightness(3);
    color: #fff;
  }
  94% {
    filter: drop-shadow(0 0 20px rgba(189, 0, 255, 0.8)) brightness(1);
    color: #bd00ff;
  }
}

/* focus bar */
.focus-bar{
  flex:1;
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:0 1.2rem;
  min-width:320px;
}
.focus-icon{
  font-size:2rem;
  filter:drop-shadow(0 0 10px var(--accent));
  transition:filter 1s ease;
}
#mainTaskInput{
  width:100%;
  background:transparent;
  border:none;
  font-size:1.4rem;
  color:#fff;
  outline:none;
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
#mainTaskInput::placeholder{color:rgba(255,255,255,0.28);}

/* pages tabs */
.pages-list{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-right:10px;
  align-items:center;
}
.page-tab{
  padding:0 1.2rem;
  min-height:50px;
  background:rgba(255,255,255,.02);
  border-radius:16px;
  cursor:pointer;
  font-size:.9rem;
  transition:.3s;
  white-space:nowrap;
  border:1px solid transparent;
  color:rgba(255,255,255,.6);
  display:flex;
  align-items:center;
  gap:8px;
}
.page-tab:hover{background:rgba(255,255,255,.08);}
.page-tab.active{
  background:rgba(255,255,255,.1);
  color:#fff;
  font-weight:600;
  border-color:rgba(255,255,255,.2);
  box-shadow:0 0 15px rgba(255,255,255,.1);
}
.page-delete-btn{
  width:14px;
  text-align:center;
  font-size:.8rem;
  opacity:0;
  cursor:pointer;
  align-self:center;
  transform:translateX(6px);
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.page-tab:hover .page-delete-btn{
  opacity:.8;
  transform:translateX(0);
}
.page-delete-btn:hover{
  color:#FF453A;
  opacity:1;
}
.add-page-btn{
  width:50px;
  height:50px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:2px dashed rgba(255,255,255,.2);
  color:rgba(255,255,255,.5);
  font-size:1.5rem;
  cursor:pointer;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  opacity:0;
  transform:scale(0.85);
  pointer-events:none;
}
.pages-widget:hover .add-page-btn{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.add-page-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(255,255,255,.08);
}

/* columns and tasks */
.columns-area{
  display:grid;
  grid-template-columns:repeat(3,minmax(300px,1fr));
  gap:1.5rem;
  width:100%;
  align-items:start;
}
.glass-panel{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}
.task-column{
  padding:1.5rem;
  max-height:65vh;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.column-header{
  display:flex;
  align-items:center;
  margin-bottom:1.2rem;
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#fff;
}
.col-title-wrap{
  flex-grow:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.count{
  background:rgba(255,255,255,.1);
  padding:2px 10px;
  border-radius:12px;
  font-size:.8rem;
}
.add-task-toggle{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  width:24px;
  height:24px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(255,255,255,0.6);
  transition:.2s;
  margin-left:8px;
  opacity:0;
  transform:scale(0.85);
  pointer-events:none;
}
.task-column:hover .add-task-toggle,
.column-header:hover .add-task-toggle{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}
.add-task-toggle:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.input-container{
  display:flex;
  gap:.8rem;
  margin-bottom:1.2rem;
  transition:all .3s ease;
  overflow:hidden;
  max-height:60px;
  opacity:1;
}
.input-container.hidden{
  max-height:0;
  margin-bottom:0;
  opacity:0;
  pointer-events:none;
}
.input-container input{
  width:100%;
  background:var(--item-bg);
  border:1px solid rgba(255,255,255,.05);
  padding:.8rem 1rem;
  border-radius:14px;
  color:#fff;
  outline:none;
  font-size:.95rem;
}
body.no-media .input-container button{background:var(--muted-accent);}
.input-container button{
  background:var(--accent);
  border:none;
  border-radius:14px;
  width:44px;
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  transition:background 1s ease;
}
.add-col-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(300px,1fr));
  gap:1.5rem;
  margin-top:.5rem;
}
.add-col-tile{
  height:80px;
  border-radius:14px;
  border:2px dashed rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  cursor:pointer;
}
.add-col-tile:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(255,255,255,.08);
}
.add-col-tile i{pointer-events:none;}

.task-list{
  overflow-y:auto;
  padding-right:5px;
  flex-grow:1;
  min-height:20px;
}
.task-item-wrapper{transition:transform .2s ease;}
.task-item-wrapper.dragging{opacity:.5;}
.task-item{
  background:var(--item-bg);
  padding:.9rem 1rem;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:.2s;
  position:relative;
}
.task-item:hover{background:var(--item-hover);}
.check-circle{
  width:20px;
  height:20px;
  border:2px solid rgba(255,255,255,.3);
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.completed .check-circle{
  background:var(--accent);
  border-color:var(--accent);
}
.task-text{
  flex-grow:1;
  font-size:1rem;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  white-space:pre-wrap;
  word-break:break-word;
}
.completed .task-text{
  text-decoration:line-through;
  opacity:.4;
}
.actions{
  display:flex;
  gap:5px;
  opacity:0;
  transition:.2s;
  margin-left:auto;
}
.task-item:hover .actions{opacity:1;}
.icon-btn{
  border:none;
  background:rgba(255,255,255,.1);
  color:#fff;
  width:28px;
  height:28px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn.delete:hover{background:#FF453A;}
.icon-btn.edit:hover{background:var(--accent);}
.icon-btn.drag-handle{cursor:grab;}
.icon-btn.drag-handle:active{cursor:grabbing;}
.edit-input{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--accent);
  color:#fff;
  font-size:1rem;
  width:100%;
  outline:none;
  padding:0;
}

/* subtasks */
.subtask-input-wrapper{
  margin-left:1.5rem;
  margin-top:5px;
  padding-left:10px;
  border-left:2px solid var(--accent);
}
.subtask-inline-input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:4px;
  outline:none;
  font-size:.9rem;
}
.subtasks-list{
  margin-left:1.5rem;
  margin-top:5px;
  border-left:2px solid rgba(255,255,255,.1);
  padding-left:10px;
}
.subtask-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 0;
  font-size:.9rem;
  color:rgba(255,255,255,.8);
  transition:.2s;
  position:relative;
}
.subtask-item:hover{color:#fff;}
.subtask-check{
  width:14px;
  height:14px;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.subtask-item.completed .subtask-check{
  background:var(--accent);
  border-color:var(--accent);
}
.subtask-item.completed span{
  text-decoration:line-through;
  opacity:.5;
}
.sub-actions{
  margin-left:auto;
  display:flex;
  gap:4px;
  opacity:0;
  transition:.2s;
}
.subtask-item:hover .sub-actions{opacity:1;}
.sub-icon{
  opacity:.5;
  cursor:pointer;
  font-size:.9rem;
  padding:2px;
}
.sub-icon:hover{
  opacity:1;
  color:var(--accent);
}
.sub-icon.del:hover{color:#FF453A;}
.sub-drag{cursor:grab;}

/* modals (link, column, page) */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:9999;
  transition:opacity .25s ease, transform .25s ease;
}
.modal.hidden{
  opacity:0;
  pointer-events:none;
}
.modal:not(.hidden){
  opacity:1;
}
.modal-content{
  position:relative;
  min-width:280px;
  max-width:360px;
  padding:1.6rem 1.8rem 1.4rem;
  border-radius:22px;
  background:rgba(15,15,20,0.96);
  box-shadow:0 22px 60px rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
}
.modal-content h3{
  margin:0 0 1rem;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.03em;
}
.modal-content input[type="text"]{
  width:100%;
  margin-bottom:1.1rem;
  padding:.55rem .75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(5,5,10,0.9);
  color:#fff;
  outline:none;
  font-size:.95rem;
  box-shadow:0 0 0 1px rgba(0,0,0,0.6);
}
.modal-content input[type="text"]::placeholder{
  color:rgba(255,255,255,0.35);
}
.modal-buttons{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  margin-top:.25rem;
}
.btn-cancel,
.btn-save{
  flex:1;
  height:40px;
  border-radius:999px;
  border:none;
  font-size:.9rem;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn-cancel{
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.14);
}
.btn-cancel:hover{
  background:rgba(255,255,255,0.08);
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
}
.btn-save{
  background:#E14F3D;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 14px 30px rgba(225,79,61,0.45);
}
.btn-save:hover{
  background:#FF5C3F;
  box-shadow:0 18px 38px rgba(255,92,63,0.55);
}
.btn-cancel:active,
.btn-save:active{
  transform:translateY(1px);
  box-shadow:none;
}