body {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  &.loaded { opacity: 1; transition: opacity 0.5s ease-in-out; }
}


#header {
    padding: 0;
}

#app {
    padding: 0;
}

/* Top widgets selector bar */
.widgets-bar { margin-top: 0.75rem; }
.widgets-toggle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: center;
}
.widgets-toggle-list > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* Widget header layout */
article > header {
  position: relative;
}

/* Show hand cursor when hovering the header */
article > header:hover {
  cursor: ns-resize; 
}

/* Close button positioning and sizing */
article > header .close-btn {
  position: absolute;
    top: 1rem;
    right: 1rem;
  
}

.close-btn {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 0;
  padding: 0.25rem 0.5rem;
  width: auto;
}

.widget-card + .widget-card {
  margin-top: 1rem;
}

/* Drag handle styles removed; header itself shows hand cursor */

/* Two-column widgets area: 2/3 and 1/3 */
.widgets-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
.widgets-grid > .card {
  height: 100%;
}

@media (max-width: 900px) {
  .widgets-grid {
    grid-template-columns: 1fr;
  }
}

.widget-habits {
  progress {
    height: 1rem;
    margin: 0;
  }
}

/* Habits widget list: remove markers */
.widget-habits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget-habits ul li { list-style: none; }
.widget-habits ul li ::marker { display: none; }

/* Time tracking recent list: tabular layout */
.tracked-time ul { list-style: none; margin: 0; padding: 0; ::marker: none;
  }

.tracked-time li.tracked-row {
  padding: 0.25rem 0;
  width: 100%;
  pre {
    margin: 0;
  }
  
}
.tracked-time .time-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracked-time .time-duration { font-variant-numeric: tabular-nums; }
.tracked-time .time-date { color: var(--muted-color); }

.tracked-time {
  ul {
    margin: 0;
    padding: 0;
    li {
      margin: 0;
      padding: 0.25rem 0;
    }
  }
}

.widget-rss {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      margin-bottom: 1rem;
      position: relative;
    }
    .close-btn {
      position: absolute;
      top: 0;
      right: 0;
    }
    li ::marker {
      display: none;
    }
  }
}