@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;700&family=IBM+Plex+Serif:ital,wght@0,500;0,700;1,500;1,700&family=Roboto+Slab:wght@100..900&display=swap');

body {
  font-family: sans-serif;
  font-size: 18px;

  --tk-status-open-color: #b7f333;
  --tk-status-open-color-highlight: #ccff77;
  --tk-status-closed-color: #7b5030;
  --tk-status-closed-color-highlight: #997755;
  --tk-tag-bg: #FAFC11;
}

footer {
  margin-top: 2rem;
  border-top: 1px solid #CCC;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: .9rem;
  color: #555;
}

h1, h2, h3 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #4a2812;
  letter-spacing: .2px;
}
  h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 1rem;
  }

.btn-primary {
  --bs-btn-color: #242;
  --bs-btn-bg: var(--tk-status-open-color);
  --bs-btn-border-color: var(--tk-status-open-color);
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: var(--tk-status-open-color-highlight);
  --bs-btn-hover-border-color: var(--tk-status-open-color);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: var(--tk-status-open-color);
  --bs-btn-active-border-color: var(--tk-status-open-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: var(--tk-status-open-color);
  --bs-btn-disabled-border-color: var(--tk-status-open-color);  
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tk-status-closed-color);
  --bs-btn-border-color: var(--tk-status-closed-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tk-status-closed-color-highlight);
  --bs-btn-hover-border-color: var(--tk-status-closed-color-highlight);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: var(--tk-status-closed-color);
  --bs-btn-active-border-color: var(--tk-status-closed-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #333;
  --bs-btn-disabled-bg: var(--tk-status-closed-color);
  --bs-btn-disabled-border-color: var(--tk-status-closed-color);  
}

.btn .shortcut {
  margin-left: .33em;
  font-size: 80%;
  color: #666;
}
  .btn .shortcut:before { content: "("; }
  .btn .shortcut:after { content: ")"; }

/* BASE */

#wordmark {
  font-size: .9rem;
  color: #709000;
  letter-spacing: .2px;
}

/* TASK PAGE */

#task-content-wrapper {
  border: 1px solid #d1d5db;
  border-radius: 1rem 1rem 0.375rem 0.375rem;
  margin: 0.75rem 0;
}
  .tiptap {
    padding: 0.75rem 1rem;
    outline: none;
    font-family: "IBM Plex Sans", serif;
  }
  .usercontent {
    font-family: "IBM Plex Sans", serif;
  }
  .systemcontent
  {
    font-family: "IBM Plex Sans Condensed", sans-serif;
    font-weight: bold;
  }
  .past-due {
    font-weight: bold;
    color: red;
  }

  /*
  Not sure I like this. Also restrict to the main task page.
  .tiptap-large {
    height: 80vh;
    overflow-y: auto;
  }*/
  .tiptap > p, .tiptap section > p { margin: 0.5rem 0; }
  .tiptap h1, .tiptap h2, .tiptap h3 { margin: 1rem 0 0.5rem; }
  .tiptap ul, .tiptap ol { padding-left: 1.5rem; }
  .tiptap pre {
    background: #111827;
    color: #f3f4f6;
    padding: 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
  }
  .tiptap code {
    background: #f3f4f6;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
  }
  .tiptap pre code {
    background: transparent;
    padding: 0;
  }
  .tiptap ul[data-type='taskList'] {
    /* https://tiptap.dev/docs/editor/extensions/nodes/task-list */
    list-style: none;
    margin-left: 0;
    padding: 0;
    li {
      align-items: flex-start;
      display: flex;
      > label {
        flex: 0 0 auto;
        margin-right: 0.5rem;
        user-select: none;
      }
      > div {
        flex: 1 1 auto;
      }
    }
    input[type='checkbox'] {
      cursor: pointer;
    }
    ul[data-type='taskList'] {
      margin: 0;
    }
  }  
  .tiptap blockquote {
    margin-left: 2rem;
  }
  .tiptap h1 {
    font-size: 26px;
    margin: .25rem 0 1rem 0;
  }
  .tiptap h2 {
    font-size: 20px;
  }
  .tiptap h3 {
    font-size: 18px;
    font-weight: bold;
  }

  .tiptap section {
    margin: 1rem -.5rem;
    padding: .25rem .5rem;
    border: 1px solid #666;
    border-radius: 0 0 .33rem .33rem;
    border-top: none;
  }
    .tiptap section h1:first-child {
      margin: 0;
    }
.tiptap .mention-user, .tiptap .mention-command {
  border: 1px dotted #4a2812;
  padding: 2px;
}
  .tiptap a.mention-user {
    text-decoration: none;
    color: #4a2812;
  }
.tiptap .mention-tag {
  background-color: var(--tk-tag-bg);
  padding: 2px;
}
.suggestion-popup  {
  z-index: 9999;
  background: white;
  border: 1px solid #666;
  border-radius: 0.7rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: auto;
  padding: 0.4rem;
  position: relative;
  font-size: 90%;

  button {
    align-items: center;
    border: 1px solid #999;
    border-radius: 0.7rem;
    padding: 2px .5rem;
    background: inherit;
    display: flex;
    gap: 0.25rem;
    text-align: left;
    width: 100%;
    cursor: pointer;

    &:disabled {
      cursor: default;
    }

    &:not(:disabled):hover,
    &:hover.is-selected,
    &.is-selected {
      background-color: var(--tk-status-open-color);
    }

    span {
      font-style: italic;
      color: #444;
      margin-left: .25rem;
    }
    small {
      font-style: italic;
      color: #444;
      margin-left: .5rem;
    }
  }
}
/* https://tiptap.dev/docs/editor/extensions/functionality/collaboration-caret */
.tiptap .collaboration-carets__caret {
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}
.tiptap .collaboration-carets__label {
  border-radius: 3px 3px 3px 0;
  color: #0d0d0d;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}

#task-content-toolbar > * {
    margin: 0 1rem;
    border-top: 1px solid #d1d5db;
    button {
      font-size: .9rem;
      color: #333;
    }
    button.disabled {
      border: white;
    }
}

.task-status-info {
  margin: 1rem -.5rem -1rem -.5rem;
  padding: .15rem .5rem .1rem .5rem;
  border: 1px solid #666;
  border-bottom: none;
  border-radius: .75rem .75rem 0 0;
  font-size: .75rem;
  cursor: default;
}
  .task-status-info .btn
  {
    font-size: inherit;
  }
  .task-status-info.task-title-info
  {
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: 1rem 1rem 0 0;
    border: 0;
    font-size: .9rem;
  }
  .task-status-info.status-open
  {
    background: var(--tk-status-open-color);
    color: black;
  }
  .task-status-info.status-closed
  {
    background: var(--tk-status-closed-color);
    color: white;
  }
  .task-status-info .task-status-title
  {
    font-weight: bold;
  }