:root {
  --main-container-width: max(33%, 350px);
  --border-radius-sm: 4px;
  --gap-sm: 5px;
  --gap-md: 10px;

  --font-family-base: monospace;
  --color-placeholder: #aaa;
  --color-selection-bg: black;
  --color-selection-text: white;
  --color-white: white;
  --color-primary: #000;
  --color-bg: #fff;
  --color-mid: #aaa;

  --color-past-due: red;
  --color-due-today: orange;
  --color-due-tomorrow: violet;
  --color-due-this-week: cornflowerblue;

  --color-warning:red;
  --color-info: cornflowerblue;
  --color-info-2: violet;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

*::-webkit-scrollbar {
  display: none;
}

a {
  color: var(--color-primary);
  text-decoration:none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  font-family: var(--font-family-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  max-height: 100dvh;
  overflow-y: hidden;
  background-color: var(--color-bg);
  color: var(--color-primary);
}

.login-wrapper {
  display: flex;
  width: 100%;
  height:100dvh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap:0.5rem;
}

button {
  border: none;
  background-color: transparent;
}

input {
  border-style: dashed;
  border-color: var(--color-primary);
  border-width:0;
  border-bottom-width:2px;
  border-radius: 4px;
  outline: none;
}

.login-error {
  color: var(--color-warning);
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--main-container-width);
  gap: var(--gap-md);
  overflow:auto;
}

.task-container {
  width: 100%;
  height: 100%;
  overflow-y:scroll;
}

.task-list-after {
    display:block;
    height:50vh;
}

.pagebottom {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 15rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  visibility: hidden;
  background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border-top-style: dashed;
  border-top-color: var(--color-primary);
  border-top-width: 1px;
}

.task-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  /*padding-top: 3px;
  padding-bottom: 3px;*/
}

.task-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.align-left {
  display: flex;
  flex-direction: row;
  flex-grow: 10;
  align-items: flex-start;
}

.align-right {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--gap-sm);
  align-items: flex-start;
}

.completed {
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
  flex-shrink: 0;
}

.name {
  outline: none;
  display: inline;
  max-width: 90%;
  flex-grow: 10;
}

.delete-btn {
  cursor: pointer;
}

.subtasks {
  margin-left: 10.5px;
  padding-left: 9.5px;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color-mid);
}

.description-wrapper {
  padding: 10px;
  border-radius: var(--border-radius-sm);
  border: dashed;
  width: 100%;
  height: 100px;
}

p.description {
  width: 100%;
  height: 100%;
  outline: none;
  overflow-y: scroll;
}

.editable:empty::before {
  content: attr(data-placeholder);
  color: var(--color-placeholder);
  font-style: italic;
  pointer-events: none;
}

.due-wrapper {
  border-radius: var(--border-radius-sm);
  display: inline;}

.due-wrapper.hidden {
    visibility: hidden;
}

.due-day,
.due-month,
.due-year {
    outline: none;
    padding-top: 1px;
    padding-bottom:1px;
}

.past-due {
  background-color: var(--color-past-due);
  color: var(--color-white);
  /*
  background:
  repeating-linear-gradient(
    45deg,           angle 
    var(--color-mid) 0px,
    var(--color-mid) 2px,
    transparent 2px,
    transparent 4px
  )*/
}

.due-today {
  background-color: var(--color-due-today);
  color: var(--color-white);
}

.due-tomorrow {
  background-color: var(--color-due-tomorrow);
  color: var(--color-white);
}

.due-this-week {
  background-color: var(--color-due-this-week);
  color: var(--color-white);
}

.task-content-wrapper:has(.done) > .align-left  {
  .name {
    color: var(--color-placeholder);
    text-decoration: line-through;
  }
}

.task-content-wrapper:has(.done) > .align-right  {
  .due-wrapper {
    background-color: var(--color-bg);
    color: var(--color-placeholder);
    text-decoration: line-through;
  }
}

.option {
  cursor: pointer;
}

.task-content-wrapper:focus-within .pagebottom {
  visibility: visible;
}

.logout-button {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
}

.toggle-completed-tasks {
  position:fixed;
  cursor: pointer;
  top: 0;
  right: 0;
  padding: 10px;
}

.toggle-completed-tasks.active {
    color: var(--color-warning);
}


.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px;
  z-index: 100;
}

.htmx-indicator.htmx-request {
  opacity: 1;
  transition: opacity 50ms ease-in;
}

/* Filter Tabs Styling */
.filter-tabs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.filter-tab {
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background-color: var(--color-mid);
  color:var(--color-white);
}

.filter-tab:hover {
  background-color: var(--color-info);
}

.filter-tab.active {
  background-color: var(--color-info-2);
  color: var(--color-white);
}

/* Tags Field Styling */
.tags-wrapper {
  display: flex;
  gap:15px;
}

.tags-label {
  white-space: nowrap;
}

.tags.editable {
  font-family: monospace;
  outline:none;
  flex-grow:10;
}

.tags.editable:empty:before {
  content: attr(data-placeholder);
  color: #aaa;
  font-style: italic;
}