:root {
  --box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
  --box-shadow-hover: 0 8px 16px 0 rgba(0,0,0,0.2);
  --border-radius: 5px;
  --transition: 0.2s;

  --card-width-tablet: 50%;
  --card-width-desktop: 33.33%;
  --card-width-large-desktop: 16.66%;
}

body {
  background-color: #eee;
}
textarea, input {
  border-color:#999;
  background-color: #e9e9e9;
}

.version {
  color:#666;
}

.nav {
  background-color: #b84;
  color: #fff;

  & .current, a:hover {
    background-color: unset;
    color: #eee;
  }

  & a {
    color: #ccc;
  }

  & .btn-a {
    background-color:#389;
  }
}

.card {
  background-color: #e0e0e0;
  & .card-id {
    & i {
      color:#888;
    }
  }
}

#task-search {
  border-color: #aaa;
}

.task-header {
  & .creation-author, .creation-timestamp, .update-author, .update-timestamp{
    color: #000;
  }
}
.task-id {
  color: #000;
}
.task-desc {
  background-color:#e6e6e6;
  & pre {
    /* color: #444; */
  }
}
.card-label, .task-label {
  & i {
    color: #444;
  }
}

.hint {
  color: #555;
  /* & .mono { */
    /* background-color: #dfdfdf; */
  /* } */
}

#task-board {
  & .board-card-actions {
    & .btn {
      color:#444;
      background-color:transparent;
    }
    & .btn:hover {
      background-color:#ccc;
    }
  }

  & .task-count {
    color:#444;
  }
}

.task-comments {
  & .task-comment {
    color:#333;
    background-color:#e9e9e9;
    & .header {
      color:#666;
    }
    & .comment-action {
      & a {
        text-decoration:none;
      }
    }
    & .delete a, .delete a:visited {
      color:#633;
    }
    & .update a, .update a:visited {
      color:#363;
    }
    & .replyto {
      &  a, a:visited {
        color:#336;
      }
    }
    & .comment-id, .inreplyto {
      &  a, a:visited {
        color:#333;
      }
    }
  }
  & .task-comment:target /* target fragment */ {
    background-color:#f4f4f4;
  }
}

.clickable-text {
  text-decoration: none;
  color: inherit;
}
.clickable-text:hover {
  text-decoration: underline;
}


html {
  height: 100%;
}
body {
  height: 100%;
  font:16px sans-serif;
}

textarea, input {
  margin-bottom:10px;
  font-family:monospace;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.version {
  position:fixed;
  bottom:5px;
  right:5px;
  font-size:0.6em;
}

.nav {
  margin-bottom: 10px;
  font-size:1em;

  & .container {
    vertical-align: middle;

    & div {
      display: inline;
    }

    & .to-right {
      float:right;
    }
  }
}


/* Smartphone version
   Nothing to do: blocks are stacked by default. */

/* Tablet version */
@media (min-width: 720px) {
  #task-list {
    & .card-list-block-1 { clear: left; }
    & .card-list-block-3 { clear: left; }
    & .card-list-block-5 { clear: left; }

    & .card-list-block-1 { width: var(--card-width-tablet); }
    & .card-list-block-2 { width: var(--card-width-tablet); }
    & .card-list-block-3 { width: var(--card-width-tablet); }
    & .card-list-block-4 { width: var(--card-width-tablet); }
    & .card-list-block-5 { width: var(--card-width-tablet); }
    & .card-list-block-6 { width: var(--card-width-tablet); }
  }
}

/* Desktop version */
@media (min-width: 1020px) {
  #task-list {
    & .card-list-block-1 { clear: left; }
    & .card-list-block-3 { clear: none; }
    & .card-list-block-4 { clear: left; }
    & .card-list-block-5 { clear: none; }

    & .card-list-block-1 { width: var(--card-width-desktop); }
    & .card-list-block-2 { width: var(--card-width-desktop); }
    & .card-list-block-3 { width: var(--card-width-desktop); }
    & .card-list-block-4 { width: var(--card-width-desktop); }
    & .card-list-block-5 { width: var(--card-width-desktop); }
    & .card-list-block-6 { width: var(--card-width-desktop); }
  }
  .task-info-main {
    width: 80%;
    padding-right:20px;
  }
  .task-info-side {width: 20%}
}

