@import url("theme.css");
@import url("layout.css");
@import url("reset.css");
@import url("modal.css");

.inputWithButton {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;


  input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

  }

  button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
  }

}

#new-chore {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 2rem;
  gap: 0;

  input {
    width: 70%;
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    max-width: 20rem;
  }

  button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
  }
}

#householdSelector {
  display: flex;
  flex-direction: column;

  gap: var(--space-md);


  span {
    display: flex;
    gap: var(--space-xs);

    :first-child {
      flex: 1;

    }

    :not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-width: 0;
    }

    :not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .createNew {
    margin-top: var(--space-sm);
    display: flex;
    justify-content: center;
  }
}


#chores {
  --chore-height: 15rem;

  gap: var(--space-lg);
  max-width: 80dvw;
  margin: var(--space-lg);

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(var(--chore-height), 1fr));
  grid-auto-flow: dense;

  @media (max-width: 600px) {
    max-width: 95dvw;
    grid-template-columns: 1fr;
  }


  .chore {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    height: var(--chore-height);

    &:not(.details)>h2 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    display: flex;
    flex-direction: column;
    /* height: 15rem; */

    p.goal {
      font-style: italic;
      align-self: flex-end;
      margin-top: calc(var(--space-sm) * -1);
      color: var(--color-primary);
      margin-bottom: var(--space-sm);
    }

    footer {
      /* margin-top: var(--space-md); */
      /* TODO make margin top work with goal form or or put goal form in footer.*/
      margin-top: auto;
      flex-direction: row-reverse;
      width: 100%;
      flex-wrap: wrap;
      display: flex;
      gap: var(--space-sm);
    }

    ol {
      max-height: var(--chore-height);
      overflow-y: auto;
      list-style: inside;
    }

    &.details {
      grid-row: span 2;
      height: calc(var(--chore-height) * 2 + var(--space-lg));
    }

    .goal-form {
      align-self: flex-end;
      margin-bottom: var(--space-sm);
      width: 100%;

      fieldset {
        display: flex;

        :not(:first-child) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left-width: 0;
        }

        :not(:last-child) {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }


    }
  }

}

#edit-household {
  gap: var(--space-lg);
  display: grid;

  >form {
    display: flex;
    flex-wrap: wrap;

    label {
      width: 100%;

    }

    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-width: 0;
      width: 30%;
    }

    input {
      flex: 1;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

  }

  ol,
  ul {
    list-style: inside;
  }
}

#chore-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  margin: 2rem;
  gap: 1rem;
  margin: 2rem;

  display: none;

  &:not(:empty) {
    display: block;
  }

  ol {
    list-style: inside;
  }
}

.chore-activity {

  form {
    display: inline;

    button {
      padding: 0;
      min-height: 0;
      border: 0;
      background: none;
      color: var(--color-primary);
    }
  }
}

li {

  form {
    display: inline;

    button {
      padding: 0;
      min-height: 0;
      border: 0;
      background: none;
      color: var(--color-primary);
    }
  }
}

.AuthCode {
  /* TODO: figure out how we get around important.. */
  font-family: monospace !important;
  letter-spacing: 0.5rem;
  font-weight: bolder !important;
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
}