/* large desktop version */
@media (min-width: 1600px) {
   #task-list {
    & .card-list-block-1 { clear: left; }
    & .card-list-block-3 { clear: none; }
    & .card-list-block-4 { clear: none; }
    & .card-list-block-5 { clear: none; }
   
    & .card-list-block-1 { width: var(--card-width-large-desktop); }
    & .card-list-block-2 { width: var(--card-width-large-desktop); }
    & .card-list-block-3 { width: var(--card-width-large-desktop); }
    & .card-list-block-4 { width: var(--card-width-large-desktop); }
    & .card-list-block-5 { width: var(--card-width-large-desktop); }
    & .card-list-block-6 { width: var(--card-width-large-desktop); }
 
    & .card {
      width:88%;
    }
  }
}

/* overriding minframework */
@media (min-width: 1310px) {
  .container {
    width: 95%;
  }
}

.hint {
  font-size: 0.75em;
  & .mono {
    font-size: 0.95em;
    font-family: monospace;
  }
}

.card {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
  width: 88%;
  padding: 10px;
  margin: 10px;
}

.card:hover {
  box-shadow: var(--box-shadow-hover);
  background: #eee;
}
.card-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 1em;
}
.card-id {
  float:right;
  font-size:0.9em;
  padding-inline-start: 5px;
  & i {
    font-size:smaller;
  }
}
.card-label, .task-label {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
  font-size: 0.8em;
  width: fit-content;
  padding:5px;
  margin:5px;
  & i {
    font-size:smaller;
  }
}
.card-footer {
  margin-top: 1em;
  font-size: 0.7em;
  font-style: italic;
}

.task-search {
  margin-bottom: 10px;
  text-align: center;

  & button {
    display: inline;
  }
  & .clear {
    display: inline;
    margin-left: 10px;
  }
}
#task-search {
  width: 80%;
  display: inline;
  text-align: center;
}

.task-text-box {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
  margin: 10px;
  padding: 10px;

  & pre {
    white-space: pre-wrap;
    margin: 0px;
  }
}

.task-header {
  margin-bottom:25px;
  & .task-activity-info {
    padding-right:10px;
    float: right;
    clear: both;
  }
  & .task-activity-info:last-of-type {
    padding-bottom:20px;
  }
  & .title-line {
    clear:right;
  }
}

.task-container {
  margin-top:25px;
  & .panel-header {
    font-size: 1.1em;
    margin-bottom:15px;
  }
}
.task-id {
  font-size: 1.15em;
}
.task-title {
  font-size: 1.35em;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: 20px;
}
.task-desc {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
  margin: 10px;
  padding: 10px;

  & pre {
    white-space: pre-wrap;
    margin: 0px;
  }
}

.task-label-checkbox-container {
  margin-bottom: 20px;
  & input[type="checkbox"] {
    width: auto;
  }
  & .task-label {
    display: inline-block;
  }
}

form#edit-task {
  & label, & input[type="text"], & textarea {
    width:90%;
  }
  & textarea.desc {
    height:30em;
  }
  & textarea.new-labels {
    height:10em;
  }
}

.task-saved-info {
}


#login-container {
  text-align:center;

  & .login-input {
    display:inline;
    width: 250px;
  }
}

:root {
  --board-max-column-width:500px;
  --board-min-column-width:250px;
}
#task-board {
  overflow:auto;
  /* min-width: calc(var(--board-min-column-width) * {{len(columns)}}); */

  & .task-count {
    font-size:0.65em;
    font-family:monospace;
  }
}
.board-column {
  /* width:{{100/len(columns)}}%; */
  max-width: var(--board-max-column-width);
  min-width: var(--board-min-column-width);
}
.board-column-header {
  margin-top:10px;
  margin-bottom:10px;
  font-size: 1.4em;
  text-align: center;
  font-variant: small-caps;
}

.board-card-actions {
  margin:5px 0px;
  & .move-left, .move-right {
    width:50%;
    min-height:1px;
  }
  & .move-right {
    text-align:right;
  }
  & .btn {
    font-size:0.7em;
    padding:5px;
    margin:2px;
  }
}
.task-comments {
  & .comment-form {
    & textarea {
      width:80%;
      height:4em;
      float:left;
      margin-right:20px;
    }
    & button {
      float:left;
    }
  }
  & .comment-list {
    clear:both;
    margin-bottom:20px;
  }
  & .task-comment {
    width: 80%;
    font-size:0.9em;
    & .header {
      font-size:0.85em;
      & a {
        text-decoration:none;
      }
      & .on-right {
        float:right;
        margin-left:20px;
      }
      & .on-left {
        float:left;
        margin-right:15px;
      }
    }
    & .body {
      clear: both;
      margin-top:2em;
    }
  }
}